Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create Another Type of Layout in Photoshop

Create Another Type of Layout in Photoshop


I will start as usual with a new document with the following size: 960 x900 pixels. Then I will add the following color to the background layer: #ffd46d
I will use a texture image provided from Grafplus

This wood texture is included in the download. You can find the download at the bottom of the tutorial.

Go to Edit Transform > perspective, and modify the layer like in the following image

image 1

I will use the transform tool further to place the shape like in the following image (click on the image to see the full size image)

image 2

I will create another 2 small rectangles with Rectangle Tool, and I will add a brown color to the shapes. Then I will rasterize the shapes, and I will use Dodge Tool, and Burn Tool to add some lights and shadows.

image 3

I will select the background layer, and I will go to Filter > Noise > Add noise. I will use the following settings

image 4

Now I will make a selection like in the following image with Rectangular Marquee Tool

image 5

I will download the following seamless pattern (I have used the same pattern a few days ago in another tutorial)

image 6

I will open the image in Photoshop, and I will go to Edit > Define Pattern. I will choose a name for this patter, and I will click Ok. Then I will return to my layout. I will create a new layer, and with Paint Bucket Tool, and with the following settings

image 7

I will click one time inside my selection

image 8

Then I will change the blending mode for this layer to multiply

image 9

I will select the floor layer, and I will make a selection around the border of the floor, then I will press on CTRL+J (layer via cut)

image 10

I will cut the border of the floor two times, and I will place it like in the following image

image 11

I will add an image with a plug. You can create this image alone using a few different shapes, or you can use stock photography sites to search for a similar plug

image 12

I will make the following selection with Rectangular Marquee Tool

image 13

Be sure you have the floor layer selected, and then press on CTRL+J to create a new layer via cut. This small piece of wood you can place it like in the following image

image 14

Now please be careful, because I will teach you a small trick, on how to give a 3D perspective for this layer.

Follow exactly my steps:

1 - Select the layer in your layer palette, and then press on CTRL+J to make a duplicate layer
2 - Press on V (Move Tool)
3 - Press on Left arrow key
4 - Press on down arrow key

Repeat the steps about 20 times until you have a nice 3d Look

image 15

Create a shape under this shelf with Ellipse Tool

image 16

Then go to Filter > Blur > Gaussian Blur, and use the following settings

image 17

This is my result

image 18

I think my shelf looks quite realistic, and I will leave it as it is for now. With Rectangle Tool, I will create a few shapes.

image 19

For all these white shapes please add the following layer style

image 20

image 21

image 22

This is my result so far

image 23

I will download the following set of vector flower ornaments

And I will place some vector images on inside the pictures

image 24

Then I will add some stock images on this layout. (Click on the image to see full size layout)

image 25

With Horizontal Type Tool, I will add some text

image 26

I will select Line Tool, and I will add some lines on the left side of the layout

image 27

This is my final result. I hope you like it.

Create another type of layout in Photoshop



Author's URL: grafpedia
Final results of our readers
New!
jnettistitches.com
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: