P7 Web Page Project

P7JohnErcekIIIscreenshot

Description: This is a web page designed to showcase my logo.
Process: This is my first time ever working with code. The only program that I used was text wrangler, and I later validated this website using the site http://www.W3.org HTML validator. It was difficult at first because I discovered that there were some problems with my HTML so I had to make some other corrections.  After inserting my image I  changed the text explaining the process of my logo and how it was done(311 words) and then later attached it to a premade CSS. document that was provided by the instructor. I then changed both of the headings to Impact style text from the sans-serif cattegory using the website http://www.w3schools.com/cssref/css_websafe_fonts.asp. I was able to back up the fonts using this site but left the body copy as Times New Roman from the Modern category because it worked better with my project. I also left  a comment that I knew it had been provided beforehand on the original CSS. document.  I then used the color swatches and eyedropper tool to change the colors of the background, the second header’s text, and also the first header.  Afterwards I re-sized the webpage and took a screenshot. I then opened a new document in photoshop 8.5×11 inches at 150 ppi resolution. I then set the rulers at .5 inches and inserted the screenshot re-sizing it ti fit within the rulers. Afterwards I saved it as a jpeg and uploaded it to my blog. Design principles used was that the text as well as my logo and header 2 were aligned.  Also the use of different fonts and colors to show contrast
Top 3 things learned:
1) How to write in HTML.
2)How to do a more precise screenshot.
3) How to link both the HTML and Css. documents together.
Programs/Tools Used: Text Wrangler, and Photoshop/selection tool, rulers, and re-sizing tools.
Font Family #1 (all names) & Category: Impact, Charcoal, sans-serif;
Font Family #2 (all names) & Category: Times New Roman, Georgia, sans-serif
Hex Codes/Colors: #000001 Black, #FFFFFF White,#3bb872 Green, and ##6d4136 brown.
Changes made to the Css.: I changed one of the text families and also the colors around header 1 and the back gound to math my logo.

Project 6 Stationery

Section:02

Description: In this project I was asked to design a business card and stationery for a fictional business using Adobe Illustrator

Programs/Tools Used:Adobe Illustrator series CS6

Top 3 things learned:
1)How to use the pen tool.
2)How to properly align objects using the green helping lines.
3) How to draw a box with margins by clicking and typing in numbers.

Stationery – Font #1 Name & Category:Myriad Pro 9.9pt/16pt(no effect) Old style category
Stationery – Font #2 Name & Category: Times New Roman 12pt(no effect)New Style category

Logo – Font #1 Name & Category: Book Antiqua 16.9pt(Bold)Old style category
Logo – Font #2 Name & Category: Times New Roman 12pt/8.59pt(no effect) New Style category

How the logo represents the company: The company Olympus Theme Park is a recreational resort. The mountain with the swirling cloud and the Greek buildings give it a Greek-style theme showing mystery and wonder. The buildings and mountain with clouds gives the logo a sense of fun and excitement.

Process For the Stationery:

I first opened up a new document in adobe illustrator 8.5 x 11. Next I used the pen tool to draw three separate triangles with a golden-yellow color from my eyedropper tool. I then used the ellipse tool to draw several gray circles and then grouped them together using the group selection tool. Afterward I drew a text box and typed the Words Olympus Mountain in the Myriad Pro at 9.9pt font later changing the text to white. In the same text box I type Theme Park in Times New Roman 9.9pt font which was also later change white using the selection and eyedropper tools. I then made two text boxes and typed two gold lines and aligned them together at the top and bottom of the document. The first line I placed a little after 1.5 inches, and the bottom one I placed at 10.125 inches and then aligned with the top one using the green ruler guides that popped up to help me.  After that I drew two more text boxes one for the name of the manager of the theme park and the other one for the address and contact information. The name was done in Myriad pro font 16pt and changed to gray using the type tool to select and eyedropper tools to change from black to silver-gray. The contact information was done in Times New Roman pt 12 font and also changed to gray using the type tool to first select and then use the eye dropper tool to change the color to silver-gray as well. I then used the selection tool to move the name and contact information above the top golden line at the top.

Process For the Business Card:

I opened a new document at 8.5×11 and then using the shapes tool I clicked on the document and then typed the dimensions for the business card twice. I then selected them using the selection tool and then using the eyedropper tool I change the color from white to light blue. I later used the selection tool and aligned both boxes together. I then used the shapes tool to draw first pillars on the box representing the back of the business card and a line in the center going vertically down. I then applied a stroke of 1-1.5 to the shapes. I then used the same effect on the box representing the front of the business card and made a complete building drawing a triangle and circle and applying a stroke of .5-1 on the shapes then positioning them to give it a Greek building look.  On the front I then drew a text box and typed Olympus Mountain in Myriad pro bold at 16pt font. The words theme park and the park’s operating hours were then typed in Times New Roman 12pt font with no effect added. I had originally done all of this in white but then later switched to black because it was difficult to see using the type and eyedropper tools. On the back of the card I then drew several gray circles and grouped them to give them a cloud shape adding the name of the manager and contact information in Times new Roman 8.5 font and then grouped them together with the clouds using the group selection tool. I then drew three triangles using the pen tool and grouping them together using the group selection tool. I then used the arranging tool to send them behind the cloud.

Letterhead:

p6AJohnercekstationerysec02

Business Card(8.5 x 11 layout):

p6buisnesscardjohnerceksec02

Business Card(Large Format):

p6businesscardjohnerceksec02

 

Project 5 Logos

P5JohnErcekIIIsec02

Description: These are some logos that I designed using adobe illustrator. There purpose was to be used as a new brand for my wordpress blog.
Process: For the top logo I drew a series of rectangles and then using the eyedropper tool changed them different colors. I then created two forms of text the one on the top being Admiral round tip bold at 33pt font from the old style category, and the lower text being Berthold Akzidenz Grotesk at 22pt font from the new style category. I then took both texts and alligned the bottom text directly below the other.For the middle logo I typed out the phrase in Apple Chancerey from the decorative font category  that was then put at 59.7pt font with a bevel on the outside of the lettering. The same was done for the second line of text but only in Bernard MT Condensed font at 23.25pt font size from the modern style category to give it contrast. I then used the shapes tool to draw a thin black rectangle, and then grouped it to a small black triangle to make it appear as a pen writing the first group of words. Continuing with the pen tool I then drew an ink bottle and quill to put at the end of the second line to show contrast of both the pens and give it a time-changing look. It looks I then alligned the texts and used the group selection tool to put them all together. The last logo took the longest by far. I first had to draw different shapes. First I drew a circle using the shape tool and then did two small circles for the eyes, drawing an extra black circle for one eye and drawing a blue star for the other eye. Then I drew a red circle for the nose, and for the mouth. The mouth I changed using the delete anchor pen tool to give the clown an excited look. I then used the artistic calligraphy brush to give him dimples. I then drew a green triangle using the pen tool and then very carefully drew yellow squares and triangles to give it a checkered look. I then went back to the shapes tool and drew a purple circle for the top of the hat afterwards I used the group selection tool to keep everything that I had done up til that point together. I then drew the neck using the shapes tool which consisted of drawing first a green triangle, two yellow right-angle triangles for the bow-tie, two circles to complete the bow tie, and then three green rectangles to complete the rest of the neck. After that I then typed my Ejournals part in Myriad pro at size 12pt from the old style category and placed it above the bow tie. I then wrote the phrases “philosophy”, “&”, and “Comedy” separately in Times New Roman from the modern style category and then re-sized them using the selection tool remembering to hold down shift as I did. Afterwards I used the group selection tool to group it all together and then using the selection tool re-sized it and placed the rulers so that all the logos were not touching the margins.  It was lot of work but it was fun!
Top 3 things learned:
1) How to use the group selection tool to group objects together.
2)How to set up the margins at 0.5.
3)How to use the bevel tool for some awesome contrast.
Programs/Tools Used: Adobe illustrator, selection tool, group selection tool, shapes tool, pen tool, eye dropper tool, paint brush tool, rulers, and the bevel tool
Top Logo – Font #1 Admiral round tip bold/old style category
Top Logo – Font #2 Berthold Akzidenz Grotesk/ new style category.

Middle Logo-Apple #1 Apple Chancerey/decorative font category
Middle Logo – Font #2 Bernard MT Condensed/ modern style category
Bottom Logo – Font #1 Myriad pro/old style category
Bottom Logo – Font #2 Times New Roman/modern style category
How the logo represents the company: It is a logo for a blog that is both for comedy and philosophy
Votes on favorite logo:
Top Logo = 4; Middle Logo = 2; Bottom Logo = 8;
My favorite logo was  the middle logo.