How to Create a Clean Website Layout in Photoshop
We're a huge web design resource and actually we were freaking boring till some day. But that's something we're already working on. And rest assured that today's tutorial will bring you some useful web design skills.
This is an intermediate level tutorial and some may seem to be tricky, but why not have a try? Let's get the ball rolling :)
But before we start check this useful resources that will help you to create stunning web design layout:
- Web Layout Tutorial Category
- The Principles of Beautiful Web Design
- White Space is Not Your Enemy
- Creating Liquid and Elastic Layouts
- How to Create Financial Website Layout
- How to Create a Clean Portfolio Layout in Photoshop
First of all,look at the final result of our tutorial. Today we're going to create this lovely website layout:
To design a web layout like this,you should download the "Linecons Free - Vector Icons Pack"
By the way, you can download a free template based on this design: Free Business Template.
Let's start at the beginning. Just fire up your Photoshop and create a new document (CTRL+N). See the parameters below.
Now you should add some pattern to your background.
Layer Style -> Blending options-> Pattern Overlay. Look at the screenshots below:
We want to create an awesome design, yeah? That's why we should use a grid system for designing. You can easily create a solid visual and structural balance of websites with grid-based designs.
Put some grids to your design with intervals of 60px and 20px.
So... now it is time to design the menu of your future website. Use the Rounded Rectangle tool to create it (radius - 3px). The width of your menu is 940px, the height is 34px.
I think that it is an easy task to create a website's menu. To be sure, look at the images below:
To make this menu more eye-candy, go to the Blending Options -> Drop Shadow. Use the settings that you can see on the screenshots:
Blending options-> Inner Shadow
I chose the #6bafff color for this menu bar.
Let's add some text to our menu. Use the Horizontal Type Tool for it.
You can create your design with any font you like. I used the Aller [bold] font. The size is 14px.
All the menu buttons are links and the designer should show how their hover state looks like. So, create are rectangle (the color that I've used for it is #5a90e5).
Every decent website has a search form. Let's create it too :)
Use the Rounded Rectangle tool (radius - 3px) to create a search form with the following dimensions: 124px and 26px
Add some inner shadow: Blending Options-> Inner Shadow
Blending Options-> Color Overlay, color- #5a90e5
Use our favorite Photoshop tool one more time :) Create one rectangle with dimensions 41px and 32px
Blending Options -> Drop Shadow
Blending Options -> Inner Shadow
Blending Options -> Color Overlay (color - #6bafff)
Now it is time to use icons that we've downloaded at the beginning of this tutorial. Open the "Linecons Free - Vector Icons Pack and find the search icon there. Just apply some bells and whistles to it.
Here is our final result for the search form:
Social media connections are very useful and important for every website. That's why today we'll also learn how to create a simple Facebook button. Again with the help of the Rounded Rectangle tool (radius - 3px), we'll create a button
Then use the Rectangle tool (rounded) to create a square (holding the Shift button) with the following size - 16px
Choose the Pen Tool and cut off half of this square.
Edit-> Transform->Rotate to move this triangle and place it on the left side of the rectangle
Select all your "Facebook" layers and merge them (Ctrl+E).
Blending Options-> Inner Shadow:
Blending Options-> Color Overlay (#c1cac5 )
Now add the "follow" text to our Facebook button and play with its blending options.
Try to create your Facebook logo for this button. For example, you can create the "F" letter, decorate it with a blue color (#5a90e5).
Play with Blending options (add a white shadow)
WOW! We did it :) Look at the final result of our menu bar:
Create a new shape: width 940px, height 372px
As always, add some shadow:
And a border: Blending Options-> Stroke (20px, color- #6bafff)
To create nice slider, we should add some images to it. With the help of the Ctrl+Alt+G shortcut,create a clipping mask.
Use a bunch of free icons again. I've selected the following icons: "settings","bubble", "photo","world"
Add them to our design (don't forget to use the grid), distance - 180px
Add some text. You should use the same font that you used for your menu bar. Set the font size to 30px.
Play with Blending Options: add a white shadow, color overlay ( #6aaefd) and an inner shadow.
Copy the styles of this layer and add it to all your icons:
WOW! Look at this amazing result!
Fill these four columns (width of each - 240px) with some "loremipsum" text. It is better to add a different text to every column.
Create a Read More button with the help of the tools that we've used before.
Blending options-> Inner Shadow, Drop Shadow, Color Overlay (#919392).
Add the "Read more" text to our button.
Now we should separate the main content of our future website. Create a 1px line and add styles of your "read more" layout to it.
Your next block can be a section entitled "Partners" or you may want to showcase your latest blog posts.
Use the Rounded Rectangle tool to create a square (hold down the Shift button).
Radius - 3px, width and height - 138px.
Go to Blending options -> Stroke to create a border with the settings below:
Size- 20px, color #919392
Copy and paste this element 5 times :) Place these squares with the interval of 20px.
With the help of a clipping mask, insert the image into the square.
As you can see, you really can use this block for all sorts of purposes. Result:
The footer of the website is as important as the header, if not more so. Ask yourself, "What do you want your visitors to do when they reach the bottom of the page?" The answer you come up with will be a great starting point for designing your website footer.
Now it is time to design a cool footer for our cute website layout. Let's make it bright :)
Add some gradient, for example #3a8df1 - #6bafff, and inner shadow
We'll add three blocks into our footer: Quick links, About Us and Follow Us
Use the Arial Regular font for titles (30px) and add styles as on the screenshots below:
Use the Arial Regular font for the text in the About Us section (12px).
The text for the Quick Links section - 22px.
Put some standard icons into the Follow section - RSS, Google Plus+ and Twitter
Woohoo! We did it! The final result of our tutorial:
More useful information here:
Freebies: Free HTML Template
Download this free business HTML template here and don't forget to push share buttons, because sharing is sexy ;)
SHARE THIS POST
ABOUT THE AUTHOR
I'm crazy about design and other creative stuff. Plus I love making fun of my colleagues.If you have any questions visit my Facebook page.