Create an Header using Vector Shapes in Photoshop

• 
  

This tutorial will teach you how to create an Header using Vector Shapes, you’ll also learn how to apply a few blur filters and textures to give a nice colorfull effect to the header.

Hey designers, here’s my new tutorial. Last week I was playing in Illustrator and created a few vector shapes with circles and swirls, I thought it could make a nice background for an header, keeping it simple and colorfull.

Vector Shapes

Step 1 – Shapes
To create the abstract vector shapes I used Adobe Illustrator, but I’ll explain how make them in photoshop; you will have the same result. I just used some simple shapes like circles, swirls, drops and others. You’ll need to use the shape tools and pen tool to create those, create a new layer for each shapes.

Let’s start by creating a new document 1000x1000px with a transparent background. Don’t forget to create a new layer for each shape.

- Circles
To make some circles just use the Ellipse Tool (U) while holding the shift key, try to put smaller circles on bigger ones like me, of course you can let your imagination do the job, there’s not limit.

- Swirls
To create a swirl select the Ellipse Tool (U) and create a circle while holding the shift key, then select the Pen Tool (P) and create two curves shape like below, at the end just merge the Circle and Curve layers to have one shape.

- Drops
Very similar to the swirl, create a circle with the Ellipse Tool (U) then create triangle with the Pen Tooland merge the two layers.

Create some other shapes with those tools, when you’re done save the document as a png file so you keep the transparency.

Header

Step 2 – New Document
Create a new document in photoshop, I choose 1100x400px to fit my site resolution with a transparent background.

Fill the background layer with white, Layer – Fill – White and rename the layer Background.

Step 3 – Background Texture
To give a nice effect to the background I used a texture pack made by sanami276, download the texture pack Textures_80_by_Sanami276, I used the 06.png file, open the file in photoshop and drag it into your document. Resize and rotate 180° the texture with the Free Transform Tool (Ctrl+T), rename the layer Background Texture, place it in front of the Background layer and change the Opacity to 85%.

Step 4 – Import Vector Shapes
Open the PNG file with the vector shapes on it, and drag it into the document. Resize and rotate the shapes with the Free Transform Tool (Ctrl+T). Rename the layer Vector Shapes and change the Opacity to 15%.

Step 5 – Lens Blur Filter
To add a blur effect, we’re going to use the Lens Blur Filter, duplicate the Vector Shapes layer, rename the new one Vector Shapes Lens Blur and put the opacity of the layer to 100% in order to see what the effect does. Next apply the Lens Blur filter on it, Filter – Blur – Lens Blur and enter those parameters.

Place the layer between the Background Texture and Vector Shapes layers, and then change back the opacity to 30%.

Step 6 – Texturizer Filter
Duplicate the Vector Shapes layer again, then apply the Texturizer filter on it, go to Filter – Texture – Texturizer and put those parameters:

Rename the layer Vector Shapes Texture; change the opacity to 10% and the blend mode to Soft Light.

Step 7 – Radial Blur Filter
Last filter we’re going to use on the vector shapes, duplicate the Vector Shapes layer and rename the new one Vector Shapes Radial Blur, then apply a Radial Blur Filter to it, Filter – Blur – Radial Blur.

Resize and rotate the result with the Free Transform Tool (Ctrl+T), change the Opacity to 45% and place the layer on top of the Background Texture layer.

Finally add a Hue/Saturation Adjustment, I use Photoshop Cs4 so I used the Hue/Saturation in the Adjustment Panel, placed it on top of the Vector Shapes Radial Blur layer and created a clipping mask, but if you use a previous version of photoshop, select the Vector Shapes Radial Blur layer and go to Image – Adjust – Hue/Saturation and enter those values:

Step 8 – Search Box
We’re now going to create the search box; I did a big search box so the visitors don’t miss it. To start select the Rectangle Tool, then create a rectangle with black for the colour in the top right corner to make the search box background. Change the opacity to 25% and rename the layer Black Box.

Next create a rectangle on a new layer this time in white, smaller than the previous one then rename the layer White Box.

In order to create the magnifying glass icon we’ll create two layers then merge them. Start by selecting the Ellipse Tool and create a 20x20px circle, then change the fill to 0% and add a Stroke layer styleto it with those parameters:

Next select the Rectangle Tool and create a thin rectangle to represent the handle, when that’s done rotate the rectangle 45° with the Free Transform Tool. Select the rectangle and circle layer and merge them, Layer – Merge Layers or Ctrl+E and rename the merged layer Search Magnifying Icon.

Add a Drop Shadow layer style on the White Box and Search Magnifying Icon layers

Finally create a new Group, name it Search Box and put the Black Box, White Box and Search Magnifying Icon layers in this group.

Step 9 – Colour Stripes
Create a new layer and select the Rectangular Marquee Tool, make a selection of about 30px height and all the width of the document, then fill this selection with white, Edit – Fill – White anddeselect. Rename the layer Blue Stripe, add a Gradient Overlay layer style on it, Layer – Layer Style – Gradient Overlay and enter those parameters:

Then add an Outer Glow layer style, Layer – Layer Style – Outer Glow:

Finally just change the Fill to 0%.

Create a new layer, reselect the Rectangular Marquee Tool and make a selection of about 95px height and all the document width on top of the previous stripe. Fill the selection in white and deselect. Rename the layer Pink Stripe, add a Gradient Overlay layer style on it like in the previous step, Layer – Layer Style – Gradient Overlay and enter those parameters:

Then add an Outer Glow layer style, Layer – Layer Style – Outer Glow and change the Fill to 0% on this layer.

Step 10 – Colour Boxes & Text
To finish just add some coloured rectangles on the stripes with the Rectangle Tool, change the opacity of the blue rectangle to 65% and the pink rectangle opacity to 50%; I’ve put the same colours I used for the gradient in the stripes and add some text on the rectangles.

That’s it for now designers, those techniques can be applied on any creation, try to be creative in the vector shape part, and don’t forget to download the PSD File if you need help.