Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design a Two Color Website Layout in Photoshop

Design a Two Color Website Layout in Photoshop


As usual I will start by creating a new document with the following sizes: 960x900 pixels. You can use any size you want.
Over the background layer add the following color: #151515 with Paint Bucket Tool. Then download the following set of Photoshop pixel patterns:

Download pixel patterns

Load the patterns in Photoshop, then create a new layer, and choose any pattern you like most. After I will select the Paint Bucket Tool, and a random pattern from that set

image 1

I will click on time inside my layout with Paint Bucket Tool

image 2

I will change the blending mode to overlay

image 3

With Rounded Rectangle Tool, I will create some shapes and I will place them like in the following image

image 4

For the top layer and the bottom one I will add the following layer style

image 5

image 6

This is my result

image 7

For the other 4 shapes from the middle of the layout I will add the following layer styles

image 8

image 9

This is my result

image 10

Over the big orange shape I will create another one, and you can add a dark gradient

image 11

I will download this set of Vector Web icons

Download vector web icons

I will open the icons in Photoshop. , then I will place the icons like in the following images

image 12

image 13

I will select Horizontal Type Tool, and I will write down some text. The font I have used is:

Myriad pro - for the big texts
Trebuchet MS - for the small texts

Click on the following image to see better the result

image 14

On the bottom of the layout I will add another image with a software box.

image 15

I will create a new layer right above the layer with the pattern. The easy way to create a layer there, you have to select first the layer with the pixel pattern, then press in the same time on CTRL+SHIFT+ALT+N

I will select Brush Tool, and with a big smooth brush I will make a white point in the middle of my layout

image 16

Then I will change the blending mode to Soft light
This is my result. Click on the image to see better my layout.

image 17



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: