Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Photoshop Tutorials > Website banner with a logo  


New Photoshop Tutorials

Image Effects

Text Effects

Designing

Others

Free Photoshop Resources

Photoshop Tutorials from our Blog

Other Photoshop Tutorials

Other Photoshop Resources

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!

An example of a layout that you can create with this header is shown below. Click here to view the website. Download the website files here.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

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.


best psd templates

Free HTML5 Website

Latest Photoshop Tutorials & Resources

Create a Polaroid Photo Collage Using Photoshop CS6

How to Create a Polaroid Photo Collage Using Photoshop CS6

Dazzling Photo Effect Templates in Photoshop

dazzling photo effect templates in photoshop

Create a Fantasy Photo Manipulation in Photoshop

Create a Fantasy Photo Manipulation in Photoshop

Learn how to create a circular photo collage in Photoshop

Learn how to create a circular photo collage in Photoshop

100 Stunning Photoshop Text Effects & Styles

Stunning Photoshop Text Effects & Styles

Vintage Image Effect in Photoshop

Learn How to Create a Cool Vintage Effect in Photoshop

Create a Print Ready Business Card in Photoshop

http://blog.entheosweb.com/tutorials/learn-how-to-create-a-print-ready-business-card-in-photoshop

Amazing Collage Templates in Photoshop

Amazing Collage Templates in Photoshop

 

Featured Template
Template # 55171
Type: Landing Page Template
Price: $14