Step 6

Create a new layer group by clicking the folder icon in the layers panel. Then drag both these gradient layers within the group then change the opacity of the group to 10%.


Step 7

Next I added some rectangles that look a bit like stitches, If you were doing this in CSS then you could use a dashed border so you don’t really need to do this step too accurately. I’ve got a good tip for doing this; first create a new layer then make one small rectangle then duplicate this layer. Now hit Ctrl+T and move the rectangle down slightly then just hit Ctrl+Shift+Alt+T a few times. What this does is remembers the first transformation then the key combination mentioned duplicates the layer then applies the same transformation. If this seems a bit complicated then just create each one manually. Afterwards merge all the rectangle layers by selecting them then hitting Ctrl+E. You can now just duplicate this layer then move each layer to either side.


Step 8

Now add a title and a tagline, the one that I’ve used was created using only text and the font, ‘Rockwell’. I used the same blue here as the stitches and if you are familiar with swatches then a good idea would be to set a blue and grey swatch that you can use again.


Step 9

Now create the menu by using a sans serif font like Helvetica or Tahoma. Now just type a few words in uppercase using the same blue color. Another thing that I tend to do especially when using all uppercase is to increase the tracking (horizontal letter spacing) of the letters, to do this go Window>Character then highlight the word and change the tracking. I did each of the menu items in a different layer.


Step 10

Now duplicate all these words and change the color of each of them to the grey color. So now you have a set of layers with the menu items in blue and a set of the same menu items in grey. This is just so that you can see what the words would look like if you were to hover over them in the real site. Only make one of each menu item visible at a time.