Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Web design with Photoshop part 2/10 – Banner

Saturday, January 16th, 2016 by Servage

photoshopIn this tutorial you will learn how to create a banner in the PSD template we previously started. The banner is the large eye catcher at the top of the page below the header. For this, start by selecting the rectangle tool and draw a layer with a resolution of 1600 by 540 pixels, and place it below the header section. You can select the move tool for moving the layer. Since many different layers will be placed on the header section, it would be best for you to darken the color of the layer. By doing so it will be completely visible.

Please see the screenshot given below for better understanding of the placements. The different elements are described below.


Select the rectangle tool again and draw another layer on the banner. The resolution for the layer will be smaller and this will be used for the contact form. For this banner, keep the resolution of this layer to 460 by 300 pixels and place it in the center bottom of the banner. Use the grid lines for proper placement of the contact form layer. Press ctrl and semicolon to make the grid lines appear. Change the color of this layer to white so that it can be clearly differentiable. For doing, so go to the upper left section of Photoshop and change the color of fill to white.

Now the heading of the website will be added below the navigation bar. For this, select the text tool. For this heading we use the Museo font and set the size of the font to 48 pixels. The color of the headline is white. Now select this text layer and move it to the top of the background layer. When done, press shift and down key 4 times to create a distance of 40 pixels from the top. You can also add a drop shadow effect to the heading of the website. For this right click on the heading layer and click on the drop shadow effect at the bottom. You can give 70% opacity and the color of the shadow is black and the angle is 90 degrees. Distance of the shadow is 2px and size of the shadow is 5px.

Now we will add a tag line below the banner title. Select the text tool and write a catchphrase below the heading. Again the Museo font is used here and the size of the font is set to 18 pixels with white color. Select the tag line layer and place it just below the headline of the website. Press shift plus down key 3 or 4 times to create a distance of 30 or 40 pixels. You can experiment and give other effects to the tagline as wanted. With this, the banner section is complete.

Web design with Photoshop part 2/10 - Banner, 4.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.