Our passion for web stuff grow day by day, so today we’ll learn how to create a highly-professional and clean web layout. We will see that using gradients, the noise filter and some subtle 1px lines to achieve depth, we can easily create a great web design for a wide range of uses.
As usual the post is divided in two parts: first we create the web page in photoshop and then we convert the PSD in a working HTML/CSS page ready for the web. Following this step by step walkthrough of design you’ll learn, touching with your hands the entire process to make a web page, how to design and code a modern site.
The Final Result
Below you can see the final result of our efforts: a nice web layout with a lovely design and a fresh style. Click here to see a large preview of the template.
The Design Process
I recommend you to sketch before create your web design using Photoshop; it’s the first important step. Imprint your ideas, on how the layout should be, on a blank sheet to keep in mind your objective during the entire design process. Below you can see my sketch for this ‘project’, Download.Movie.
Step 0 – The document
Let’s start with Photoshop. First of all, create a new document 1024×1200 pixels with a resolution of 72 pixels/inch and transparent background contents. Import the 960 grid template (12 Col Grid), it is useful to design the page within 960 pixels.
Step 1 – The background
Create a selection (using the Selection Tool) that covers the entire canvas, generate a new layer called ‘background’ and fill the selection (right click > Fill) with #f9f9f9 color, then you can lock the layer. Use the Rectangle Tool to draw a rectangular shape on the top of the page (height about 270 pixels, color #29729f). Add a linear Gradient Overlay (double-click on the layer in the Layers Palette) from black to white (set Bland Mode to Soft Light, Scale 150%).
Duplicate and rasterize the layer just created and add a noise filter (Filter>Noise>Add Noise).
Use again the Rectangle Tool to draw a rectangular shape (heigh 4-5 pixels, color #162850), select the Rounded Rectangle Tool with a radius of 10px and add a little shape (make sure to select the option Add to shape area) as shown.
Draw a 1px line, using Drop Shadow, in order to add depth as shown in the images below.
Step 2 – Logo
On the top-left side of the page we add the logo.
To create a soft light effect for the background, you can use the Elliptical Marquee Tool creating 2 white layers with a Gaussian Blur Filter (Filter>Blur>Add Noise) and an opacity of 50% for the first layer and of 20% for the second layer.
Now add other 3 layer, but this time set fill to 0% and add a Gradient Overlay for each layer as shown below in the images.
Now using Rounded Rectangle Tool draw a small square (hold down Shift to draw a perfect square), then with the Custom Shape Tool draw a little arrow as shown.
Rasterize the two layers and use the arrow to cut out an arrow from the square. Then resize and transform the custom shape as shown.
Add the following style:
Now with Type Tool write the name of the company, then add the same style that we have just used for our icon.
Step 3 – Complete the header
To complete the header add the menu and a sign-up/login box, use the Type Tool and a soft Drop Shadow for the text to obtain the following result.
Step 4 – The down-header
Draw a new rounded rectangular shape and add a soft Drop Shadow; then put in an amazing movie image.
Now it’s time to create an attractive box for describing the quality of the service and to engage new users.
Add a rectangular shape on the right, then set the Fill to 0% and add a nice style a Gradient Overlay and a Drop Shadow to create a nice box, see below for the details.
Add some text, use Dejavu Sans (30 pt, white) for the title and Lucida Sans (12 pt, #0b537f) for the paragraph. Draw a rounded rectangular shape (radius 2px, color #6fc630), right-click on the rectangle and rotate it, finally add a layer mask to obtain the following result.
Now set the style for our ribbon as shown below.
Add two call-to-action buttons, orange and blue, through Rectangle Tool… make them precious using Bevel and Emboss and Gradient Overlay as shown.
Repeat the process in order to create an orange button.
Add the descriptions for the buttons, fell free to use a soft Gradient Overlay (use a green color for the green button and so on) and a subtle Drop Shadow to create the following effect.
Step 5 – The contents
This section is the core of our layout where the visitors can easily find useful information. We want to build a simple two columns layout with some images and descriptions, see below to take a look at the final result.
I don’t want to annoy you with redundant stuff. It’s clear that you can utilize the techniques used for the header to realize the elements of this section. Some examples? The two screenshots in the “Coming soon on Download.Movie” section are made using the same steps that we have followed during the creation of the screenshot for the down-header, there is only a difference: you have to add a Color Overlay (from Styles; color black, Opacity 30%). The ‘play’ button is a mix of two shapes like in the logo, once rasterized the icon you have to add only a black Drop Shadow and to set the right value of Opacity for the layer (70%). Again, for ‘read more’ buttons you have to remember what we have done previously with call-to-action buttons, now instead of orange, green and blue, use light grey. Just the last advice, make use of the ‘12 Col Grid’ layer and of Photoshop’s guides to balance your contents.
Step 6 – The footer
Add three new rectangles (colors #cfdcf8 and #162850) as shown below to create the background for the footer.
Add a soft Gradient Overlay to the dark blue layer then rasterize all layers and a add a subtle noise effect. I’ve decided to not add the noise effect for the credits background.
Finally add some lists with useful links (to create the points for the list items draw a little circle using Ellipse Tool – hold down Shift, color #cfdcf8 – and set Opacity to 20%, the duplicate the layer) and a description box (for the ‘read more’ button use the same technique tah we have just applied for the points, the font is Lucida Sans). Add the credits and the psd mockup is complete.
PSD-to-HTML conversion
Now it’s time to create the HTML/CSS structure, this begins understanding the main structure of the layout.
Step 7 – HTML Structure
First of all we have to create a blank index.html and style.css, then, using our favourite text editor (I write my code through Notepad), we can initialize our HTML document with Doctype, head and body.
Download.Movie - A great database of movies
Now, according with the structure displayed in the above image, we can write the basic html structure.
Download.Movie - A great database of movies
Add reset to the style.css as shown below.
/* CSS Reset */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ol, ul { list-style: none; } :focus { outline: 0; } Step 7 – Background, top-bar and header
Extract the following images to reproduce the top section of the website as we have planned in the psd mockup.
The markup for the top-bar and the header, we use unordere lists for the menu and h1 for the logo.
Download.Movie - A great database of movies
And now the CSS rules. Note that we add the support for @font-face, importing the font Dejavu that we will use in the down-header section.
* General */ @font-face { font-family: 'DejaVuSansCondensedBook'; src: url('DejaVuSansCondensed-webfont.ttf') format('truetype'); } body { background: #f9f9f9; font: 12px "Lucida Sans Unicode", sans-serif; line-height: 1.5em; color: #555; } a { text-decoration: none; } #top_background { background: url(images/top_bck.jpg) repeat-x; } .main_container { margin: 0 auto; width: 960px; background: url(images/logo_bck.png) no-repeat; } /* Main-container classes */ .top_bar { float: right; position: relative; top: 0px; right: -11px; width: 101px; height: 24px; background: url(images/login_bck.jpg) no-repeat; padding-left: 11px; } ul.login li { display: inline; padding-left: 2px; } ul.login li a { color: #f2f2f2; font-size: 10px; } ul.login li a:hover { color: #89c0dd; } .header { clear: both; height: 80px; margin-bottom: 53px; } .logo { float: left } .logo h1 a { display: block; width: 345px; height: 50px; background: url(images/logo.png) no-repeat; text-indent: -9999px; margin: 16px 0 0 40px; } ul.navigation { float: right; margin: 30px 40px 0 0; } ul.navigation li { display: inline; margin-left: 30px; } ul.navigation li a { color: #fff; font-size: 14px; text-shadow: 1px 1px 0px #155479; } ul.navigation li a:hover { text-decoration: underline; } Step 8 – Main-box, down-header and contents
Now we can add the down-header with a slideshow and the contents section. In order to realize a
nice slider we use the cycle plugin.
First of all download the jQuery plugin and paste the file ‘jquery.cycle.lite.min.js’ into the folder of our template, download jQuery and paste ‘jquery.js’ too and then you have to add the following lines of code.
Download.Movie - A great database of movies
For the elements contained into the main-box we will use the following images.
Now take a look at the markup for the rntire main-box section.
Download.Movie - A great database of movies 
The best way to watch your favourite movies
The use of commerce is conducted in this way, spurring and drawing on innovations in electronic funds transfer, supply chain management.
Featured entries this week
We want to provide only high-quality DVD movies to our members. High-quality, easy-to-find: the best of the week.
The first movie this week
The group sets out for the treasure. They walk to Pete's cousin's house
dur. 110’ | action | 2011 | more...The first movie this week
The group sets out for the treasure. They walk to Pete's cousin's house
dur. 110’ | action | 2011 | more...The first movie this week
The group sets out for the treasure. They walk to Pete's cousin's house.
dur. 110’ | action | 2011 | more...Featured entries this week
A new movie is coming on our website
Rumpelstiltskin tricks a mid-life crisis burdened Sdrok into allowing himself to be erased from existence and cast in a dark alternate...
Another movie downloadable
Work causes a single mother to move to China with her young son; in his new home, the boy embraces kung fu, taught to him by a master.
Now activate the slider adding the following lines of code just above the
No comments:
Post a Comment