P9GabiButler

PortfolioG A B I B U T L E R

ContactGabi Butler350 W. 6th S. Apt. 108Rexburg, Idaho [email protected]

Table of Contents

Event AdWeb PageLogosBrochureBusiness CardMontage Flier LetterheadImaging

Event AdDescription: A color full bleed ad to promote a fundraiser using only microsoft word and a scanner.

Date: 1.31.2015

Course/Instructor:Comm 130 Section 3Cory Kerr

Programs/ Tools used:Canon Scanner, Microsoft Word, PDF2JPG.net (PDF converter).

Objectives:Find, scan, and import a high-quality image.Create a full bleed design.Use text boxes for layout in Word. Insert and edit images in Word.

Process: I found a intriguing picture from National Geographic and scanned it into Adobe Photoshop. At which point I cropped the picture to the desired size and uploaded it into Microsoft Word. I wanted to leave the picture in it’s purest form and wanted to use a color scheme that complemented the picture. I wanted to use the rule of thirds and keep a very horizontal line within the design. I was able to navigate around Microsoft Word with ease and used a lot of it’s features to bring my design to life.

End

Chi

ld L

abor

Charity Concert Friday June 5th 7-10pm Utah state fairgrounds $7 admissions

All proceeds go to freeing the children and ending the torture.

#savethechildren

Web PageDescription: A web page to showcase a logo I designed and created.

Date: 3.14.2015


Programs/ Tools used:Text wrangler and Adobe Photoshop

Objectives:Size and optimize an original logo as a .png for a web page. Write cotent to describe the process of creating your logo and how it appeals to a target audience. Design a web page using HTML to display a logo and content. Compress multiple files in a zipped folder to attach as one file.

Process: I had never even tried or attempted creating a web page before. I only used text wrangler to create it. I used an html and a css file to create the web page. It was quite a learning curve but interesting to see how the different codes affected to page. I also used http://www.W3.com to validate my html to make sure it was all done correctly. After inserting all the information to my html I downloaded a pre made css document and attached it to my html. From there I made different changes to the css such as, adding a background image, and changing text color and fonts. I found the image in google where I copied the image url and then added it into my css file. I also used Adobe Photoshop to get the selected colors. I opened up a new document and clicked on the foreground color, selected a color that I wanted and copy and pasted the HEX into my css document to create the exact same color. I also decided that I didn’t like the the title and the logo were so separate so I decided to remove the title/header and put my logo inside so it is the title and logo.

LogosDescription: Three variations of a logo for the same company.

Date: 2.21.2015


Programs/ Tools used:Adobe Illustrator

Objectives:Create a variety of logos to fit a company, using the basic tools of Illustrator.

Process: I started out by sketching some ideas for this company. I wanted three very distinct looks but I wanted them to all make sense. For the top look, I used the ellipses tool and molded it into a surfboard shape then using the rectangle tool added in the rectangle to bleed over the edges to make it look like 2 different shapes on the top and bottom. Then, I added in the words, using a text box. For the second I used the ellipses tool again and simply added another circle over to create a sun and wave look but I also added a thick stroke of white around the circle to create separation. Then, I added in the text. Finally, I used the pen tool on the last one to create a wave, then I copy and pasted it on two more times to make them the same. I made a rectangle at the bottom to create more wave and added the text to the bottom.

BrochureDescription: A trifold informative brochure.

Date: 3.28.2015


Programs/ Tools used:Adobe Indesign, Adobe Illustrator, Adobe Photoshop

Objectives:Set up and align a two-sided, Folded document. Learn how to wrap text around an image. Use paragraph styles in InDesign

Process: The first step was setting up a trifold set up in Adobe Indesign. I did this by creating rulers at 1/3 of the page and then 2/3 of the page. I also created rulers on the outer edges of the page. The first page as the back and the second as the inside.I wanted my design to be very clean, simple, and professional. To do this I wanted to create definite colors in each column of the brochure. meaning, a black and white difference. To tie in all of the elements I have pops of red through out the design on each page but the main theme is black and white.To create the logo on the back side of the brochure I used Adobe Illustrator. I wanted a simple logo that promoted the “timeless” theme. I simply used the brush and created an infinity sign. Then, I cut it out so that it would fit into the brochure cleanly. For the grandma picture on the inside right, was cut out using Adobe Photoshop. I used the magnetic lasso tool first and cut out the majority of the picture but her grand-ma hair was a little more difficult to cut out so I then used the paint brush on her hair at a lower opacity to create a softer edge around her hair. I wanted to use the text wrap feature on the lipstick tube on the front of the brochure. So I opened up the paragraph styling window (that I also used to style the paragraphs) and selected the alpha channel option around the lipstick tube but I also right aligned the text wrap so it all stayed on the same side.

Business CardDescription: Matching letterhead and business cards using a personally created logo.

Date: 2.28.2015


Programs/ Tools used:Adobe InDesign.

Objectives:Create a new logo to fit a company or personal image.Design consistent layouts for a business card and letterhead. Use the basic tools Illustrator & InDesign.

Process: I used the rectangle tool to create the front and the back. The front I wanted to be a full bleed of the green that has been used throughout the design to create gestalt with the color. I added the white lines bordering it and added the “W” in the middle to tie it into letterhead. On the other side I added another W in the upper left hand corner to bring some design to the other side although I wanted it to be very clean with just the informa-tion of the business. I created some hierarchy with name of the owner and her information.

WW

Rachel Whimpey

[email protected]

walnutavedesign.com224 E. 100 S.

Logan, Utah 84003

I N T E R I O R D E S I G N

MontageDescription: An inspirational image made by blending images together and the use of typography.

Date: 2.14.2015


Programs/ Tools used:Adobe Photoshop

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

Process: I began by setting the background picture of the trees to an 8.5×11. I wanted the tops of the trees to show behind the picture of the girls so I used the stamp tool and added some more white snow behind the women. I then added the next picture of the women. I used the 100% opacity to brush away the hard edges of the picture and then slowly changed my opacity down to blend it better with the picture. Then, changing the opacity to about 30% I brushed over all of the three girls on the left and the one to the right of the girl in the dark plaid. then with about a 10% opac-ity I brushed over the women to the right of the girl in the plaid. I left the plaid girl without full opacity because I wanted her to stand out in particular, because it’s me and I’m the one that the quote applies to. At least for these purposes. I then added the quote in by the other girls and made it all one script font, making the word “love” slightly bigger than the rest. I also changed the leading so that the words were closer together and easier to understand.

FlierDescription: Black and white flier promoting the graduate leadership conference.

Date: 1.23.2015


Programs/ Tools used:Adobe InDesign

Objectives:Apply the design principles and use appropriate typography. Incorporate basic InDesign skills to improve basic fier layout.Create a project folder with image, logo and InDesign document to keep links intact.

Process: I began by sketching out my ideas many, many times and then took my ideas to InDesign. Beginning with a very simple design plan and a large contrasting title to really grab the attention of the audience to create an obvious focal point. I incorporated small boxes throughout the design in order to create unity. The white space is there to create ease of compre-hension and give your mind a rest. I was given the image, content, and logo for this flier.

LetterheadDescription: Matching letterhead and business cards using a personally created logo.

Date: 2.28.2015


Programs/ Tools used:Adobe Illustrator and Adobe InDesign

Objectives:Create a new logo to fit a company or personal image.Design consistent layouts for a business card and letterhead.Use the basic tools of Illustrator & InDesign

Process: At first I designed my logo which is the street sign. I created the logo using simple shapes in Adobe Illustrator. I used the line tool as well. While still creating the design I used the pen tool trying different designs but ended up undo the designs. Once I created the logo I copy and pasted it and put it into Indesign.For the letterhead I decided I wanted to create a type of street sign with the logo so I placed the logo at the upper left hand corner and placed a skinny black rectangle flowing all the way down the left side of the page then, I did the same with another rectangle this time making it green to create a very artsy, grassy feel. I made that line a full bleed on the bottom of the page. I added all the contact information at the bottom of the page to create some cohesive edge on the whole design but also to allow plenty of white space throughout the design.

Walnut AvenueI N T E R I O R D E S I G N

801.555.2727 [email protected] 224 E. 100 S. Logan, Utah 84003 walnutavedesign.com

Rachel Whimpey

ImagingDescription: Use and apply good photography skills and photoshop skills. Also, including a good color scheme and design with the picture.

Date: 2.7.2015


Programs/ Tools used:Adobe Photoshop and Nikon D5100 Digital SLR camera.

Objectives:Learn basic photography skills.Use a digital camera to take a quality image, then download it.Size and crop the image. Adjust image brightness, contrast, hue and saturation levels.Use a selection tool to isolate a portion of the image.Desaturate the selected portion of the image.Use a filter or colorize a portion of the image.

Process: As I started my design I knew I wanted to incorporate a triadic color scheme. I thought I would go with one that is not only very pleasing but very “in style” right now. After I decided this I went out to take my photo. I wanted to focus on good light and a stark contrast within the photo to grab the attention of my audience. I used a Nikon D5100 Digital SLR camera. I uploaded the photo in to Adobe Photo-shop and used the following editing techniques: levels, sharpness, saturation, and color balance. Then I designed a 8.5 x 11 design, incorporating my photo, color scheme, color swatches, and life to my design. I used the eye dropper feature to make sure the colors I chose matched up with the color palate from the picture and from there I adjusted the colors a little bit to make sure the colors worked well together. I wanted a simple design with colors working together and the focal point the apple within the picture.

Documents

P9GabiButler