Web Design

This section will tell you a little bit about the tools for designing websites. I’m going to go through how I made the design for the site I sliced up in the html tutorial on building a website. Don’t want to read the whole thing? Watch the video here

First, I start out with a blank page. Rather than using the paint bucket tool to fill in the background, I’m going to use the rectangle tool to just draw a rectangle for the background. I do that so I can easily change the background color any time I want or add effects for creating textures in the background.

Now, I want to make a rectangle for my content. Now I’ll duplicate that rectangle and make the new rectangle slightly smaller so I can put a gradient on the original one so we can have a chrome effect on the text box. now, with the back rectangle, I’m going to make a glow. The way you do that is you right-click the layer and choose Blending options the blending options are very powerful and useful, you want to familiarize yourself with the capabilities here. so I’m going to select outer glow and adjust the size to my liking.

now that I have the text box, I’ll get out the line tool and use it to make separators for my content. Using the line tool, I’ll hold shift down so my lines are perfectly straight, I’ll draw a line for my heading and for my flash menu.

Now I’ll make a website heading title bar. Because this is a photography website for a female client, I’ll use a classy script font. Great Northwest Portraits or GNWPortraits.com for my title bar. Now, I’ll change the color of Great Northwest to a nice blue color.

Now for some of the body content of the website. I’ll make a page title with the same blue, and then a block title in the same blue using small caps. Now I’ll just write some funky filler text so I can see what the text will look like on the page.

I already know how I want my flash menu to work, so I’ll just throw the pictures in there for that and I’m done. As I put the pictures in, I’ll use the align tools in the properties tab to line them up correctly and I’ll add a stroke and drop shadow with the blending options.

This whole tutorial can be watched. Watch the tutorial here!