Project 9: Portfolio

Project Corrections/Time Spent:
I corrected the spelling on my photodesign project – 2 minutes
I updated the markings on the pattern piece on my letterhead and business card so they would be accurate because it had conflicting markings – 5 minutes
I enlarged the photo on the flier, shifted the title bar to overlap the photo, and adjusted the alignment for the date and time information. This improved the white space shape and overall layout – 20 minutes

Message:
To professionally show my work and show that I am detail oriented and structured with personality and character.

Audience:
Potential employers and clients, especially those looking for someone who has an eye for detail.

Top Thing Learned:
How to use master pages in a document for easy updating of multiple pages.

Future Application of Visual Media:
As a web design and development major, the skills I’ve learned are invaluable. When I combine them with my eye for detail and alignment addiction, I will design and layout sites that will be pleasing and functional for my clients and theirs.

Color Scheme and Color Names:
Analogous
Green
Teal
Blue

Title Font Name & Category:
Black Jack – Script
AmerType Md BT – Slab Serif

Copy Font Name & Category:
AmerType Md BT – Slab Serif

Thumbnails of Images used:

stock_watercolor_texture_by_mayshingblue-and-green-paisley
Sources (Links to images on original websites):
Watercolor: http://fc00.deviantart.net/fs71/f/2010/033/5/2/stock_watercolor_texture_by_mayshing.jpg
Paisley: http://blogs.lowellsun.com/daleydecor/files/2014/02/blue-and-green-paisley.jpg

Advertisements

Project 8: Brochure

P8 Jocelyn Tucker Front
Front
P8 Jocelyn Tucker Inside
Inside
P8 Jocelyn Tucker Back
Back

Description:
A two sided (duplex) folding brochure with an original logo.

Process:
I set up an offset layout in Adobe InDesign that would allow an image from the inside to show when the brochure is closed. Then I made a curve for along the right edge of the cover to give interest and allow a little more of the inside image to be seen.

I created a logo in Adobe Illustrator using the pen, pencil, shapes, anchor point, and type tools. When my logo was complete, I changed all drawings and text to outlines so that they would scale properly when resized, and then “placed” it into my InDesign file.

I created repetition in my design by using the colors and fonts from my logo for the colors and fonts of the text in the brochure. I also repeated the green curve on the right front of the brochure on the inside and the green dots from the logo to separate the phone number and hours on the back. I also picked photos for the classes that used colors from my color scheme.

After selecting all my photos, I opened them in Adobe Photoshop and made adjustments to the levels and colors to make them match my color scheme better. For the tomato photo on the front, I used the lasso tool to select the main image and create a feathered opacity around it. I then used a mask and “painted” away the bottom edge of the photo with the brush tool at 50% opacity so the bottom would gradually fade away. I also deleted the background so the photo would blend in with my background on the cover of the brochure. For the dahlia on the inside of the brochure, I used the quick selection tool to select the background and then delete it. Then I opened the refine mask dialogue box and smoothed, feathered, and applied contrast to the edge of the flower. This made it have a softer edge that didn’t look so cutout on my brochure. I then “placed” the dahlia into my brochure and used the text wrap option to wrap my text around the petals by selecting the alpha channel option. I also copied the dahlia and added it to the back of the brochure, positioning it so that it looked like it wrapped around the edge of the brochure. This helped tie the back to the inside and add color and interest to it. For the background image, I found a high resolution photo of leaves and added a mask with a filter using a Gaussian blur. I then “placed” it in my InDesign file. I changed the opacity to 10% to make it more of a texture than a photo. When I did this the photo went very white. To adjust for this, I put a block of light green at 80% opacity behind the photo.

While arranging my photos and text, I applied the rules of body copy. I did this by aligning the bottoms of the columns, aligning text horizontally across the columns, placing headers closer to the text they introduce, adding more space above headers to separate them from previous text, using consistent paragraph styling, and getting rid of any widows or orphans.

Programs used: Adobe InDesign, Illustrator, and Photoshop

Message:
Thompson Nursery & Garden Center has planting workshops specifically for growing items in the Pacific Northwest.

Audience:
Anyone wanting to know what gardening preparation is needed or what grows best in the Pacific Northwest.

Top Thing Learned:
How to cut out an image in Photoshop, refine the edge, and wrap text around it in InDesign.

Color Scheme and Color Names:
Split Complementary
Green
Violet
Brick

Title Font Name & Category:
ChelthmITC Bk BT – Oldstyle
AvantGarde Bk BT – Sans Serif

Copy Font Name & Category:
AvantGarde Bk BT – Sans Serif

Word Count of Copy:
309

Thumbnails of Images used:

tomato-plants-with-large-red-tomatoesstrawberries-SS-560x400herbsbugbanedouble red columbinedahlia seductionHedges0050_1_L
Sources (Links to images on original websites):
Tomatoes: http://images.wisegeek.com/tomato-plants-with-large-red-tomatoes.jpg
Strawberries: http://gardenclub.homedepot.com/wp-content/uploads/2014/06/strawberries-SS-560×400.jpg
Herbs: http://static.seattletimes.com/wp-content/uploads/2009/06/2009315592-300×0.jpg
Bugbane: http://images.meredith.com/content/dam/bhg/Images/2012/03/SIP929229.jpg.rendition.largest.jpg
Columbine: http://getgrounded.files.wordpress.com/2009/03/20090315_red-columbine.jpg
Dahlia: http://yourparadisecreator.com/dahlia%20seduction.jpg
Leaves: http://www.cgtextures.com/thumbnails/textures/nature/Hedges/Hedges0050_1_thumblarge.jpg

Project 7: Web Page

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

Process:
This web page was created using only Notepad++, a simple text editor. I first inserted my image and text into the HTML document and then made sure my coding was accurate. I linked a pre-made CSS document to the HTML and then proceeded to change the coding to what I wanted. I changed the fonts to Paytone One and Slabo 13px, contrasting Google fonts that were very similar to the fonts in my logo. I added a link to Google fonts in the HTML file for each of the fonts I used, and then specified the fonts in the CSS. I also declared some backup fonts in case the viewer’s browser doesn’t support the specified fonts. I adjusted the padding around the logo so it had good white space. I also adjusted the padding between headings and paragraphs for good proximity. I used the colors from my logo as the colors for the web page. I found these colors by opening my logo in Adobe Photoshop and using the eyedropper tool. When I was done editing all the code, I used the HTML and CSS validators at the W3.org site.

Programs used: Notepad++, Adobe Photoshop

Message:
The Puget Sound Education Resource Library is for younger children and has items to supplement their education.

Audience:
Those in the Puget Sound area that are involved with homeschooling, scouting, or other community groups that focus on children. Also, anyone looking for ways to supplement their child’s education.

Top Thing Learned:
CSS is a very powerful tool for styling web pages. It is important to use the correct codes and all the codes needed in order to accomplish what you want to do. I also learned how to use Google fonts for the text on my web page.

Color scheme and color hex(s):
Tetradic
Indigo – #292765
Violet – #92278d
Gold – #f9b624
Lime – #a4c639

Title Font Families & Category:
‘Paytone One’, sans-serif – Sans Serif

Copy Font Families & Category:
‘Paytone One’, sans-serif – San Serif
‘Slabo 13px’, serif – Slab Serif

Changes made to the CSS:
I added a gradient image to use as the background and specified it should repeat. I centered the logo. I changed the font families and colors to match my logo. I also widened the body to fit the title on one line and thickened the border around the body. I centered the title and adjusted the padding to center it on the background color which was also changed to match the logo. I added headings to the unordered list and removed the bullets. I also adjusted the padding around the headings, list items, paragraphs, and logo. I changed the active and visited link color to match the logo and removed the underline.

Word Count:
311 words

Project 6: Stationery

Letterhead:

P6 Jocelyn Tucker

Business Card (8.5×11 layout):

P6 Jocelyn Tucker2

Business Card (large layout):

P6 Jocelyn Tucker Bus Card

Description:
Matching letterhead and business card designed using a personally            created logo.

Process:
I created the logo using the pen tool in Adobe Illustrator. I also used a font and then used the “create outlines” option to turn the letters into shapes. I picked two contrasting fonts and adjusted the tracking to align them with the edges of the image. When done, I used the “object, path, outline stroke” option on my image and “create outlines” on my text so that the entire logo would scale correctly. When I was done, I opened a new Adobe InDesign document with two pages and placed my logo .AI file into it.

I created letterhead on the first page in my document. I positioned the logo in the upper left corner .5 inches from the edges. I then created a text box and typed my contact information using a 9.5pt font that was used in my logo. I left aligned the information and then placed it to the right of my logo. I then used Adobe Illustrator to create a pattern piece with the pen tool to use as a watermark. I used one of the same markings from my logo and the same purple to create repetition. When it was complete, I outlined the stroke so it would scale correctly and then placed the .AI file in my letterhead file on the right side of the page with it bleeding off. I changed the opacity on the watermark to 5% to keep it from being too dark.

I used the second page of the document to create a business card. I created an outline with the rectangle tool for the front of my card. I then copied the logo and contact information, adjusted the sizes, and positioned them on the card. I centered the logo vertically on the card and then aligned the contact information with the bottom edge of the logo. I used .25 inches of space around the edges of the card. For the back of the card, I used the rectangle tool and filled the rectangle with the darker purple from the logo. I then saved a copy of my pattern piece I used for my watermark with it changed to white and placed the .AI file on the business card page. I reduced the size of the image and positioned it on the right side of the card with it bleeding off like I did on the letterhead to create unity with the stationery pieces.

Programs used: Adobe Illustrator and InDesign

Message:
Danica Foltz is marketing her sewing skills as a “Personal Sewing Buddy.” The logo depicts pattern pieces laid out on folded fabric and the watermark is a pattern piece, communicating the level of her abilities.

Audience:
Anyone looking for some help with a sewing project or improving their sewing abilities.

Top Thing Learned:
How to create a unified letterhead and business card.

Color scheme and color names:
Monochromatic
Purple

Title Font Name & Category:
Arial Black – Sans Serif

Copy Font Name & Category:
Serifa BT Roman – Slab Serif

Project 5: Logos

Jocelyn-Tucker-P5-Logos

Description:
Logo for the Puget Sound Education Resource Library.

Process:
I first created three different styles of logos, using varying font choices. I paired two different font categories in each logo for good contrast. I then got feedback on which communicated the message the best. I then took the logo with the most votes and refined it by adjusting the children. I then created a greyscale and white on color version of the logo. When each was complete, I changed all text and images to outlines so they would scale properly when the size was changed, making them quality vector images.

Program used: Adobe Illustrator

Message:
The Puget Sound Education Resource Library is for younger children. They have items to supplement your child’s education.

Audience:
Families, especially those who home school, and community groups such as scouting organizations.

Top Thing Learned:
I learned how to use the pen and pencil tools. I also learned when I am done with my image I should change all my text and drawn images to outlines. This makes it so they scale properly when the size is reduced or enlarged.

Color Scheme and Color Names:
Tetradic
Indigo
Violet
Gold
Lime

Font Name & Category:
American Typewriter Medium BT – Slab Serif
Berlin Sans FB Demi Bold – Sans Serif

Project 4: Montage

Jocelyn Tucker P4 Montage

Description:
Spiritual themed montage made with two blended images along with typography.

Process:
1. I cropped the temple image to 8.5×11 inches.
2. I used the content-aware move tool to move the temple and landscaping down, allowing room for the typography and placing the spire on the top third line.
3. I used the clone stamp tool to make the sky and clouds look better.
4. I copied the temple image and then added a Gaussian blur filter.
5. I added a mask to the blurred image and then used black paint at 100% opacity to remove the blur from just the temple.
6. I used the lasso tool to select the image of Christ and then moved Him to the temple image placing Him on the right third line.
7. I added a mask to the image of Christ and then used a soft-edged brush and black paint at 100% opacity to remove the hard image edges.
8. I used a larger soft-edged brush and black paint at 30% opacity to blend the image of Christ into the background.
9. I added type with two contrasting fonts and used colors from the image, aligning them on the left.
10. I aligned similar length lines of text by adjusting the tracking.

Program used: Adobe Photoshop

Message:
I wanted to convey the importance of the temple and encourage attendance.

Audience:
Those with temple recommends or those seeking to obtain a recommend.

Top Thing Learned:
I learned how to blend images with masks and how to use advanced tools like the content-aware move and clone stamp tools.

Filter / Colorization used and where it was applied:
I used the Gaussian blur filter on the temple image and then removed it from just the temple.

Color scheme and color names:
Complementary
Orange
Blue

Title Font Name & Category:
Perpetua – Oldstyle
Great Vibes – Script

Copy Font Name & Category:
Perpetua – Oldstyle

Thumbnails of Images used:

logan-temple-lds-758545-high-res-printChrist

Sources:
The Church of Jesus Christ of Latter-Day Saints website
Temple image – http://media.ldscdn.org/images/media-library/temples/logan-utah/logan-temple-lds-758545-gallery.jpg
Christ image – http://media.ldscdn.org/images/media-library/jesus-christ/jesus-christ-art-profile-love-37700-gallery.jpg

Project 3: Photodesign

P3 Jocelyn Tucker
Description:
Photography and image editing skills applied to an original photo which was then used in a layout. Colors from the photo where used in design elements in the layout.

Process:
I first decided what I wanted the subject of my photo to be, and then picked fabrics that would match a big split complimentary color scheme. I used the skills I learned this week to make sure my photo had good light, focus, and composition. I then used Photoshop to adjust the levels, sharpness, saturation, and color balance. It was a pretty good original image, so I didn’t have to do much editing. After editing the photo, I made a layout that incorporated the color scheme in the design elements and text. I also included color swatches along with color names and the color scheme title. I learned how to make a zig zag line and used it as stitching on the edge of my photo as a repeating element. I also used a font that was similar to the one on the sewing machine for more repetition. I paired this decorative font with a sans serif font for good contrast.

Programs and tools used: Photoshop, Canon PowerShot ELPH170IS

Message:
I wanted to make a design implying that amazing and creative things can be made with simple resources no matter what the era is.

Audience:
Individuals who like to sew or quilt and those who like vintage items.

Top Thing Learned:
I learned important photography skills for taking good pictures and how to edit those pictures in Photoshop.

Color scheme and color names:
Big Split Complimentary
Yellow
Orange
Red
Blue

Title Font Name & Category:
NotMaryKate – Decorative
Tw Cen MT Bold – San Serif

Copy Font Name & Category:
Tw Cen MT Bold and Regular – San Serif

Thumbnail of original, unedited image:

IMG_0085
Date and location you took the photo(s):
Photo taken 5/18/15 at my home.