portfolio

PORTFOLIOHannah Johnson

CONTACT TABLE OF CONTENTS

Magazine cover.............................................4Prezi presentation.........................................6Photodesign............................................8Montage..............................................10Business identity...........................................12Infographic...............................................14Coding......................................................16Wepbage Mockup........................................18Brochure....................................................20

Hannah Johnson1400 W. Fourth St. #105Williamsport, PA 17701

[email protected]

806.567.1022

MAGAZINE COVER

DESCRIPTION

Programs

Course & Section

Instructor

Date

PROCESSI sketched out some layouts with the photo and logo in mind.

In Illustrator, I created a shape map of the sketch I thought would work best.

In Photoshop, using the clone tool, I added some space over the top of my head since the photo cut off a little too close for my purposes. I also dark-ened my sweater in the picture to allow for the white headlines. (I also cut out my image from the background in case the logo looked better behind my head, but it’s just too pretty of a logo to hide, even though it is recogniz-able enough to obscure some of it. After looking at some New York mag-azine covers, I realized they never obscure the logo…I guess they’re too proud of it.)

Then, on an 8.5 x 11 page, I laid out my photo and the logo and began placing in headlines.

Once I was finished, I saved as a PDF for printing and a JPEG for this post.

Photoshop, Illustrator

Design a magazine cover with eyecatching typography, featuring a self-portrait and articles about me.

Comm 130 - Section 11

Sara Tranberg

September 26, 2016

PREZI PRESENTATION

View it here

DESCRIPTION

Programs

Course & Section

Instructor

Date

PROCESSI knew I wanted to create an informational presentation on green smoothies. I knew that I liked the example Prezi in the student blog. So I started sketching based around a smoothie jar, the way she had with a lightbulb.

I illustrated the smoothie jar in Adobe Illustrator with the pen tool, brought it into Photoshop to save it for the web as a PNG, and then brought it into Prezi to build my presentation around.

I wrote the content for the 5 Benefits of Green Smoothies after getting ideas from other articles.

After this, I began illustrating the smoothie “ingredients,” again using the pen tool in Illustrator: spinach, a banana, an avocado, an apple, and a lemon.

Because of the flat style of the illustrations, I wanted a flat color for the background, so I just used a color in Prezi for the background.

After critique, I ended up choosing to have the numbers large and visible and have the viewer zoom in to read the benefits. I also initially had the idea to add a recipe as it went along, but it was complicating and confusing the presentation so I gave that idea up.

Illustrator, Prezi

Create a presentation that will convince viewers that Prezi is a viable presentation option.


Sara Tranberg

October 5, 2016

http://prezi.com/0n-9xca4lvcf/?utm_campaign=share&utm_medium=copy&rc=ex0share

http://prezi.com/0n-9xca4lvcf/?utm_campaign=share&utm_medium=copy

PHOTODESIGN

DESCRIPTION

Programs

Course & Section

Instructor

Date

PROCESSI had a bouquet that I thought it would work well for this assignment because of the complementary colors, yellow and purple. I started by taking photos of the flowers in different lighting until I achieved a look I wanted.

The lighting affected it in such a way that it ended up looking darker, more gold and blue, which I played up through editing. In the editing process, I increased vibrance, adjusted the lighting through levels, reduced color noise (I had taken the photo with a high ISO to get the right lighting indoors), and messed with offset and exposure for a more filmy quality. I didn’t sharpen the photo, since that would have been going in the opposite direction of what I was going for.

I created an 8.5×11 document and brought my photo on top of it.

I began adding design elements. I knew I wanted a border, and a quote that emphasized the simple beauty of having some flowers in your house. I added the little circles to bring in the color and add a decoration after the quote.

Photoshop

Display use of Photoshop through effectively using a color scheme consistent in the photo and design elements.


Sara Tranberg

October 13, 2016

DESCRIPTION

Programs

Course & Section

Instructor

Date

PROCESSAs I started the project, I already could hear in the back of my mind a quote by Dieter F. Uchtdorf that I wanted to use to this project, and I knew I wanted to do a starry montage.

I gathered three photos to begin: a cloudy sky above evergreen trees, a starry night sky, and a photo of the milky way. I used the clone tool to cover the cloudy sky with the starry night sky, and I used the feathered lasso selection tool to grab the milky way and place it on top of the starry sky. I masked it and blended it in with a soft, low-opacity paintbrush. I used a Gaussian blur filter on both the stars and the milky way.

I then found a portrait of a girl I liked and lasso selected her out of her image and onto the starry sky. I changed her blending mode to “Overlay,” because I wanted to give the impression that she was made of stars, and then I duplicated her layer so she would stand out more.

I typed the quote in and used a combination of the “Soft Light” and “Overlay” blending modes to achieve a somewhat translucent appearance to flow with the “deep space” look. After a great many type revisions, in which alignment my biggest challenge (there’s some long words in that quote!), I ended up with this version.

Photoshop

Combine two or three photos to create a spiritual montage poster.


Sara Tranberg

October 19, 2016

MONTAGE

DESCRIPTION

Programs

Course & Section

Instructor

Date

PROCESSAfter sketching, I created the logos in Illustrator. The first logo grew out of the third logo, using the “H,” but then adding geometric elements. In all of these, I created them because they had elements that people often associate with designers, especially the geometric shapes and patterns.

All three ended up being a type/symbol hybrid logo….one in which the type was also the symbol. These are typical of self-branding, and I thought they were appropriate for me.

After choosing the first logo, I developed a business card and letterhead using design elements out of this logo. I thought I would play up the geometric, monochromaticl;./ shapes to enhance the design message I was trying to send. For the business card front, I “reversed” the design, creating a monochromatic geometric background for the white logo to sit on. I then used this pattern for the corners of the letterhead.

Illustrator

Create a logo for a business or individual and design business stationary using that logo.


Sara Tranberg

October 26, 2016

BUSINESS IDENTITY

DESCRIPTION

Programs

Course & Section

Instructor

Date

PROCESSProbably the most difficult part for me was coming up with an unique but interesting topic. In the end, I chose a topic I had read an article about that day: how to have a happy dog.

To make my point, I wanted to know how many people have dogs, so I found the statistic on aspca.org.

I pulled up a Word document and typed in a plan for my infographic: all the information and data I would put in the graphic, and in what order.

I sketched some layout ideas, and also a brainstorm sketch of some of the elements I would design with that I thought would match the topic.

I chose a happy color scheme that I based on another infographic I had seen.

From there, I began arranging information and using the pen tool to create icons in Illustrator.

Illustrator

Create an infographic on a trending topic to be shared on Pinterest and my employer’s blog.


Sara Tranberg

November 2, 2016

INFOGRAPHIC

DESCRIPTION

Programs

Course & Section

Instructor

Date

PROCESSUsing HTML and CSS templates given, I linked the CSS file to the HTML file, added HTML tags and adjusted the CSS to match the design style of my logo, including using Google fonts, changing colors, and using CSS to trans-form a link into a button.

I used the same colors in my webpage as I used in my business identity proj-ect for unity. I used the eyedropper tool to pull colors from my logo.

I added a background image to echo the geometric pattern contained in my logo.

I wrote the content for the logo design process.

I validated my HTML & CSS.

Sublime Text

Code a basic informational webpage about the business identity logo design process.


Sara Tranberg

November 10, 2016

CODING

DESCRIPTION

Programs

Course & Section

Instructor

Date

PROCESSI decided to choose an informational website that would be sponsored by the Heritage Foundation purely for educational purposes. I had recently seen a satirical website in a bright, patriotic, three-color scheme that I liked the design of and wanted to create something similar, although without the satire (so toning down the blue after critiques encouraged a more sober feeling without reducing the blaring patriotism). I sketched some layouts, and although initially I hadn’t wanted to do a cen-tered, blog-style layout, in the end I decided it made the most sense for an informational website.

Using a 12-column grid, I created a shape map based on the sketch.

I added colors and content. Though the color in the images disrupted my 3-color scheme, so I used a gradient map (still in Photoshop) to make all of the images red.

Photoshop, Illustrator

Create a full-color webpage layout to serve as a blueprint for a future website.


Sara Tranberg

November 18, 2016

WEBPAGE MOCKUP

DESCRIPTION

Programs

Course & Section

Instructor

Date

PROCESSI created this logo based on a company from another class called Dry Oar Boating. Their logo was not great (Papyrus…) but I loved the subject matter so I decided to create a logo and brochure for them. In Illustrator, I traced some paddles and created a circular logo that I thought may fit the “hipstery” vibe a whitewater rafting company might go for.

I began creating brochure elements in Illustrator, like the front cover. I initially thought I would use the typeface from the logo, but I decided to push to the edge of “hipster” and use handwritten decorative fonts for an untamed feel. To enhance the wildness, I used the Pathfinder tool to cut through the white background and use the river rapids as the typeface color.

In Photoshop, I edited all the photos to have a filmy, trendy look and so that they would all unify nicely with each other. I clipped out two canoers for my wrap text portion on the inside-right.

I wrote all the content as I designed the brochure, gleaning information from different informational or advertising whitewater adventure websites.

Illustrator, Photoshop

Design a full-color, folding brochure that presents a company product, service, or location.


Sara Tranberg

December 1, 2016

BROCHURE

hHannah Johnson Design