M y P ortfolio

Christopher Griffin

C ontact I nfo
Christopher Griffin
12345 NW 6th Street
City, State 78910
(555) 555-5555
MyEmail@SomeDomain.com

T able of C ontents
4
6
8
10
12
14
16
18
20

P hotodesign
L ogos
F lier
W eb P age
E vent A d
B rochure
M ontage
B usiness C ard
L etterhead

P hotodesign
Description:

This is a full-bleed photo layout for a job application.

Programs:

Adobe Bridge, Adobe Photoshop

Objectives:

Create a full-bleed photodesign application that incorporates an image and text.

Process:

I began by sketching ideas featuring a landscape layout similar to a postcard.

With my sketches ready, I perused my apartment for ways to demonstrate being
one step ahead of the competition when I came across my shoes lined up in the
entryway. The shoes Id most recently worn were apart from the rest which were
neatly organized. Moving the image into Adobe Bridge, I modified everything from
exposure to contrast to add clarity and emphasize the color tones I wanted to build
on.
After picking a quote and font, I quickly realized a landscape layout resulted in a lot
of deadspace, so I shifted to a portrait layout. One of the project requirements was
to include swatches of the colorscheme used in the design, but I struggled to find
an appropriate place to include them until I noticed how nutrition facts are laid out
on nutrition labels when I took a break to eat. I adapted the stacked bar setup to my
design, and I was able to incorporate the swatches into the light, inner border.

D ate - 2.6.2016
C ourse - COMM 130
I nstructor - S ara T ranberg

PROJECT IMAGE FRAME

L ogos
Description:

This is a logo intended for The subOptimal Network, a group of YouTube channels
covering a variety of topics such as gaming, cooking, music and more.

Programs:

Adobe Illustrator

Objectives:

Create three variations of a logo for a company or business entity that best
communicate their brand.

Process:

I began by sketching over a dozen text layouts before picking versions I felt most
embodied the desired branding. Then, I digitized the sketches and asked friends and
family to vote on which logo each believed to be the most effective. Finally, I created
three more variations of the logo with the most votes. The result was a flexible base
logo with room to add a variety of icons and subtext to when associated with each of
the individual YouTube channels.
For example, the space above SUB would hold a gaming related icon, and the text
Gaming would occupy the lower right space below optimal when representing the
subOptimal Gaming channel within the subOptimal Network.

D ate - 2.20.2016
C ourse - COMM 130
I nstructor - S ara T ranberg

PROJECT IMAGE FRAME

F lier
Description:

This is a B&W (grayscale) flier advertising a leadership conference hosted by Vouant

Communications for graduating seniors.

Programs:
Adobe InDesign

Objectives:

Create a black and white news flier for a companys leadership conference that
incorporates their logo and an image.

Process:

I sketched several flier layouts before settling on the one with the best visual flow
with regards to the importance of each design element. I created a rough draft in
Adobe InDesign using a bold header with sharp contrast to illustrate the emphasis on
this being for a Leadership Conference rather than Graduate, as in Go graduate!.
After receiving feedback, I overhauled my design to further improve the visual flow
of the design elements. My original positioning for the image overwhelmed and
squished the lower half of the design, so I adopted a new layout similar to a news
paper article both in form and feel. This gave the elements more breathing room, and
it achieved a much better overall balance.

D ate - 1.23.2016
C ourse - COMM 130
I nstructor - S ara T ranberg

PROJECT IMAGE FRAME

W eb P age
Description:

This is a web page detailing my design choices for the logos shown on page 7 of this
portfolio. It also demonstrates my design skills by using a design that supports the
chosen logo.

Programs:

Notepad++, Photoshop (for sampling)

Objectives:

Size and optimize a logo as a .png for a web page that is 300 - 500 pixels on the long
side. Then, write content to describe my design process and use CSS to extend the
logos colorscheme and design to the rest of the page.

Process:

I built a rough layout of the page elements using Notepad++ before sampling colors
from the logo to proliferate the colorscheme using CSS. I established indigo as the
primary color for headings and the background while reserving the moderate gray
for copy text. This enhanced the visual relationship between SUB and optimal by
continuing to use their respective colors for page elements with similar importance
or weight.
Building on this, I applied a thick border to the pages content region similar to
the lines in the logo for design consistency. After that, I determined each elements
positioning and spacing with CSS. I also hid the <li> tags by removing the default
symbol and modifying their spacing to resemble text subsections. This afforded me
greater positioning control and avoided the often amateurish look of default list
bullets.

10

D ate - 3.12.2016
C ourse - COMM 130
I nstructor - S ara T ranberg

PROJECT IMAGE FRAME

11

E vent A d
Description:

This is a full-bleed benefit event ad for a month-long gaming charity event hosted by
the fictional gaming community, The Dragonhunters Guild, in collaboration with Extra
Life.

Programs:

Scanner, Microsoft Word

Objectives:

Design a flier promoting a fundraiser for a charity using only scanned images and
Microsoft Word.

Process:

I began by pulling large images from my collection of magazine artwork that werent
covered with text or logos. I picked a gaming genre (Fantasy), and culled my options
down to the best match: a Dragon! I scanned the one shown in the design and
moved to Microsoft Word to begin my layout.
At first, I tried using dark boxes behind the text, but I switched to brighter font colors
with drop shadow for improved legibility. I found a gaming-related charity logo
featuring colors that fit perfectly with the dragons color palette and further adjusted
my font colors to reflect this relationship.
To replace the dark text boxes behind the copy text, I went back to my magazine
collection to find grungy textures matching my color scheme. I found one with
dark shades of red that I applied a blurring effect to. This blended the image into
the background, and I duplicated the image onto itself. By cropping and brightening
the duplicate image, I acheived a spotlight effect with the darker version acting as a
subtle border for the copy text region.

12

D ate - 1.30.2016
C ourse - COMM 130
I nstructor - S ara T ranberg

PROJECT IMAGE FRAME

The Dragonhunters Guild is teaming up with Extra Life to raise

money for children in need! For every player who joins the
guild, The Dragonhunters will match their treasure hoard
dollar for dollar. Grab your friends, scour the countryside, and
compete to raise the most money!
Top contributors will receive dragon mounts, armor skins, and
other exclusive prizes. Winners chosen daily and weekly!

13

B rochure
Description:

This is a full-bleed, horizontally folded travel brochure featuring the city of Portland,
Oregon.

Programs:

Adobe Illustrator, Adobe InDesign, Adobe Photoshop

Objectives:

Create a two-sided, folded brochure with an original logo, four or more images (one
being clipped and text-wrapped) and at least 250 words of original copy text.

Process:

I began by perusing Google for various types of brochure folds that didnt fall under
the typical bi-fold/tri-fold design. I noticed a large number of travel brochures which
reminded me of the nearby city, Portland. The first thing that came to mind was its
bustling nightlife, and I settled on making a travel brochure.
Knowing that not everyone is a night owl, I listed out various calls to action that all
boiled down to From morning until night, Portland has something for you! While
looking for travel-related pictures, several Portland skyline pictures stuck out to me.
I picked out one of a Portland sunrise and another of a Portland sunset that helped
finalize my call to action: From sun up until sun down Portland is the place to
be.
I reinforced this concept with a horizontal fold simulating the sun going down via the
fold transition from sunrise to night. The effect is simple but clear. After much trial
and error, I found a picture for the inner fold of Oregon Welcomes You with green
tones I could generate my colorscheme from. This allowed me to emphasize the
brochures claim that Portland is the greenest city in the world.

14

D ate - 3.28.2016
C ourse - COMM 130
I nstructor - S ara T ranberg

15

M ontage
Description:

This is a full-bleed spiritually-themed montage. It is a combination of several images

masked together with filters and overlays to achieve a new composite image.

Programs:

Adobe Photoshop

Objectives:

Create a spiritual poster montage using filters and overlays to achieve a unified
composite image. Include spiritually-theme text that support the resulting image.

Process:

I began by mixing and matching heavenly light images with praying images until
I found a combination I was satifised with. The noisiness of the praying image didnt
mesh with the light image, however, and I needed to blend the darker sections to
achieve the hand-drawn look I was going for.
First, I applied a custom blur to the nosier dark corners of the praying image. Then,
I manually cloned out any remaining noise, as I made the image taller with healthier
(less noisy) pixels. Lastly, I used a steeper mask gradient by brushing at 100% and
50% to block out a blending region before refining the edges at 15-30%.
To pull the colors together and balance the wide contrast, I applied a pair of texture
overlays. For color, I used a grungy, red-painted canvas with the soft light blend
mode at 70% opacity to pull out vibrant gold/orange/brick tones. For contrast
balance, I applied a grungy, but smoother, canvas with the overlay blend mode at
25% opacity. As a finishing touch, I ran a custom action to bump midtones and used
a mask to paint brightness into the darker areas, as needed.

16

D ate - 2.13.2016
C ourse - COMM 130
I nstructor - S ara T ranberg

PROJECT IMAGE FRAME

17

B usiness C ard
Description:

This is a business card for a fictional company, Prismatic Lighting, that provides
professional lighting solutions for events of any size.

Programs:

Adobe Illustrator

Objectives:

Create a 3.5 x 2 in. business card featuring an original logo and design consistent
with the letterhead shown on page 21 of this portfolio.

Process:

I began by iterating through a variety of geometric shapes Id sketched while using

every primary/secondary color to support the idea that light was their product.
Once I settled on my best sketches, I digitized them in Adobe Illustrator. Having so
many different colors on a dark background proved too distracting, though, so I
removed the secondary colors.
My first draft also used black/white lines connecting to the primary colors, but
switching to matching primary colors (red to red, blue to blue) created a more
dynamic visual hierarchy. On the black card front, the lighter red and yellow stood
out to act as an arrow pointing to the companys name. The darker blue sank into the
background to serve as a subtle, less competitive, guide for the text. On the white
card back, the color roles switched allowing the darker blue to lead the eye across
the card to the contact information.
In other words, the black background pushed the lightest colors forward to get the
viewers attention while the white background pushed the darkest colors forward.

18

D ate - 2.28.2016
C ourse - COMM 130
I nstructor - S ara T ranberg

PROJECT IMAGE FRAME

19

L etterhead
Description:

This is the letterhead for a fictional company, Prismatic Lighting, that provides
professional lighting solutions for events of any size.

Programs:
Adobe InDesign

Objectives:

Create 8.5 x 11 letterhead featuring an original logo and design consistent with the
business card shown on page 19 of this portfolio.

Process:

Having just completed the business card, creating the letterhead was a simple
process of adapting the design from the smaller card to a larger page. I extended the
lines to the edges of the page while using the same layout as the white card back,
only reversed. All other design elements remained the same. I chose not to use a
watermark, as no matter how light I made the logo, it just felt awkward.
If I extended the lines to the edges of the page, it created subtle text regions that I
didnt intend for. In order to correct this, I tried turning the logo so the lines created
an outline of the page with the blue pointing into the bottom right corner. That, too,
was awkward, because it didnt match the orientation of the original logo. Lastly,
terminating the ends of each line in white space or removing them entirely didnt
work, as it began to feel incomplete or otherwise unfinished.

20

D ate - 2.28.2016
C ourse - COMM 130
I nstructor - S ara T ranberg

PROJECT IMAGE FRAME

21