comm 130 portfolio project

21
JENNY HANCOCK Portfolio

Upload: jenny-larsen-hancock

Post on 10-Apr-2016

36 views

Category:

Documents


0 download

DESCRIPTION

A portfolio of all the design projects I have created throughout the Comm 130 Visual Communications course.

TRANSCRIPT

Page 1: Comm 130 Portfolio Project

JENNY HANCOCKPortfolio

Page 2: Comm 130 Portfolio Project

8713 S. Yavapai DriveSafford, AZ [email protected]@yahoo.com

Jenny Hancock

Page 3: Comm 130 Portfolio Project

Letterhead

Business Card

Logos

Photo Design

Brochure

Web Page

Montage

Event Ad

Flier

Table of Contents

Page 4: Comm 130 Portfolio Project

Description:An insperational montage made by the blending of two or more images, and the use of typography.

Date: 11/7/15

Course/Instructor:Comm 130 Section 11Emily Kunz

Program(s)/Tools: Adobe Illustrator and InDesign

Objectives:Use the basic tools in Illustrator & InDesign.Create a new logo to fit a company or personal image. Use the new logo to design consistent layouts for a business card and letterhead. Apply typography rules, keeping small copy.

Process: I created the logo using the pen tool in Adobe Illustrator. I also used the outline tool on the title in order to make the text vector shapes and adjusted the letters to better fit the umbrella and to remove the dramatic swoop that was under each word. Once the logo was created, I placed my my file into an Adobe InDesign document.

I positioned the placed logo in the top left corner of my letterhead, making sure to keep it at least .5in away from the edges. I then typed the contact information into a text box and positioned it on the left hand side of the letterhead, next to the logo. I made the name and the title a contrasting color to help it stand out from the rest of the contact information. I also added a larger size of the logo image to the bottom right corner of the page, and placed it at an angle, bleeding off of the page. I turned this into a watermark by decreasing the opacity to 3%. I also used a rain drop texture and turned down the opacity to 2%. Finally I added a quote to the bottom of the page to create balance.

Letterhead

Page 5: Comm 130 Portfolio Project

“A rainy day is a special gift to readers”- Amy Miles

Ainslee ThomasMarketing Director

8700 S Rhees CirclePhoenix, AZ [email protected]

Page 6: Comm 130 Portfolio Project

Description:Matching letterhead and business card designed using a personally created logo.

Date: 11/7/15

Course/Instructor:Comm 130 Section11Emily Kunz

Program(s)/Tools: Adobe Illustrator & InDesign

Objectives:Use the basic tools in Illustrator & InDesign.Create a new logo to fit a company or personal image. Use the new logo to design consistent layouts for a business card and letterhead. Apply typography rules, keeping small copy.

Process: I created the logo using the pen tool in Adobe Illustrator. I also used the outline tool on the title in order to make the text vector shapes and adjusted the letters to better fit the umbrella and to remove the dramatic swoop that was under each word. Once the logo was created, I placed my my file into an Adobe InDesign document.

I used the rectangle tool to create the front and back outline of my business card. I copied/pasted the logo and contact information onto this page, keeping it the same size and colors as what was on the letterhead. I also brought the watermark of the logo image to place on an opposing angle on the back of the business card to help unify the stationery pieces. I then added the quote from the Stationary, and the opaque raindrop texture onto the back of the business card.

Business Card

Page 7: Comm 130 Portfolio Project

“A rainy day is a specialgift to readers”

- Amy Miles

Ainslee ThomasMarketing Manager

8700 S Rhees CirclePhoenix, AZ [email protected]

Page 8: Comm 130 Portfolio Project

Description:Logo for Fat Daddy’s Diner and Drive-In

Date: 10/31/15

Course/Instructor:Comm 130 Section 11Emily Kunz

Program(s)/Tools: Adobe Illustrator

Objectives:Create three completely different, original logos to fit a company or personal image that will appeal to the audience.

Process: Using Illustrator, I crafted many different designs based on the input from the client. The client specified that they wanted a 50’s diner and drive-in feel. I chose my top three designs, and took a poll to determine which worked the best. I chose the one I liked best and which was voted on most to refine. I refined the typography and font choices, working with larger font sizes to give them more weight against the main image. I chose fonts that helped to portray the 50’s retro feel. I then used the pen tool extensively to manipulate and simplify the image of the car.

Logos

Page 9: Comm 130 Portfolio Project

Fat Daddy’s Diner & Drive-In

Diner &Drive-in

Fat Daddy’s

Diner &

Drive-In

FATDADDY’S

Diner & Drive-In

FAT DADDY’S

Page 10: Comm 130 Portfolio Project

Description:Demonstrate good photography and image editing skills. Incorporating color into a poster layout with original photo.

Date: 10/17/15

Course/Instructor:Comm 130 Section 11Emily Kunz

Program(s)/Tools: Adobe Photoshop

Objectives:Learn basic photography skills.Choose a color scheme, take a photo to match those colors, then incorporate the colors into the layout.Use a digital camera to take a quality image, then download it. Adjust image levels, saturation, color balance, sharpen tool on separate layers for NDE (non-destructive editing.) Size and crop the image, then place on an 8.5×11 page layout. Use layers to design text, and repeating graphic elements in Photoshop.

Process: First I chose my color scheme from the Visual FOCUS book for my layout. I chose a Big Split Complementary scheme with the colors of Gold, Brick, Indigo, and Lime. I then set up my photo utilizing items in my craft supply that fit within my color scheme. I set these items up on a table next to the window, and using the natural light coming in from the window, I captured a quality photo with good light, sharp focus and a nice composition with my Sony Alpha 100 DSLR camera. I then imported the photo into Adobe Photoshop where I adjusted the levels, sharpness, saturation, and color balance. I then designed an 8.5×11 layout that included the edited photo, text, and repeating design elements. I also incorporated my chosen color scheme in the form of colored pencils into my design. I utilized the color wheel from the Visual FOCUS book and the eye dropper tool to select my colors, and then adjusted those colors to better fit my preselected color scheme. I then incorporate them through out the design.

Photo Design

Page 11: Comm 130 Portfolio Project

requires the courage to let go of certainty.”- Erich Fromm

Creativity“

Lime

Gold

Indigo

Brick

Big Split Complementary

Page 12: Comm 130 Portfolio Project

Description:A Tri- folding brochure

Date: 12/5/15

Course/Instructor:Comm 130 Section 11Emily Kunz

Program(s)/Tools: Adobe InDesign/Adobe Illustrator/Adobe Photoshop

Objectives:Set up and align a two-sided, folded document.Create an original, new logo and use it in a brochure.Incorporate quality images.

Process: I set up the tri- fold in Adobe InDesign. I split my layout into six sections, with the idea that the brochure would fold into thirds when completed. Using the pen tool in InDesign, I created a wave shape in order to carry the theme of the water, and give visual interest to the brochure.

For the image of the tent I used the ‘quick selection tool’ in Adobe Photoshop to remove the background of the image. I then used the ‘refine mask’ dialogue box to smooth, feather, shift edge and apply contrast to the outline of the tent. The changes I made in the ‘refine mask’ dialogue box made a softer image that didn’t look so sharp and cutout against the brochure’s background. I then ‘placed’ the tent image into InDesign where I used the ‘text wrap’ option to wrap my text around the ‘alpha channel’ of the image.

I created the logo in Illustrator using the pen tool and type tool. Using the Pen tool in Adobe Illustrator, I created an image of a hot tub for the logo, and then I placed it into InDesign. I incorporated this image throughout the brochure on each header, and as watermarks to create repetition.

Brochure

Page 13: Comm 130 Portfolio Project

Front of Brochure Inside of Brochure Inside Front Flapof Brochure

Back of Brochure

Page 14: Comm 130 Portfolio Project

Description:A web page designed to showcase a personally created logo.

Date: 11/21/15

Course/Instructor:Comm 130 Section 11Emily Kunz

Program(s)/Tools: TextWrangler & Photoshop

Objectives:Size and optimize an original logo as a .png for a web page so the long side is 300 – 500 pixels.Write content to describe the process of creating your logo and how it appeals to a target audience. Acquire a working knowledge of HTML. Acquire a working knowledge of CSS. Identify hex colors to match logo, using Photoshop color picker.

Process: I first marked up all my content. Following that, I inserted my logo image. I then attached a pre-made CSS document to my HTML. I used the colors from my logo as the colors for my web page. I found these colors by opening Photoshop and using the eyedropper tool. I also changed my fonts to Arial and Georgia. I declared Verdana and Times New Roman as backup fonts just in case the viewer’s browser didn’t have these fonts. I also used padding around the logo and text so that they would not be too close to the edge of the web page. I also chose a lighter blue color for the font body, as the blue color appeared more black/grey when placed against the white background. This allowed for the blue color to still show and create some repetition in color.

Web Page

Page 15: Comm 130 Portfolio Project
Page 16: Comm 130 Portfolio Project

Description:An inspirational montage made by the blending of two or more images, and the use of typography.

Date: 10/22/15

Course/Instructor:Comm 130 Section 11Emily Kunz

Program(s)/Tools: Adobe Photoshop

Objectives:Learn to manage Photoshop layers.Learn to blend images together smoothly, using masks.Use filters.Apply appropriate typography.

Process: I cropped the background image to 8.5×11. I then changed the background image to a black and white image. I selected the full image of the Savior walking on the water, reversed the image so that it was facing in to the center of the photo, and added it to the background image. With black paint and a 100% opacity, soft-edged brush, I painted away the hard image edges.With a larger black brush at 25% opacity and 25% flow, I blended the image into the background, so it looks like the Savior is walking on the stormy waters, and that the water around him is calm. I also adjusted the vibrance of the image of the Savior so the color of the water and the savior stood out in even more contrast to the black and white of the background.I repeated the process with the image of the man in the water, but adjusted the image so it too would be in black and white. . I just dragged the entire image to the background image and started masking it until it was a gradual blend. I added some type with two contrasting fonts and using the color dropper, took the color of the water surrounding the savior for the blue in the text, and the color of the waves for the white.

Montage

Page 17: Comm 130 Portfolio Project
Page 18: Comm 130 Portfolio Project

Description:A color full-bleed event ad to promote a fundraiser using only Microsoft Word and a scanner.

Date: 10/10/15

Course/Instructor:Comm 130 Section 11Emily Kunz

Program(s)/Tools: Microsoft Word

Objectives:Comprehend image sizing (how pixels and inches work together)Find, scan and import a high-quality image.Create a full-bleed design.Choose a color scheme and typeface(s) that work for your message and audience.Learn to use only Word design features without using any Adobe programs, including Photoshop.

Process: I scanned the image of the little girl, and then resized the image. I then opened the file in Microsoft Word and began to design. I decided I liked the golden color from the photo, so I utilized a split complementary color scheme with colors of blue, purple and gold. I created a purple background banner, and then added a golden font for the main event title and the sponsor and beneficiary. I utilized a Sans Serif font for my body copy, and a Serif font for my main title. I also took the pin wheel element from the beneficiary’s logo and used it throughout the document to create repetition.

Event Ad

Page 19: Comm 130 Portfolio Project

MOUNT GRAHAM REGIONAL MEDICAL CENTER PRESENTS

OCTOBER 17, 2015 6:00 PM - 10:00 PM EAC ACTIVITIES CENTER

Please join us for an evening of dinner, dancing, and entertainment as we raise awareness about Pediatric Interstitial and Diffuse Lung Disease.

Help us honor the brave children who are battling these diseases.

Tickets are available for $50 per person.

All proceeds will go to the chILD Foundation.

The Children’s Interstitial and Diffuse Lung Disease Foundation

Page 20: Comm 130 Portfolio Project

Description:A Black and White promotional flier that promotes the Graduate Leadership Conference hosted by Vouant Communications.

Date: 10/04/15

Course/Instructor:Comm 130 Section 11Emily Kunz

Program(s)/Tools: Adobe In Design

Objectives:Apply the design principles and use appropriate typography.Incorporate basic InDesign skills to improve basic flier layout.Retrieve image and logo from links on this page.Create a project folder with image, logo and InDesign document to keep links in InDesign intact.

Process: After sketching out my design ideas, I then laid out these designs in Adobe In Design. I rounded the corners of all my accent backgrounds in order to create repetition.I aligned all of the text and used an image that would lead the viewers gaze towards the conference date time and place and registration information, and the logo. I also added a circle behind the Vouant Communications logo in order to bring more attention to the hosting company, and allow for the logo to stand out from the rest of the design. I was given the image, logo, and content for this flier.

Flier

Page 21: Comm 130 Portfolio Project

GRADUATELEADERSHIP CONFERENCE

Come learn how at Vouant Communication’sannual Graduate Leadership Conference.

Vouant Communications is devoted to helpingtomorrow’s leaders gain essential leadership skillsin the workplace.

During this dynamic three-day seminar, attendeeswill meet with top executives of VouantCommunications to discuss breakthrough leadership techniques, while cultivating attributes of leadership that will market to any employer.

Attention all graduating Seniors: Do you want to have the competitive edge in business?

October 21st - 23rd8 a.m. – 5 p.m.Lincoln Convention Center

REGISTRATION AND MOREINFORMATION AVAILABLE AT http://www.vouantcomm.com/leaders

Conference is available to graduating seniorsSpace is limited, so hurry and register!