This new Photoshop tutorial give you the proof that it is possible to easy build a new template using an UI kit like the one we have just published on this page. This kit includes graphical elements like buttons, search engines as well as menus. With help of this kit, I decided to create a template dedicated to a Wordpress blog regarding iPhones Apps.
Before to start this tutorial, check here the final result:
It is time now to start the creation:
STEP 1 Create the document
Open Photoshop and go to menu File> New, define the width and the height: 1000x1800 pixels.
Press the OK button to open the new document.
Create a new group (menu Layer> New> group) and name it Top. Use now the Rounded Rectangle Tool (radius 3px) to create a rectangle defined with values 900 x 60 pixels. Use the the blue #66b5ed to fill the rectangle. Apply now three layer styles: an internal shadow, a gradient overlay and an outline. Activate the layer style, select the layer and go to menu Edit> Layer style> Inner Shadow.
The styles used are available from the psd file joined to the Balio kit.
STEP 2 Logo and menu creation
To create the logo, use first the Horizontal Type Tool (T) to add the blog name and the slogan (in my example I used the fonts Helvetica and Angelina).
Apply now the layer styles on the blog name: shadow, internal shadow and gradient overlay (follow the settings below)
To create the arrow, I only easy used the hard brush (1px), and I drew my arrow by hand on the new layer.
To create the buttons, download the Balio ki UI Kit and open the psd file regarding the menus, then slide and drop the buttons.
STEP 3 Create the carousel
Create first a new group and name it carousel. Use now the Rounded Rectangle Tool (U) to create a 900x325px rectangle.
I encourage you to surf on the web to find a picture to fill the carousel. In my case, I have selected a very nice illustration from Monkey Island.
Create now two guides, 20pixels height, on the bottom of the carousel. Then, create a new group and name it page numbering. Create a rounded rectangle defined with the values 800x40px (used the Rounded Rectangle Tool (U)). To finish, use the styles defined on the grey buttons of the Balio kit.
Regarding the page numbering, same method using the psd file from the Balio kit for page numberings.
To finish, create two arrows for the rectangle (one on the left side, other on the right side). These arrows are available from the Balio kit too.
See below the carousel final result:
STEP 4 Create the boxes
For the creation of the blocks including the three last news, create first a new group and name it box, then create a second group box and name it box1. Create now a rounded rectangle defined as 280 x 220 pixels with colour #f5f5f5. At an outline to the rectangle.
Add now an illustrated picture, with a size of 266 x 133pixels.
Use the Text Tool (T) to add a title and a small description to the news.
And put a button " Read more " on the centre of the rectangle. This button is available from the Balio kit (psd file download-centre).
To finish, duplicate two times the element box1 and use the Move Tool (V) to place the news on your layout width.
STEP 5 Premium offer
To captivate the visitors to go to the premium area of the web site, I created a blue band. To create this band, create a new group and name it premium. Create now a rectangle with 60pixels height, all along the width of the picture (the band styles are available in the menu.psd file from the balio kit).
Use the Text Tool (T) to add the slogan, then add the grey button on the right. Texts styles and button are available from the Balio kit (button and menu psd file).
Group the band, text and button layers into the premium group. Select this group and go to menu Layer> Layer mask> Reveal all. Select the Gradient Tool (G), then in the picker gradient, select the second Foreground to transparent (with foreground black color). Use this gradient on the left (from the left to the center) then on the right (from the right to the center).
STEP 6 Create the must of apps
A menu on the right recapitulates the most popular apps of the website, to create this sidebar, create first a new group and name it the sidebar. Use Rounded Rectangle Tool (U) to create a rectangle defined as 280 x 480 pixels and use same styles as styles used for the news.
Regarding the title creation, use the styles you can find in the survey file from the Balio kit. Regarding the stars, you can find some of them on the website iconfinder.com.
Go to the website app store, then copy a logo from one apps (in my example the game angry birds).
Use the Horizontal Type Tool (T) to add the title and the author's name.
Add now a blue download button on the right (use the Read more button of the news).
Regarding the progress bars, use the psd file download center or survey from the Balio kit.
To create the " Like " link, go to the iconfinder website and look after word Like;) Add now on the icon and on the text, a gradient overlay #6d6d6d.
Put all layers regarding the first apps into a group (name it app1), then duplicate the group 4 times and use the Move Tool (V) to apply all apps on one unique column.
STEP 7 An app on the top
On the left of the sidebar, an app is highlighted. To create this section, create a new group you name top app. Add now a new app's logo (go can return to the app store).
Go back to the file regarding the menus of the Balio kit and insert the menu 9.
To create the gallery, copy and paste one of the illustrations of picture of the app.
Then, two more others on both sides of the first picture. Reduce the opacity of these two new pictures. Do same for two new pictures. The perspective effect results of reduce of size of each picture (to reduce a picture size, press the Ctrl/Cmd + T keys to activate the free transformation).
STEP 8 Create the footer
To create the footer, start to create a new group and name it footer. Go to the psd file of the menus from the Balio kit and slide and drop the elements to create a blue border and a grey band.
Use now the Horizontal Type Tool (T) to simulate the titles and the links. For the icons, you can fibnd some of them on our favorite website iconfinder.com (the styles are available in the psd file menu from the Balio kit).
Regarding the newsletter form located on the right, use this time the file Balio-UI-Kit-login-form.psd to find the input and the button.
To finish, create a new layer and place it under the texts layers. Create with the Rectangular Marquee Tool (M) a selection with a size of 900x250px. Use the Paint Bucket Tool (G) to fill the selection with the grey: #edf2f6.
STEP 9 Finish with the Copyright
To finish the Template, create a last one group and name it the
Copyright. Create a new layer and create under the footer, a selection
with a size of 900x5px. Use now the Paint Bucket Tool (G) to fil lit with the grey: #67737c.
Use the Horizontal Type Tool (T) to add the Copyright.
Use the Balio-UI-Kit-ribbon-social.psd file to add three icons on the right for Twitter, RSS and Facebook.
The template is now finished.
With this tutorial, you can see that we can really easy create a layout using the Balio kit. This method can be applied to all ressources we deliver on Grafpedia. Why to waste your time, when you can easy used psd file ready to use?
