Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design and Code a Layout Without Using Slice Tool

Design and Code a Layout Without Using Slice Tool


Create a new document with the following size: 960 x 900 pixels. I will use a white background.
With Rectangle Tool I will create 4 shapes, and I will place them like in the following image. I will use different colors, so you can see better my shapes.

image 1

Now I will change the colors for the first 3 shapes from the top.

image 2

For the fourth shape (the black one) I will add a simple layer style. Please go to Layer > Layer Style > Gradient Overlay.

image 3

Add the following colors.

image 4

image 5

This is my result so far. In the next image you will see only a small part from this layout.

image 6

On the third layer I will add a simple drop shadow.

image 7

This is how it looks.

image 8

I will select Line Tool, and I will set the weight of the line to 1 pixel.

image 9

Then I will hold down the SHIFT key, and I will create a few lines. If you hold down the SHIFT key you will be able to draw horizontal lines very easy.

image 10

Click on the following image to see the full size layout.

image 11

Now you can select all layers in your layer palette, and press CTRL+E (this shortcut will merge all the layers into a single one)
The next step is to add other shapes. I will use Rounded Rectangle Tool to add two round shapes on the top of the layout. You can see the color codes on the following image.

image 12

For both shapes I will add the following layer style.
Layer > layer style > Stroke...

image 13

This is my result.

image 14

On the bottom of the layout I will create other shapes. One with Rectangle Tool, and another one with Rounded Rectangle Tool.

image 15

For the round shape I have used the following color: #f0f0f0 and I will add also the layer styles I have used a few steps ago.

image 16

And for the black shape I will add the following layer styles.

image 17

image 18

image 19

This is my result so far. Click on the image to see the full size layout.

image 20

On the top of the layout I will create a button with Rounded Rectangle Tool.

image 21

I will add the following layer styles.

image 22

image 23

image 24

image 25

This is my result so far.

image 26

I will right click on the layer inside my layer palette, and I will choose Rasterize Shape.
Then I will select Polygonal Lasso Tool, and I will make a selection like in the following image.

image 27

I will assure I have the button layer selected, and I will press on Delete key from my keyboard.
I will press also CTRL+D to deselect.

image 28

I will duplicate a few times (press CTRL+J) to duplicate a layer. Then with Move Tool I will place the buttons like in the following image.

image 29

For the first button I will change the layer styles.

image 30

image 31

image 32

image 33

This is my result so far.

image 34

Now I place some text and images. This is my final PSD layout.

image 35



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: