itunes tema
Notice: To realize this Template, I used the iPhone UI Kit to Website Template from Grafpedia. You will need it if you want to complete the whole tutorial.
Before to start, please, watch below the final preview of this Template. If it’s all right, then you can start the first step of this tutorial.
STEP 1 CREATE THE DOCUMENT
Open your Photoshop software, then go to the menu File>New and enter your document name with width size of 1000px and height size of 1200px.
Press the OK key of your keyboard to display your new picture.
STEP 2 CREATE THE MENU
To do it, easy use the iPhone Kit. Go to this page http://www.grafpedia.com/vip-downloads/iphone-ui-kit-website-template , then, download the pack with a double-click on the green button. Open the .zip file and under Photoshop, open the blue, orange or green Kit as you want. Then, apply a simple drag and drop of the group named menu.
STEP 3 CREATE THE CAROUSEL
Create first a new group (to create a group, go to the menu Layer>New>Group), you name carousel. Then, look for a picture on the web, add it into your document (size it as 1000x350px).
Select the rounded rectangular tool (U), change the radius to 4px and create a black rectangle over the picture (rectangle size: 222 x 252px).
Go now to menu Layer>Layer Style and add an outer glow and a stroke.
Import into your document, an album jacket of this artist.
To create a gleam over the cover, duplicate the layer with the album. Then, retrieve the square selection and fill it with white colour.
Use now the polygonal selection tool to delete a part of the white square (see the picture below).
Go to the menu Layer>Layer Mask>Reveal all. Use the gradient tool Foreground -> Transparent (with the black foreground colour) on the layer masque. Start first from the bottom to the top and after from the right to the left.
Use now the kit to add the album name and the button “buy it”.
Create a new group you name page numbering. Use now the Ellipse tool (U) to create four rounds, three of them in black and one of them in white.
The carousel is now ready. It is time now to create the contents.
STEP 4 THE LAST SONGS
The first block is used to publish the songs added on the website. Create a first group you name the content, then, create inside, a second group you name the left. Use the rounded rectangle tool (U) to create a bar with a size of 442x40px en the blue colour #4575b3. Copy the styles of the black menu from the kit and paste them on your bar.
Use the Text tool (T) to add the title to your bar, and then go on the inconfinder.com website to add two icons: a song icon on the left and a refresh icon on the right.
Use the Paint Bucket tool (G) to fill the background layer with the colour: #dbdfe4.
Use now the rounded rectangle tool (U) to create a white content with a size of 442x318px (put this rectangle on the title).
Use again the rounded rectangle tool to create 6 squares with a size of 110px with this colour #d9e1eb. Add a stroke on each 1px square (Layer Style> Stroke) with the blue colour #4877b4.
Over each square, add an album jacket.
To create now the hover effect, Duplicate the layer of the first cover. Fill the square with the black colour. Reduce the opacity of this new layer to 70%. Add the title over as well as the blue button “Buy it”.
STEP 5 CREATE THE BLOCK OF THE RIGHT SIDE
It’s easy. Create first a new group and name it the right (put it over the group “left”). Create a blue title similar to the one created on the left.
Create a white block (same as on the left).
Move the group “carousel Medias” from the kit to your document.
Use the styles of the grey buttons from the kit, to add just after the carousel, a new button.
STEP 6 BLOCK OF VIDEOS
The last block of contents is used to broadcast music clips, each of then is defined with a title and just after, a player. This block is easy to create, because it is already ready to use from the iPhone kit.
Create a new group and name it the movies. Create a black title (you can find this block in the kit).
Use the rounded rectangle tool (U) and the Text tool (T) to create five buttons. For the first button, use the styles of the buttons available from the kit, and for the others, use the styles below:
Now, Drag and Drop the player under your title.
STEP 7 CREATE THE FOOTER
Create first a new group you name the footer. Duplicate the blue layer (from the top menu) and cut a part of it to get a bar (see the picture below).
Use the Rectangle tool (U) to create a black block with a size of 1000x60px.
Use the Text tool (T) to add your Copyright on the left side of the footer.
To finish, use the icon group available from the kit to create some links to the social networks. For the icons located inside the blue rounds, you can find them on the iconfinder website, at this address: http://www.iconfinder.com/search/?q=iconset%3Asocial
The Template is now finished.
If you like this tutorial, please help us to promote it with a tweet of this page or share it on your Facebook.
You can download the source file of this Photoshop tutorial, with a click on the blue button below.