P9McKaylaWinterton

21
McKayla Winterton’s

description

COMM 130 Section 06 Visual Media Portfolio - P9McKaylaWinterton

Transcript of P9McKaylaWinterton

Page 1: P9McKaylaWinterton

McKaylaWinterton’s

Page 2: P9McKaylaWinterton

TITLE PAGEContact Information:

McKayla Winterton

702•994•5114

7720 Victory Gallup Las Vegas, NV 89131

[email protected]

Page 3: P9McKaylaWinterton

TABLE OF CONTENTS• Brochure

• Business Card

• Stationery

• Logos

• Montage

• Flier

• Event Ad

• Photodesign

• Web Page

Page 4: P9McKaylaWinterton

BROCHURECourse Name and Section: COMM 130 Section 06

Instructor Name: Brother Pingel

Date: December 6, 2015

Description: A three sided folding Brochure.

Objective: • Set up and align a two-sided, folded document.• Create an original, new logo and use it in a brochure.• Incorporate quality images. Incorporate at least four quality images, not

including the logo. One should be clipped in Photoshop and text-wrapped in InDesign so the text follows the cutout shape of the image.

• Write at least 250 words of original copy in at least three paragraphs, headers, and subheaders.

• Trim for a full bleed and print in duplex (two-sided) color.

Programs Used: Adobe Illustrator, Adobe InDesign, Google, and Photoshop

Process: I used illustrator to make a new logo. For the logo I used text and the rectangle tool to create a nice frame like feel to the logo.I also used it to create the design of the camera viewfinder. I used the rectangle tool to make a bunch of squares. I then used the circle tool to create the middle section of the viewfinder. I also put type font on the bottom to make it look digital. I also used the rectangle tool for the battery and shapes on the bottom as well.I then pulled up InDesign and I placed grids down according to what would make a folding brochure. I knew that I would use the viewfinder, as a cut out so I thought it would be cool if you could see a photo behind it almost like you were taking that exact photo. So I placed a photo that would flow well with it behind it. I then picked pictures that had a similar vibe off of Google images.For the big image that takes up two sides I chose one that would look good with a crease down the center of it. I then decided as an added element it would look nice to put my logo on it.I then need to put information about the photography on the brochure so I put it where you could see it best. I decided to add images that go with the flow of the category that it is talking about. For fashion I thought it would look cool to have a model cut out. So I dropped the image in Photoshop and there I used the quick selection tool to eliminate the rest of the image and create a layer mask.

Page 5: P9McKaylaWinterton

Front

Back

Font Inside

Back Inside

Page 6: P9McKaylaWinterton

BUSINESS CARDSCourse Name and Section: COMM 130 Section 06

Instructor Name: Brother Pingel

Date: November 8, 2015

Description: Business card logo creation

Objective: • Use the basic tools in Illustrator & InDesign.• Create a new logo to fit a company or personal image. Do not imitate existing

logos or use previous designs. Don’t use photos or live trace.• Use the new logo to design consistent layouts for a business card

and letterhead. Photos are okay on business card and letterhead as additional design elements. Letterhead should be 8.5 x 11, full-bleed optional, but trim only .125. Business card should be 3.5 x 2 and printed above center on a vertical page.

• Apply typography rules, keeping small copy.• Keep designs simple with light watermarks and drop shadows and plenty of

white space.• Include contact information: name, address, phone, website, and email on

each piece. Use periods, bullets, or spaces in phone number; no parentheses/ hyphens.

Programs Used: Adobe Illustrator, and Adobe InDesign

Process: I first created the logo in Adobe Illustrator. I used the pen tool to draw the tail and the angle tool and direct selection tool to manipulate the edges. Then I made it look more grunge by using a unique stroke. Then I placed the text into the logo and warped it to flow with the whale tail.Once that was complete I opened it into Adobe InDesign where I put it on a business card. I also isolated just the tail to use as a watermark for another business card. There I added the contact info in a text box on the opposite side from the title.

Page 7: P9McKaylaWinterton
Page 8: P9McKaylaWinterton

STATIONERYCourse Name and Section: COMM 130 Section 06

Instructor Name: Brother Pingel

Date: November 8, 2015

Description: Stationery logo creation

Objective: • Use the basic tools in Illustrator & InDesign.• Create a new logo to fit a company or personal image. Do not imitate existing

logos or use previous designs. Don’t use photos or live trace.• Use the new logo to design consistent layouts for a business card

and letterhead. Photos are okay on business card and letterhead as additional design elements. Letterhead should be 8.5 x 11, full-bleed optional, but trim only .125. Business card should be 3.5 x 2 and printed above center on a vertical page.

• Apply typography rules, keeping small copy.• Keep designs simple with light watermarks and drop shadows and plenty of

white space.• Include contact information: name, address, phone, website, and email

on each piece. Use periods, bullets, or spaces in phone number; no parentheses/ hyphens.

Programs Used: Adobe Illustrator, and Adobe InDesign

Process: I first created the logo in Adobe Illustrator. I used the pen tool to draw the tail and the angle tool and direct selection tool to manipulate the edges. Then I made it look more grunge by using a unique stroke. Then I placed the text into the logo and warped it to flow with the whale tail.Next I made stationery where I used the isolated tail as a large watermark. I also used the water splashing effect used for the tail behind the title text to help make it stand out. I then added the contact info to the right of the title on the top. On the bottom I put the official logo with the text and tail and then put the persons email on the bottom as a quick reference to reach the individual.

Page 9: P9McKaylaWinterton
Page 10: P9McKaylaWinterton

LOGOSCourse Name and Section: COMM 130 Section 06

Instructor Name: Brother Pingel

Date: December 12, 2015

Description: Logos for the Pet store PetLand.

Objective: • Create three completely different, original logos to fit a company or

personal image that will appeal to the audience. Do not imitate existing logos or use previous designs.

• Market research: gather opinions from at least ten people about which logo appeals most to them.

• Use only the Illustrator tools to create and draw your logos. (No Illustrator pre-fabricated flares, symbols, etc.. No photos or live-tracing. You may use an image or drawing as a guide to trace it with the pen/pencil, but delete the image before submitting.)

• Refine one logo with variations for color

Programs Used: Adobe Illustrator

Process: I used Adobe Illustrator to create these Logos. First I made three very different logos then held a vote and used the winning one to expand the options for black and white and on a solid color. I created the paw print by using the ellipse tool and then using the direct selection tool to manipulate the base of the paw. For the wording I used different fonts to help the store name itself stand out and then made their slogan smaller. I made sure to mind the color scheme. I kept their classic and widely known Green monochromatic color scheme.

Page 11: P9McKaylaWinterton

PetLandmore than just pets

more than just pets

more than just pets

PetLand

PetLand

Page 12: P9McKaylaWinterton

MONTAGECourse Name and Section: COMM 130 Section 06

Instructor Name: Brother Pingel

Date: October 25, 2015

Description: An inspiring and uplifting image to show that woman are daughters of god and how we all princes and princesses to our Heavenly Father.

Objective: • Use the FOCUS design process with strong focal point and flow• Unify a layout with a consistent theme and dominant spiritual message• Learn to blend two or more images together gradually, using masks• Demonstrate more advanced Photoshop skills for layout with multiple elements• Use a mask to apply a filter to one part of the image• Apply typography principles (titles, quotes, events or scriptures…your choice)• Format type: Legibility; Small copy & Title with varying text size.

Theme word(s)• Select good quality images

Programs Used: Photoshop

Process: I downloaded two images off of the Internet and I decided to put the temples in the background like its sitting behind the bushes. I lowered the opacity of the image and I masked out some of the bottom of the temple to create a fading affect and to help it look like it is behind the bushes. I then added a gradient filter over the top of the image to create and older feel to the image. I masked out a bit of it in the middle to help the girl stand out more. I then decided to add my text and I made certain words larger and the ones I made smaller I made line up near the top as to make the larger text stand out even more.

Page 13: P9McKaylaWinterton
Page 14: P9McKaylaWinterton

FLIERCourse Name and Section: COMM 130 Section 06

Instructor Name: Brother Pingel

Date: October 3, 2015

Description: This graduate flier is meant to get the word out to the graduates about a leadership conference that will help them prepare for their future.

Objective: • 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.

Programs Used: Adobe InDesign

Process: The Process I used to make this flier was the Adobe program InDesign. I made sure to create a visual appeal by repetition of the boxes. I also wanted to put a photograph that would appeal to all graduates therefore making sure to have guys and girls in the photo that appeared excited and professional. I also used white space to draw attention the important dates that a person who has the flier as a reminder would need to see quickly.

Page 15: P9McKaylaWinterton

GRADUATEL e a d e r s h i p C o n f e r e n c e

October 218am-5pmLincoln Convention Center

Do you want to have the competitive edge in business?Come learn how at Vouant Communication’s annual Graduate Leadership Conference.

Vouant Communications is devoted to helping tomorrow’s leaders gain essential leadership skills in the workplace.

During this dynamic three-day seminar, attendees will meet with top executives of Vouant Communications to discussbreakthrough leadership techniques, while cultivating attributes of leadership that will market to any employer.

Conference is available to graduating seniors. Space is limited.

Registration and more information available at http://www.vouantcomm.com/ leaders

Page 16: P9McKaylaWinterton

EVENT ADCourse Name and Section: COMM 130 Section 06

Instructor Name: Brother Pingel

Date: December 12, 2015

Description: This is a full-bleed color even ad to promote a dog adoption in a park using a scanner and Microsoft Word.

Objective: • 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.

Programs Used: Microsoft Word

Process: I used a free website to download the dog image. Then I printed it at Wal-Mart after I had printed it I scanned it and uploaded it onto my computer. I decided to duplicate the image and add a darker blue tone across the bottom and part of the top image tying in the two images and making one of them the focus. After completing the ad I saved it as a PDF and used a website to convert it into a jpg so I could upload it to this blog.

Page 17: P9McKaylaWinterton
Page 18: P9McKaylaWinterton

PHOTODESIGNCourse Name and Section: COMM 130 Section 06

Instructor Name: Brother Pingel

Date: December 12, 2015

Description: This Photo design is to show my image editing skills along with my photography skills.

Objective: • 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.• Print with full-bleed margins. Trim only 1/8″ (0.125) from all four sides.

Programs Used: Photoshop

Process: Before taking any images I decided that I wanted to take pictures of my friend and that she would wear colors that worked with this blue green (teal) background. I decided on the Split Complementary color scheme using Red, Orange, and Teal. I waited till the sun was coming in just right through my apartment window and I used my Cannon 70D to take the image. I then proceeded to use Photoshop and the color wheel to match the color scheme. In Photoshop I applied some sharpening, saturation, levels, and a small color balance correction to my image. Then I put the image in the center of the photo and decided to frame it with the colors used in the Split Complementary theme. I then decided to put a small quote and the swatches I used the brush tool to create “coffee stains” which are basically a circulat design and put the text on the rings.

Page 19: P9McKaylaWinterton
Page 20: P9McKaylaWinterton

WEB PAGECourse Name and Section: COMM 130 Section 06

Instructor Name: Brother Pingel

Date: November 21, 2015

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

Objective: • 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. (Minimum of 200 words. Include rationale for colors, appeal to target audience, design skills, etc,)

• Acquire a working knowledge of HTML. (Include all required tags – Doctype (provided), html, head, title, meta charset (provided), body, h1, h2, p, ol or ul (with li tags), img, br, and a link to blog)

• Acquire a working knowledge of CSS. (Customize the provided CSS provided to format the HTML to complement the logo design. Change at least the following: The h1 text color & h1 background color, font colors for the paragraphs & list items, the background color, font families and add at least one css comment.)

• Identify hex colors to match logo, using Photoshop color picker.• Open the HTML page in a web browser and capture a quality screen shot with

.5 inch margins for printing.

Programs Used: TextWrangler, Photoshop, InDesign, and Validator. W3.org

Process: I created this web page using only TextWrangler. I hadn’t ever worked with HTML/CSS before this and I found it to be very intriguing. It was also helpful to know that I could check the website to make sure all was working with the website “http://validator.w3.org/#validate_by_upload.” After I created the HTML and put all the info down that I needed I then put in a pre-made CSS document to my HTML. From there I incorporated the color scheme I had in my logo into the webpage. I was able to find the exact colors by using Photoshop’s eyedropper tool to get the hex color. I then changed my fonts to help make my website flow nicer with the logo. I decided to change the logo so it was centered in the webpage by using a code I found on Google.The programs and tools I used were TextWrangler, Photoshop, InDesign, and Validator.W3.Org.

Page 21: P9McKaylaWinterton