Jul
How to create a nice looking web layout
Hello. In this tutorial, I will show you how to create a nice looking web layout where you can promote your services. This tutorial will use a simple wood texture and some gorgeous 3D renders with robots.
Download the following image on your computer, and then open it in Photoshop. From the Edit drop down menu select Define Pattern.
After you choose a name for this pattern you can close the document with this texture.
Now you can create a new document.
Select Paint Bucket Tool, and with the pattern you just created click one time inside your document. It will look like in the following image.
With Rectangle Tool create a shape like in the following image
For this shape i will add some layer styles
Here is my navigation bar
One of the most important things when you create layouts are stock images. for this layout i will use some nice 3D renders. During this tutorial you will see how some nice images will change the overall look of the layout.
I will select Rectangular Marquee Tool, and on a new layer ( press on CTRL+SHIFT+ALT+N ) draw a big white point ( this point was made with Brush Tool, and with a big smooth brush i will make a simple drawing like in the following image )
I will press on CTRL+D to deselect, and then i will change the blending mode for this layer to Overlay. Here is my result so far
On the header i will create some simple text menus, and a nice impressive text logo. I will add also some text for the main area of he layout.
Under this clean header i will create a new shape with Rectangle Tool. I will use the following color for the big shape: #ebebe9
On this area i will place some text with different styles. here you can place on of the best services you can provide to your customers
Under the text i will create a big shape with a white color. I have used Round Rectangle Tool
I will add also another nice 3D images with robots
Under the body of the layout i will add even more images.
The last step is to create the footer. I have used a simple dark shape, which was placed exactly on the bottom of the layout. Over this dark layer i will place some text like in the following image
Here is the final layout. If you want to download this layered PSD layout you can register for a VIP account. A VIP account will grant you access to all resources from Grafpedia.com
Join online pass4sure 646-364 training to pass HP0-D07 exam with fast success, also get free download link for a+ certification practice test.



















































nice work
Hey nice layout, the bottom image on a few of your recent tutorials have been vertically stretched, you may want to check that out
Really nice web layout and those 3D character are cool
Nicely done. Though, my comment is that people might get confused when you write “Download the following image on your computer” (I know that after careful reading, I had to use the wood texture, but still), because they think they’d have to download the girl on the top.
Cheers
No 1 tutorials
example of genus web designer
keep up good work man
god bless you
Very nice tut Gratz!
Wow really nice, thanks