comm 130 portfolio project
DESCRIPTION
A portfolio of all the design projects I have created throughout the Comm 130 Visual Communications course.TRANSCRIPT
JENNY HANCOCKPortfolio
8713 S. Yavapai DriveSafford, AZ [email protected]@yahoo.com
Jenny Hancock
Letterhead
Business Card
Logos
Photo Design
Brochure
Web Page
Montage
Event Ad
Flier
Table of Contents
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
“A rainy day is a special gift to readers”- Amy Miles
Ainslee ThomasMarketing Director
8700 S Rhees CirclePhoenix, AZ [email protected]
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
“A rainy day is a specialgift to readers”
- Amy Miles
Ainslee ThomasMarketing Manager
8700 S Rhees CirclePhoenix, AZ [email protected]
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
Fat Daddy’s Diner & Drive-In
Diner &Drive-in
Fat Daddy’s
Diner &
Drive-In
FATDADDY’S
Diner & Drive-In
FAT DADDY’S
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
requires the courage to let go of certainty.”- Erich Fromm
Creativity“
Lime
Gold
Indigo
Brick
Big Split Complementary
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
Front of Brochure Inside of Brochure Inside Front Flapof Brochure
Back of Brochure
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
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
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
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
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
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!