Designing a simple website banner with a logo using Photoshop

Designing a simple 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.

A banner or a header is a graphic that is found at the top of a web site 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 :

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 to #E4D1B8.
• 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 # C64866 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 # 000000.

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 # 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.

Step 8 : Creating the Logo Border
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.

Step 9 : 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 10 : Adding your Company Name
With the text tool type your company name or website name with the color # FCF3E5.

Congratulations! Your website banner with the logo is ready!

Tags :-
Photoshop 8 , Photoshop 7 trick , trick for Photoshop CS6 , photoshop PNG , Png Images , image png , png , transparent images , transparent png , psd , psd image , png free , download png , png for free , png blogspot , png photoshop , photoshop png images , images for photoshop , cs5 trick , photoshop tricks , photoshop tricks , photoshop background , photoshop psd , photoshop cs5, photoshop cs5 trick,

Request:-Please give your valuable feedback to comment or 2 Min to share this post if you kind person.