Published recently on our partnership Hongkiat website, The Rainbow UI Kit is an incredible tool for web designers. It includes all items needed for the creation of web site, and there are ready to use. Easy roll and drop them to create an amazing Template. As a proof, follow the present Photoshop tutorial to create a Template taking only 30 minutes.
Rainbow UI Kit version (available on hongkiat.com), or here to download the Premium version (the one used in the Photoshop tutorial).
See below the final Template.
STEP 1 Create your document
Open Photoshop software, then go to menu File>New to create your document. Enter values: Name, width and height and press the OK key.
Your document opens automatically.
STEP 2 Create the menu
To create the menu, nothing easier than this process, open the Rainbow-UI-Kit-pro.psd file and roll/drop the document regarding the Black menu. Use the Move Tool to move it to the left top of your layout.
In case the menu is too short, increase the width using de free transform tool on the menu shape. Add one or several links to your social networks, keeping the styles used on the Twitter icon.
STEP 3 Create the carousel
Regarding the carousel, create first a new group and name it the carousel (menu Layer> New> Group). Create a rectangle (1000x290px) using the Rectangle Tool (U) with filling colour #f2f6f7. Use the Photoshop Info window to get help. Use the Move Tool (V) to place the rectangle under the menu.
Use now the Text Tool (T) to add your website title. I used for it, the Helvetica Bold font with a size of 61px. Find this type of text in the Rainbow UI Kit.
From this same kit, make a roll/drop of the text description. You can easy edit them to be adapted to your project.
Use now the Rounded Rectangle Tool (U) with a radius of 3px. Create a new rectangle (200px X 50px). Use the filling colour #2a6db4. Create a second rectangle with the colour #a2a6ab. Use now the Text Tool (T) to add the label of the two buttons. Use the Move Tool to place these buttons in the middle of your document.
Go now to the Rainbow kit and after, go to the part regarding the buttons. Copy and paste the button styles as well as the text styles to apply on your own buttons.
To create the arrows on the left and on the right of the carousel, create first a new group and name it "Arrowleft". Use the Ellipse Tool (U) to create a round (50x50px) with the black colour.
Import the "Left" arrow available from the Rainbow kit. Reduce its size if needed.
Select now the Arrow Left document and reduce its opacity to 10%.
Duplicate the document, rename the copy Arrow Right. Then, go to menu Edit>Transform>Horizontal Flip. Use the Move Tool to place the arrow on the right side of the carousel.
STEP 4 Create the services block
This block will be used to give values to some services of your agency. You are going to see, that it is really easy to create it using the Rainbow kit.
Start creating a new group and name it the Services. Use now the Rounded Rectangle Tool (U) to create grey rectangle #d6dde1 with a size of 770px X 300px.
Import the ribbon available form the Kit, then increase its width to be equal to your grey rectangle size.
Create three new groups and name them box1, box2 and box3, using the Ellipse Tool (U). Use the Move Tool to place them all along the grey rectangle width.
Add an icon into each round (you can download some of them from the iconfinder.com website) and apply under each round, the services description using the Text Tool (T).
STEP 5 Create the gallery
With the gallery, you can display a selection of your best works. I think, this step is the easier of this tutorial, because this gallery is already ready to use from the Rainbow kit. Also, import the tab group and easy change the blocks sizes to be equal to you Template size.
STEP 6 Create the footer
You are now arrived at the final step of this Photoshop tutorial. To create the footer, easy go one more time to the Rainbow Kit and import the footer document.
Then import on the right the newsletter form available too (on dark background) in the Rainbow UI Kit.
Now, work is done, you have created a design portfolio taking only around 10 minutes, only using all wonderful element from the Rainbow Kit If you like it, do not hesitate to share this page with your friends, on Twitter or Facebook.
Click on the blue button to download the .psd file and the professional version of the Rainbow UI Kit.
