13A: Portfolio

PROJECT CORRECTIONS/TIME SPENT

I spent two hours and 25 minutes making corrections on my photo design project and my montage project.

DESCRIPTION

Design a portfolio using InDesign that showcases all projects from Comm 130: Visual Media.

Process (Programs, Tools, Skills, FOCUS principles)

1. I sketched out some ideas for my layout. I looked at each of my designs and thought about the color scheme I wanted to use and the style of my portfolio background.

2. I designed the portfolio background in Adobe Illustrator using the polygon shape tool, combined with opacity alterations. I then used a clipping mask to save the background image of the layers I created.

3. I began building the layout in InDesign. I started with the master pages for each project category.

4. I formatted all of the images from my projects and placed them into the desired fields in InDesign for proper alignment.

5. Lastly, I updated all of the text for each project. I performed a spell check and made sure each paragraph had proper leading and kerning.

6. I then saved the file as a PDF and .indd for future use and uploading for this course.

CRITIQUE PROCESS

I got a critique from Brother Stucki via Adobe Connect. He loved my color scheme. He thought I needed to play with my margins and adjust the framing of the pages. Also, thought a couple of the pages were to busy and I should simplify those pages by maybe using a solid a background. I took Brother Stucki up on each suggestion and made the necessary changes.

I got my daughter Allison’s opinion on this portfolio and she liked all of the changes and suggestions from Brother Stucki and the class mates on Facebook. I tried to update each category that I was critiqued on to the best of my ability.

MESSAGE

I want to provide potential clients with my design skills that exhibit my work in a professional layout.

AUDIENCE

Potential Clients

TOP THING LEARNED

How to make a professional background using shapes and a clipping mask in Adobe Illustrator. Thanks Youtube.

COLOR SCHEME & COLOR NAMES

Complimentary // Lime and Purple

TITLE FONT NAME & CATEGORY

Baskerville // Serif-Old Style

COPY FONT NAME & CATEGORY

Avenir Next // San Serif-humanist

SOURCE OF EACH IMAGE (website name and hyperlink)

All images and graphics are my own.

Advertisements

Brochure Project

Video Brochure Project

12abrochure_bradcampbell_blogversion
JPG Image Before Cutout Outside Pages
12abrochure_bradcampbell_blogversion2
JPG Image Before Cutout Inside Pages
img_1405
Front Page Brochure
img_1406
Inside of Brochure
img_1408
Back of Brochure

DESCRIPTION

Design a brochure for a company that includes at least four images, one image is to be text wrapped and a logo created in Adobe Illustrator.

PROCESS (Programs, Tools, Skills, FOCUS principles)

1. The first thing I did was brain storm some ideas about the brochure I wanted to create. I put each idea on paper and sketched a few layouts that I thought would look appealing to the audience.

2. Next, I decided what type of logo I would make for the Franchise BBQ Brochure. I decided on a pig, with the name of the company being Smiley’s BBQ. The slogan is “We Leave You Smiling”. I created the logo vector artwork of “Smiley the pig” and the “Pig Back End” in Adobe Illustrator. I also created the Facebook and Twitter icons in Adobe Illustrator that were used in the brochure.

3. Continuing, I researched the internet for images I would use for this project. I needed 4 high quality images and I ended up with 8 that I used in the brochure. Each image was brought into Adobe Photoshop to check the levels and make sure the color was adequate for the brochure.

4. I laid out the design in Adobe Indesign using an 8.5″ by 11″ design with a .25″ bleed. I brought the logo, background image, barbecue images and text into Adobe Indesign. I used alignment, overlapping, contrast, contrasting fonts and good white space throughout the design. I believe the message is clear that Smiley’s BBQ is looking for investors to continue growing their company in the Southeast.

5. I then exported the design project using Adobe Indesign, going to File, package and exporting so the print shop would have all necessary fonts, linked images and a high quality pdf to print from. I had Kinkos print the final brochure on 110lb. bond paper. I then trimmed a quarter inch all of the way around to achieve the full bleed final brochure. Last, I used a razor blade knife to cut out the cutout section and score the fold so the brochure would fold easily.

CRITIQUE PROCESS

I watched Brother Stucki’s video of his critique of my project. Brother Stucki liked the logo and the high quality images that were used. He also commented on how he liked the rear end of the pig inside the brochure with text wrapping around it. He liked the font choices, gave me some feedback on the color scheme saying he would call it a monochromatic red with blue accents. He thought this brochure fell into a special exception for the color scheme. Brother Stucki gave me some good feedback on the BBQ fork I had designed, so I omitted it from the brochure per his suggestion.

Lastly, I had my friend Hannah Ungricht from our COMM 130 class critique my brochure design on Facebook. Here is what she said, “One critique (it’s crazy minor), I would tighten up the spacing with the 2 lines of the address. I would also make sure that each header has the same spacing in between the header and the paragraph (franchise support looks like it’s got a bigger space below it than the rest of the headers below and their paragraphs).”

I followed each person’s suggestions from the critiques.

MESSAGE

To try and get investors to invest in Smiley’s BBQ franchise opportunities.

AUDIENCE

Restaurant investors that would like the opportunity to own a Smiley’s BBQ franchise.

TOP THING LEARNED

Alignment is the key to a clean and crisp looking brochure.

COLOR SCHEME & COLOR NAMES

Monochromatic // Red with Blue Accents

Dark Red #7c0612, Magenta #8b244a, Light Pink #f6a8ba, Midnight Blue Accent #2e3192

TITLE FONT NAME & CATEGORY

Alfredo-Regular // Serif – Decorative

COPY FONT NAME & CATEGORY

Calibri // Sans-Serif – Humanist

WORD COUNT

340 Words were used.

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT

SOURCE OF EACH IMAGE (website name and hyperlink)

Logo is my own. Pig Rear End is my own. Social Media Icons were designed by me in Illustrator.

Blue and White Checkered Table Cloth

Rib Plate Front Page

Pulled Pork Front Page

BBQ Sandwich Front Page

BBQ Smoking Pit Back Page

Pork Chops Inside Right Page

Brisket Inside Right Page

All The Sides Inside Right Page

Driftwood Morning BBQ Location Inside Left Page

Web Page Mockup Project

10a-webpagemockup-brad-campbell

DESCRIPTION

Design a sample web page layout using a grid for a new company web site.

PROCESS (Programs, Tools, Skills, FOCUS principles)

1. I first decided to do a mock webpage layout using my family as an example. We had pictures made last December so I knew I could use those for this web page mockup layout.

2. I began the sketching process to decide how I wanted to layout my elements on the 16-column grid.  I did about five sketches of the page so I would have a good understanding of how each of the elements could come together on the page.

3. Next I began designing a logo in Adobe Illustrator for my families web page. I basically used shapes and a scripted letter C for the design of the logo. I saved the file as .png and placed it into the grid template in Photoshop.

4. I began building the wire frame on the 16-column grid that was supplied. I made solid filled squares for images, a half-circle for my logo, rectangles for the header and footer. I labeled each square for an image, and each other element of the web page. The other elements were: logo, header, footer, text box, social media links, navigation links, copyright on the footer.

5. I began reformatting the family images that I chose to use in the web page mockup so the files size would be adequate for a web page.

6. I placed each image into the wire frame by going to file, Place linked, browse to image in web page layout folder, selecting enter, going to the image file layer and creating a clipping mask. Next, I scaled the image to the appropriate size and then positioned the image as needed.

7. Continuing, I entered every element that was required for the web page layout adding a few background elements to help add to the design and create movement movement in the page, added texture, displayed overlapping and created a focal point with the family image. I inserted the necessary text into the text boxes for each family members image and  then described the individual to the audience.

8. Lastly, I saved the file as an Adobe Photoshop .psd and .jpg as the client requested. I also made sure that I had a wireframe .jpg on a 960 grid to go along in a .zip file to the client.

10a-webpagemockup-brad-campbell
FULL SIZE WEB PAGE MOCKUP IMAGE
campbell-family-wire-frame
960 WEB DESIGN GRID  16-COLUMN
10a-sketch-bradcampbell-02
SKETCH 1
10a-sketch-bradcampbell-01
SKETCH 2
10a-sketch-bradcampbell-03
SKETCH 3

CRITIQUE PROCESS

I met with my daughter Erin Campbell via Skype last night. She is a Speech Pathology major at Utah State University. We discussed the color scheme and arrangement of the images. She suggested that I add more text to each text box. Also she suggested using a shade lighter background color so the page wouldn’t be so dark. She liked my font choices and liked the alignment of the page.

I also received a Facebook critique from Chearsten Webb yesterday and Skyler Foxx today. Chearsten suggested to check the centering of the C, in the logo.  She also suggested removing the drop shadow off of the copyright in the footer. She suggested spacing out the navigation links a bit and to possibly add some social media links to the page. Skyler suggested the same, remove the drop shadow off of the copyright in the footer. He liked everything else about the web page mockup.

MESSAGE

Introduce Brad & Shannon Campbell’s family on the web to their friends and family by offering pictures, contact information, vacation trips, and the latest news and information on each of the children.

AUDIENCE

Brad and Shannon Campbell’s friends and family that want to learn more about each member of the family.

TOP THING LEARNED

How to use a 960 Column Grid System to layout a web page.

COLOR SCHEME & COLOR NAMES

Complementary // Dark Red, Magenta and Olive Green.

TITLE FONT NAME & CATEGORY

Antigone // Sans Serif- Grotesque

COPY FONT NAME & CATEGORY

Palatino // Serif – Old Style

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT

SOURCE OF EACH IMAGE (website name and hyperlink)

Logo is my own. All other images belong to my family.

 

HTML & CSS Coding Project

screen-shot-2016-11-09-at-9-54-55-pm

Description

Code a custom webpage with HTML and CSS.

PROCESS (Programs, Tools, Skills, FOCUS principles)

  1. First I created my Fox Sporting Goods logo in Adobe Illustrator. I am an avid sportsman and this is why I chose Fox Sporting Goods.
  2. I resized my logo so that the long edge would be no longer than 500 px.
  3. I downloaded my HTML file from ILearn and began adding my content and tags using Text Wrangler.
  4. I then downloaded my CSS file from ILearn and linked it to my HTML file using Text Wrangler.
  5. After entering all of my content in HTML, I began styling my web page using the linked CSS style sheet.
  6. I chose a lighter variant of the purple color in my logo to use as the background color.
  7. After finishing the coding and styling using Text Wrangle I validated both the HTML and CSS files.

CRITIQUE PROCESS

I uploaded a rough version of the web page to Facebook and received a critique from Brother Stucki. Brother Stucki mentioned how much he like the bright colors of the logo and then began to talk about the fonts that were used. He reminded me of the importane to use contrasting fonts so that the content stays fresh to the reader of the page. I took him up on this and changed the fonts to a serif and san-serif font to add contrast.

The second critique was done by my business partner Paul Jones at our office. Paul mentioned to change the ridge border to something more stylish. He liked the colors. He also said that I needed to make the content more appealing to the reader. I took him up on both suggestions.

MESSAGE

Sportsmen and Sportswomen should shop at Fox Sporting Goods for high end sporting equipment.

AUDIENCE

Those interested in buying high end sporting equipment.

TOP THING LEARNED

The importance of understanding margins to achieve desired location and spacing.

COLOR SCHEME & COLOR NAMES

Triadic // Purple, Orange and Green

TITLE FONT NAME & CATEGORY

Montserrat // Geometric, Modern – San-Serif

COPY FONT NAME & CATEGORY

PT Serif Caption // Universal Type Family – Serif

SOURCE OF EACH IMAGE (website name and hyperlink)

The graphics are my own.

 

INFOGRAPHIC PROJECT

8a-bradcampbell-recovered

DESCRIPTION

Create an infographic that organizes data in a visually pleasing way.

PROCESS

  1. I began thinking and brainstorming about what I wanted to do for my project, after thinking for several hours I decided on a pizza infographic.
  2. I did my own survey at the ward Halloween party and asked 100 people which of 3 pizza flavors were their favorite. Choices were cheese, pepperoni and supredoc-nov-2-2016-11-53-pmme pizzas. Next, I had them choose which of 3 top pizza chains was there favorite for cheese, pepperoni and supreme. Pizza Chains were Pizza Hut, Dominos and Papa John’s.
  3. Next I sketched out rough design of my infographic.
  4. Next I opened Illustrator and began designing my infographic using the pen tool, mesh tool and shape tools. I designed tomatoes, dough and roller and a parmesan cheese block with the pen and mesh tool.
  5. I created small pizza slices to represent 10 people for the percentages obtained in the favorite pizza category.
  6. I received very good critiques and made several changes to icons, objects and color scheme.

CRITIQUE PROCESS

I received a critique from Brother Stucki via Adobe Connect and made the necessary changes to my design that he suggested. His suggestions were to design a tomato, roller, and cheese block. Also, in the fun fact section use graphics to tell the facts and added those that followed along with his suggestions.

I received a critique from my good friend Barry Hampton via Skype. He suggested that incorporate the blue from the Dominos pizza logo into my design. This worked great with a split complementary color scheme.

MESSAGE

To give pizza lovers in the area a chance to see what the favorite pizza trends were in the Bessemer, AL area.

AUDIENCE

Anyone who loves pizza.

TOP THING LEARNED

How to use the mesh tool and change the color in vectors.

COLOR SCHEME & COLOR NAMES

Split Complementary // Brick, Gold and Blue

TITLE FONT NAME & CATEGORY

Ankelpantsink // Decorative, San Serif

COPY FONT NAME & CATEGORY

Arezzo-Rounded // San Serif, Regular

THUMBNAILS OF ANY ORIGINAL IMAGE(S) USED IN THE PROJECT

 

SOURCE OF EACH IMAGE (Website name and hyperlink)

Pizza Hut

Dominos

Papa Johns

All other images were designed in Adobe Illustrator by myself.

Business Identity

7abradcampbellletterhead7abradcampbell-businesscard7abradcampbell-businesscardback

Description

Create a logo for a company / service / organization and establish a visual identity across doucuments.

PROCESS (Programs, Tools, Skills, FOCUS principles)

  1. First I sketched out some design ideas for the business logo on a sheet of paper. I sketched approximately 25 different designs involving shapes, type and symbols that I thought I could use in this project.
  2. I decided on a color scheme for my composition.
  3. I opened up Adobe Illustrator began designing 3 of my best sketches.fox-sporting-goods
  4. I used the pen tool to draw my design of the Fox Sporting Goods logo. I also used the shape builder tool to combine my shapes into one logo image.
  5. I published my 3 designs to Facebook for review by my peers. I also had members of my local ward vote on there favorite design after church on Sunday.
  6. After looking at all of the reviews I went with the purple, orange and green for the fox design, but changed the look of the fox. I heard several times that the fox didn’t appear to look like a fox. So I went back to the drawing board and came up with a new design for the fox.
  7. I added a rectangle off to the right of my design in Illustrator that contained the company name. I also added a business slogan that related to my audience that I was trying to reach.
  8.  I followed the FOCUS principles rules by allowing plenty of white space in my design. I used repetition in the letter head with the logo used a second time as as a watermark. I made sure each type used contrasted well with each other. I also made sure each piece was asymmetrical. Lastly, I used alignment throughout each piece. I also used the same images and design principles throughout each of my pieces. The pieces I designed for this project were: letterhead, business card front and business card back.

CRITIQUE PROCESS

I met with a previous member of my ward that works for a local magazine and had her critique my designs. Her name is Nina O’Bryant. We did this yesterday during her lunch hour. She loved my color scheme and the design principles I used. The suggestions she gave me were to fix the kerning in the words sporting goods. Also, adjust the size of the logo on my letterhead to be within two inches and set it at one inch margins from left and right.

I also received a critique via adobe connect from Brother Stucki. He commented that he loved the colors I chose. He liked the use of the pen tool in the logo. He also commented on how he liked how the tail of the fox comes out of the logo design. He mentioned that I needed to move the logo up into the design and adjust the size so that there would not be the need for a large margin and give more room for the letter body. He liked the use of repetition in the letterhead with the fox sporting good logo used a second time as the watermark.

MESSAGE

If your serious about sports you should be shopping at Fox Sporting Goods.

AUDIENCE

Sportsmen interested in purchasing sporting goods.

TOP THING LEARNED

Sketching and sketching again for a second time are instrumental in getting a design to deliver the look and message you are trying to convey.

COLOR SCHEME & COLOR NAMES

Triadic // Green, Orange and Purple

TITLE FONT NAME & CATEGORY

Air Cruiser Light Italic // Regular, Sci-Fi, Techno

COPY FONT NAME & CATEGORY

AccoladeSerial // Serif, no classification

SOURCE OF EACH IMAGE (Website name and hyperlink)

The graphics are my own.

 

 

 

6A: Photomontage

bradcampbell-6amontage-comefollowme

Description

Design a poster montage with a spiritual theme using a blend of images and type.

PROCESS (Programs, Tools, Skills, FOCUS principles)

I thought long and hard about what type of message I wanted to convey. So I came up with a theme that involved the ordinances of the gospel. Originally I had chosen a temple as the background, but after many design runs I scrapped that idea went back to the drawing board. I stuck with my original theme of ordinances of the gospel depicting baptism and sacrament. I then began the search for my images of the Savior, Thomas S. Monson, Book of Mormon and sacrament trays.

After selecting my images from google search I brought each of them into Photoshop and corrected the levels and colors as necessary.

Next, I chose the Savior on a path as the background layer. I then used the lasso tool to cut out the portions of the other images that I wanted to blend into my design and placed them on the background image.

After placing each image on the background I created a layer mask on each image and used the brush tool to blend the images into the background, and with each other.

Lastly, I chose another image to use with a filter effect. This image was of a painted yellow canvas. I adjusted the color to light-brown or a tan, sand color. I then brought the image into Photoshop and placed it on top of my design, created a layer mask and used the overlay filter and adjusted the opacity to get the look I was looking for.

For typography I used a script font with a nice serif font that contrasted well.

I chose for my theme to be very simple and just a few words to convey the message of my design.

CRITIQUE PROCESS

I used my buddy from high school that lives in Oregon. His name is Scott Gordon and he is a comic book artist and designer. He gave me a few suggestions such as: bring the baptism image down to the bottom with other images, match font with blue on the Savior, and to try and find a pattern that would look good with an overlay since a filter was required and the other images blended nicely without a filter. We did the critique today via Facebook/Facetime.

MESSAGE

When we are baptized and partake of the sacrament each week, along with scripture study and listening to the prophet’s voice we are following the Savior.

AUDIENCE

Individuals who are interested in following the Savior’s example.

TOP THING LEARNED

Not every idea is a good idea, nothing is wrong with going back to the drawing board.

FILTER USED

Overlay

COLOR SCHEME & COLOR NAMES

Monochromatic // Indigo

TITLE FONT NAME & CATEGORY

CAC Champagne // Script-classical

COPY FONT NAME & CATEGORY

EB Garramond // Serif- Old Style

THUMBNAILS OF ANY ORIGINAL, UNEDITED IMAGE(S) USED IN THE PROJECT

SOURCE OF EACH IMAGE (website name and hyperlink)

Sacrament

mormonfaq.com

Savior Baptized

i.ytimg.com

Savior Path

media.ldscdn.org

Textured Canvas

google.com

Prophet

lds.org

Book of Mormon

3.bp.blogspot.com