Create another type of layout in Photoshop
Today I will show you how to create another type of layout to be different from what you see all the time. This layout will have a nice 3D look, and will look quite realistic. I think these types of designs will the the trend of next year, so it will eb good if you know how to create them. I see more and more layouts inspired from real life objects.
Apply for VIP to download PSD Layout. With a VIP account you can download all our premium downloads.
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
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)
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.
I will select the background layer, and I will go to Filter > Noise > Add noise. I will use the following settings
Now I will make a selection like in the following image with Rectangular Marquee Tool
I will download the following seamless pattern (I have used the same pattern a few days ago in another tutorial)
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
I will click one time inside my selection
Then I will change the blending mode for this layer to multiply
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)
I will cut the border of the floor two times, and I will place it like in the following image
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
I will make the following selection with Rectangular Marquee Tool
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
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
Create a shape under this shelf with Ellipse Tool
Then go to Filter > Blur > Gaussian Blur, and use the following settings
This is my result
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.
For all these white shapes please add the following layer style
This is my result so far
I will download the following set of vector flower ornaments
And I will place some vector images on inside the pictures
Then I will add some stock images on this layout. (Click on the image to see full size layout)
With Horizontal Type Tool, I will add some text
I will select Line Tool, and I will add some lines on the left side of the layout
This is my final result. I hope you like it.
If you want to download this layout please apply for VIP Membership. This will allow you to download this PSD layered layout, and also ALL resources from our website. The payment is onetime fee, and you will be able also the next releases for the period of time you choose
Responses to “Create another type of layout in Photoshop”
Trackbacks
- Best Tutorials, Websites and Resources of the Week | Webdesigner blog
- Web Design Tutorials: The Ultimate Roundup | How-To
Leave a reply
-
Web design jobs- Nonpublic project #609030 by SeoWebLogix
- Blog writer by acerothstien
- Fading pictures and flash navigation by wiliss87
- Banners for musicshops by BasepointMedia11
- Video Views by marcuskw
- Private Project PTJ 13 - WebGallery Only by simonix
- Private Project PTJ 12 - WebGallery Only by simonix
- php guys needed by Pascal79
- Joomla template purchase and integrate by bnmagic
- W3C validated xhtml conversion with script integration by begwise
-
very cool result. Keep it up
Those are really nice tips! The procedure sounds easy. I’ll try this sometime and hopefully I can also achieve the 3-D look. Thanks again
different and nice work, thanks for the tut..
Very nice .. I like how you built up the woodwork
Great work its inspiring thanks
Very fantastic and creative work!
Awesome web layouts
really amazing
very nice web layouts
Your all web layouts & tutorials are awesome
Thanks a lot
keep up good work
God bless you
there’s no really other way to say it: it simply kick ass!
Although these designs are really cool looking, I’m not sure that they will be mainstream by next year. There are a lot of disadvantages to these nostalgic layouts.
Aside from that, however, this is a wonderful tutorial, and the final result is gorgeous.
What talent!
This is great.. a very good tutorial.
I would love to be able to do this.
You can also get the 3d effect just a bit easier (for the shelf).
1- Select your Move Tool (V)
2- Then you hold Ctrl+Alt
3- While still holding this buttons press on Left arrow key and Press on down arrow key about 20 times (10 times each) so you don’t have te press Ctrl+J over and over…
very very good
Oh ye, very nice.
thanks!
how do you take into account different resolution when turning into xhtml/css?
I don’t know exactly what you mean. The resolution should be 72 DPI. This value you can set when you create the document for the first time
I think dragon meant the user’s screen resolution. Which is, some people have 1024*768, some people 1280*1024 and some people more random amounts of pixels in the browser since they might have not maximized their browser window. Designing for web always has technical constraints, and in this case for example the floor would be impossible to make look good and continuous on web (unfortunately, since I think it’s freakin’ good looking :/ ). Printing resolution, to which you refer with DPIs doesn’t make a difference in the web, since everything is output in 72 DPI anyway.
You should always have a work area bigger than your screen when designing for web. The real content width here is “correct”, but browsers always have a variable amount (max unlimited) of “empty space” around the content area, and this has to be taken into account, and usually this means making objects either fixed size with borders or making them into repeatable patterns.
Great work Razwan
Thanks For the Nice Information