Simple step-by-step tutorial on how to create a website banner and logo in Photoshop. The sample .psd and completed website are also included.
A banner or a header is a graphic that is found at the top of a website which usually displays the company name and the logo. It is often the first thing a person sees when they open the website. The blending of colors should be attractive, informative, comfortable for the eye and help to convince the viewer to stay on your site.
Let’s start with our banner. Here we have a general banner and the colors used are soothing to the eyes. It can be used for a fashion and beauty banner or a personal or holiday banner as well.
Follow the below steps to create the above website banner :
Open a new file by clicking on File>Open. Make the file size width of 780px and height of 120px. You can go till 140px for the height. You can make a banner flexible according to your design.
Create a new layer. Name it bgcolor. Give a background color by doing the following:
Create a new layer. Name it insidecolor.
Select Rectangular Marquee Tool seen in the tools panel on the right. Make the rectangle size width of 760px and height of 100px inside the background. Fill it with color # C64866 using the paint bucket tool.
Create a new layer. Name it logobkg. Select Rectangular Marquee Tool. Make the rectangle size width of 120px and height of 100px. Put the rectangle in the left side of the banner. Fill it with black color # 000000.
Create a new layer. Name it logo.
Choose the custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Ornaments. Look for the ornament which is in the banner.
Drag it in the logo space and position it so it comes in the middle of the logo background. Now you have a temporary ornament as a logo which can be replaced with your company logo if needed.
Create a new layer. Name it band. Select Rectangular Marquee Tool. Make the rectangle size width of 7px and height of 120px. Put the rectangle in the middle of the banner. Fill it with color # E8B0BD. Make four copies of the layer band.
To make a copy, right click on the layer and click on duplicate. A screen named Duplicate Layer will appear.
Enter name of the layer as band copy. Click on OK. Do the same with band copy2, band copy3, band copy4. Place the bands properly in the banner.
Create a new layer. Name it border. Select Rectangular Marquee Tool. Make the rectangle size width of 20px and height of 100px. Fill it with color # A63D56. Put the rectangle on the right of the logo background. Make a copy and place the new rectangle on the left of the logo background.
Now select the Horizontal Type Tool (text tool). Type” _________” using the hyphen key. Place it on the top of the banner. Make a copy, right click on the layer and click on duplicate. Place it at the bottom of the banner.
With the text tool type your company name or website name with the color # FCF3E5.
Congratulations! Your website banner with the logo is ready!
An example of a layout that you can create with this header is shown here. Download the website files here.
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.
