This took me 30 minutes. With so much time left for the project, I can experiment with other forms and be much more radical in approach. But I always have this one to fall back on.
1
Do a google search and get an image of a car that u like. Resize it to 640 x 480
2
Go to that official car site and examine their web page. Here I can decide what I want to appropriate, where the logo and navigation is placed, look at different elements such as the search menu, the size and color of the text.
3
Next, I lay out my grid using guides in photoshop. I want text to line up ( for this exercise, at least in the beginning) margins, established areas for header and footer. I also drag the logo over and create a white area at the top of the image.
4
I take a line from the Aston web page and turn it into
my tag. I use Emigres Base 12 font, white, 42 pt and make it as big as the
car front to end. I add more base12 font in gray for the primary and global
nav.
Looking at the Aston web page I notice the subdivision of space to the left.
I look for another image in google, bring it into photoshop, and copy it.
Then, on the main image bg layer I select a rectangle with the rectangle
marquee and do a "paste into", and then using the free transform
command I resize it, holding down the shift key.
5
I add a black area at the bottom for the footer and
use a pixel font called Hooge05_54 at 8 pt, smoothing set to none. I also
set the opacity to 80% so the white isn't so harsh.
I right justify the footer text - it lines up with my margin and feels more
balanced there.
I need some side nav, so I add a gray rectangle, adjusting the value/darkness using the hue command. I use FF Meta at 12 pt gray, letter spacing at 100, and change the line spacing in the text menu to 24 pt.
I am always looking for ways to line things up - the side nav text, for example, lines up with the door handle.
Start your beginning comps by using a strict grid and lining things up. Once u have learned the rules, you can break them and become much looser and freeform.
 |
