Project 9 Portfolio

~ bradenned ~ 5 Comments

Portfolio (Scribd.com):

Project Corrections / Time Spent:

Flier – 40 min:

  • Changed title copy font/size/tracking/kerning.
  • Changed body copy size/leading.
  • Removed distracting objects from image and added Gaussian blur to the background behind the man.

Event Ad – 10 min:

  • Reduced size of main body copy.
  • Moved and resized text boxes to allow more white space.

Photodesign – 15 min:

  • Replaced main quote font with an oldstyle font.
  • Readjusted tracking/kerning/text warping for main quote text.

Montage – 25 min:

  • Removed a distracting shooting star from the sky.
  • Adjusted color levels of and added Gaussian blur to clouds, and otherwise cleaned up boundaries to make transitions smoother.
  • Adjusted text leading.
  • Refined man’s shadow on water by reflecting his outline, transforming it, adjusting darkness/opacity, and using the smudge tool to create ripples.

Logos – 25 min:

  • Adjusted font sizes/weight/tracking/etc. for subtitle copy. (This ended up taking a lot longer than expected, since I’d turned all my text into outlines when making my variations, so I had to redo those from scratch.)

Web Page – 10 min:

  • Removed the “noshade” attribute from the <hr> tag.
  • Added “lang=’en'” attribute to the beginning <html> tag.
  • Edited copy text to remove an errant widow.
  • Widened the screenshot window to show off more of the background.
  • Edited out more distracting lights from the background image.

Total time spent: 2 hours.

Message: I am a skilled, educated, accomplished designer who can follow objectives to create effective, attractive designs.

Audience: Potential design employers or clients.

Top Thing Learned: I’ve been surprised at the quality of the designs I’ve been able to produce with just the introductory information provided in this course. The principles are surprisingly simple and easy to implement once you begin practicing with them, but they do wonders to make designs look more professional. I know that the techniques I’ve learned and the skills I’ve developed aren’t incredibly in-depth, but they are very fundamental, and I now have a nice, strong base to build off in future classes.

Future Application of Visual Media: Even though I don’t plan to become a professional graphic designer or the like, these skills will still be of great use to me in my intended web design path. And with these skills, I wouldn’t be surprised if I get to do quite a bit of freelance design work alongside whatever my main profession is. I’ve already had two friends ask me to design logos for them, and if I can make a good name for myself with my output, that should open up other opportunities for me to get more commissions.

Color Scheme and Color Names: Complementary – Blue & Orange.

Font 1 Name & Category: Egyptian Slate – Slab Serif.

Font 2 Name & Category: Avenir – Sans-serif.

Thumbnails of Images Used: No images used in this portfolio design.

Project 8 Brochure

~ bradenned ~ 3 Comments
P8-NedWilcock-front-closed
Front (blade closed)
P8-NedWilcock-front-opened
Front (blade open)
P8-NedWilcock-inside
Inside
P8-NedWilcock-back
Back

Video Showcase:

Description: This project is a duplex folding brochure designed using edited photos from Photoshop, a new logo created in Illustrator, and a layout designed in InDesign.

Process (Programs, Tools, Skills, FOCUS principles): This project was made entirely using Adobe Photoshop, Illustrator, and InDesign. First, I made the Silver Start Drafting logo by creating a star shape in Illustrator, giving it a charcoal-style stroke, and adding other dotted/curved lines in places to make it look like a hand-drafted sketch. I then added another star on top of that, and used a gradient fill to make it fade from opaque to transparent.

Next, I found all the images I would need (including all eight knives found in the brochure, and the Spyderco logo), and trimmed them out in Photoshop to make png files. Most of my photoshop time went into creating the main body of the brochure. I isolated the handle from the blade, and used the clone stamp tool to edit out the locking mechanism to make it less cluttered. I then copied and reflected the handle and placed them side by side to create an identical front and back for the outside of the brochure.

I left one side of the blade as it was for the front part of the brochure. To account for bleeding and potential misalignment in printing, I used the clone stamp to create a wide bleed for the reverse side of the blade so that it would match up with the front wherever I cut it.

For the inside, I found a picture of some brushed steel to match the feel of the blade, and adjusted the hues to match those of the picture the blade came from. Once I had all of these pieces, I began organizing the layout in InDesign. I placed the combined handles on the first page to create the outside cover, added the text and the ‘bug’ from the Spyderco logo to the front (with the slight modification of adding a medical cross to the bug’s back), and added the “Wellness Charities” line beneath that. On the back, I placed my Silver Star logo at the bottom with Spyderco’s contact information above it.

For the inside, I placed the brushed steel image as a background, then placed the handles there initially as a placeholder to know where to put my content. I sized the other seven knives proportionally, and arranged them at the bottom of each page of the brochure. Then, I used the pen tool to create custom text boxes to wrap with the shape of the empty space left inside the handles after I’d placed the knives. I put my copy text into these text boxes, and aligned them both to match the gutter, so it would be unified and well-aligned. After all this was finished, I lowered the opacity of the handles to zero, leaving just the knives and the text.

Since the blade is a separate piece, I placed it on a different page, with the front and back on opposite sides of each other. I created another custom text box on the front of the blade, and added the remainder of my body copy. To find the font for the headings, I used WhatTheFont to identify the font Spyderco used in their logo, and used that font. For the body copy, I used a sans-serif font that seemed to match the text etched into the back of the blade (WhatTheFont couldn’t identify it for me).

To assemble the brochure, I used a ruler and my thumbnail to score a fold line along the back of the cover, so I could match the edges during folding. I then used a knife (a Spyderco Paramilitary 2, which I thought was fitting) to cut out the handles and blade, the thumb hole in the blade, the pivot holes in all the pieces, and the slit in the front page that allows the handles to open up to the inside. To finish, I used a brass fastener to put all the pieces together, so the blade would be able to pivot out of the handle like a regular knife.

The main design principles I used for the typography were shape and alignment. Very few of the edges of my brochure are straight, so I had to focus harder than I usually have on viewing the text boxes as actual shapes in the composition, and making sure all the edges looked all right wrapping around the various curved edges. Also, the grouping and repetition/rhythm of the knives on each page helps to unify each page individually, while still keeping the two pages distinct from each other. And since the color scheme is grayscale, I had to make good use of value contrast to make up for the lack of color contrast. As for the overall effect, I think the audience appeal is very strong and effective; what knife lover wouldn’t enjoy a brochure that looks and functions like a knife?

Message: Spyderco is doing more good with the money they receive from knife sales. Not only will your purchase provide you with a good knife, but it will also be contributing to worthwhile causes.

Audience: People who enjoy collecting high-quality knives, particularly those who are already Spyderco fans.

Top Thing Learned: When I first got the idea of making my brochure function like a knife, I thought it might be too crazy to actually work, but decided to give it a try anyway. This assignment proved to me that with enough determination and ingenuity, it’s possible to make even the craziest-sounding ideas work out in the end. In fact, those ideas may end up being the ones that make your design most memorable and engaging.

Color Scheme and Color Names: Monochromatic – Grayscale.

Font 1 Name & Category: Bauhaus Demi – Decorative.

Font 2 Name & Category: Neue Haas Grotesk Display Pro – Sans-serif.

Word Count: 262.

Thumbnails (Click to enlarge):

Sources:

Project 7 Web Page

~ bradenned ~ 4 Comments

P7NedWilcockScreenshotDescription: This project is a website created to showcase a logo I designed, and describe my process in creating it.

Process (Programs, Tools, Skills, FOCUS principles): At the beginning of this project, I was provided with a general text layout and a template .css files that I would customize to make my own website. All HTML and CSS coding was done in TextWrangler. I created an .html file to match the text layout I was given, added my logo to the page, and attached the .css file I was given. I replaced all the sample text with my own text to showcase my logo, and added a horizontal rule (<hr> tag) to separate my logo and its description from the rest of the text.

To customize the visual look of the page, I edited the CSS as described later in this blog post. Some changes of note are:

  • To make the logo and the text right next to it lay side by side, I floated the logo left so the text would wrap around it on the right side.
  • To make the horizontal rule separate the logo from the rest of the text, I set it to clear the elements above it to keep it from also wrapping around the logo.
  • I changed the background to an image from one of my recent shows with Comic Frenzy, and adjusted the colors to match the blue color scheme of the rest of the page. I didn’t want it to distract from the text, so I used resampling in Photoshop to blur it and make it a bit more subtle.

Since so much of a website’s visual look can be changed based on the size of a browser window, I mostly wanted to focus on the principle of color and value contrast, which stays constant. I already had a good contrasting color scheme from my logo, so that was able to translate nicely to the rest of the design. I took the text code from the blue in the logo, then lightened it to get the background color for the body, and darkened it to get the color for the body text and the h1 background. The image already had a lot of value contrast in it, which was fortunate. Since most of the image is very dark, that contrasts well with the light background of the main body.

Message: I have good design skills that will be useful to future employers.

Audience: Potential future employers in graphic design or web design fields.

Top Thing Learned: This gave me a lot of fun opportunities to play with background images in ways I hadn’t before. I got to adjust the positioning, size, and attachment of the background image, and added a general background color to account for any gaps left at the top of the image as the browser window was resized. I already had a pretty firm grasp of how everything else worked, but making the background image look how I wanted was a fun challenge.

Color Scheme and Color Hex(s): Complementary – #F7911E, #478FCC.

Font 1 Name & Category: Helvetica – Sans-serif.

Font 2 Name & Category: Georgia – Oldstyle.

Changes made to the CSS:

  • Added a comment containing hex codes for the colors in my logo.
  • Changed the main background from a solid color to an image.
  • Changed the background color of the body, removed the border, and reduced the border radius.
  • Changed the size, color, and font family of all text in the page.
  • Floated the logo left, added padding, and gave it a new width.
  • Added margins to the horizontal rule, and set it to clear the logo.
  • Added color for hyperlinks, which changes when hovered over.

Word Count: 343.

Project 6 Stationery

~ bradenned ~ 3 Comments

Letterhead:

P6NedWilcock

Business Card (8.5×11 layout):

P6NedWilcock2

Business Card (Large layout):

P6NedWilcock3

Description: This project is a letterhead and matching business card I created for a fictitious café called Tea Time.

Process (Programs, Tools, Skills, FOCUS principles): Everything on the business cards was created in an Illustrator file, which was linked into InDesign. The wordmark and logo were then copied into InDesign, and everything else was designed in that program.

To create the logo, I used ellipses for the main parts of the cup, and made tapered strokes with the width tool for the clock hands and steam wisps (with a lightened opacity on the wisps). I then used the shaper and pathfinder tools to combine all the pieces into one. For the wordmark, I created separate text boxes for “T”, “ea”, and “ime”. I expanded the appearance of the “T” to extend the strokes, and then resized and kerned the text to give everything good alignment throughout the entire logo signature.

With the logo finished, I used simple rectangles to create the boxes on the card. I wanted to go for a very relaxed, straightforward, uncluttered look, so I placed everything along straight lines, and used simple, clean type for my info. I chose the color scheme because I wanted a cool, relaxing, color to fit the mood of the café.

With the business cards completed, I placed them into InDesign from the Illustrator file and got to work on the letterhead. I placed the logo as a large watermark in the lower left corner, and the wordmark in the upper right to set the location of the horizontal rule at the top. I created a rectangle the same color and width at the cross stroke of the “T” and applied a gradient feather effect to it to smooth out the transition from the rule to the letterform. I aligned and spaced all of my personal information beneath the rule, and added a rectangle with a vertical gradient behind it all to add a touch of visual interest without cluttering it too much.

The design principles that I’d say are working the most effectively in this design are alignment, value, and elimination. I made especially sure that all of my text lined up well, and though all of the elements are technically the same color, that there was a high enough value contrast for everything to remain easily legible. And in the end, the simplicity is what makes this work the most for me. There are no extraneous design elements competing for attention, so everything that is there has purpose and visual importance.

Message: Tea Time is a cool, mellow place to chill out and enjoy a relaxing drink.

Audience: People who want a low-key, relaxing place to get refreshments and spend time with friends. Target age is young-to-mid-aged adults; about 20-45 years old.

Top Thing Learned: Simplicity is not a bad thing. By the time I finished my designs, it seemed strange that they were so simple. I definitely thought they looked good, but I almost felt like there needed to be something more. After my critiques, and after weighing out design alternatives, I decided that it needed to stay as simple as it was. Adding too much of anything else would’ve just cluttered things and taken away from the simple, relaxed feel I was striving for. The simplicity did not make it incomplete by any means.

Color Scheme and Color Names: Monochromatic – Blue.

Font Name & Category: Avenir Next – Sans-serif.

Project 5 Logos

~ bradenned ~ 4 Comments

NedWilcockP5LogosDescription: This project is a logo I created for Comic Frenzy, a comedy improv troupe at BYU-I.

Process (Programs, Tools, Skills, FOCUS principles): First, I made a word map of ideas and objects that came to mind when I thought of comedy improv. I had a hard time coming up with images that could convey my message quickly, clearly, and adequately, so I decided that it would probably be best to go with a text-based logo, as it shared the most information in an easy-to-understand way, and therefore conveyed my message the best.

The logo itself was made entirely in Illustrator. To start off, I typed out the words “Comic Frenzy” in a nice, round sans-serif font, and used the touch type tool to move and scale the characters to their initial position. Then I expanded the appearance of the text to give me finer control over the shape of the letterforms. I overlapped the “C” and the “F” to match corners, and used the pathfinder tool to combine them into one shape. I then reshaped the “r” to encircle the “e.” Finally, I extended the stem of the “F” to align with the baseline of “Frenzy,” the upper bar to align with the final “c” in “Comic” and the “n” in “Frenzy,” and the lower crossbar to align with the right side of the “re” combination in  “Frenzy.”

To create the outline, I copied the entire thing, placed it exactly behind the original, and added a stroke until I got the width I wanted. I added the subtitle below in an all-caps, oldstyle serif font for contrast, kerned the word “theatre” to match the width of “improvisational,” aligned it with the left edge of the “F,” and put a black box behind the text to continue the outline of the whole thing. I added a color scheme that gave good contrast, and to finish it off, I added a shear transformation to the whole logo to skew the angle, giving a little sense of action and “frenzy” to it.

Message: Going to a Comic Frenzy show is a fun, spontaneous, madcap experience that will make you laugh.

Audience: BYU-I students who like comedy improv.

Top Thing Learned: It’s important to make designs that communicate the message as quickly and efficiently as possible. Some of my other initial logo drafts looked cool and had fun ideas behind them, but it just took too long to figure out what they were supposed to be saying. The logo I ended up choosing may not be the most visually clever one I came up with, but in the end, it was the one that communicated the best.

Color Scheme and Color Names: Complementary – Blue, Orange.

Font #1 Name & Category: DIN Alternate Bold – Sans-serif.

Font #2 Name & Category: Kefa – Oldstyle.

Project 4 Montage

~ bradenned ~ 2 Comments

NedWilcock-P4Montage-TwoMedicine

Description: This is a photo montage project created by smoothly blending multiple images together using layer masks, filters, etc.

Process (Programs, Tools, Skills, FOCUS principles): First, I created the background. I knew I wanted to find a mountain at sunset, but I didn’t want just some random mountain. I chose Mt. Sinopah at Two Medicine Lake in Glacier National Park, because I really love the view, and I dig the vibrant oranges and greens in this particular photo. I placed the horizon at the bottom 1/3 line, with Mt. Sinopah at the intersection with the right 1/3 line. Then I found a nice purple nightscape to complement the oranges and greens already in the lake image, and blended them together. To help with the blending, I found some clouds to put between them. I used an overlay mode on the clouds, and blended them all together to create a smooth background.

Most of my efforts toward the image went into the man walking on the lake. I placed him on the left 1/3 line, scaled him to size, and added adjustment layers for brightness/contrast, hue/saturation, and selective color to make his colors match the background. I then flipped the man and all his layers to create the reflection, blended the reflection into the lake, and used the smudge tool to create the effect of ripples. The last thing I did was use the brush tool with a soft hardness and light opacity to give him a shadow on the surface of the lake.

The last thing I did was add the typography. I grabbed some orange from the sunset to use as an emphasis color, and made the emphasized words larger. Originally the text was much larger, and I had more words emphasized, but that ate up my negative space, and took away from the impact of the emphasized words. So I shrunk the font sizes, chose to emphasize only two words, aligned everything to the right, and unified the line lengths a bit more.

I liked how much I was able to use the rule of thirds in this design. The two most prominent objects—the man and the mountain—are on intersections of the grid, which helps them pop out more and create stronger focus. The color contrast is engaging, the depth/scale contrast between the close-up man and the faraway mountains helps him stand out, and I like how his clothes create something of an emotional contrast between civilization and nature. I also like how the position of the text in the upper right juxtaposes with the man in the lower left to create a diagonal balance.

Message: The message is that the world we’ve built is often too busy, too noisy, and too crowded. Amidst all that, it’s important to take moments to seek quiet solitude, to unwind, and to connect with oneself.

Audience: I’m a person who craves solitude and quiet, so this quote really hit me the first time I saw it. My audience is those people like me who value personal time, and the peace that comes from nature especially.

Top Thing Learned: This project gave me some good opportunities to be resourceful and innovative about using the tools in Photoshop to get the effect I wanted. At first I was pretty stumped on how to make a reflection that looked at least somewhat realistic, but after playing around with different effects, tools, etc., I ended up surprising myself with how realistic it came out looking. The top thing I learned is that if you take some time to explore and research what’s possible with your software, you can achieve just about whatever vision you’re hoping for.

Filter / Colorization Used and Where it was Applied:
Overlay – Clouds.
Selective Color, Hue/Saturation, Brightness/Contrast – Man walking on lake.

Color Scheme and Color Names: Triadic – Purple, Orange, Green.

Font #1 Name & Category: Yuanti SC Regular – Sans-serif.

Font #2 Name & Category: SignPainter HouseScript – Script.

Thumbnails and Sources of Images Used:
Click on images for links to original sources.

two-medicine-lake-glacier-national-parkAmazing-night-skyclouds-05ManWalkingUpstairs

Two Medicine – Anthony Caldaroni: http://antonycaldaroni.com/trip-through-glacier-national-park/
Night Sky – Picalls: http://picalls.com/amazing-night-sky/
Clouds – Globe Views: http://globe-views.com/dreams/clouds.html
Man Walking – Immediate Entourage: http://www.immediateentourage.com/man-walking-upstairs/

Project 3 Photodesign

~ bradenned ~ 3 Comments

P3-NedWilcock

Description: This is a photodesign project created by taking an original photo based on a predetermined color scheme, and adding text and other design elements to match the color scheme.

Process (Programs, Tools, Skills, FOCUS principles): I first decided that I wanted to use a monochromatic color scheme, and I really lucked out on my photo. I’m in a production of three plays by Henrik Ibsen this semester, and I stumbled on this composition during rehearsal. We have teal filters over all the lights backstage, and I saw this tray on the prop table right beneath the light, so I snapped a few pictures.

The design itself was created entirely in Photoshop. I cropped the image and applied some levels, vibrancy, and selective color filters to boost the cyan levels. I also used a curves filter to get finer control over the brightness. I sharpened the glasses, and put a noise reduction on the tray to clean things up a bit. I tried blurring out the background to keep the lamp from being too obvious, but ended up deciding that it was still too distracting, so I just made it totally black.

I wanted to show off the full range of the monochromatic color scheme, so I made a concentric circe around the focal point of the glasses for each tint and shade on the color wheel. (These colors printed really out of whack during the initial printing, so I later adjusted them a bit to make the variance stronger.) Then I traced along the edge of the tray with the polygonal lasso tool, and deleted those sections of each circle to open up a field for the text.

To finish it off, I used a regular arc text warp on the color scheme notation to match the curve of the circle, and an arc upper text warp on the main quote to make it flow along the edge of the tray.

I like how the circles really helped to emphasize the focal point, as well as the contrast of having the bright teal glasses against the stark black background. Other than that, I really like the rhythm and repetition of the circles, and how the cut-off edges align along the tray’s edge. I’m quite satisfied with how well the design principles work together and build off each other in this design.

Message: Considering how I found my image, I really wanted the message to be from the play, Hedda Gabler. The quote is from the exact scene these glasses are used for. By itself it’s a pretty good quote, and one that I’d say is true, but in the scene, the character is bending that truth to use it derisively against another character. The design works well for the quote as-is, but for those who understand the context of the quote, I think the cold color scheme and the black background help to support some of those darker connotations.

Audience: This design is for people who’ve read or seen Hedda Gabler, specifically for the people who are going to come see our particular production. I realize that it’s a pretty small audience, but for the people who know and enjoy the play, I hope it strikes a chord for them.

Top Thing Learned: This doesn’t have so much to do with the project itself, but working with so many different programs for this class has been a really cool experience. This week has helped me to better appreciate that each program has strengths and weaknesses that are compensated for by other programs. I hope to learn those strengths and weaknesses for as many programs as possible, so that I can better know which program to use to best meet the unique needs of a given project.

Color Scheme and Color Names: Monochromatic – Teal.

Title Font Name & Category: Yuanti SC Regular – Sans-serif.

Copy Font Name & Category: Optima Regular – Oldstyle.

Thumbnail of original, unedited image:

IMG_7740

Date and location I took the photo: May 18, 2016 – Snow Black Box Theatre.