Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design an awesome colorful layout

Design an awesome colorful layout


Create a new document with the following size: 960 x 900 pixels
I will use a dark color for the background #0a0a0a
I will create another document with the following size: 270 x270 pixels and I will create a simple shape with Ellipse Tool

image 1

Then I will add the following layer styles

image 2

image 3

This is my result

image 4

Now I will go to Edit > Define Brush Preset

image 5

I will choose a name for my brush, and I will click ok.
Now I select Brush Tool, and I will create a few points on my layout

image 6

I will change the blending mode for this layer to Hard Light, and I will lower the opacity for this layer to 65 %

image 7

Now I will select the brush I just create a few steps ago, and I will bring up the brush settings palette (Windows > Brushes and I will use the following settings

image 8

image 9

image 10

Then I will create a new layer on top of all layers, and I with the brush we just create I will make some drawing on the header of the website. Please note that you need to set your brush size to maybe 40-50

image 11

Then I will make the drawing on the header

image 12

I will go to Filter > Blur > Gaussian Blur and I will use the following value

image 13

Then I will change the blending mode for this layer to Soft Light, and the opacity to 50 %

image 14

I will create a new layer (press CTRL+SHIFT+ALT+N) and I will change the blending mode for this layer to Overlay, and the opacity value to 50 %, and then with Brush Tool I will create the same circles

image 15

I am ready with this nice colorful header. Now I will create a few shapes with Rounded Rectangle Tool

image 16

For the top navigation bar I will add the following layer styles

image 17

image 18

image 19

image 20

image 21

This is how my navigation bar will look like

image 22

For the bottom shape I will lower the opacity to 20 %. I will not show you this step anymore because it is a very simple step.
Now I will add some text over my layout with Horizontal Type Tool

image 23

I will create a new layer, and with Pencil Tool I will add some details on my navigation bar. If you use a small 1 pixel brush you will be able to create the dotted line and the arrow very easy

image 24

I will add some images on this layout. This is my final result

image 25

I will show you another look. I have used some triangles

image 26

And another result with a hexagonal brush

image 27



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: