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 a Nice Layout with Rainbow UI Kit

Design a Nice Layout with Rainbow UI Kit

grafpedia Web Layout Apr 12, 2012

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.

How to design the Rainbow Template with Photoshop - screen 01

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.

How to design the Rainbow Template with Photoshop - screen 01

Your document opens automatically.

How to design the Rainbow Template with Photoshop - screen 02

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.

How to design the Rainbow Template with Photoshop - screen 03

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.

How to design the Rainbow Template with Photoshop - screen 04

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.

How to design the Rainbow Template with Photoshop - screen 05

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.

How to design the Rainbow Template with Photoshop - screen 06

From this same kit, make a roll/drop of the text description. You can easy edit them to be adapted to your project.

How to design the Rainbow Template with Photoshop - screen 07

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.

How to design the Rainbow Template with Photoshop - screen 08

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.

How to design the Rainbow Template with Photoshop - screen 09

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.

How to design the Rainbow Template with Photoshop - screen 10

Import the "Left" arrow available from the Rainbow kit. Reduce its size if needed.

How to design the Rainbow Template with Photoshop - screen 11

Select now the Arrow Left document and reduce its opacity to 10%.

How to design the Rainbow Template with Photoshop - screen 12

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.

How to design the Rainbow Template with Photoshop - screen 13

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.

How to design the Rainbow Template with Photoshop - screen 14

Import the ribbon available form the Kit, then increase its width to be equal to your grey rectangle size.

How to design the Rainbow Template with Photoshop - screen 15

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.

How to design the Rainbow Template with Photoshop - screen 16

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).

How to design the Rainbow Template with Photoshop - screen 17

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.

How to design the Rainbow Template with Photoshop - screen 18

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.

How to design the Rainbow Template with Photoshop - screen 19

Then import on the right the newsletter form available too (on dark background) in the Rainbow UI Kit.

How to design the Rainbow Template with Photoshop - screen 20

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.

How to design the Rainbow Template with Photoshop - screen 21

Click on the blue button to download the .psd file and the professional version of the Rainbow UI Kit.

subscribe to newsletter