Creating a website banner with a logo using Photoshop

Simple step-by-step tutorial on how to create a web site banner and logo in Photoshop. The sample .psd and completed website are also included.

Let's start with our banner.

Follow the below steps to create the above website banner :

Step 1 : Creating the banner size
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.

Step 2: Giving the background color
Create a new layer. Name it bgcolor. Give a background color by doing the following:

• Change the foreground color.
• Click on the Paint Bucket Tool seen in the tools panel on the right.
• Click on the canvas with your mouse. Your background color is now changed to the new color.

Step 3 : Giving the inside background color
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 using the paint bucket tool.

Step 4 : Creating the logo background
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.

Step 5 : Creating a logo using the custom shape tool
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.

Step 6 : Creating the vertical lines in the banner
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. Make four copies of the layer band.

Step 7 : Creating the dashed lines
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.

Step 8 : Adding your Company Name
With the text tool type your company name or website name with the color.


"Your website banner with the logo is ready"