Hello everyone. Today I’m going to show You how you can use Adjustments layers to easily make Your template multicolour. Probably most of You know the trick, but for those who not, this should be really helpful.

What will be needed in this tutorial?

• 960 grid system for photoshop
• Misty Morning
• Chameleon icon

Step 1. Let’s get this party started

Go to 960 grid system site and download whole package. After that there will be action file for photoshop in folder app_plugin. Go to photoshop and make sure you have Your Actions panel active. If You haven’t then go to Window -> Actions. Panel should be visible now.

The click on drop-down list on the right and choose Load Actions.

Choose 960_GRIDS.atn file and press Load. You should have new actions in Actions Panel.

Click on the 12 Column Grid and press play. New file will be created.

Now go to Image -> Canvas Size and change height atribute for about 1650px.

Step 2. Creating background

Create new layer and fill it with color you like. It really doesn’t matter at the end, so You can choose color You like or color that You comfortable with. I choose #1f2f46. Now add some noise by going to Filter -> Noise -> Add noise

You can always come back later and add more noise if You would like, but this will be good for now. Create another layer and press D on the keyboard. It will change Your foreground and background colors to black and white. Go to Filters -> Render -> Clouds.

Now go to Filter -> Disort -> Ocean Ripple and set

Click OK, and now go to Filter -> Blur -> Motion blur and set as below

Now you should have something like this

Select Your clouds layer and change the gelnd mode to Overlay

And now you should have something like this

Step 3. Adding Adjustment layer

First of all make sure You have Your Adjustments Panel on. If it’s off then go to Window -> Adjustments to turn it on.

Select background layer (with color and noise) and click on Hue/Saturation icon in Adjustments Panel

Now Your in You layers a new layer should be added

Now right click on this layer and choose Create Clipping Mask. You can also do it by holding Alt key between two layers and then clicking.

And now simply go to Adjustmens Panel, check “colorize” and choose set up You want. You can always come back later and choose another color. For purpose of this utorial I choose mine

Step 4. Header section, creating logo

Create some new guides by going to View -> New guide. Choose Horizontal Orientation and add guides on 43px, 100px, 160px, 230px. This should be good for now.

To my logo I used Arial Black 48px

Now go to blending options and set

Now add Chameleon icon

Step 5. Search

Grab rounded Rectangle Tool and draw a shape starting above our layer

Go to blending options for this layer

Grab Rounded Rectangle Tool and draw a shape for our input and then go to blending options

Now you should have something like this

Now o the right side add icon from Custom Shape Tool and on the left just add text like “Search”

Now our search should look like this

Step 6. Creating navigation

Get Rectangle Tool and draw new shape

Now go to blending options and add Gradient Overlay

Change opacity of this layer to 25%

Now copy this layer, remove all styles, change color overlay to black and move it under Your navigation background.

Now go to Filter -> Blur -> Gaussian Blur and set radius to 10px. Now you should have something like this

Now select Your navigation background layer

And click on shadow layer (make sure you have it selected now) and press delete, to remove all shadow from behing navigation background.

Now add some text to the menu. I used Arial 14px and also add some drop shadow

Get Elipse Tool, change foreground color to white and draw a shape

Go to Filter -> Blur -> Gaussian Blur and set radius for about 10px. Also change Blend Mode for this layer to Overlay.

Now just put it in position you want and remove unnecessary glow.

You can spend some time to customize it. You can always change some opacity or duplicate the layer to give it more glow. After some fun with it mine look like this

Step 7. Creating slider section

Add 3 more guides on 560px, 600px and 650px. Get Rounded Rectangle Tool with radius of 10px and draw a shape from 230px to 600px. Now set the colors fot foreground #fafafa and for background #dcdcdc. Get Gradient Tool with radial gradient and draw from top to bottom. Make sure You start above the slider

On the left add a 490x300px photo and add a stroke to it

On the right add Some text

Now copy Your slider background, remove all style, change color to black and add blur. Use the same technique that we used earlier in navigation.

Use Rounded Rectangle Tool to create a shape for slider pagination

You can always use some custom shape or even pen tool. Go to blending options and set

Get elipse Tool, hold shift and draw a perfect circle. Add some inner shadow

for the hover effect You can add a color of #5a7ca8

But there is another way. Lets say You have your template finished and You know that this element will be in this place for 100%. Well You can do something, which will help you change colors in the future. Select this shape

and now select the background layer for You pagination and press delete, the select Your background for slider and press delete and finally select Your shadow layer and press delete. This way, when You will change the color of the layout, it will automaticly change color of the button. Of course you can always leave it and just add another color with blending option like color overlay.

Now get Rounded Rectangle Tool with radius of about 3-4px and draw a shape under Your text for “read more” button. Go to blending options and set the gradient

Chang opacity to 40% and now if You want You can do the same trick what You did in slider pagination. But it depends on You.

Add some “read more” text with drop shadow

From Custom Shape Tool choose little arrow and place it on the left site of the button, now go to blending options and set

You should have something like this

You can add two vertical lines for the separator, first with #2a3650 and second with #38445d

You can also copy glow from navigation and paste it under slider

Step 8. Creating boxes

Add new guide on 900px and with Rounded Rectangle Tool with 10px radius draw a shape between 650px and 900px

Add some gradient in blending options

Now You can add some separators between the boxes. Draw two 1px vertical line. First with #f3f3f3 and second with #c1c1c1.

Now merge layers if You have to or if you have two layers and want to stay that way just place them in one group

Now copy that group or layer three times and place them in another group folder

Now add a layer mask to the whole group

Take Gradient Tool and choose Reflected Gradient

Make sure White color is Your foreground color. Now draw a gradient like that

Remember to start from the center of the separator. Now add some text to the boxes

From custom shape tool You can choose an arrow and add it to the list items

Color of headers and list items is #40699d, but I used the technique from slider pagination here, so if I want to change the background color these headers and li items will also change.

To add “read more” button I simply copy the pagination bg and then went to Edit -> Transform -> rotate 90 CCW, and just added some text to it.

You can also copy the glow from earlier sections and paste it under Your boxes.

To add numbers just use Arial Black. Mine has about 265px, color #9d9d9d, opacity 20%. Go to Edit -> Free Transform and change a little bit angle of the number. Cut off the unnecessary parts

We should have something like that for now

Step 9. Adding content section

Add new guides on 980px, 1380px, 1460px and 1550px. Draw a shape between 980px and 1380px with Rounded Rectangle Tool with 10px radius and color of #f2f2f2. Make shadow as we did earlier and copy our glow.

Now fill it with some photos and text. Add stroke to photo

This section filled with content

You can also add some drop shadows to text or to header.

Step 10. Last section – footer

Draw a shape with Rounded Rectangle Tool between 1460px and 1550px. On the left add some copyright and on the right you can add navigation or social icons. Remember to do shadow and copy glow from earlier layers.

Finished!

And that’s it. Now if you want to change color you can choose almost anything. Just go to Adjustment layer from the beginning and have a little fun with sliders.

Thank you for reading. Hope you got some idea how to use Adjustments layers to make your designs more customizable and You definitely should use them in your future projects, not only for web designs, but for many more.