We will learn in this Adobe Photoshop how to create a web page header. 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. 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. This can also be implemented to Adobe Photoshop CS2.

Open Adobe Photoshop and make a new image. Set the image's width to the width you'd like your header to be on your web page. Hold down on the Pen tool, and select Freeform Pen. Draw a small line. (Make sure you have the "Paths" option at the top left of the screen selected.) You can hold down Ctrl and drag the points around, or you can manipulate a single point by dragging its "arms". Remember to always hold down Ctrl while you do it.

137.jpg

Use curves liberally in your web pages. A number of factors, including the easy use of tables, have made modern web design very straight-edged. By using curves in your pages, you can give your page a much more organic feel.

25.jpg

Hold down Ctrl and drag one point to each side of your image. Drag the arms away from the points to make the curves more gradual. To see outside the canvas, you may need to maximize the window you're working in, or zoom out (Ctrl -).
It's important that you form a whole shape with the Freeform Pen tool. Simply creating a line isn't enough. Without pressing Ctrl, click on the line just next to the leftmost point. This will create a new point. You can then drag the leftmost point up above the top of the image as shown.

337.jpg


Repeat the process, by clicking just below your highest point, to make a new point and then moving your highest point way over to the right. Right click your line (you must right-click a part of the line that's inside your image.) Click Make Selection. This connects the last point on your line to the first point. Make a new layer, select a color, click on the Paint Bucket tool, and fill the selected area.

Right click on your layer, and select effects (Adobe Photoshop 5.0) or Blending Options (Adobe Photoshop 6.0 and Adobe Photoshop 7.0). Give the layer a Shadow and an Inner Bevel. Click on the Gradient Tool. Then click on the visual representation of the gradient or click on the Options tab and then click Edit . Put in an alternating series of about eight black and white tabs, as shown, and click Ok.

435.jpg


Now Apply the Gradient. Create a new layer. If the blue area isn't already selected, Ctrl+Click the layer that the blue area is in. Click on your new layer in the layer list, and apply the Gradient Tool across it. Change the layer from Normal to Overlay.

531.jpg

Be Sociable, Share!
Subscribe in a reader |

Links you may find interesting -