Using Photoshop to design a beautiful footer template This paper introduces a PS tutorial for making footers. The footer has a layered design and is decorated with grid space background texture, which is a very beautiful footer.
Since Web2.0 landed on the Internet, the footer has become more important than ever, and many very beautiful footer designs have appeared. In this tutorial, I will teach you how to create a simple and smooth website footer in Photoshop.
page footer
This is the footer we will create. Click the screenshot below to view the original picture.
Step 1
Like liquid headers and footers, gradients are usually a sign of web2.0 design style. In this tutorial, we will use a set of gradient packages that simulate 3D materials. You can get this package from a superior dealer. Click here to download the gradient file package.
Second step
Create a new document in Photoshop. I created a large file with the size of 1440 pixels X900 pixels (suitable for my notebook 17 inch monitor). Of course, in fact, your footer should not be that big, although it can well simulate the situation when your browser window is dragged.
Select the background color. In my example, the background color is a simple gradient from #b0b0b0 to #e 1e 1e 1. Hold down the Shift key to create a vertical gradient from top to bottom.
Third step
In web design, what layout you will create is very important. That is, choose between streaming layout (layout that can adapt to the size of the browser) and fixed-width layout (fixed-width layout is often centered in web2.0-style websites). Our footer will be a fixed width layout footer with a size of 760 pixels X420 pixels. This size will ensure correct display even on a screen with 800 pixels by 600 pixels.
Use the grid to determine the size of the website, as shown below. Please note that if you want to create a layout that fits the screen size of 1024 pixels x768 pixels, please define your grid in the area of 955 pixels X600 pixels.
Fourth step
Although our footer has a fixed width, we still hope that the footer can fill the whole page. In order to achieve this goal, we will use the imitation metal pattern I made in Photoshop. Click here to download this mode. Open this picture in Photoshop, select Edit to define the pattern and give it a name.
Now create a new document, 1440 pixels wide and 86 pixels high. Select the Edit Fill command, and then 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 will get the following results.
Step five
Now it's time to use the beautiful gradient file package in step 1 Create a new layer and use the Rectangular Selection Tool (M) to create a selection with a file width of 100% and a height of 2 1 pixel. Select the Gradient Tool (G), and then select a beautiful gradient. I chose "Black 5 Gloss". Now hold down the Shift key and draw a vertical line in the rectangular selection to create this gradient.
Move the created shape above the shape created in step 4. You should get a result similar to the one below.
Step 6
Now let's add a shadow effect to the layer created in step 5.
Step 7
Set the foreground color to #545557 and the background color to #1E211f. Create a new layer under the layer created in step 4. In step 4, use the selection tool to select the content of the layer. Select the gradient tool, select the first gradient (the combination of foreground color and background color), hold down the shift key, and draw a vertical gradient on the selection. Now select the layer in step 4, and change the layer blending mode to positive overlay.
Step 8
Create a new layer on top of all layers, and draw a rounded rectangle with the color #dfdfdf in the middle of the reference line. Right-click the layer and click Blending Options to create a projection effect for the rectangle. Then right-click the effect layer and select Create Layer, which will separate the projection 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 shown below. You can press Ctrl+T to bring up the transformation tool, then right-click, select Perspective, and drag the top two handles inward. You can also move the shadow down and use the eraser tool and soft brush to erase the shadow on the upper edge.
Step 9
Finally, add text, copyright information and your logo to complete the design.
Step 10
To use a footer in an html file, just delete the text (the text will be added to the html), cut the background picture as shown below, and then paste it into a new file. Just like in Photoshop, this pattern will be realized by using the background image attribute in CSS file. This is why we have to cut the picture into such a small size, in order to get better results with small files.
To cut the footer, just select the contents of the picture in the guide line, then cut and paste it into a new file.
Choose the Save As Web Page and Device command to save these two pictures. Then choose JPG format and appropriate quality. JPG format and PNG format are both good formats for storing pictures, which can save many colors. GIF format is most suitable for pictures with simple colors. This different usage is due to different algorithms.
Final footer
How to make a webpage template with PS? After designing a size, just design the content directly. Be careful not to merge any layers. Words can be replaced by some common words.
After all, it is saved in PSD and JPEG format. The former is a template and the latter is an online preview!