Anyone who is familiar with website development knows that you usually don't start with the HTML structure. Instead, you take a graphics program and build the layout of the page there. (If you work in an agency, the layout is supplied by the graphic designer or the customer). The task is then to build the page from this layout. This is exactly what we are going to talk about now.
In connection with rebuilding layouts, you will often come across the terms slicing and dicing. These terms actually mean nothing more than taking the template or design, cutting it up in your graphics program and then putting it back together again using HTML.
The right graphics program
Well, everyone has their own preferences as to which software they prefer to use. This also applies to graphics programs, of course. In the context of professional web design, however, things look a little different. Here, Photoshop is used almost exclusively. In fact, most design drafts are available as PSD files. And it is precisely this PSD format that cannot be opened or even edited in all programs.
If you don't have Photoshop, you're not completely lost. GIMP is a possible alternative. You can download the program for free from http://www.gimp.org/. I will show you the basic steps for creating a layout using GIMP. However, this also works in a similar way in Photoshop.
Create your own layout
First of all, think about the basic design aspects:
- How wide should the layout be?
- How many columns should it contain?
Then create the workspace via File>New and set the size. Although the layout I have created will be "page-filling", the actual content only has a width of 1000 pixels. I set the layout height to 887 pixels. (Although the height of the website will later be based on the content anyway).
The settings are confirmed with OK. The workspace is now available and can be filled with content. (For the sake of clarity, I work with a gray background in the design. This will not be visible later on the website).
A typical element that belongs on the website is the logo, which is usually available as a graphic. To insert it into the layout, go to File>Open and select your logo, which should be in one of the formats PNG, GIF or JPEG. Confirm the selection with Open. Now press Ctrl+C to copy the logo to the clipboard. Then switch to the actual web design and press Ctrl+V. The pasted logo will not yet be in the desired position. However, you can easily move it to the correct position using the move tool.
If the image cannot be moved, you must first activate the layer. You can find the corresponding settings under Window>Dockabledialogs>Layers.
For a better layout, you should show guide lines. To do this, click on the ruler with the mouse button and drag it to the desired position while holding down the left mouse button.
This allows you to draw as many guidelines as you like to align the elements of the website.
Now create another layer. This layer should contain the top menu.
You could give it the name Top menu. Create the layer with OK. Call up the selection rectangle and drag the area into which the navigation should be inserted.
In the current example, I assume that the background of the top menu will have a color gradient. To do this, I click on Gradient: Selection with a color gradient (fill).
The gradient should run from gray to black. The corresponding colors can be set using the color fields. I set the gradient type to VG to HG, so it runs from the foreground to the background color. Now hold down the Ctrl keyand draw a line from top to bottom in the selected area. After releasing the left mouse button, the area has the desired color gradient.
In principle, you now have two options:
- You can leave the navigation area as it is.
- You can insert the individual menu items so that you can see exactly which fonts etc. you are using in the design.
Which of these two options you choose is ultimately up to you, of course. However, if you want to present the layout to your customers, for example, I would definitely advise you to include the menu items. Experience has shown that many customers lack imagination here.
First of all, you should select a font. In GIMP, you can find the corresponding settings under Window>Dockable dialogs>Fonts.
In the course of this series, we have already discussed font issues in connection with CSS and HTML. Ultimately, as a web designer, you can theoretically specify any font you like. However, you do not know whether this font actually exists on the computer of the site visitor and can therefore be displayed. It is therefore difficult to check the results, especially if you use very exotic fonts. However, I will return to this aspect in the course of this series when it comes to the fonts of the example website. For the current layout, I have chosen the following settings:
- Verdana bold
- 20 pixels
- White font color
You can now insert the individual menu items in this way. The best way to do this is to copy the layer containing the first menu item and paste it as a new layer. You can then adjust the text on the layer. Create the top menu in this way.
The top menu should have a hover effect. If you move the mouse pointer over the individual menu items, their background color will change. This aspect should of course also be visualized in the design. To do this, set the desired hover color and copy one of the existing menu layers. Assign the color to this layer. In the current example, I am assuming a blue color gradient. The text of the menu item is then inserted. This gives you a feel for what the menu will look like in the end.
