| Photoshop Tutorials » Web » Header |
15. The last thing we need to do is create a navigation menu for our newly created header. I placed the following layers under my rounded rectangle layer so i could have some run off. Go ahead and use your rectangle marquee tool to make a selection similar to the following and fill it with #FFFFFF
Step three: Now below all your current designs applied to your header add a 1000 x 30 pixels, #006C92 rectangle across your canvas.
At this point the layout is pretty much done, just continue to refine and add some details. Here's how mine ended up looking after adding a little content, and a "Tech" image.
Step 3: Now select the Horizontal Type Tool then set the font family to Arial, bold, 28 pt, strong and white color shade. In a new text layer type your website name on the left side of the header design.
27. The last thing we want to do is to add a little 'glow' to give our header some slight perspective. To do so pull out your elliptical marquee tool. set the feather to about 20px and make a selection similar to the following:
1 Make a stack of game coins for playing| Free photoshop tutorials| easy tips techniques lesson | Free Photoshop cs suite tutorials // Oct 26, 2007 at 6:50 am
20. Now we're going to make the Navigation bar at the bottom of the header. Create a new layer and select the Rectangular Marquee Tool with a fixed size of 700px * 40px, place your selection at the bottom and fill it with #oooooo
Double click to open layer style window, enable inner shadow. Use settings as shown. This will create boundaries of the header.
Select the 'Pen Tool' as your active tool at hand. You will now create another curved shape which looks very much like the first curved shaped, but with its edges outside the area of the first curved shape. So, you could place the first anchor point on the same position as the first anchor point of the 'Curve1' layer, and then place the second anchor point a little bit higher than the second anchor point of the 'Curve1' layer. You will do the same with the third anchor point as with the second one, and then off course the fourth anchor point will be on the exact same position as the fourth one from the 'Curve1' layer. The fifth, sixth and last anchor point of the new shape will also be the same as that of the 'Curve1' layer.
I started Web Design 5 years ago, and I now make a substantial monthly income each and every month, and so can you.
Right click on the button that you applied the layer styles to, and copy layer styles. Paste the layer style onto each button. Optionally, you can reduce the opacity of your button layers to around 65% like I have in my example. I put text for each button in the gears of war font, with a drop shadow (distance 1, size 0) to make it look a little bit more like the real gears of war font.
The first step is to make a new image in photoshop , i recommend 600 x 150 pixels big, reset your foreground and background colors , or change them to what colors you want them to be! , i choose blue and white in the example of this tutorial.
This part of the header design tutorial is optional and it's up to you if you want to include it or not.
Now I went on Google and found a picture of Qualcomm Stadium which is the stadium that the Chargers play on, to use it as a faded background. This is the picture.
Now pull out your rectangular marquee tool, which is located on the very top left of your toolbar. Create a new layer by going to (Layer - New - Layer). Select a small portion of the bottom of the header and then goto (Select - Modify - Smooth) by FIVE pixels. You should now have a smooth curved rectangle on the very bottom of your image. Select the gradient tool and use #fae402 as your foreground colour, and #fbc301 as your background colour. Fill in the selection the same way as you did with the background. I also added a SLIGHT Inner Shadow to the layer, with the default settings with the opacity down to 10%.
Right click on the button that you applied the layer styles to, and copy layer styles. Paste the layer style onto each button. Optionally, you can reduce the opacity of your button layers to around 65% like I have in my example. I put text for each button in the gears of war font, with a drop shadow (distance 1, size 0) to make it look a little bit more like the real gears of war font.
Now add the rest of your navigation links with its own tab design. Then add a tab for your website name stretched all the way to the left end of the header.
Start with a 800 x 127 pixels white canvas, in your layers window make a new layer set and name it Web 2.0 Header. Create a new layer, Choose your Rectangle Tool and draw a 800 x 87 pixels, #D4FFFD colored rectangle.
Click here and download content as you will need these for the rest. Ok create new layer and select the image which is in the tutorial image below and scale it to fit.
3. Create another new layer and using the Rectangular Marquee Tool, make a selection like below (leave a 1px space between the other layer):
1. Get a picture with angels or any other picture you like. I've choose this one. I like angels and this one with a little work in Photoshop will look great.
8. And the last step is to add some title to our header and we are done. Mine looks just like this.
Now you just need to slap on your company logo, and any other header information onto the piece and it's good. I've refined this version slightly as you can see. Have fun and enjoy!
Drag from the bottom of the selection to the top. Make sure the opacity is 30. Now click ctrl then your header layer. Go to select - Inverse. Then click delete. You should now have something like this:
In honor of Valentine's Day - I wanted to offer a photoshop tutorial on making a cute and girly - love heart header.
Create two white lines vertically as shown that will serve as divider between three portions of the navigational header. We'll use one portion for the logo, second one for the buttons and last one for the image.
If you're designing a header for a business website or anything else that requires a professional look you'll want to obtain something that doesn't look poor nor overloaded.
2. Select a nice dark color with a dark gray, I chose (B01717) for my dark color and (3F3F3F) for my dark gray. Now create a new layer and select the gradient tool with these settings.
Next, select the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 5 pixels and color White. Name this layer "Tab". This layer will be beneath the "Menu" layer in the Layers Palette".
Once you have sliced the header, go to File>Save for Web. Click Save. Then under File format, choose HTML and Images. Then open your .html file. The code should look something like this.
Press m and do a small thin line across the top, start a new layer and call it topborder. choose the colour #027b08 as the background colour and press ctrl and the backspace button. Now under that do a bigger rectangle and choose the colour #ffffff as your background colour and start a new layer called menutab and press ctrl and backspace again. now click layer style and goto gradient, use the gradientcolours #66c90d to the left and #a5d51e to the right and make sure it is reversed. now do a new layer and name it headerbot and press m and do a small rectangle as shown across the bottom and press ctrl and backspace again, go to layer style/graduants/ left colour is #252525 and the right is#545353.
15. Give your new document a black border using the "splatter 59" brush. Make it go toward the middle pretty far, but not so far that you can't fit large readable text without it touching the walls. Also, don't make it too dense. You should rarely see fully black patches. You can also use the sides of the grunge word brush you finished at step 12.
5. Create another new layer and make a selection at the bottom of your header using your rectangular marquee tool with a heigth of 35 pixels! Fill it with any color using your paint bucket and copy the layer style of your previously created layer and paste it on the one we've just made like shown in this second picture�
1. Start with your new document and Create a New layer. Select Rectangular Marquee tool and create a big header .
6. We now need to change the opacity of the lines, so it blends into the header more, do this by clicking layers > and change the opacity to 5%-10%.
At some Text to the header/Navigation bar and your done! Here is how mine turned out after I added some text in the logo area, and finished up my menu down below. You can really customize this menu and use it in a lot of different places. If you need help with this tutorial don't forget to stop by our forums!
Select all layers and from layer palette select New group from Selection. This will place all layers we created till now in one group. Make sure you leave background layers and big corner bolts outside the header.
17. Now i'll go back to my main header box. And be creative with it. Such as rounding a corner, blending images. etc...
5. Now, with your shape tool (shortcut: U) and your foreground colour set to white : make little stars all over your image. We don't need them over lapping though, try and get some variations in sizes.... you can then set your blending options again to overlay.
This tutorial with guide you through how to make a header bar for your website and is only limited by your imagination:
2. Time to give it more of a PHP Nuke style. Time to grab your polygonal lasso and draw a shape that resembles the following:
8. Next we want to add a simple text logo onto our header. To do so switch to your text tool and put whatever you would like in the following area
We are now going to draw the Skyline Silhouette on the top of the canvas ... ( I chose London Bridge)
And there you have it Ladies and Gentlemen, a finished Header and Navigation Bar, smooth and sexy style. Final image is below:
4. We will now create a speech bubble that will go off of the Blog link. Create a new layer then select the Rectangular Marquee Tool. Create a selection for the main part of the bubble. After creating the selection, DO NOT fill it in just now. Instead go to Select > Modify > Smooth. Use a setting of 2-3 px or more and click OK. Next select the Polygonal Lasso Tool. Make sure that the second icon in the tool options bar (Add to selection) is selected. Create the selection and fill it in black as shown below.
25. The last step is to create a search field. Since this is for a video site, we want to make our search field distinct. So using your rectangle marquee tool make a selection similar to the following and fill it with #FFFFFF
Fill the rectangle using the paint bucket with this color #c6c6c6. Now right click on the Header2 layer, click Blending Options and add the settings below.
The most important graphical element of any website is its header image. It's the image that will be seen more than any other on your web site, so it's important to get it looking good.
Create new 770x200 px document and fill it with #aac8da color. This will be our future Hosting Company header space. Now we have to find good image for our future work. Good place with lots of nice images is sxc.hu. I've picked this image: http://www.sxc.hu/photo/202295 (You have to register but it's FREE and realy worth of it). Place this image on New Layer and using Free Transform (Ctrl + T) (holding Shift for proportions) place it like on image bellow.
[�] great blog design just try and avoid to many of these� Photoshop Tutorial - Web 2.0 Header with Stripes - freeyourdesign.com The web is full of them and people just chew them up, recycle them and post them up again just to [�]
Select your Horizontal Type Tool, above your screen under the options palette set the font family to Arial, bold, 30 pt, strong and white color shade. In a new text layer type your website name on the header space.
This tutorial gives an example of how to use Adobe Photoshop to make a graphical header image for your web page, that has some button functionality too.
4. In the layers panel double click the header graphic layer to get to the layers style panel, and give it settings as shown below.
@carlo: I have a div tag for the header of PSDLounge where the height is the height of the banner and the background is the repeating part of the header (the gradient - no brushes or text). Then in that div I have the image of the banner (not repeated). Check out my source code and style sheet to have a closer look.
Copyright � 2002-2006, tutorialwiz.com | All Rights Reserved. All tutorials (unless otherwise stated) are the property of tutorialwiz.com. You may not re-distribute, reproduce any portion of this website and or it's contents without the prior express written consent of tutorialwiz.com
1. Open up a blank canvas by pressing on your keyboard Ctrl+N. select a size you want your overall website to be. mines is 750x600.
95. Web page header
Advertise with us
E-mail (will not be published) (required)
In this tutorial I will teach you how to create the header above.
Advertise with us
Ctrl+Click to get the selection. Contract the selection by 2 pixels. Create a new layer. Apply Black to white gradient.
Mail (will not be published) (required)
1. Start by opening a new 700*150px file 2. Select the Rectangular Marquee Tool and set a fixed size of 700*20px
