Free Web Design Tutorial

2012-06-06T09:45:00.001-07:00

Part 1

Many people have told me that they wish that they could design web sites. So I thought I'd create this tutorial, since there doesn't seem to be too many free courses online that teach both the graphic design skills and HTML and CSS necessary for creating web pages.

I would like to outline (not a good word for right brained people like me) a workflow (?) for creating a web page using my home page as an example and Windows as the operating system (Mac users will have to find alternate keyboard shortcuts). Since I am a self taught designer, I'm not sure how unconventional my methods will seem, but hope this will be helpful. As you know, technology quickly becomes obsolete, so may the expiration date on this project live long and prosper...

Adobe® Photoshop® is the industry standard for digital imaging. Since the web is a low res (72 dpi) graphics experience, the images that you create will not not need the kind of quality as print media. With photoshop, you can create RGB raster images, which basically means they're quick and easy to work with. The tiny file sizes are perfect for the web. If you ever want to use them for anything else, like a magazine ad, you'll find that the quality is not good enough (You may want to use Adobe InDesign® or Illustrator® for print media).

The types of files we will use are jpgs and gifs. Png files are the best, but we'll have to wait until everyone stops using old web browsers. I use png files all the time with Flash projects because of the transparent effect in animations.

I don't know which version of Photoshop you have, so you'll have to at least play around with it for a few hours to find out how the layers link together and other basics.

First, I'll start off with a blank canvas. Because computer screen resolutions are becoming increasingly wide, very few people still have their displays set to 800x600 to surf the web. I'll start with 1000x800 pixels, because that is a comfortable size for me to work within Photoshop and it will allow me to create a site that is a good size.

Select black (#000000) in your foreground color and then hold down Alt>Delete to fill the canvas with black as your background color. You can create gradient and textured backgrounds that tile, but here we're just using solid black.

Create a new layer. Make sure that your rulers are set (View menu>Rulers). With your selection tool create a rectangle that is 880x190 pixels. You can tell the height and width by looking at the Info palette in the windows menu as you're creating the rectangle. Select a color in your foreground color picker and then hold down Alt>Delete to fill the rectangle with color. I used orange for visibility. Drag and drop vertical guide lines from the ruler area to the dotted lines of the selection rectangle. Hold Down Control>Delete to deselect the rectangle.

I double click on the current layer to open the Layer Style box and check the Gradient Overlay checkbox and click on the words 'Gradient Overlay' to toggle to the gradient options. I click once on the color strip to open the Gradient Editor. Double click on the bottom left color stop and choose #a6d0ff. I double click on the bottom right color stop and choose #7588ff and click okay on all open dialogue boxes. Remember to save as often as possible.

I create a new layer. We're going to create a series of radiating triangles that I like to call a 'burst'. First, hold down the rectangle tool in the tool bar until you see a menu appear. Select the 'custom shape tool'. In the tool options click on shape and select a triangle. If you don't see a triangle, click on the small arrow in a circle toward the right of the box and choose 'shapes' from the drop down menu.

Choose white (#ffffff) as with your foreground color picker. Turn off layer 2 (the one that has the rectangle) by clicking on the eye. Make sure that layer 3 is selected and draw a white rectangle about 100x100 pixels. Hold down Control>T to transform the triangle. Grab the top anchor and stretch it. Then hold the shift key and the lower right anchor to scale it down to about 70x350 pixels.

Then hold the shift key and the lower right anchor to stretch it to about 70x350 pixels. Duplicate the layer and transform this triangle also. This time move the center point to the anchor at the tip of the arrow and rotate the entire triangle so that the second triangle tip stays in the same place and the base of the triangle begins to form a circle of triangles. Remember, the center point has to be moved to the anchor at the tip for this to work. When you are rotating you'll see the rotation symbol when you mouse is just off an anchor.

How to design an HTML and CSS web site using Adobe Photoshop and Dreamweaver

Free Web Design Tutorial