Part 2

We need a main content area which will be a dark gray (#1e1f1f) rounded rectangle. Hold down the rectangle tool in the toolbar until you see a drop down menu and select the rounded rectangle tool. Make sure your options are set to 'Fill Pixels' (the third symbol on the options menu), Radius: 15pixels, Mode: Normal, Opacity: 100% and the Anti-alias is checked. Click and drag your mouse to create a rounded rectangle about the same width as the header rectangle. If you want to be precise, then drag vertical guide lines from the rulers so that the margins on the header and content area line up perfectly.



Continue working to layout content areas with rounded rectangles. Rounded rectangles are not only attractive, but they symbolize 'environment'. Without rounded corners information will seem 'boxed in' and convey a sense of not belonging to anything meaningful. With the type tool click and drag text boxes where you will want type to appear. These are just place holders to conceptualize what the blocks of text will look like. I use Lorem Ipsum (dummy text) which has been used by printers for about 500 years. You can generate as many paragraphs of Lorem Ipsum at http://www.lipsum.com/. Just copy the text from lipsum.com and paste into the text box.

When choosing type for the web it is best to use san-serif (letters without a feature called serifs at the end of strokes) because small serif type does not pixilate well on computer screens. I use Arial, Helvetica, sans-serif 'style' as the 'font' because it is common to most computers (More on styles when I get to CSS in this tutorial).

When designing a page, try to be visually sensitive to the weight colors have and how they balance each other. This is an asymmetrical design. And here is my thinking behind it: The right column is wider than the left, so my first instinct would be to make it a lighter color thus making it weigh less on the see saw, however I know that it will be mostly text and the narrow left column will be rich with graphics. So I will do the opposite and create more weight on the right to hoping that the darker larger area will balance the heavy and narrow left column. To say that this is what I'm 'thinking' isn't really accurate, this is what I am 'feeling'. And it is still debatable whether I actually achieved balance.

Another thing to keep in mind is that this is a personal web site, so I have total control over how much every element is going to affect the overall design. When designing professionally you have to anticipate that content will be in a state of flux and that the design has to be flexible. This may limit your creativity but it will also challenge you. Technical work-arounds offer the opportunity to demonstrate a different kind of creativity..



I've laid out some body content by adding layers and scaling images. Notice that I left a gap between the header and the main content area. That is where the navigation menu is going to be positioned.



If you're wondering how I create the graphics with the reflection, here's the technique for the 'download css' button. First of all, the reflection is an old advertising trick. Have you ever noticed in car commercials how the car is driving down a wet road. That's because the advertisers know how beautiful cars look with a reflection and they want you to fall in love with the car and spend lots of money. Symbols with reflections are very popular 'web 2.0' graphics. They may become dated eventually, but then again, no one is getting tired of cars on wet roads.

To make a shiny reflective 'web 2.0' graphic begin with two overlapping shapes on different layers. I made these with the rounded rectangle tool. One shape is green for better visibility.



I double click the layer with the green rectangle to open my Layer Style box. Then I toggle to the Gradient Overlay and click once on the gradient color strip which opens the Gradient Editor. Make sure all the settings are as shown below. Double click on the bottom left color stop and pick a color that is almost as dark as the shape on the other layer. In this case it would be a dark gray that is close to black but light enough to create a visible distinction between the two. Click okay and double click on the bottom right color stop and pick a color that is lighter than the first. You'll have to experiment with the transition until it looks like light actually reflecting on the top of a 3D shape.



Click okay on the gradient editor and select the 'Bevel and Emboss' style. Use the settings below, remember to uncheck the 'Use Global Light' checkbox. Click okay after you're done.



Create a new layer and add anything you want. I added some random text. Select the three layers (2 rectangles and text layer) and drag them to the new layer icon to duplicate them. Now take the new 3 layers and merge them (Hold Ctr>E) together. From the menu select Edit>Transform>Flip Vertical. Move the new upside-down shape below the first.



Make sure the layer with the new shape is selected and click on the eraser tool and choose a brush with a 0% hardness and begin erasing the bottom of the shape until the reflection looks convincing.



Now that I know what the content will look like, I can create a menu navigation bar that visually compliments both the header and body. First, I create a white nav bar with the rounded rectangle tool.



On the nav bar layer, double click to open the Layer Style box. Select the Gradient Overlay and choose a gradient that goes from dark to a slightly lighter gray while still visible against the black background.



On a new layer create another white rectangle with the rounded rectangle tool that covers the top half of the nav bar.



Using the same technique as the 'download css button' example add a gradient and a bevel effect.



As I write this, diagonal stripes are a popular web design element. I will add some soft stripes to my nav bar. First, you need a pattern that will tile (repeat) and form a perfect stripe effect. I went to stripegenerator.com/ and created the image below.



Now I want to tweak this image a little to match the color scheme of the design. Using the eye dropper tool, I select a color from the header and open the Hue/Saturation box (Hold Ctr>U) and click the 'Colorize' check box and click okay.



Now I want to create a more subtle contrast, so I open the Brightness/Contrast box (Image>Adjustments>Brightness/Contrast) and move the levels to the left (Brightness minus 150 and Contrast minus 50). Click Okay.



Now select the entire canvas of the stripe image (Hold Ctr>A) and define a pattern (Edit>Define Pattern). Give it a name and click okay.



Go back and select the main canvas that we have been designing the site on. Select the layer with the nav bar and duplicate it by dragging it to the new icon layer. Now take this new layer and drag it up one layer so is above the layer that we created the overlapping rectangle on. Take the magic wand tool and click once on the duplicated rectangle to select it.



Double click on the layer and turn off all the layer styles by unchecking them. Open the fill box (Hold Ctr>F5) and select 'Pattern' from the drop down menu and then select the stripped pattern from the 'Custom Pattern' drop down list.



Click okay and turn down the opacity of the layer to about 10%. Keep in mind that people will have their laptop screens at different angles thus creating different contrast effects for the stripped menu. Experiment with opacity and find a happy medium which will work with different screen effects.



With your rulers on (Hold Ctr>R), drag and place guidelines from the ruler to divide up the design into the images that you will use for the web page. You don't want one very large image that will take long to load and you don't want tons of tiny images that make the design of the page too complicated. You can just create some place holder images now to get you started and go back and improve on them later.



Duplicate the entire canvas (Image>Duplicate) and flatten all the layers on the new canvas (Layer>Flatten Image). With the Rectangular Marquee tool, select one area and copy (Hold>Ctr>C). Create a new layer (Hold>Ctr>N) (the new layer will automatically have the correct proportions) and paste (Hold>Ctr>V).





Now you have to optimize the image for the web. Save for web (Hold Ctr>Shift>Alt>S) or File>Save for Web). You will have to experiment for the lowest file size with acceptable quality. For small graphics, sometimes .gifs have a lower files size. This Firefox logo is being saved at about 3K as a .gif. Sometimes jpgs will give you lower file sizes for larger images, but text will become pixilated if the quality is below a certain percentage (65% works well for me on text oriented jpgs). With high speed connections becoming ubiquitous, I'm not as obsessive about file size as I use to be, but small is very important. Create a folder for your project and create a sub folder called images. Save all your images to the images folder.



Now we're done with the design stage for now and we'll move on to creating an actual web page...