I love using subtle and soft textures to create clean web designs with an impressive visual impact. The right texture with a good use of typography can generate in simple way (saving your time) unique and absolutely creative web designs.
In this tutorial we are going to learn how to realize a nice web site layout using a nice texture. 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 youll learn, touching with your hands the entire process to make a web page, how to design and code a modern site.
Someone said that Code is poetry, and it is so, for this reason we offer this great possibility to our readers, a complete overview on the PSD-to-HTML conversion, not only a Photoshop tutorial. Do you want to download the source file file of this tutorial (PSD+HTML/CSS)? Become a member today and get access to all premium areas for only 7$ month. Learn more
The Final Result
Below you can see the final result of our efforts: a nice web layout with a lovely design and a great textured background. Click here to see a large preview of the template.
DOWNLOAD PSD + HTML/CSS TEMPLATE
The Design Process
I recommend you to sketch before designing; its 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, Creative Monkeys.
Step 0 The canvas
Lets start with Photoshop. First of all, create a new document 1024×2000 pixels with a resolution of 72 pixels/inch. Import the 960 grid template (12 Col Grid), it is useful to design the page within 960 pixels and to easily draw the columns for the grid.
Step 1 The background
Create a selection (using the Rectangular Marquee Tool) that covers the entire canvas, generate a new layer called bck (ctrl+shift+n) and fill the selection (right click > Fill) whit white. Double click on the layer just added in the Layers Palette and add a Pattern Overlay (from the Stykes menu). Ive used pattern_3_380_soft from our premium set Soft Grunge Patterns.
Step 2 Spray effect
Create a new layer, spray effect, and use the Spary Paint Brushes Vol 2 set to add some white stains on the top of the page.
Step 3 Top header background
Use the Rectangle Tool to draw a rectangular shape on the top of the page (height about 60 pixels, color #8f7544). Add three guides at the center of the document (as shown in the image below) and, using Add Anchor Point Tool, insert three points to the rectangle (on the bottom line), use the Direct Selection Tool (A) to draw a little arrow.
Add the style for the shape just drawn: Drop Shadow (Normal, #ffffff, Opacity 90%, Angle 120°, Distance 1px, Spread 0%, Size 0px) and Inner Shadow (Multiply, #3c260a, Angle 120°, Distance 1px, Choke 0%, Size 3px).
Step 4 Add a quote
Add a on the top-left side using the Type Tool (color #38170c). Give it the same drop down effect previously added for the top-header background.
Step 5 Navigation menu
Create a new little rectangular shape with rounded corners (65×30 pixels with a radius of 5 pixels for the corners, color #e5ddd1).
Set Fill at 50% and give it the following style (#38170c is the color that we use for the Gradient Overlay, Drop and Inner Shadow).
Add the text using Lobster font by Pablo Impallari, color #a2674f; then add a white drop shadow of one pixel. Repeat this step to create the four buttons for the navigation menu.
Step 6 Logo
Go to How to design a funny Monkey T-Shirt illustration and download the fantastic monkey head vector, created by Sebastiano. Import it into Photoshop as Smart Object from the .AI document and resize it (right click > Transform, make sure to hold the proportions). Double click on the layer name in the Layers Palette, select Color Overlay with Blend Mode at Linear Burn and color #38170c.
Draw a custom shape, as shown in the image below, using the Pen Tool (color #38170c) and complete the logo with the name of the theme (use the Lobster font), Creative Monkeys. Apply Linear Burn as Blend Mode for the custom shape.
A little trick, it will be useful when will have to export image for the CSS. The logo has three layers: monkey, custom shape and Creative Monkey. You can duplicate the three layers: hit ctrl and click on these three layers to select them simultaneously, right click on one of the selected layers and find Rasterize and then Duplicate Layers. Now you can merge these three new layers in one layer and apply the Linear Burn Blend Mode. In this way we have the complete logo in a single layer (visible) and the individual parts that make up the logo (that can be hided).
Step 7 Quote II
Use the Type Tool to add a new quote as done previously for the top-header. You can also add a nice quotation mark in the background playing with the opacity as shown below in the picture.
Step 8 Heading Proud to make them unique
We are going to present the works of the Creative Monkey studio
Create a new layer and create a one-pixel selection with Single Row Marquee Tool, fill the selection with a white color. Repeat this operation 1px further down, this time filling with #cdc6bd color.
Use Selection Tool to delete (ctrl+x) the part of the double line out of the 960 pixels as shown.
Duplicate the layer and drag the new line 50-55px further down. Now add the title using Lobster and the usual 1px white drop shadow (make sure that the text is centered).
Step 9 Works
Use the Rounded Rectangle Tool to draw a shape as shown below (300×160 pixels, color #fcfaf7).
Add the following style.
Choose a screenshot image and paste it into our Photoshop document. Now you have to press Ctrl+click on the vector mask thumbnail of the rounded rectangle in order to create a selection, then go to Select > Modify > Contract > 5px to abtain a selection as shown in the image below.
Add a mask to the screenshot layer.
Now we have to add a little tag just below the screenshot. Draw a little rectangle (use the Rectangle Tool), right click an choose Free Transform Path to modify the shape as shown. Rasterize the layer.
Duplicate the layer, ctr+click on the layer thumbnail and fill the selection with a dark brown color; then add a blur effect (Filter > Blur > Gaussian Blur; Radius 0,5 1), set the opacity of the new layer at 15-20%; we have just created a custom shape for the tag.
Add a little noise effect (Filter > Noise > Add Noise; Amount 0,2 1; Gaussian; Monochromatic) to the layer tag.
Now with the help of the Pen Tool design a little tag icon, then add the text (Georgia, 12pt, #965439).
Note: Do you want to learn how to use the pen tool in Photoshop? Check out our tutorial on this matter.
Use the same technique to create the other screenshot boxes.
With the help of the 960 grid add the hedings and paragraphs (using Georgia). Use the Single Column Marquee Tool to create two lines that separate the three columns (use the same technique of the headingss lines).
Add a new rectangular shape (radius 15px, color #965439) and apply the following style (use Type Tool to add know more).
Step 10 About section
We can add two columns to describe the activities of the Creative Monkeys studio. Add a title as made for the previous section.
Add a descriptive text about the company (using Georgia).
A new rectangular shape (on the right side; color #200a02, Opacity 60-70%, Stroke of 1px #d9d1c9), add a square screenshot and a list of activities. In order to design the dashed borders we can use the Type Tool entering the necessary characters (Georgia, 12 pt).
Use our Free social media icon set to add a nice list of social web site where the company is active.
Step 11 Footer
Duplicate the top-header background and drag it down, insert some text to introduce the footer section.
Add a new rectangular shape (color #543124) to enhance the background of the footer.
Ctrl+click on the vector mask thumbnail of the layer with the little arrow the press ctrl+shift+I (Select > Invert) to invert the selection; then go to the dark brown layer and add a layer mask, as shown below.
Complete the footer using the techniques that we have previously used.
PSD-to-HTML conversion
Now its time to create the HTML/CSS structure, this begins understanding the main structure of the layout.
Step 12 HTML Structure
First of all we have to create a blank index.html and style.css, then, using our favourite text editor (Notepad for me), we can initialize our HTML document with Doctype, head and body.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Creative Monkeys - Design Studio</title><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><link rel="stylesheet" href="style.css" media="screen" /></head><body></body></html>
Now, according with the structure displayed in the above image, we can write the basic html structure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Creative Monkeys - Design Studio</title><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><link rel="stylesheet" href="style.css" media="screen" /></head><body><div class="back"><!-- container useful for the background --><div class="main_container"><!-- 960 pixels limit, centered --><div id="top_header"></div><div class="down_header"></div><div class="clear"></div><!-- div useful to separate the different boxes avoiding float issues --><div id="content_works"></div><div class="clear"></div><div id="content_about_us"></div></div><div class="clear"></div><div id="footer"><!-- this section isn't within main container to reproduce correctly the background --><div class="foot_cont"></div></div></div></body></html>
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 12 The background and header
Extract the following images to reproduce the background of the website as we have planned in the psd mockup.
For the menu we use the Sprite technique. This technique is a way to improve performance of a website by combining more buttons in a single image, and with the CSS properties we can display the relevant portions of it on the page elements using background-position property. Below you can see the images that we have to exctract from the psd. Through css properties like width, height, display and background-position, we can create a very responsive menu with a few lines of code.
The top portion of the design is contained in a <div> with the ID top-header.
Note how we need the tag divs with class back and main_container to paste correctly the top-header background. The general textured background is added as pattern into the the body.
<div class="back"><!-- container useful for the background --><div class="main_container"><!-- 960 pixels limit, centered --><div class="top_header"><div class="quote_top"><p>Our instrument is the creativity, our mission is making websites</p></div><ul class="navigation"><li><a class="home" href="#">Home</a></li><li><a class="about" href="#">About</a></li><li><a class="works" href="#">Works</a></li><li><a class="contact" href="#">Contact</a></li></ul></div>...</div></div>
And now the CSS rules.
body { background: url(images/back_pattern.jpg); font: 14px Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; line-height: 1.6em; color: #38170c; }a { text-decoration: none; }.back { background: url(images/main_cont_bck.jpg) repeat-x; }.main_container { margin: 0 auto; width: 960px; }#top_header { background: url(images/top_head_bck.jpg) no-repeat top center; height: 71px; }.quote_top { float: left; padding-top: 18px; }.quote_top p { font-size: 16px; text-shadow: 1px 1px 0px #fff; font-style: italic; }ul.navigation { float: right; padding-top: 14px; }ul.navigation li { display: inline; margin-left: 30px; }ul.navigation li a { display: inline-block; text-indent: -9999px; width: 67px; height: 31px; background-position: 0px 0px; }a.home:hover, a.about:hover, a.works:hover, a.contact:hover { background-position: 0px -31px; }a.home { background: url(images/home.jpg) no-repeat; }a.about { background: url(images/about.jpg) no-repeat; }a.works { background: url(images/works.jpg) no-repeat; }a.contact { background: url(images/contact.jpg) no-repeat; }Now we can add the down-header with the logo (using the %lt;h1> tag) and a quote.
<div class="down_header"><div class="logo"><h1><a href="#">Creative Monkeys - Design Studio</a></h1></div><div class="quote_down"><p>Design is in everything we make, but it's also between those things. It's a mix of craft, science, storytelling, propaganda and philodophy</p><p class="sign">Erik Adigard</p></div></div><div class="clear"></div>
Below the relative css rules.
.down_header { margin-top: 10px; }.logo { float: left; padding-top: 25px; }.logo h1 a { text-indent: -9999px; display: block; background: url(images/logo.png) no-repeat; width: 524px; height: 143px; }.quote_down { float: right; width: 380px; background: url(images/quote.jpg) no-repeat; position: relative; top: 38px; right: -8px; }.quote_down p { font-size: 14px; text-shadow: 1px 1px 0px #fff; font-style: italic; padding: 20px 0 0 20px; }.quote_down p.sign { color: #965439; float: right; padding: 15px 25px 0 0; }Step 14 The contents
We create the grid for the Works section using the following HTML structure. Below the images that we have to extract from the psd.
Note as we extract only an image of 2×57 pixels for the horizontal lines (using png trasparency) for the title because well use the repeat for the background in the css as you will see below.
<div id="content_works"><h2>Proud to make them unique</h2><div class="works_columns"><div class="col_works first_col"><img src="images/screenshot1.jpg" alt="screenshot1" /><span class="tags">html/css</span><h3>WeGraphics.net</h3><p>WeGraphics is a creative studio specialized into the creation of graphic design resources. We do the best to provide high-quality products that our subscribers can use in their commercial projects.</p><span class="know_more"><a href="#"></a></span></div><div class="col_works"><img src="images/screenshot2.jpg" alt="screenshot2" /><span class="tags">html/css</span><h3>PvmGarage.com</h3><p>PV.M Garage is a Web Design Blog that spreads good and fresh information for web designers and developers. The website includes a Community News Section, a Web Design News Aggregator and it weekly delivers useful resources, freebies and awesome stuff for your inspiration.</p><span class="know_more"><a href="#"></a></span></div><div class="col_works"><img src="images/screenshot3.jpg" alt="screenshot3" /><span class="tags">photoshop</span><h3>WgTemplate.net</h3><p>In this tutorial I'll show you how to create a textured web layout, starting from the concept on paper to Photoshop design. We will discuss about site structure and will use the 960 grid to organize our contents.</p><span class="know_more"><a href="#"></a></span></div></div></div>
Use the following style to create the three columns.
#content_works { background: url(images/h_lines.png) repeat-x; clear: both; margin-top: 60px; }#content_works h2 { background: url(images/title_1.png) no-repeat 50%; text-align: center; text-indent: -9999px; height: 36px; padding-top: 25px;}.works_columns, .about_columns { margin-top: 25px; }.col_works { width: 304px; float: left; background: url(images/line_v.jpg) no-repeat 0% 50%; padding-left: 13px; margin-left: 11px; }.first_col { background: none; padding-left: 0px; margin-left: 0px; }.works_columns img { background: #fcfaf7; padding: 5px; border: 1px solid #fff; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px #c6bfb5; z-index: 1; position: relative; }.tags { display: block; width: 106px; height: 26px; background: url(images/tags.png) no-repeat; font-size: 10px; text-align: center; color: #965439; padding-top: 2px; position: relative; left: 90px; top: -8px; z-index: 0; }/* use z-index and position relative for a correct stack order */.works_columns p, .col_about p { padding: 10px 15px 10px 5px; line-height: 1.6em; }.works_columns h3, .col_about h3 { padding: 10px 15px 0px 5px; color: #965439; font-size: 18px; font-style: italic; font-weight: normal; text-shadow: 1px 1px 0px #fff; }.know_more a { display: block; width: 84px; height: 27px; background: url(images/know_more.png) no-repeat; float: right; }.know_more a:hover{ background-position: 0px -27px; }Add a new section to prvide a description of the company. We have to create two columns, in the first columns we write about Creative Monkey using heading (h2 tag) and paragraph (p tag), then we add a box with a list of the services (unordered list ul) and a menu (using ul and li tags) with social media links. Below we report the images from the PSD and the code.
The HTML code.
<div id="content_about_us"><h2>Born to be creative</h2><div class="about_columns"><div class="col_about first_col_ab"><h3>Who we are</h3><p>Creative Monkeys was created to help you! We create unique resources that you can use in your commercial projects without any restriction, we produce ready-to-use sets to make your job easier. Every week we work hard to provide the best of our efforts keeping a relevant quality in our packs, but this is not enough for us: we want to offer a great and comfortable service.</p><p>Our mission doesn't stop here. We show how you can create amazing works using our resources, in fact we produce original and creative works and through our tutorials you can learn how to mix our resources and your creativity to turn out amazing design works.</p><span class="staff"></span></div><div class="col_about"><div class="services"><img src="images/screenshot4.jpg" alt="screenshot4" /><h4>Our Services</h4><ul><li><a href="#">Original Design</a></li><li><a href="#">Handcrafted Code</a></li><li><a href="#">PSD TO HTML</a></li></ul><ul><li><a href="#">WordPress</a></li><li><a href="#">Drupal</a></li><li><a href="#">SEO and New Media</a></li></ul></div><div class="social_links"><ul class="left_social"><li><a class="flickr" href="#">Flickr Group</a></li><li><a class="deviant_art" href="#">Deviant Art</a></li><li><a class="behance" href="#">Behance Portfolio</a></li></ul><ul class="right_social"><li><a class="twitter" href="#">Follow Us</a></li><li><a class="facebook" href="#">Be our friends</a></li><li><a class="stumble" href="#">Stumble Upon</a></li></ul></div></div></div></div>
Update the style with the following css rules.
#content_about_us { background: url(images/h_lines.png) repeat-x; clear: both; margin-top: 60px; }#content_about_us h2 { background: url(images/title_2.png) no-repeat 50%; text-align: center; text-indent: -9999px; height: 36px; padding-top: 25px;}.services { background: url(images/bck_services.png); -moz-border-radius: 15px; -khtml-border-radius: 15px; -wbkit-border-radius: 15px; border-radius: 15px; border: 1px solid #d9d1c8; width: 430px; margin-left: 15px; }.services:after { content:" "; display:block; height:0; clear:both; visibility:hidden; }.services img { float: left; border: 1px solid #d9d1c8; margin: 15px; }.services ul { float: left; margin-top: 4px; }.services ul li { padding: 4px 5px 0 0; border-bottom: 1px dashed #beb0a6; margin-right: 20px; }.services ul li a { color: #d26025; }.services h4 { padding: 15px 15px 0 0; color: #543124; font-size: 18px; font-style: italic; font-weight: normal; text-shadow: 1px 1px 0px #fff; }.social_links { padding: 20px; width: 430px; }.social_links ul.left_social, .social_links ul.right_social { width: 215px; float: left; margin: 0; }.social_links ul.left_social li, .social_links ul.right_social li { padding: 15px 0; border-bottom: 2px dashed #beb0a6; border-right: 2px dashed #e4ddd8; }.social_links ul li:hover { border-bottom: 2px dashed #c15930; }.social_links ul.right_social li { border-right: none; padding-left: 20px; }.flickr { display: block; width: 166px; height: 48px; text-indent: -9999px; background: url(images/flickr.png) }.deviant_art { display: block; width: 170px; height: 48px; text-indent: -9999px; background: url(images/deviant_art.png) }.behance { display: block; width: 206px; height: 48px; text-indent: -9999px; background: url(images/behance.png) }.twitter { display: block; width: 142px; height: 48px; text-indent: -9999px; background: url(images/twitter.png) }.facebook { display: block; width: 168px; height: 48px; text-indent: -9999px; background: url(images/facebook.png) }.stumble { display: block; width: 177px; height: 48px; text-indent: -9999px; background: url(images/stumble.png) }Step 15 The footer
Finally we create the footer with a nice contact form and a list of the latest articles from the blog.
The HTML structure for the footer.
<div class="clear"></div><div id="footer"><!-- this section isn't within main container to reproduce correctly the background --><div class="foot_cont"><div class="quote_foot"><p>Do you like our works? Do you like our philosophy? <span class="contact_us">Contact us!</span></p></div><div class="contact_form"><div class="tit_contact"></div><form id="contact" action="/" method="post"><div class="form_item"><label for="name">Name</label><input type="text" name="name" id="name" size="30" class="field required" /></div><div class="form_item"><label for="email">Email</label><input type="text" name="email" id="email" size="30" class="field required email" /></div><div class="form_item"><label for="message">Message</label><textarea name="message" id="message" cols="30" rows="10" class="area"></textarea></div><div class="submit"><button type="submit">Submit</button></div></form></div><div class="from_blog"><div class="from_blog_title"></div><ul><li><a href="#"><img src="images/screenshot5.jpg" alt="blog1" /></a><h3><a href="#">FIFA World Cup 2010 wallpaperby WeGraphics</a></h3></li><li><a href="#"><img src="images/screenshot6.jpg" alt="blog1" /></a><h3><a href="#">Create a Cosmic Sci-fi Poster Design in Photoshop</a></h3></li><li><a href="#"><img src="images/screenshot7.jpg" alt="blog1" /></a><h3><a href="#">How to enhance your subjects with striking light effects in Photoshop</a></h3></li></ul></div><div class="clear"></div><div class="credits"><p>Creative Monkeys. A premium template by <a href="#">WeGraphics.net</a></p></div></div></div>
Use the following css lines of code to enhance the style of the footer.
#footer { clear: both; margin-top: 60px; background: url(images/bck_foot.jpg); padding-bottom: 20px; }.foot_cont { background: url(images/bck_foot_arrow.jpg) no-repeat 50% 0%; width: 960px; margin: 0 auto; }.quote_foot { height: 79px; padding-top: 20px; }.quote_foot p { text-align: center; font-size: 18px; font-style: italic; text-shadow: 1px 1px 0px #fff; }span.contact_us { color: #965439; }.contact_form { width: 460px; padding-right: 20px; border-right: 2px dashed #f7f5f0; float: left; padding-bottom: 30px; }.form_item { border-bottom: 2px dashed #715344; padding: 15px 10px 10px 0; }.form_item label { display: block; float: left; font-size: 20px; color: #e7e0d4; font-style: italic; width: 80px; font-family: Georgia; }.form_item input[type=text], .form_item textarea { background: none; border: none; font-size: 14px; margin-left: 20px; color: #a58674; width: 300px; border-left: 2px dashed #715344; padding: 0 10px; font-family: Georgia; }.form_item textarea { height: 100px; }.tit_contact { background: url(images/contact_us.png) no-repeat; height: 17px; width: 460px;}button { text-indent: -9999px; background: url(images/submit.jpg) no-repeat; width: 55px; height: 20px; border: none; float: right; margin-top: 15px; }button:hover { cursor: pointer; }.from_blog_title { background: url(images/from_blog.png) no-repeat; height: 23px; width: 460px; margin-bottom: 5px; }.from_blog { padding-left: 20px; width: 455px; float: left; padding-bottom: 30px; }.from_blog ul li{ padding: 10px 0 20px 0; border-bottom: 2px dashed #715344; }.from_blog ul li a { color: #e7e0d4; }.from_blog ul li:hover { border-bottom: 2px dashed #e7e0d4; }.from_blog img { float: left; border: 1px solid #e7e0d4; }.from_blog h3 { font-size: 18px; color: #e7e0d4; font-style: italic; font-weight: normal; padding: 10px 0 0 75px; }.credits { border-top: 2px dashed #f7f5f0; }.credits p { text-align: center; font-size: 12px; color: #f7f5f0; font-style: italic; padding-top: 20px; }.credits p a { color: #d26025; }Thats all, folks! We have just built our nice, textured, web design.
DOWNLOAD THE SOURCE FILES
Related Posts
How to create a professional and clean web layout (with PSD-to-HTML conversion)
How to create amazing light effects in Photoshop
How to create a distinguishable textured web layout in Photoshop
Travelling is my life
ConversionConversion EmoticonEmoticon