Photoshop Design a nice page footer template

This article introduces a page footer of the PS tutorial, the design of the footer is very layered, while using grid space background texture decoration, is a very beautiful page footer

Since the Web2.0 impact on the Internet, the footer has become more important than ever before, and there are many very beautiful footer design. In this tutorial, I will teach you how to create a simple, smooth footer in Photoshop.

Footer

This is the footer we are going to create. Click the screenshot below to view the original image.

1th Step

Like the head and footer of a liquid sense, gradients are usually a sign of web2.0 design style. In this tutorial we will use a set of gradient packages that simulate 3D material. You can get this package from excellent Deziner folio. Click here to download the gradient file package.

2nd Step

Create a new document in Photoshop. I created myself a large file with a 1440 pixel X900 pixel size (to fit my 17-inch display notebook). Of course, your footer shouldn't be that big, although it can be a good way to simulate what happens when your browser window is dragged.

Select a background color, in my case, the background is a simple gradient from #b0b0b0 to #e1e1e1. Hold down the SHIFT key to create a vertical gradient from top to bottom.

3rd Step

What kind of layout you are going to create is very important in web design. That is, the choice is between a streaming layout (which can be adapted to the size of the browser) and a fixed-width layout (where fixed-width layouts are often centered in a web2.0-style web site). Our footer will be a fixed-width layout footer with a size of 760 pixels X420 pixels. This size will ensure that even on a 800-pixel X600 pixel size screen, it will also be displayed correctly.

Use the grid to see the size of your site as shown below. Note If you want to create a layout that fits the size of a 1024 pixel x768 pixel screen, define your grid in 955 pixel X600 pixels.

4th step

Although our footer is fixed width, we still want the footer to fill the entire page. To do this, we'll use a pattern of metal-like material I made in Photoshop. Click here to download this pattern. Open the picture in Photoshop, choose Edit > Definition pattern, and name the pattern.

Now create a new document, 1440 pixel wide, 86 pixel high, select Edit > Fill command, select the pattern we just created. Select All (Ctrl + a), and then cut and paste the picture to the bottom of our first document, and we'll get the following results.

5th step

Now it's time to use the beautiful gradient file package in step 1th. Create a new layer and use the rectangular selection tool (M) to create a 100%-document-wide, 21-pixel-high selection. Select the Gradient tool (G), then select a nice gradient, I choose black 5-gloss, and now hold down the SHIFT key to draw a vertical line inside the rectangular selection to create this gradient.

Move the created shape above the shape you created in step 4th. You should get a similar result to the picture shown in the following figure.

6th step

Now we add a shadow effect to the layer created in step 5th.

7th step

Sets the foreground color to #545557 and the background color to #1e211f. Create a new layer under the layer created in step 4th. Use the selection tool to select the contents of the 4th step layer. Select the Gradient tool, select the first gradient (combination of foreground and background colors), hold down the SHIFT key, and draw a vertical gradient on the selection. Now select the layer in step 4th to change the layer blending mode to multiply.

8th Step

Create a new layer above all layers, and draw a rounded rectangle with a #dfdfdf color in the middle of the guide line. Right click on the layer and click on the blending option to create a projection effect on the rectangle. Then right click on the effect layer and select Create layer, which separates the drop shadow effect into a separate layer.

Now that you have a rectangular layer and a shadow layer, move and change the size of the shadow until you get the effect of the following figure. You can press Ctrl+t to pull up the transform tool, then right-click, select Perspective, and drag the top two handles to the inside. You can also move the shadow to the bottom, wiping the shadow off the top edge using the soft brush's eraser tool.

9th step

Finally add text, copyright information and your logo to complete the design.

10th Step

To use a footer in an HTML file, simply remove the text (text will be added in HTML), cut the background picture as shown in the following illustration, and then paste it into a new file. As in Photoshop, this pattern will be implemented using the background image properties in the CSS file. That's why we cut the picture so small that we can get better results with small files.

To cut a footer you only need to select the contents of the picture within the guide, and then cut and paste it into a new file.

Select Storage > Storage for Web pages and device commands to save both pictures. Then select the JPG format and the appropriate quality. Both the JPG and PNG formats are good formats for storing pictures, and they can save a lot of colors. GIF format is best used for color-simple pictures. This different usage is due to different algorithms.

The final footer

Category:

• PS Getting Started Tutorial