Process: For the first logo I simply used the shape tool and created a hexagon shape, colored it black, and then typed the text “NB” using the Nueva Std font. The second logo was trickier; I used the shape tool creating a bunch of smaller hexagons and colored them black and yellow. I used the direction tool to stack each other, and then for the bottom hexagon I colored the stroke yellow then thickened the stroke. I used the decorative Noteworthy font for this logo coloring it yellow at the end of title. Finally, for the last logo I used the shape tool to create the jar of honey, I colored it black with a golden yellow in the middle, and then I used the pen tool to trace an image of bee, and placed it in the middle of the jar. For the title, I used the font onyx and then colored word “honey” yellow and drew a yellow line under it with the brush tool.
Programs/Tools Used: Adobe Illustrator CS6
Top Logo – Font #1 Name & Category: Nueva Std, Modern
Top Logo – Font #2 Name & Category: N/A
Middle Logo – Font #1 Name & Category: Noteworthy, Decorative
Middle Logo – Font #2 Name & Category: N/A
Bottom Logo – Font #1 Name & Category: Onyx, Modern
Bottom Logo – Font #2 Name & Category: N/A
How the logo represents the company: The logo in the middle represents the fictional bee keeper company because the shapes I used were hexagons representing honeycombs. I staked them together with different colors to match the colorization of a bee.
Process: I created my webpage by first opening an html document in Text Wrangler using the code I wrote for the web page draft I made last week, and linking it to my CSS Style Sheet. In Photoshop I uploaded my logo; I cropped it so most of the white space around it would be gone, and then I linked the image to my html, and resized it to 200 x 175 px. I then wrote content in the html code sheet about the elements of my logo design, and how I accomplished it in the various Adobe Creative Suite programs. In the CSS style sheet I modified the fonts of my title(Impact), subtitle(Impact), and body copy(Minion Pro) in order to make sure there was appropriate contrast. I used the Photoshop eye dropper tool to extract the hex codes from the colors of my logo, and input them into my CSS style sheet so my webpage could resemble the colors of my logo. For the body copy and outer background I colored them dark grey, while the border of the web page I left yellow.
Programs/Tools Used: Adobe Illustrator, Adobe Photoshop, and Text Wrangler
Font Family #1 (all names) & Category: Impact – Modern
Font Family #2 (all names) & Category: Minion Pro – Old Style
Hex Colors: #262f41, b9c933, 333333, FFF, a8b63b
Name: Anthony R Gomez
Course, Section & Instructor: Comm. 130 Visual Media –
Instructor: Caryn Esplin
Date: March 16, 2013
Programs/Tools Used: Adobe Illustrator, Adobe Photoshop, CSS + Html and Textwrangler.
Font Family #1 (all names) & Category: Palatino, Palatino Linotype, Book Antiqua, serif;
Font Family #2 (all names) & Category: Tahoma, Geneva, sans-serif;
Hex Colors: Gold #cd8e01, Green #016524 , Red #a2243b, White #FFF
Process: I wrote the code for my webpage page using Html and CSS through the program TextWrangler. First, I used the html activity that I worked on previously, and then I started experimenting with the coding in CSS. I changed the background border from white to dark gold, and then I made the body-copy background from white to dark green using the color codes from Adobe Photoshop. Using the CSS coding, I linked my logo to the html page and centered it. I got rid of both the borderline around the body copy page and the header banner on top. I made another header banner, and turned its background red, and moved it to the middle of the html page. I changed the body copy font from Times New Roman to Palatino, and I changed the middle header font from Verdana to Tahoma. Then changed header font to white, and the body copy font to dark gold in order to match the border color around the html page to give it a south of the border look. After I finished coding every thing I then validated the html file using http://validator.w3.org/#validate_by_upload.