Design – Stephen and Jodi Parker Family

Project 9: Portfolio

[scribd id=260787056 key=key-lz1NcPqnNdub3i8jnfHC mode=book]

Project Corrections / Time Spent: I spent an hour and a half designing a new layout for a Resume. I found that it was important to choose a color scheme that was bright and contrasted with the white font. Using Adobe Photoshop to delete the background off of simple images of an envelope, map pin, and telephone helped me be able to get images that would work into my design; turning it into a vector graphic in Illustrator was the final touch. Deciding to make corrections on my Event Ad, I spent well up to one hour improving the proximity and alignment of my text and gradient lines. The corrections gave me an opportunity to perfect my Ad and possibly use it as a template for future design needs as I am a volunteer for this organization.

Message: There will be a time in the future that I will need and want to showcase my work in a professional way. Using a bold, structured, and clean design I was able to highlight my designs while displaying my personality.

Audience: Potential client and employers.

Top Thing Learned: Using the FOCUS principles and having a basic understanding of the Adobe Suite Software, even a novice can produce impressive designs.

Future application of Visual Media: I plan on using these skills to communicate positive messages whenever and wherever required of me.

Color scheme and color names: Complementary, Teal & Brick

Title Font Name & Category: Oswald – Sans Serif

Copy Font Name & Category: Garamond – Serif

Thumbnails of Images used:

Project 8: Brochure

Front

Inside

Inside Flap

Back

Description:
A two sided (duplex) square trifold brochure.

Process (Programs, Tools, Skills):

I set up the square trifold template in Adobe InDesign using measurements and a layout I found on the internet. I knew I wanted a brochure that when opened would display three panels enabling me to visually showcase the acronym of my logo through the “body” of the brochure. I really liked the idea of using a square design to have my brochure more unique.

I used squares throughout the brochure to create repetition and flow and tie in my color scheme. I deliberately clipped my images to omit the background to create more of a flat design feel and keep things simple.

For each image I used the ‘quick selection tool’ in Adobe Photoshop to remove the background of the image. I then used the ‘refine mask’ dialogue box to smooth and apply contrast to the outline of images. The changes I made in the ‘refine mask’ dialogue box made a softer image – I especially like how the runner turned out and the whisps from her ponytail are more natural. I then ‘placed’ the images into InDesign where I used the ‘text wrap’ option to wrap my text around the ‘alpha channel’ of the runner and the happy sleeping man.

I created the simple SEE logo in Adobe Illustrator using the shape tool with fill and text which would match my color scheme. I then placed it into InDesign on the front and back covers.

Programs/Tools Used: Adobe InDesign/Adobe Illustrator/Adobe Photoshop

Message: Inform my audience about three key elements that are key to a healthy life. I created a slogan, “SEE yourself healthy” that I felt would help my audience be able to connect to and remember after they put down my brochure.

Audience: This brochure was designed to appeal to persons aged 12+.

Top Thing Learned: How to create and successfully print a trifold layout in InDesign for a square brochure. I also learned how to clip images in Photoshop, and wrap text around an image in InDesign.

Color scheme and color names: Tetradic: brick, violet, lime, and teal

Title Font Name & Category: Myriad Pro / Regular / Sans serif

Copy Font Name & Category: Palatino / Regular/ Serif

Word count: 360

Thumbnails of Images used:

Sources (Links to images on original websites):

http://www.laserspinewellness.com/news/rise-shine-and-stretch/

http://oliveiraispwebsite.weebly.com/dietary.html

http://lifechangetherevolution.com/perfectionism/

http://www.popsugar.com/fitness/Best-Exercises-Stretches-Runners-34647113

Project 7: Web Page

Description:
A web page designed to showcase a personally created logo.

Process (Programs, Tools, Skills):
By using only TextWrangler I was able to produce this simple webpage. I had never before written in HTML or CSS. It was interesting to learn how the different tags work together to create the final outcome. I liked having the HTML and CSS validators, found on the web, to help me see where a mistake was made. When deciding the design process I considered the importance of the FOCUS design principles I have learned: Formulate a Plan, Organize the Layout, Contrast the Elements, Unify the Parts, and Simplify the Message.

I actually began this process by updating a previous logo I had made. I easily did this by opening Illustrator and modifying an existing design. I added a new company name underneath an existing image and then selected a new color scheme. After doing this, I was ready to mark up my content in HTML and import my new design, then I attached a pre-made CSS document to my HTML. I then went into Photoshop and used the eye dropper tool to find the correct hex code to correctly match the colors from my logo. I inserted the correct hex# to where I wanted the color. I also changed my fonts to Tall Dark and Handsome and PT Sans. I declared some backup fonts just in case the viewer’s browser didn’t have these fonts. I also used breaks before and after the logo and so that it would not be too close to the body. I eventually coded a table in my HTML document so as to move my body text inward and allow enough room from the double border without effecting the H1 in the body. Understanding how to mark the HTML and CSS together to make this happen was the most difficult part of the process for me.

Programs/Tools Used: TextWrangler, Illustrator, and Photoshop

Message: That lioness communications is a resource for those seeking “only the good report”.

Audience: Anyone in the world desiring a positive or uplifting message.

Top Thing Learned: How to use CSS and HTML together to design a basic web page.

Color scheme and color hex: Complementary: Brick #eb652f; Teal #47a69d; White #FFFFFF; Gray Gradient: #555555 to #2e2e2e; Black to Gray Gradient: #000000 to #555555.

Title Font & Category: Tall Dark and Handsome; Sans Serif

Copy Typeface, Font, & Category: PT Sans, PT Sans Regular, Sans Serif

Changes made to the CSS: I changed the font families, and I also changed the colors to match my logo. I added a gradient background to both the body and background. Additionally a double border was instituted to complement the design. I noticed that my websites default color was set to a purple, which conflicted with the flow of my color scheme. I did some asking and found out how to make that brick so as to repeat my color scheme. I also found it necessary to bring the text in the body in on both sides and used a table to accomplish this task.

Word Count: 286

Logo Update

I published my original logo designs for a class assignment on February 20th. To proceed with my web design project, I knew I wanted to give my logos one final touch to get it perfect for what I wanted. I really liked the outline of the lioness head from my previous design logo 2 and knew I wanted to use it! I also determined that I would change the name of the company to give my audience a better understanding of the chosen icon. In the end, I basically changed the crown color and company name and here is my updated design. For a detailed process of the original logos, please refer back to this post: https://runlittlejo.wordpress.com/category/design/logos/

Project 6: Stationery

Letterhead:

Business Card (8.5×11 Layout):

Business Card (Large Layout):

Description:
Personalized custom logo made to fit corresponding letterhead and business card.

Process (Programs, Tools, Skills):
I created my logos using simple shapes and the pathfinder tool in Adobe Illustrator. After the logos were created, I opened a new document in Adobe InDesign and placed my yarn logo .AI file into this document. I noticed some flaws in that logo. I went back into Illustrator to fix them and saved. When I went back into InDesign I updated my graphic easily by clicking on the triangular caution sign. I found this to be very useful!

I decided to make my business card first. I used the rectangle tool to make a box on the top half of the card and put my logo intersecting and on top of that box on the grid line. Next I chose fonts that could carry the message and idea of my design. I determined I needed a script font as to help me use lines with the pen tool to create flowing yarn from front to back of card to create a nice rhythm. I found it really important to match my stroke point size to the size of the tail of the s in knits. My overall goal was to be sure that a viewer would be able to determine what the business was about and a contact item on both sides of the card. I added a fiber background and put it at 10% opacity to give a textured appearance (I played around with this number a lot). Finally, I wanted to use a powerful slogan that would be able to encompass the style of the company and appeal to the proper audience. I was very satisfied with the results and carried it over onto the bottom of my letterhead.

On my second page imported my knitting needles I used on the back of my business card, but this time placed them separately and horizontal on both top and bottom of page to create a border. I purposely placed the contact information by the top of the knitting needle so the focus would go to the point and then down to the bottom need and off to the end point again, as if it was a sort of arrow. I used the same color scheme, contact information, and slogan. I brought in the same fiber background at 10% opacity. Finally, I placed my yarn image on the bottom right hand corner on the bottom 1/4 of paper and put it at 10% opacity. I debated on whether to use the company name on the top of the letterhead or the owners name. I decided on using the owner name and put the website underneath in the contact information.

Programs/Tools Used: Adobe Illustrator & InDesign

Message: Char Knits is a company created to produce quality hand stitched designs. Michelle Babcock is the owner and founder of Char Knits, she represents the face behind the name. The yarn balls are modern with clean lines yet warm toned to create the impression of what a customer could expect from Char Knits: modern, comfortable, and crafted with superiority. Michelle’s favorite colors are navy and orange, which were easy to fit into a complimentary color scheme.

Audience: Anyone that is interested in quality hand-knitted items.

Top things learned: How to effectively work in Adobe Illustrator and InDesign to create branding for company stationery.

Color scheme: Complementary and color names: Blue and Orange

Title Font Name & Category: Sweet Pea – Script

Copy Font Name & Category: Big Caslon – Modern

Project 5: Logos

Description: Three different logo designs for the same company.

Process: I really enjoyed this project and coming up with different design options and then figuring out how to use Illustrator to make these ideas come to life. My company icon was a lioness, so I looked online for ways I could implement it. I found a lioness face shaped necklace using different shapes and knew this could turn into a unique and cool icon. I played around with the tracing features and used the pen tool and eraser both to come up with the finished result. The crown was added to give a touch of femininity. In the middle design, after typing a monogram I turned those letters into outlines and manipulated the J to fit my design needs. Another exciting thing I discovered was how to type text on an outline for a badge feel. With my typography I used two different fonts to create contrast as well as using color schemes. I also found a lioness running that I placed into illustrator and then used the pen tool to outline the shape of a running lioness.

Programs/Tools Used: Adobe Illustrator

Message: “Running” to communicate strong, courageous, & powerful messages.

Audience: Runlittlejo Communications is a grassroots company instituted and devoted to communicating wholesome and uplifting messages for anyone around the world that will listen.

Top Thing Learned: How to draw using the pen tool

Color scheme: Top Logo: Split Complementary; Middle Logo: Complementary; Bottom Logo: Anagolous

Color Names: Top Logo: Red, Orange, & Teal; Middle Logo: Blue and Orange; Bottom Logo: Brick

Top Logo – Font #1 Name & Category: PT Sans (Sans Serif)
Top Logo – Font #2 Name & Category: Bank Gothic (Serif)

Middle Logo – Font #1 Name & Category: PT Sans Caption (Sans Serif)
Middle Logo – Font #2 Name & Category: PT Sans (Sans Serif)

Bottom Logo – Font #1 Name & Category: Onyx (Modern)
Bottom Logo – Font #2 Name & Category: PT Sans Narrow (Sans Serif)

Votes on favorite logo:
Top Logo = 9; Middle Logo = 9; Bottom Logo =13
My favorite logo: Top Logo

Project 4: Montage

Description:
A spiritual poster montage using images and type.

Process:

I cropped the mountain image to 8.5×11.
I placed the mountain climber image on top of mountain image, then I added a mask.
With black paint and a 100% opacity, soft-edged brush, I painted away the hard image edges.
With a larger black brush at different opacity levels, I blended the image into the background, so it produced a subtle contrast.
I then changed images to Black and White 1 and added Photo Filter 2 (a warming filter) to give a sepia tone. I also played around with levels, vibrance, channel mixer, and selective color until I was pleased with the results.
I also layered background images found at www.cgtextures.com/. I chose Metal Scratches0036 as well as MarbleBeige0052 to create more of a rugged feel. I put an overlay filter on both of these images and also a mask so that I could erase the background off of important features of the images beneath.
I ultimately flipped the mountain image horizontally, after Bro. Pingel’s suggestion, so that I could have better flow from text to the mountain climber image. I’m glad I did it! I have found that the critique sessions from classmates, teacher, family, and friends are very valuable and I appreciate the opportunity it gives to perfect my designs.
I added some type with two contrasting fonts and put them on top of a rectangle with overlay filter so as to allow more legibility with the words. I wanted to emphasize each line of my text so I chose different effects, colors, and sizes to showcase that. The words “we conquer” were the most important to me so I used a drop shadow and high value in color to bring it out.
Programs/Tools Used: Adobe Photoshop

Message: I wanted to send a message that we all have the capacity in ourselves to conquer anything we set our minds to. I wanted to visualize to my audience how empowering it is to overcome any “mountain” that comes our way (metaphorically speaking).
Audience: Anyone inspired by nature.
Colorized/Filter applied and where: I decided to add a Gaussian Blur filter on the mountain climber image.
Color scheme : Monochromatic Color Name: Black and White with Warming Filter (81)
Top thing learned: How to gradually blend two images by applying masks to images.
Font #1 Name & Category: PT Serif Caption Regular & PT Serif Regular– Serif
Font #2 Name & Category: PT Sans Caption Bold – Sans Serif

Thumbnails of Images used:

Sources (Links to images on original websites):

http://tetonclimbing.blogspot.com/2013_06_01_archive.html

http://www.conversionidigitali.it/analytics/seo-con-analytics-e-webmaster-tools.html

http://www.cgtextures.com/

Project 3: Photodesign

Description: Demonstrate useful photography skills, including editing. Incorporate those skills to showcase a quality image, a consistent color scheme based on that image, some text, and a few design elements.

Process (Programs, Tools, Skills): I began by sketching out an idea and then selected a color scheme that would best suit the plan from the Visual FOCUS book, I decided on Split Complementary. I took a photo with appropriate light, sharp focus, and nice composition. I used my Nikon D60 camera to accomplish this, and then imported the photo into Photoshop and used editing techniques: levels, sharpness, saturation, and color balance. I learned a lot using color balance & selection tool and how I could fine tune a few details of my photo to help support the color scheme by making the buttons on the yellow coat indigo, and adding a touch of violet to the lining of the coat sleeve. Then I designed an 8.5×11 layout that included my photo, text, and repeating design elements. I incorporated 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 loved the contrast that these bold colors demanded. After going through this process it was fun to see the vision I started out with come to fruition.

Message: I wanted to create a vibrant poster for a social media campaign that I recently read about in the Deseret News. I wanted to show a contemporary, yet playful understanding of the color wheel that would be memorable when seen.

Audience: Any person who has read/discovered the Book of Mormon and has an account on any social media platform.

Top Thing Learned: I learned a lot about the composition of photography. I also learned how to edit the image to keep quality and enhance the overall appeal by using Photoshop.

Color Scheme: Split Complimentary Color Names: Indigo, Violet, and Yellow

Title Font Name & Category: Mona Lisa Solid ITC TT: Serif

Copy Font Name & Category: Abadi MT Condensed: Sans Serif

Thumbnail of original, unedited image inserted

I took this photo on February 4th inside of my home, with my daughter as the model.

P3 Activity: Photography

Light 1: Outside

Light 2: Inside

Focus 1: Foreground

Focus 2: Background

Composition 1: Thirds

Composition 2: Lead Room

This photography activity was a good challenge for me. I have never really picked up a camera with the intent to shoot professional quality photographs. I liked having tutorials and learning about how to produce images to use in my designs. For my outside shot I metered the sky to be sure it didn’t get blown out. The weather was overcast, so I found that using the edits in Photoshop helped provide the contrast between the snow and sky. I used natural light inside of my dining room to capture the map with the Eiffel Tower – I had fun with this one! The options through using selective color really helped me get the vibrant and bright colors I was looking for.

At first, I was extremely intimidated to do the foreground and background photographs, but quickly realized it wasn’t as difficult as it seemed. I found my brother-in-law, who knows a lot about photography and he helped me understand how to use my camera to get the results I needed. I think that the foreground picture turned out very interesting and I would like to continue playing around with this new way of focusing. In the Composition category I settled on a photograph of the playground in my backyard which lent itself naturally to the rule of thirds. Finally, for my lead room shot I took a picture of my daughter facing into the frame and placing her eyes and the Book or Mormon on the grid line.

Project 2 – Event Ad

Description:

A color full-bleed fundraising and promotional event ad using only Microsoft Word and a scanner.

Process:

I scanned the bike image, and imported it into Microsoft Word then deleted the background I didn’t want. This feature wasn’t perfect and left a few bare parts that were difficult to get back into graphic. To remedy the said situation, as well as the fact that I planned a specific color scheme, I decided to recolor the image with accent color 6 and used a dark gradient base background underneath to fill in the wholes from the previous process. By using these effects I wanted it to appear as if the bikers were riding out of a ripped page. After altering the image to my satisfaction, I added an angled green rectangle with a white font to draw attention to the title of my event and other pertinent information. Three gradient lines with contrasting color and graduating weights were added underneath to add more emphasis & repetition. The three bikers in the image naturally added rhythm and followed the rule of thirds. I chose two different fonts for visual interest, and in the body copy chose to use bold and all caps for specific words to bring out their importance to the event. I was pleasantly surprised at how much can be done in the page layout setting and hidden design features of Microsoft Word. I really enjoyed playing with image recoloring and filters. I now feel confident that I could produce professional looking fliers & ads using these techniques. Programs used were: Microsoft Word, Dell Home Scanner, Adobe Acrobat XI version 11.0.0 to convert PDF to JPEG.

Message:

I have been commissioned by the American Diabetes Foundation to help raise money for the cure of Diabetes as a satellite bike ride of the Tour de Cure where I live. I wanted my audience to be excited about doing something they love to do while donating money to a good cause.

Audience:
Anyone who enjoys biking and feeling good about raising money & awareness for the Cure of Diabetes.

Top things learned:
I learned how to scan properly, and found that designing in Microsoft Word is possible.

Color scheme and color names:
Analogous
Lime, Yellow, & Gold

Title Font Name & Category: Birch Std – Serif

Copy Font Name & Category: Bangla MN regular & bold– Sans Serif

Scanned images used, sources, original sizes:

This image was scanned from January/February 2015 Road Bike Magazine. I used a Dell, 2155cdn home scanner to scan my image. The original image scanned, in inches, was 7.66″x10.4″. I scanned it at 300 dpi resolution. Image final scan, in pixels, was 2,343 x 2,471.