Create an Amazing Layout Using Textures
In this tutorial I will show you how to create an amazing layout using a simple texture, and some layer styles. The gradients and layer styles I have used are available for VIP members. This layout was done in less than one hour, because I have all the tools loaded in Photoshop.
Apply for a VIP account to download this layered PSD file
Almost each day I receive questions on how much time do I need to create a tutorial. This layout was done in one hour, and the tutorial was written in almost 2 hours. I create layouts with ease because I have great sets of gradients, layer styles loaded in Photoshop. All these sets are available for VIP members. I am not using other resources because I do not have time to search them over the internet.
You can apply for a VIP account and for a small fee you will have these resources too and I am sure you will find them very useful.
I will start this layout by opening a new document with the following size: 960 x 900 pixels, and with a white background.
Download the following seamless texture (right click on it and choose Save image as)
Open this image in Photoshop, then go to Edit > Define Pattern. Choose a name for this pattern and click OK. Select Paint Bucket Tool, and on the top of your screen select this pattern.
You can use one of the following 200 pixel patterns if you don’t like this one.
200 Pixel Patterns
Your canvas will look like this image
I will select Rectangle Tool, and I will make some shapes like in the following image. The colors doesn’t matter right now.
For the top layer add the following layer styles.
This is my result.
For the second layer I will add the following layer style.
This is my result so far.
Over this grey shape I will add an orange one.
For this orange shape I will add the following layer styles.
This is my result.
I will select the background layer (with the pattern), and I will go to Filter > Render > Lightning effects.
I will use the following settings.
This is my result. Please click on the image to see better the layout.
Select Rounded Rectangle Tool, and create 3 shapes like in the following image
For the black shape add the following layer styles
For the other 2 shapes use the following color: #cbc5b5
This is my result. Click on the image to see better what I am doing.
One more time I will use Rounded Rectangle Tool, to add some shapes.
On the black shape I will add our logo, but before I will place there a logo I will add a layer styles.
This is my result.
On the header of my layout I will place some text buttons, and my simple logo.
The fonts I have used:
For menu: Dilenia UPC, Bold, 24 pixels, Crisp
For logo:Â Dilenia UPC, Bold Italic, 52 pixels, Crisp
On the right side, I will create other shapes with Rounded Rectangle Tool.
You can see a border around all shapes. You can add it with a simple stroke. To access the stroke settings go to Layer > Layer Style > Stroke, and use the following settings:
Over these shapes you can add some images. I will place some 3d Software boxes from our blog. You can see them live if you browse the VIP download area.
On the left side I will add a image.
Now I will write some text with Horizontal Type Tool.
On the right side of the layout, I will add another shape with Rounded Rectangle Tool
Under this shape I will create a similar shape but with a black color. Then I will go to Edit > Transform > Perspective, and with Mouse tool I will modify the top part of the shape by dragging the corners to the left and right.
Then I will go to Filter > Blur > Gaussian blur, and I will use the following settings:
With Move Tool nudge the layer a few pixels to the top. This is my result so far.
This is a nice method to add another shadow, to an object. You can use also drop shadow, but the result will be not the same.
Over this shape I will add some icons. You can download this great set of icons from this link: Website and internet icons
I will open these vector icons in Photoshop, and with Move Tool I will drag the layer over my document.
I will select Line Tool, and I will make three lines. Please note that these lines should be very thin (1 pixel) It is very important to make the lines with the right colors. The lines from the middle should be black, and the other ones should be white. I will zoom my document to see better, what I am doing.
Select all the three lines layers in your layer palette, and click on CTRL+E. This shortcut will merge all the layers into a single one. The next step is to select Eraser Tool, and be sure you have a soft round brush selected.
Erase the left part and the right part of the lines. This is my final result, and it looks like a nice indent.
With the same technique I will create some lines between my text menus on the header of this layout.
This is my final result.
If you want to play with this layered PSD file please apply for a VIP account, and for a small fee you can download all our PSD layouts from all our tutorials, and you can also download our entire premium Resources.
Responses to “Create an Amazing Layout Using Textures”
Trackbacks
- 40 Grunge Web Design Tutorials, Resources and Inspiration | tripwire magazine
- 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. | tripwire magazine
- 40 Excellent Web Design Tutorials for Busy Web Designers | tripwire magazine
- 40 Web tutoriais para Web Designers atarefados « Upmasters
- 网站设计教程汇总 | Booto'Blog
- 30+ Excellent Photoshop Web layout Design Tutorials « Royale9designs a web and graphic design studio – Web Design Services, Web Development Services, SEO Services, Graphic design services, kolhapur, India
- 50+ Amazing Photoshop Web Layout Tutorials of 2010 | Blog 'n' Design
what resolution did you use? 300px, i suppose?
The dpi is 72
Great tutorial.
I just have one question. I am a good web designer, I think my only downside is slicing images. What do you think the best way would be to slice the “what we’ve done” section? I ask because I am working on a website where I want to add a rounded box with a dropshadow, that also overlays two other content boxes as in your article. I am just having a hard time coding the layout in css while keeping to the initial .PSD design.
Thanks again for a great tutorial,
-Ryan.
We have a tutorial only for VIp members to show how a PSd layout can be transformed to a CSS/ xhtml layout
http://www.grafpedia.com/tutorials/design-and-code-a-layout-withouth-using-slice-tool
good stuff!
I love your tutorials.
I think the $10 subscription (VIP member ship) is the best investment I’ve ever made. Your tutorials really helped inspire me.
I used your textures layout as the theme for my new web site portfolio.
http://www.rswebsolutions.com
Once again many thanks for the great tuts.
I am glad you like our membership. I promise you will find a lot more in the future
Your website looks good. You can try to align to the center. I think it will look better.
Hi admin
With regards to your comment about aligning my site to the centre.
After following your tutorial to the letter, I realize that you have used absolute positioning, thus making ‘box in box css modelling’ a no go. I understand that absolute positioning is required for the conversion of PSD to html.
However, this method of coding a site isn’t the norm, for the simple reason that sites won’t be centred.
If you have any suggestions, for centering site without adopting box-in-box CSS then any pointers would be great.
Cheers
I think the easy way is to look on the code alone:
http://www.grafpedia.com/tutorials/40/
Please install firebug extension for firefox, and look how our programmer transformed the psd to an css/xhtml template
Here you can see the valid css :
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.grafpedia.com%2Ftutorials%2F40%2F
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.grafpedia.com%2Ftutorials%2F40%2F
Thank you
Hi admin
I have now centred my site. I spent all night trying to adopt box in box CSS using float left, position relative, display: inline, CSS code, etc and all to no avail.
After viewing your code from your last comment, I ended up changing just one line of code to centre my site. Body tag, changed text-align: left to text-align: center top
Doh
I find your method of coding fantastic, it’s much easier than box in box CSS.
One thing still troubles me though, the majority of sites don’t use absolute positioning.
I guess for semi-static sites such as mine, absolute positioning is fine, but for more dynamic sites (ecommerce, php sites) then box in box modelling is the way to go.
Would I be right in saying this?
The reason i am using absolute position is because you can validate the website very easy.
here is your website:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.rswebsolutions.com%2F
All valid
I have checked your website on 5 different browsers and all looks the same. this is why i use this method of codding. hassle free
You can use the same method when you build a cms too. I’ve made a few hundreds of themes without problems.
Swings and roundabouts then. I do agree with you, with regards to coding a site. Your method rocks.
Once again, a huge thanks for the fantastic tutorial. Keep up the good work.
thank you so much
That is awesome and simple, Great job.
Love it. Love your site and all the other tutorials on it. I love how you take a simple concept and just add a very sleek clean element to it that puts it way beyond others.
Wicked tutorial bro!
This is my version of this layout
http://www.pomazanik.co.cc/
Tnx for tutorial, you are awesome
How did you do the beautiful light effect for the logo(shine in the middle)?Please if you can write the steps.Thank you!
step 1: create a new layer
step 2: Select Brush Tool and with a round smooth brush make a white point 9 use a 200 pixels round smooth brush )
Step 3 : Change the blending mode for that layer to Overlay , or soft light.
Please let me know if this small guide will help you
I want your opinion on those pictures:
http://img708.imageshack.us/img708/3679/softlight.png
http://img341.imageshack.us/img341/112/overlay.png
Thank you!
Your tutorials are really great. So cool!!!!!
Oooooh… The textural feel of it is really good. I’m leaning towards having a web design looking like this as well with some variations here and there. I tried to design a cool logo to incorporate into the said web but it turned out all wrong. Haha. Finally, decided to use the professional services of an online logo design site instead (http://www.logodesignplanet.com) and got the logo I wanted at an affordable price and fast too, within 24 hours. I did provide this link for reference and inspiration to my designer as I wanted the color/look of your design. Thanks for posting this, by the way!