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:
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.
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.
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.
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.
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.
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 7 : 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 8 : 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 9 : 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!
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 8 : 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 9 : 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.
Hope You Like This Tutorial. Send us your Feedback according to your experiment as well.
1 comments:
You have hit the nail! I was once a desperate homemaker not confident enough to stand up to the world. I am a good one though. I can sew, knit, cook, and take tuitions (for my children). But making money out of…I have never dreamt of. One day I came across how to edit photograph,virtual assistant services and that changed my life. I am now selling my teaching skills by recording syllabus for fifth to eighth graders, and people have bought my video. I still cannot believe it. Want to make money like me? Check out www.zopthemes.com too. You can earn for whatever you can do. The sky is the limit.
Post a Comment