Tutorials Photoshop Web Layout Curved Website Header

Curved Website Header

This tutorial was created in Adobe Photoshop CS2, thus you might find small changes to the placement of buttons and menu's, but you do not need to concern yourself about compatibility problems. All effects, filters, tools and other features can be found and used in all other versions of the Photoshop application.

Before you start:

Before you start creating your design, you have to ensure that your workspace is ready for navigation and creation. View the following features which you have to enable and make visible:

  • If the 'Tools' panel is not visible on your workspace, you can make it visible by going to 'Window > Tools'. The 'Tools' panel contains all the physical design tools.
  • Make the rulers are visible on your design window. You can do this by going to 'View > Rulers' *or simply by pressing 'Ctrl' + 'R' to make it visible.
  • The 'Layers' panel shows you all the layers of the current design. If the 'Layers' panel is not visible on your workspace, you can make it visible by going to 'Window > Layers' *or by pressing 'F7' as a keyboard shortcut.

Tools used in this tutorial:

Pen Tool:

The 'Pen Tool' can be found on the 'Tools' panel. This is an extremely powerful tool, since it creates custom shapes in vector format, which can be edited later on to suit preference. Once you have created a shape with the 'Pen Tool', you will notice that a shape layer is created rather than the usual graphic layer. You can convert a shape layer to a graphic layer at any time, by right-clicking on the shape layer and selecting 'Rasterize Layer'. This will then allow you to manipulate and alternate the graphic further on. The 'Pen Tool' can be easily accessed by pressing 'P' as a keyboard shortcut during your design time.

Color Box:

image 1

The 'Color Box' is situated on the 'Toolbar', and allows you full control over a vast range of color shades which you will use during your design time. The top/front box represents your primary color, and the back/bottom box represents your secondary color. The primary color will be used most of the time, but some tools use both colors in conjunction, such as the 'Gradient Tool'. The primary and secondary colors can easily be reset to the default colors (black & white) by pressing 'D' on your keyboard. You can also switch these two colors around by pressing 'X' on your keyboard.

Creation & Implementation:

Open your Adobe Photoshop application and create a new '.PSD' document. You can create a new document by going to 'File > New…' *or by pressing 'Ctrl' + 'N' as a shortcut, using your keyboard. You should now see a prompting dialog opening on the workspace, which allows you to set all preferences and specifications to this new document that you are creating. View Figure 1 as an illustration and exact guide to the values you should input into this prompting dialog.

image 2
Figure 1

The name of this new document is all up to you. You can name it according to which you would prefer to identify this document. The width of the document will be 750px and the height will be 200px. The 'Resolution' field determines the amount of dots/pixels your document will contain per inch. In other words, the higher the value, the more dots/pixels per inch, which will then again in its turn allow finer detail which is consequential to a higher quality design. It is recommended that you set this value to 800dpi. You will notice that this will increase the document size, but when you are done with the design, you can always crop the design at a lower resolution to decrease the size if necessary.

The rest of the input fields in this dialog should/can be left intact, and you should now click 'Ok' to continue. Once you have done this, your design window will open up on the workspace, and you are now ready to start implementing the design.

Select the 'Pen Tool' on the 'Tools' panel. You will now create a basis vector to work from. Your rulers are visible, and you can now set guidelines to where you will place the anchor points, using the 'Pen Tool'. Click on the vertical ruler and drag the line to the 250px mark. The ruler will be a dotted line, set vertically on that point. Do this again, but this time you should drag the ruler to the 550px mark. Two vertical rulers have been set.

We will now set another 3rulers which will lie horizontally in the design window. Click on the top, horizontal ruler, and drag down to the 75px mark. You will do this another 2 times, setting the next one to the 125px mark, and yet another one to the 150px mark. Your rulers have now been set, and they will act as guides complying with the creation and implementation of your design.

With the 'Pen Tool' still actively selected at hand, you will now create 7 new anchor points to form a custom shape. View the listing below, as to where you should be placing your anchor points.

  • Point1 = Click on the left edge of the design window, in line with the 125px horizontal ruler.
  • Point2 = Click the second anchor point on the crossing of the 250px vertical ruler and the 75px horizontal ruler.
  • Point3 = The third anchor point will be clicked and placed at the crossing of the 550px vertical ruler and the 150px horizontal ruler.
  • Point4 = Click with the pen tool on the right-hand edge of the design window, in line with the 125px horizontal ruler.
  • Point5 = This point will be situated in the bottom-right hand corner of the design window.
  • Point6 = Place this anchor point in the bottom-left hand corner of the design window.
  • Point7 = The last point to all the custom shapes you will be creating in Photoshop will be the exact location of the first point, to ensure that the path is closed. You should see a small circle next to the pen on the mouse cursor which indicates that the path will be closed when you click here. So click one last time on the first anchor point you have created.

The basis shape has how been created, and you can view Figure 2 as an illustration to how your design should look at this moment in time.

image 3
Figure 2 (Click to enlarge)

After you have set up your basis vector to work from, you are now ready to shape this vector into a stylish, smooth curve. But there are a few things you need to know about using the 'Pen Tool' before you can continue. View the useful points below, which will instruct you how to execute specific actions with the 'Pen Tool'.

Moving an anchor point:

As you have the 'Pen Tool' still actively selected, you can hold the 'Ctrl' key, then click on an anchor point and drag to move the specific point. You can also move an entire connecting line with a click and drag on the line itself. This will result in a repositioning of the line itself, and also the 2 anchor points connected to the line.

Curving a connecting line:

You can press and hold the 'Alt' key, then click on an anchor point, and drag to curve the connecting lines on both sides of the specific anchor point. As you do this, you will notice two thin lines extending from the anchor points. You also have the ability to make one line straight, and the other one curved. To make a connecting line straight, you should hold the 'Alt' key, and then click on the thin guideline of the specific connecting line and drag the guideline's end back to the exact location of the anchor point. This will straighten out the connecting line.

Now that you are familiar with applying changes to anchor points and their connecting lines, you should be able to shape your vector as preferred. See Figure 3 as an illustration to the result you should be aiming for.

image 4
Figure 3 (Click to enlarge)

The shaping and curving of my vector mask is now complete. Have a look at the 'Layers' panel. You should notice that you have one layer, name 'Shape1'. You will now right-click on this layer and select 'Rasterize Layer' to convert the shape layer to a graphic layer for further manipulation. Once you have done this, you can rename this layer as 'Curve1'. You can do this by double-clicking on the text/caption of the layer itself, and then typing the new name/caption.

To change the color of your curve, you can double-click on the small thumbnail image to the left of the caption/text of the layer in the 'Layers' panel. When you do this, you should notice a 'Layer Style' dialog opening. Tick the checkbox which says 'Color Overlay', and then also select the name 'Color Overlay' in order to see the preferences on the right hand side. Click on the small colored box and change the color to the preferred color by making use of the 'Color Picker' dialog.

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.

Once you have completed this, you can now also curve this new shape to have more or less the same shape as the 'Curve1' layer, but you will notice that the edges of the new shape overlaps the edges of the first layer we have created. Now move over to the 'Layers' panel, then click, hold and drag the new layer, named 'Shape1' below the 'Curve1' layer. Right-click on the 'Shape1' layer and select 'Rasterize Layer'. Double-click on this layer's caption/text and rename the layer as 'Curve2'. You can now also change the color of this new layer to be a darker shade of the same color which you have chosen for the first layer. You can now view Figure 4 as an illustration to how your 'Layers' panel should look at this moment in time.

image 5
Figure 4

The next step would be to use the 'Layers' panel shown in Figure 4 to change the opacity of the 'Curve2' layer to 75%, thus making this layer 25% transparent to everything behind it. You will see the setting for opacity on the 'Layers' panel.

See Figure 5 as an illustration to the design I have created until thus far, and use it as a guideline to creating and completing your design.

image 6
Figure 5 (Click to enlarge)

There are two last steps you should follow and complete in order to finish your header. The first would be to add an image/photo to the background of the curve. You can do this by opening another image, then dragging this specific image to the design window of the header. When you do this, you will notice a new layer in the 'Layers' panel named 'Layer1'. You can now resize this image, simply by actively selecting the 'Marquee Tool' situated on the 'Tools' panel. As you have the 'Marquee Tool' selected, right click in the design window with the 'Layer1' selected, then select 'Free Transform', and resize your image. Once you are satisfied with the position and size of your image, you can now drag 'Layer1' down below all the other layers in the 'Layers' panel.

The second and last action will execute will be to add text on top of the curve shaped layers. This can easily be done by using the 'Type Tool' which is situated on the 'Tools' panel on your workspace. Once you have added text to your design, and you have applied all necessary effects and colors to compliment your design, you should be complete and ready to view the result. See Figure 6 as the resulting design I have created.

Curved Website Header
Click to enlarge

subscribe to newsletter