This article aims to show you enough of the basic concepts and ideas in modern web design to enable you to build a real, professional quality website with the industry standard tools Photoshop and ImageReady CS2 and Dreamweaver.
There are three main phases involved in web design. Designing, slicing and coding. This involves, respectively, Photoshop, ImageReady and then an HTML editor of some type. We will use Dreamweaver as an example HTML editor.
This article assumes you have basic Photoshop skills. These can be picked up quite quickly either by experimentation or careful study of the help files, whichever works best for you. As we go through, you can refer to my Photoshop file to observe how I've achieved the effects I refer to, or to investigate and study tricks I've covered in less depth in the text (i.e., the reflection effect).
Design
The first place to start is with a blank sheet of paper and a pen. Sketch out the main features you expect on all of the website's pages. For example, if you were designing a website for an estate agent, you might include the following elements on every home page:
- Company logo
- Navigation buttons for main pages (Home, About Us, Contact Us, etc..)
- Main content region
- Footer including copyright notice
Try a few different configurations of layout on paper, and when you have some idea of the shape you want, fire up Photoshop.
It is best to start with an image resolution the same size as the smallest target display you want to support. Typically on the web this will be 800×600. So your design should be a little less than 800 pixels wide and not much taller than around 550 pixels to account for menu bars, etc.
It is very important that you work with the file at 100% zoom (or multiples thereof) else it is impossible to get the design pixel-perfect. So click View -> Actual Pixels and arrange the screen so you can see the whole composition and your tools. You should have a screen which looks like this:
Now you can start transferring the shape of your design from paper into Photoshop. It is very important that you organise your design logically by layers. Here is an example:
- Background – self explanatory, should probably stay white (or very slightly off-white)
- Layer 1 – Background for Logo/Navbar region
- Layer 2 – Background for search box region
- Layer 3 – Background for content region
- Layer 4 – Background for footer
Typically to create such a layer, you should click the "New Layer" icon, then drag a rectangular selection around a region and fill it with the bucket tool. You can then use Ctrl+T (transform) to easily move these boxes around.
Once you have these regions in place, the shape of the site will start to emerge. Have a look at this simple example:
Although this looks boring and grey, a lot of important decisions have already been made. More importantly, it is now easy to experiment with different colours for the background regions.
Colour choices
Choosing your colour scheme is very important at this point. It helps to find a photograph with colours you like and which match with the company logo colours (if appropriate). I've chosen this photo to demonstrate:
As you can see this photograph provides a lot of rich greens to pick from, and a highlight colour of the pink/purple flowers. We will use the colour picker tool in Photoshop to get these out of the image and drop them onto the layout with the fill tool:
Note that we have stuck to different shades of the base colour for this layout, all chosen from the photograph and then manipulated in terms of lightness/saturation using the colour editor (just click on the top left colour box on the toolbar).
One of the web's favourite effects is displayed here – the subtle use of drop shadows. Used carefully these can provide a feeling of depth to an otherwise flat site. To add a drop effect to a layer, right click on it and select Blending Options. Then play with the dialog which appears to find a good combination of values, but try to keep it subtle.
Now we pick the highlight colours and start filling in the logo and navigation bar entries. Again, careful uses of named layers and layer groups will make your life a lot easier as the design gets more complex:
Very quickly, the site starts to take shape. Judicious use of layer blending effects adds very subtle touches which really add to the "not flat" feel of the design. Gradients in the backgrounds of the navigation bar buttons makes them feel more "button-like", and a 1px dark green outline on all the text helps make it stand out from the lighter green background.
This will suffice for the basic layout across all pages on the site. You should save this file now as "Site template.psd" or similar, so that you can work from it when designing the remaining layouts. I'll add a few more elements now which are specific to the homepage:
Now we can move to the second stage: slicing. Stay tuned for the next article.
Digital Crocus is an ideal environment in which to get started with web design. Our friendly Control Panel lets you upload files with Dreamweaver or your FTP client or choice, or edit them in-situ for ultimate flexibility. Check out our great low cost hosting packages.
