Hannah Chelson

Visual Portfolio
Contact Info
Table of Contents
Brochure
Montage
Event Ad
Logos
Letterhead
Business Card
Web Page
Photodesign
Flier
Hannah Chelson
208.569.7754
hannahchelson@gmail.com
twitter: @hannahchelson
Contact Info
Brochure
Description:
A two sided (duplex) folding brochure.
Date: July 13, 2014
Course/Instructor: Comm 130 Visual Media/ Section 04/ Cory Kerr
Programs/Tools Used: Adobe InDesign/Adobe Illustrator/Adobe
Photoshop
Objectives:
-Set up and align a two-sided, folded document.
-Create an original company 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 im-
age.
-Write at least 250 words of original copy with at least three paragraphs,
headers, and subheaders.
-Trim for a full bleed and print in duplex (two-sided) color.
Process (Programs, Tools, Skills):
I set up the gateway fold in Adobe InDesign. I split my layout into fve
sections with the concept that the four outer sections would be the faps of
the envelope which would help to make my brochure. I chose to do that
because I wanted my brochure to be similar to a wedding envelope. I used
pictures throughout the brochure to create repetition and fow. I
deliberately chose photos that had violet, purple or red elements to ft my
color scheme. I chose fonts that was light and fun without being
distracting. I chose a couple of pictures off of the internet but most of them
were mine. I decided to keep the square photos for repetition but made
them small so they showcased what the business could do. I did place
two images from photoshop 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 then I placed it into InDesign,
where I used the scissors tool to cut out some of the white that was left on
my logo. I placed in on the front as a design and logo.
Event Ad
Description:An event ad to promote a fundraiser using only Microsoft
Word and a scanner.
Date:May 17, 2014
Course/Instructor: Comm 130 Visual Media/ Section 04/ Cory Kerr
Programs/ Tool used:Microsoft Word, Epson Scanner, PDF2JPG.net (PDF
converter).
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 pro-
grams, including Photoshop.
Process: I scanned the paint brush/chameleon picture, and then used the
Word image, delete background, to get rid of the extra colors that I did not
want from the image. After deleting the background I moved the image to
the back of the page. I created four text boxes. I placed the date and time
on the brush. I created two boxes on the brush. One for the day and one for
the time and date. I had to get rid of wrap text and placed the text on front
of the image. I chose the text color by using the color fnder tool under
more color options. I matched the yellow from the body of the chameleon.
I moved the text boxes around so they were aligned with each other and to
create repetition. I created the text box next. I played around with the font
and sizes then I adjusted the text to have it be sideways. I then created my
fourth box to place the rest of the information. I used the color fnder tool
for the red by the eye and body. I had the brush bleed out to the edges.
Photodesign:
Description: Demonstrate good photography and image editing skills.
Incorporating color into a poster layout with original photo.
Date: may 24, 2014
Course/Instructor: Comm 130 VisualMedia/ Section 04/ Cory Kerr
Programs/ Tool used: 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.511 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.
Process: I frst took multiple pictures on my T3i Rebel Canon camera and
focused on getting a variety of shots.Then I sorted through my pictures
until I found a photo that had multiple colors I liked. I picked out the colors
and found the color scheme that ft with the colors. I had brick, green and
blue, so I chose split complementary. Then I brought the photo into
Photoshop and used these specifc editing techniques: levels, sharpness,
saturation, and color balance. Then I designed an 8.511 layout that
including my photo, text, and repeating design elements. I incorporate my
color scheme title, color swatches, and color names into my design. I used
the eye dropper tool and adjusted the color in the color picker to match a
little more accurately. I wanted my design to look like a movie poster so
I started with making the texts on the bottom. I used the eye dropper tool
to match the text to the jacket. I then made a rectangle ellipses and flled
the box with a blue color that matched the mountains in the back. I went
to flter and applied the blur tool. I created two separate text boxes for my
title. I played around with the position but decided to align the texts right
next to each other. I applied the same blue text color from my words on the
bottom. I also aligned the title with the words on the bottle. I made another
text box on the bottom for the date, rating, and my blog but I used a brick
color for my text to match the colors in the background.
Web Page
Description:A web page designed to showcase a personally created logo.
Date: June 29, 2014
Course/Instructor:Comm 130 Visual Media/ Section 04/ Cory Kerr
Programs/ Tool used:TextWrangle, Note Plus Plus, Indesign, and Photo-
shop.
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. (Minimum of 200 words. Include rationale
for colors, appeal to target audience, design skills, etc,)
-Design a web page using HTML to display the logo and content. (Use
TextWrangler (Macintosh) or NotePad++ (Windows))
-Acquire a working knowledge of HTML. (Must include all required tags
(Doctype (provided), html, head, title, meta charset (provided), & body.
As well as tag that links to external style sheet. With in the body include
h1, h2, p, ol or ul (with li tags), img, hr, and a (link to blog) tags.)
-Acquire a working knowledge of CSS. (Customize the Cascading Style
Sheet (css) provided in I-Learn to add page formatting that complements
the logo design, by changing at least the following: The h1 text color &
background color, font colors for the paragraphs & list items, the back-
ground color, Font Families and add at least one css comment.
Identify hex colors for web design.
-Compress multiple fles in a zipped folder to attach as one fle.
-Open your HTML page in a web browser, and capture a quality screen
shot with .5 inch margins for printing.
Process: I created this web page using Note Plus Plus TextWrangler. I
had never seen or written any HTML/CSS. It was interesting to see how a
website was made.I had neverused the http://www.W3.org HTML
validator website and it was nice to fnd a helpful tool like that.After I
marked up all my content and inserted my image, I attached a pre-made
CSS document to my HTML. I then 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 Times New Roman.
Montage
Description: An inspirational montage made by the blending of two or
more images, and the use of typography.
Date: June 1, 2014
Course/Instructor:Comm 130 Visual Media/ Section 04/ Cory Kerr
Programs/ Tool used:Adobe Photoshop
Objectives:
-Use the FOCUS design process with strong focal point and fow
-Unify a layout with a consistent theme and dominant 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 flter to one part of the image
-Apply typography principles (titles, quotes, events or scripturesyour
choice)
-Format type: Legibility; Small copy & Title with varying text size. Theme
word(s)
-Select good quality images
Process: I cropped the background image to 8.511.I selected my frst
image which contained two planets and a fashing star. I used the feather
tool at 63% to make sure it was not harsh.With black paint and a 100%
opacity, soft-edged brush, I painted away the hard image edges.Then with
a larger brush I made it look like the planets were part of the sky.I repeated
the process with the city and bridge but I dragged the entire image to the
background image and started masking it until it was a gradual blend.
I masked my city layer and used the brush tool to help get rid of the grey
from the previous picture and help to blend the skyline into the sky. I kept
some of the grey so it added a foggy look to the image.I added some type
with one font because I felt like there only needed to be one quote and that
the text should be the same size and I used the eyedropper tool to have it
match the red in the sky. I added a rectangle box behind the text to help
the it stand out against the night sky. I used the eyedropper tool to fnd the
blue color so it matched the sky.
Flier
Description: Black & White promotional fier to promote a graduate lead-
ership conference.
Date: May 10, 2014
Course/Instructor:Comm 130 Visual Media/ Section 04/ Cory Kerr
Programs/ Tool used: Adobe Indesign
Objectives:
-Apply the design principles and use appropriate typography.
-Incorporate basic InDesign skills to improve basic fier 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: I frst created some sketches of my layout. I started the process of
copying my sketches to make a design in Adobe Design. I did not like how
it looked, so I went back to my sketch book. I sketched and found a layout
I liked. I started by placing an image on my document and made sure it
was high quality so the image would not be blurry. I added 10%
transparency to make it look like a watermark and not an image. Then I
started putting the shapes on the document. I used the rectangle and ellipse
tool to put the shapes on the document. I made sure that there was enough
white space. I decided to create two rectangles at the top for the title and
a question that would catch the audience attention. I made a large half
ellipse for the bulk of the font and had the ellipse point right towards the
next ellipse. I created and ellipse and placed the logo at the bottom of the
fier so the fow of the page takes moves the consumers eyes down the
page. I added 67% transparency to all of the ellipses. I made the title
helvetica bold so it pops off the page. I made the ellipses with the date
right aligned with the page so it was not misplaced in the middle of the
page.
Business Card
Description: Matching letterhead and business card designed using a per-
sonally created logo.
Date:June 15, 2014
Course/Instructor:Comm 130 Visual Media/ Section 04/ Cory Kerr
Programs/ Tool used: Adobe Illustrator & InDesign
Objectives:
-Use the basic tools in Illustrator & InDesign.
-Create a new logo to ft a company or personal image. Do not imitate
existing logos or use previous designs. Dont 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, and email on each
piece. Use periods, bullets, or spaces in phone number; no parentheses/
hyphens.
Process: I created the logo using the text in Adobe Illustrator. I created a
script for the frst part of my logo and a sans serif for the second type. s
Once the logo was created, I opened a new two page InDesign document
and placed my logo .AI fle into this document. On my second page I used
the rectangle tool to create the front and back outline of my business card.
I then wrote the name of my business. I clicked the draw inside tool to add
more colors to my text which I did by using a picture of fowers. I placed
the picture of the fowers. I used the same contact information I used on
my letterhead. I placed another photo of a picture I had previously took. I
added a purple hue over and added transparency to that.
Letterhead
Description: Matching letterhead and business card designed using a per-
sonally created logo.
Date: June 15, 2014
Course/Instructor:Comm 130 Visual Media/ Section 04/ Cory Kerr
Objectives:
-Use the basic tools in Illustrator & InDesign.
-Create a new logo to ft a company or personal image. Do not imitate
existing logos or use previous designs. Dont 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, and email on each
piece. Use periods, bullets, or spaces in phone number; no parentheses/
hyphens.
Programs/ Tool used:Adobe Illustrator & Indesign
Process: I created the logo using the text in Adobe Illustrator. I created a
script for the frst part of my logo and a sans serif for the second type. s
Once the logo was created, I opened a new two page InDesign document
and placed my logo .AI fle into this document.I decided to make my frst
page a letterhead. I positioned the placed logo in the top left corner of
my letterhead. . I made my Love in the Air font stand by itself because I
wanted that to be more of a focus than the photography part. I had my font
match the color on my business card to create repetitions. I used the pen
tool to create two purple lines at the top and bottom of the page. I added
my contact information and made it smaller to help add contrast. Finally, I
added a watermark to add emphasis to my business.
Logo
Description: Three logo variations for the same company.
Date: June 7, 2014
Course/Instructor:Comm 130 Visual Media/ Section 04/ Cory Kerr
Programs/ Tool used: Adobe Illustrator
Objectives:
-Create three completely different, original logos to ft a company or
personal image that will appeal to the audience. Do not imitate existing
logos or use previous designs.
-Use only the Illustrator tools to create and draw your logos. (No Illus-
trator pre-fabricated fares, 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.)
Gather opinions from at least ten people about which logo appeals most to
them.
Process: The frst thing I did was look for pictures of whales on the inter-
net. I found three different shapes I like. For my top logo I traced letters
to make the word whale. I flled in the text on whale to make it one color.
Then I added the rest of the text to fnish of the logo. My middle logo was
a bit more complicated. I placed an image on illustrator and locked it. I got
my pen tool and traced the whales shape. I made the whale shape out of
two different objects so I would be able to color them differently. Then I
added a circular shape to add lines to the bottom of the whale. Then I used
the shape builder tool to edit and delete the lines that had extended off of
the whale. I fnished off by using purple text to fnish the color scheme. On
my bottom logo I used the ellipse tool to create a circle, I used the pen tool
to create the whale fn and I merged those objects together. Then I created
another ellipse. I used the type on path tool to curve my font. Then I added
my font and fll colors for my color scheme.