Web 2.0 style footer

As Web 2.0 conquered the Internet, the bottom of the page, the so-called Footer, became more important than before.
This tutorial shows how to make a stylish Footer (Footer – duplicating the main menu at the bottom of the site, usually with the coordinates of the manufacturer and Copyright.) For the site in Photoshop.

The image represents what we will create. Click on the image below to see the image in full screen:

Materials for the lesson:



Step 1. A characteristic feature of the Web 2.0 style are vague colors, gradients.
To create our bottom, we will use a collection of gradients, with which you can get a beautiful appearance. Gradient Collection can be taken in the archive

Step 2. Open a new file in Photoshop. The author has created an image of large size – 1440x900px. This is not an indication that your dimensions should be the same, but it gives an idea of ​​when the browser window is stretched.
Select a background color; in the case of Author, the choice for the background is a simple gradient with # b0b0b0 and # e1e1e1. Hold SHIFT and drag the gradient from the top to the bottom of the layer.

Step 3. In web design it is very important to represent what we want to achieve.
That is, the choice between a floating scheme (which is not repeated in the browser) or
permanent (in many Web 2.0-style sites, the elements are fixed, and, as a rule, are located in the center). In our case, we will work with a fixed 760x420px format. This ensures that even on an 800x600px screen, our image will be displayed correctly.
We will use the guides to see the boundaries of the created site.
If you want your creation to display correctly at a resolution of 1024×768 pixels, then you should place the guides so that they outline an area of ​​995×600 px.

Step 4. The bottom footer is a fixed width, but this means that the rest of the area will be empty.
For this we will use the pattern made by the author of the lesson in Photoshop,
which mimics a metal plate.
Open the image in Photoshop and go Edit> Define Pattern (Edit> Define Pattern) and select a name for it.

Now open the new 1440x86px file, and go Editing> Run Fill (Edit> Fill) and select the pattern that you just defined. Select all (CTRL + A), and then cut and paste the image into the bottom of the first document.
You will get the result shown below.

Step 5. Now it’s time to use a set of gradients (Step 1).
Create a new layer and create a rectangle using Tool Rectangular Area (Marquee Tool (M)), 100% of the document width and 21px in height.
Now select Gradient tool (Gradient Tool (G)) and select a cool shade gradient. The author chose “Black5 – Gloss” from the gradient package.
Drag the gradient vertically above the selection while holding “SHIFT” to provide a vertical direction.

Now move the resulting layer to the top of the form created in step 4. You should have something similar to what is shown in the screenshot.

Step 6. Now we will add a shadow effect to the layer that was created in step 5.

Step 7. Now set the foreground color to # 545557 and the background color to # 1e211f.
Create a new layer below the layer created in step 4. Using the tool Rectangular area (Marquee Tool (M)). Select the content of the layer created in step 4. Select Gradient (Gradient Tool (G))), select the first gradient (combination of foreground and background colors).
Draw a vertical gradient. Now go to the layer created in step 4 and set the layer blending mode to Multiplication (Multiply).

Step 8. Now create a new layer on top of all the other layers and draw a rectangle with rounded corners between our guides, choosing the color #dfdfdf. Right-click on the layer, select Overlay options (Blending Options), then create a shadow for the rectangle.
Then right-click on the effect layer and select “Create Layer”.
This will create a shadow on a separate layer.

Now that you have a rectangle layer and a shadow layer, move and resize the shadow to get the result, as shown below.
You can press CTRL-T to use Free transformation, then select item Perspective, and then drag the texture. Also you can move the shadow down and soft Eraser erase the top edges.

Step 9. To complete the design, add some text, copyright information and your logo.

Step 10. Our Footer is ready for use in HTML, just delete the text (the text will be added to HTML), merge the layers, cut the Footer from the background and paste it into a new document.

In the CSS document, you will not work with the footer in the size in which it is now created. In fact, for the subsequent work in the CSS document, you need only a small section of the created footer. This is all in order to improve image loading performance.

Select a small section of the created image in the middle of the footer between the guides, cut it out and paste it into a new document.
To save the file, use Save> Save for Web, Select JPG with the appropriate quality options.
JPG and PNG files are well suited for images with many gradations of color.
GIF images are better in areas of uniform color. This is due to the algorithms for constructing each image.

So you made a beautiful element of the site page!

Like this post? Please share to your friends: