SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Web Layout Design the Pirates Layout using Photoshop

Design the Pirates Layout using Photoshop

grafpedia Web Layout May 14, 2012

Watching once again on TV the Pirates of the Caribbean, I got the idea to create a Template around this movie. In this way, I used several pictures able to create a dark theme with help of wood and rock texture. The final result is perfect for a webmaster with a pirate spirit!

The psd of this layout is available, to download it, click on the blue button. Or susbscribe now to a VIP Account and download the collection.

Before to start this tutorial, see below the final result of this Photoshop tutorial.

All is now ready to begin. Open your Photoshop software.

STEP1 Creation of a new document

Go to menu File>New and after, enter the name and the sizes, now press on the Validate button. A new document appears on screen.

Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop

To create the texture of the background of this theme, go to this page: http://www.grafpedia.com/stock-images/product/cement/#r and download the cement texture.

Design the Pirates Layout using Photoshop

Create a new fill layer (menu Layer>Fill Layer>Solid colour) with this colour : #2e210c.

Design the Pirates Layout using Photoshop

Reduce the layer of the texture to 40% and fill the background layer with this colour: #151005.

Design the Pirates Layout using Photoshop

STEP 2 Create the menu

Create a new group you name The menu. Import the papyrus.png file into your document.

Design the Pirates Layout using Photoshop

Select the layer Papyrus and go to menu Layer>Layer styles>Drop shadow.

Design the Pirates Layout using Photoshop

Go to this page : http://freewallpaperspot.com/pirates-of-the-caribbean-background-1.html then, download one of these pictures. Look for the Death head logo and cut it out. Put it above your theme, over the papyrus.

Design the Pirates Layout using Photoshop

Create a new layer and put it under the Death head. Use the Brush Tool (B) with the black colour and a diffuse form to create a shadow.

Design the Pirates Layout using Photoshop

Go to this page and download this font : http://www.dafont.com/pieces-of-eight.font. Install the font on your computer. Use now the Text Tool (T) to add some links into your menu. Add a drop shadow onto the text.

Design the Pirates Layout using Photoshop

Design the Pirates Layout using Photoshop

Use agian the Text Tool (T) to create the titlte of your wbesite. Add three layer styles on this text: drop shadow, gradient overlay and pattern overlay.

Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop

Design the Pirates Layout using Photoshop

STEP 3 Create the carousel

Go to this page and after, download the wood texture:http://steves3dblog.blogspot.fr/2008/12/september-scene.html, and import it into your document.

Design the Pirates Layout using Photoshop

Go to menu Layer> Layer Mask> Reveal all. Then, use the Brush Tool (B) with a hard shape and the black colour to create a frame as below.

Design the Pirates Layout using Photoshop

Duplicate the fill layer already used for the background and after, place it over the frame. Right click with your mouse on the layer and select Create clipping mask.

Design the Pirates Layout using Photoshop

Go to Google to look for a picture regarding the movie and then, import it into your document (under the wood frame). Add an inner shadow to the picture.

Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop

ETAPE 4 Creation of the torches

To begin the creation of the torches, open first this picture in your Photoshop software: http://freewallpaperspot.com/wallpapers/pirates-of-the-caribbean-wallpaper-8.jpg , then enter the Rectangular Marquee Tool (M) to select the fire of the right side and copy it into your picture. Use now the Eraser Tool to cut out the Torch.

Design the Pirates Layout using Photoshop

Create a new layer and select the Brush Tool (B), select a soft shape, reduce the opacity of the tool to 20% and update the foreground with the white colour. Use now the brush over the fires to create some blur.

Design the Pirates Layout using Photoshop

Create now two new layers and put them under the torch. Use now the Brush Tool (B) to create a white glow on the foreground, and orange on the second. Change the opacity mode to overlay for these two layers.

Design the Pirates Layout using Photoshop

Group all layers regarding the first torch into a group. Duplicate this group. Select it and go to the menu Edit>Transform>Flip horizontal. Use the Move Tool (V) to place the torch of the left side of the frame.

Design the Pirates Layout using Photoshop

STEP 5 Creation of the events blocks

Create a new group and name it the treasure. Use again the wood texture to create a small board (see the picture below). Add the brown fill layer over and do not forget to change it to a clipping mask.

Design the Pirates Layout using Photoshop

Add to the board the same drop shadow that the one previously used on the menu.

Design the Pirates Layout using Photoshop

Use the Text too l(T) to create the title of the block, here an invitation to a game.

Design the Pirates Layout using Photoshop

Cut out the safe and the Death head from the picture below and add them over your title : http://freewallpaperspot.com/wallpapers/pirates-of-the-caribbean-9.jpg

Design the Pirates Layout using Photoshop

Create now a new layer and place it under the wood board. Use the Brush Tool (B) with the black colour and a soft shape to create a shadow under the safe and the death head.

Design the Pirates Layout using Photoshop

Use same method to create a second title. The death header with the peak is located on the previous picture. The map is on this page: http://mymetaldetector.blogspot.fr/2011/05/old-maps-of-florida-usa.html

Design the Pirates Layout using Photoshop

See below the result of your work.

Design the Pirates Layout using Photoshop

STEP6 Create the videos

To create the videos, create first a new group and name it box movie 1. Use the same wood texture to create a small borad. Use the Eraser Tool to cut out the borders and to work them.

Design the Pirates Layout using Photoshop

Duplicate three times this board and create a frame as below.

Design the Pirates Layout using Photoshop

Add the Fill layer (clipping mask mode) and add the same drop shadow as the one used for the menu.

Design the Pirates Layout using Photoshop

Use the Ellipse Tool (U) to create a round on the first side of the wood boards and add three layer styles on the shape: a drop shadow, a gradient overlay and a stroke.

Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop

Design the Pirates Layout using Photoshop

Duplicate this round three times and use the Move Tool (V) to put the copies all around the wood boards.

Design the Pirates Layout using Photoshop

Add behind the frame a picture from the movie, then add the same inner shadow as the one used in the carousel.

Design the Pirates Layout using Photoshop

Create a new group and name it le player, then put it over the wood frame. With the Ellipse Tool (U), create a round (with this colour #453522).

Design the Pirates Layout using Photoshop

Add now these layer styles on the round.

Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop

Design the Pirates Layout using Photoshop

To finish, use the Customized Shape (U) with the triangle shape to create the Play icon. (use the colour #14110b).

Design the Pirates Layout using Photoshop

Duplicate three times the group Box movie 1. Use now the Move Tool (V) to place all different videos all along the Template width.

Design the Pirates Layout using Photoshop

STEP 7 Complete the carousel

This small step is useful to complete the carousel adding a play icon over the big picture. To do it, duplicate the play icon once again and place the copy over the picture. Select now the document and press on the Ctrl+T keys to activate the free transform. Keep the Upper case key and increase the icon size. Apply a soft update on the round.

Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop

Design the Pirates Layout using Photoshop

STEP 8 Create the block of newsletter

It is already the last step of this Photoshop tutorial. You are going to create a block which will be used to retrieve the mails of your visitors, to be able to send them a newsletter. To do it, use for the last time the wood texture to create a wood board all along the document width. Add over, the brown fill layer (clipping mask mode).

Design the Pirates Layout using Photoshop

Duplicate the rounds used on the board borders in the videos groups and place a round on each side of the board.

Design the Pirates Layout using Photoshop

Use the Text Tool (T) to add the title of the block, then add a drop shadow on the text.

Design the Pirates Layout using Photoshop

Design the Pirates Layout using Photoshop

Create a new layer, then using the Brush Tool to create brown rectangle #0e0b06. Create imperfect borders to simulate the wood.

Design the Pirates Layout using Photoshop

Add now these layer styles: Drop shadow and inner shadow.

Design the Pirates Layout using Photoshop
Design the Pirates Layout using Photoshop

Design the Pirates Layout using Photoshop

Use the Text Tool (T) to add the label of the form field.

Design the Pirates Layout using Photoshop

Use the wood texture to create a small wood rectangle and add two layer styles on it : drop shadow and external shadow. This operation is useful to create the submission button of the small form.

Design the Pirates Layout using Photoshop

Design the Pirates Layout using Photoshop

Use the Text Tool (T) to add the title of the button. Use same styles as them used for the title located on the left side of the board.

Design the Pirates Layout using Photoshop

STEP 9 The Copyright

The Template is already full of elements; it is why I decided to create a simple Copyright, only adding a small text. Use then the Text Tool (T) to create the Copyright, and use same styles as the styles added to the title from the top of your document.

Design the Pirates Layout using Photoshop

That's all, all is finished now!

Design the Pirates Layout using Photoshop

I remind you, you can download the psd file of this theme, by a click on the blue button below. You need to be connected to your Premium account to activate the link. You are not a member? Click here to create a Grafpedia's account.

I you like this Photoshop tutorial, Do not hesitate to share it on your social networks, click on the buttons from the top of your screen. Thank you very much to you all.

subscribe to newsletter