Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

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 you’ll 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.

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

DOWNLOAD PSD + HTML/CSS TEMPLATE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.

The Design Process

I recommend you to sketch before designing; 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’, Creative Monkeys.

Create a lovely textured web design from Photoshop to HTML/CSS

Step 0 – The canvas

Let’s 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). I’ve used ‘pattern_3_380_soft’ from our premium set Soft Grunge Patterns.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

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).

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

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).

Create a lovely textured web design from Photoshop to HTML/CSS

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).

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

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).

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

Use Selection Tool to delete (ctrl+x) the part of the ‘double’ line out of the 960 pixels as shown.

Create a lovely textured web design from Photoshop to HTML/CSS

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).

Create a lovely textured web design from Photoshop to HTML/CSS

Step 9 – Works

Use the Rounded Rectangle Tool to draw a shape as shown below (300×160 pixels, color #fcfaf7).

Create a lovely textured web design from Photoshop to HTML/CSS

Add the following style.

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

Add a mask to the ‘screenshot’ layer.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

Add a little noise effect (Filter > Noise > Add Noise; Amount 0,2 – 1; Gaussian; Monochromatic) to the layer ‘tag’.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

Use the same technique to create the other screenshot boxes.

Create a lovely textured web design from Photoshop to HTML/CSS

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 headings’s lines).

Create a lovely textured web design from Photoshop to HTML/CSS

Add a new rectangular shape (radius 15px, color #965439) and apply the following style (use Type Tool to add ‘know more’).

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

Add a descriptive text about the company (using Georgia).

Create a lovely textured web design from Photoshop to HTML/CSS

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).

Create a lovely textured web design from Photoshop to HTML/CSS

Use our Free social media icon set to add a nice list of social web site where the company is active.

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

Step 11 – Footer

Duplicate the top-header background and drag it down, insert some text to introduce the footer section.

Create a lovely textured web design from Photoshop to HTML/CSS

Add a new rectangular shape (color #543124) to enhance the background of the footer.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

Complete the footer using the techniques that we have previously used.

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

Create a lovely textured web design from Photoshop to HTML/CSS

PSD-to-HTML conversion

Now it’s time to create the HTML/CSS structure, this begins understanding the main structure of the layout.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

<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 we’ll use the repeat for the background in the css as you will see below.

Create a lovely textured web design from Photoshop to HTML/CSS

<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.

Create a lovely textured web design from Photoshop to HTML/CSS

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.

Create a lovely textured web design from Photoshop to HTML/CSS

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 wallpaper
by 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; }

That’s all, folks! We have just built our nice, textured, web design.

DOWNLOAD THE SOURCE FILES

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

piervix

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development. Now he works to make WeGraphics the best place to find design resources

113 Comments

(+add yours)
  1. Great post! Love seeing how other designers work. (great use of texture).

  2. Wow, awesome stuff – awesome end result & a very solid explanation of the process. Great work.

  3. Stefanos Hadjisoteriou

    Looks REALLY useful! Can’t wait to get some spare time to read it.
    The design is beautiful too – something you don’t always see in these tutorial type articles.
    Thanks.

  4. A kickass layout, process and tutorial! Well done Pier :)

  5. Great work Piervincenzo;-)

  6. Thank you so much, my dear friends. I’m glad and honored that you like the work for this tutorial.

    Cheers!

  7. Great tutorial with a very detailed work and lovely end result, good job

  8. What is the name of the font used in logo?

  9. Lobster font by Pablo Impallari – http://www.impallari.com/lobster/

  10. Nice way to keep “empty” refreshing.

  11. Very detailed. great end results. Love it

  12. terrific! thanks for this helpful post!

  13. Pretty cool tutorial!

    Awesome explanation wihout empty spots.

    Keep up!

  14. Wowowowow o.O From scratch to html & css… just amazing!

  15. Denny

    Just found this blog. Found a gold mine of goodness!

  16. Thankyou for this great detailed tutorial. I really like the hand crafted feel these patterns give to the site design like the site is painted or printed onto a canvas. This is a breath of fresh air from glossy corporate sites and believe this style applies a more artistic approach to web design which I feel the web needs.

    The letterpress style I have found works exceptionally well over these patterns. Thankyou for the resources and tips.

  17. this is a brilliant tutorial I see

  18. Thank you guys, I’m glad you like the tut! Your comments are really appreciated.

  19. Really nice work and I like how you showed the process.

  20. James Sterling

    honestly, the only thing I dislike about this design is that you spelled DeviantArt wrong.

  21. martin

    awesome !

    thanks for sharing,

    greetings from latinamerica ,

    Martín

  22. awesome!!!

    Thank for sharing.. :)

  23. I love it! It’s amazing what a simple texture will do. Those are some cool sites and even better photos. Who did that work? I love the monkey.

  24. Matias

    great work, but all resources are charged….

  25. gr8 post ………………………..

  26. thanks for a detailed pictures and info…

    Thanks & Regards,
    DesigningStudios.com

    • Thanks for reading our tutorials ;)

  27. why put in the background most of the pictures? As icons socials

  28. Wow, this is the first time I’ve seen someone else who actually sketches their website designs out on paper. I actually let our clients see what we’ve sketched out with their graphical website concepts. It gives them a better idea of the actual process.

    Great post – great instructions – great blog! I’ll definitely be sticking around!

  29. absolutely awesome tutorial. very detailed n well explained. great job. very helpful post!

  30. What line of work are you in? http://feqygimeodoh.de.tl petite girls model I want her and lick her everywhere. She’s so cute and sexy. The two last comments are so stupid, what are you doing here if you don’t enjoy shemale (look the title!!!)

  31. Recorded Delivery http://kiqedeteno.de.tl naked man models i see alot of shit being said about black men.. u all are just jeakous cause he has a huge nice juicy cock and u guys prob have shit all down there so stop being so damn mad at them!!

  32. Your cash is being counted http://sagaruyyt.de.tl nymphet portal link one thing that isnt fake is the way she squirts, i honestly cud watch her cum all day n night

  33. Cynthia Ward

    I’m confused about step 3. I used #8f7544 and I get a fairly dark brown. In the tutorial, it’s a very pale tan, and the pattern is visible through it. Is there supposed to be some transparency to the shape, or a blend mode on the layer? I tried several, but couldn’t come up with anything that matched what I see here.

    (If you get this message, you may also notice that you’re getting some ugly spam on here as of late.)

  34. Cyd

    In step 5, it says to use 38170c for the drop shadow, but it looks like you’re using white, or something light at least.

    You also didn’t mention the “hard light” blend mode in the text. It’s only in the accompanying image.

    In step 6, Linear Burn turned the image black. I had to use Linear Dodge to coax even a little bit of brown out of the image.

    I love the look of this site and hope I can reproduce it. It’s a great learning exercise.

  35. I never would have thought how much information you could find out there on this!
    Thank you for making it all easy to grasp

  36. Always pleasant to stumble onto a new site this excellent.

    I’ll be coming back for certain!

  37. Very nice post. I just stumbled upon your weblog and wished to
    say that I’ve truly enjoyed browsing your blog posts. After all I’ll be subscribing to your feed and I hope you write again soon!

  38. Howdy! I know this is kinda off topic however
    , I’d figured I’d ask. Would you be interested in trading links or maybe guest authoring a blog article or vice-versa? My site covers a lot of the same subjects as yours and I believe we could greatly benefit from each other. If you happen to be interested feel free to send me an e-mail. I look forward to hearing from you! Wonderful blog by the way!

  39. It’s a perfect tutorial. I think that for my pictures and texts this may help me in creating an interesting things. Thanks for posting!

  40. very good tnx

  41. Could I order a new chequebook, please?

  42. Nice to meet you olderladies
    she has the perfect body

  43. I’ve got a full-time job http://community.parents.com/asumouooi/blog/2013/04/04/lolita_kingdom_nude_pics lolita girls preteen underage Dayum she lookin she a Big ASS oak tree!!!! bUt Id still climb that tree, and chop dat MF down to size, ya Dig!!!

  44. I’d like some euros lolitas sixteen r ygold wowo i sware to god this chick is my gym teacher. lol im gonna go into her office put this link up and then leave my phone number lol

  45. I’m not working at the moment pics of forbidden lolita In the times when teens post posing pics to various galleries, and watch porn, talk naughty and enjoy, if such sweety would one all of the sudden notice and realise having gotten into it like that and it been then kind of long road in her own time thinking and path, then what would there to be than to accept it? Her own pleasures, even if with loving then huge cock black men. Times and trends go as they do. Societies are more open to people being sexual as they are. I think I could accept.

  46. History 100 toplist lolita sites i was worried about the fan knocking her head off

  47. shweta

    thnks for sharing ur creativity!! It was really very useful…

  48. Wow, awesome blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your website is magnificent, let alone the content!

  49. I have a site on social fan exchange. when i was customizing my site came here through google and definitely learned a tutorial. thanks piervix.

  50. This is the right webpage for anyone who hopes to find out
    about this topic. You understand so much its almost hard to argue with you (not that I personally would want to…HaHa).
    You definitely put a fresh spin on a subject which has been discussed for decades.
    Great stuff, just excellent!

  51. Fastidious respond in return of this query
    with real arguments and telling everything regarding that.

  52. If you desire to improve your experience just keep visiting
    this website and be updated with the latest news update posted here.

  53. Everyone loves it when individuals get together and share opinions.

    Great site, keep it up!

  54. Good site you have got here.. It’s difficult to find high-quality writing like yours these days. I truly appreciate individuals like you! Take care!!

  55. Greate article. Keep posting such kind of info on your page.
    Im really impressed by it.
    Hey there, You’ve done a great job. I’ll definitely
    digg it and individually suggest to my friends. I am confident they’ll be benefited from this web site.

  56. I’m no longer positive where you are getting your info, but good topic. I needs to spend a while learning much more or understanding more. Thanks for great information I used to be in search of this info for my mission.

    • But several weeks ago, jane went on MAJOR
      sale on Hautelook, which is a hautelook discount code hautelook A while ago, Hautelook had an amazing spring watch
      sale, with MICHAEL KORS watches on sale http://HautelookQueen.
      webs.com!

  57. This paragraph will help the internet users for setting up new
    website or even a weblog from start to end.

  58. Hello there, just became aware of your blog through Google, and found that it’s truly informative. I’m gonna watch
    out for brussels. I will appreciate if you continue this in future.

    Numerous people will be benefited from your writing.
    Cheers!

  59. Admiring the time and energy you put into your site and detailed information you present.
    It’s great to come across a blog every once in a while that isn’t the same out
    of date rehashed information. Excellent read!
    I’ve saved your site and I’m adding your RSS feeds to
    my Google account.

  60. I for all time emailed this website post page to all my friends,
    as if like to read it afterward my links will too.

  61. I love to share understanding that I’ve accumulated with the season to help improve group overall performance.

  62. It’s actually a nice and useful piece of info. I am happy that you just shared this helpful information with us. Please keep us up to date like this. Thank you for sharing.

  63. Woah! I’m really digging the template/theme of this site. It’s
    simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between usability and appearance. I must say you have done a amazing job with this. In addition, the blog loads extremely fast for me on Internet explorer. Exceptional Blog!

  64. Greetings! Very useful advice within this article!
    It is the little changes which will make the greatest changes.
    Thanks a lot for sharing!

  65. I have read a few excellent stuff here. Certainly worth bookmarking for revisiting.
    I surprise how much effort you set to make one of these magnificent informative website.

  66. I am extremely inspired with your writing abilities as well as with the layout in your
    blog. Is this a paid subject matter or did you customize it
    your self? Anyway stay up the nice quality writing, it is uncommon to look a nice blog
    like this one these days..

  67. Hello, i think that i noticed you visited my website so i
    came to go back the choose?.I am attempting to in finding things to enhance
    my site!I suppose its adequate to use a few of your ideas!
    !

  68. I am regular reader, how are you everybody? This article
    posted at this web page is genuinely fastidious.

  69. Hello there! This is my first comment here so I just wanted to give a quick shout out and tell you I genuinely enjoy reading through your
    posts. Can you suggest any other blogs/websites/forums that deal with the
    same topics? Thank you!

  70. Hello there, I found your site by the use of Google while looking for a similar matter, your site came up, it appears to be like good.

    I’ve bookmarked it in my google bookmarks.
    Hi there, just become aware of your weblog thru Google, and found that it is really informative. I’m going to watch out for brussels.
    I will be grateful if you proceed this in future.
    Numerous other people will probably be benefited out of your writing.

    Cheers!

  71. Very shortly this web page will be famous amid all blogging people, due to
    it’s fastidious content

  72. What a material of un-ambiguity and preserveness of precious experience concerning unpredicted emotions.

  73. Hi! Would you mind if I share your blog with my twitter group?
    There’s a lot of people that I think would really appreciate your content.
    Please let me know. Thanks

  74. Progression is what you want when it comes to building muscle, so it
    makes sense you must progress in some way in your workouts.
    There are days you need to stay away from weights, on such days light
    cardio-pulmonary exercises are enough. For most skinny
    guys, we build muscle best in the four to six rep range with four to six sets.

  75. I like the textured. Great tutorial. I just can say “Woow amazing” :-)

  76. I love to disseminate knowledge that I’ve built up with the 12 months to assist improve team efficiency.

  77. Hiya! I just wish to give a huge thumbs up for the good info you will have right here on this post.
    I shall be coming back to your blog for more soon.

  78. Hey there! I realize this is somewhat off-topic however I had
    to ask. Does managing a well-established blog such as yours require a lot
    of work? I am completely new to running a blog however I do write in my journal on
    a daily basis. I’d like to start a blog so I will be able to share my personal experience and feelings online.
    Please let me know if you have any recommendations or tips for new aspiring blog owners.
    Thankyou!

  79. It is among the sole games that connects you
    into the globe you’re enjoying in, and provides you total control
    to complete nearly something you wish. The
    HD, in combination with a dynamic camera, makes playing this game of i – Pad
    a real treat. This set can be split into 4 different playing parts.

  80. In get for the penis to turn out to be erect, the chambers of the penis need to hold an important
    amount of blood. f bathmate hydropump review this i.

    are adjustable.

  81. Great website. A lot of useful information here. I am sending it to a few friends ans additionally sharing in delicious.
    And obviously, thanks to your effort!

  82. Hey! Someone in my Myspace group shared this site with us so
    I came to take a look. I’m definitely loving the information.
    I’m bookmarking and will be tweeting this to my followers!
    Terrific blog and terrific style and design.

  83. Thank you for sharing your thoughts. I really appreciate your efforts and I am waiting for your further post thank you once again.

  84. Everyone loves it when folks come together and share ideas.
    Great site, stick with it!

  85. First of all I would like to say awesome blog!
    I had a quick question that I’d like to ask if you do not mind.

    I was curious to know how you center yourself and clear your mind before
    writing. I have had a tough time clearing my mind in getting my ideas out.

    I do take pleasure in writing however it just seems like the
    first 10 to 15 minutes are usually wasted simply just trying to figure out how to begin.
    Any ideas or hints? Appreciate it!

  86. I will immediately grasp your rss as I can not in finding your email
    subscription link or e-newsletter service. Do you have any?
    Please allow me understand in order that I may
    just subscribe. Thanks.

  87. I could not resist commenting. Very well
    written!

  88. What i do not understood is actually how you’re no longer really a lot more neatly-appreciated than you may be right now.
    You’re so intelligent. You understand therefore considerably when it comes to this topic, made me in my view believe it from so many various angles.
    Its like men and women aren’t interested unless it’s one thing to accomplish with
    Woman gaga! Your individual stuffs excellent. Always handle it up!

  89. If you are interested in more information and where to
    buy the Norelco range at its cheapest price available today, click on our
    link below or in the resource section attached. You will get a feeling of whether
    or not something is right or wrong. Muscles that are given a
    good workout will become tighter and firmer.

  90. Excellent site you’ve got here.. It’s hard to find high quality writing like yours these days.

    I seriously appreciate individuals like you! Take care!!

  91. I was suggested this blog by way of my cousin. I am no longer certain whether
    this post is written via him as no one else recognize
    such targeted approximately my problem. You’re incredible!
    Thanks!

  92. Nice blog! Is your theme custom made or did
    you download it from somewhere? A theme like
    yours with a few simple adjustements would really make
    my blog shine. Please let me know where you got your theme.
    Appreciate it

  93. These two forms of using the word’roll form’ will be used indistinguishably throughout this manuscript.
    This article will take you through the steps to safely remove the hinge and roller assembly
    and replace the roller. If your garage door is old and worn out,
    a new one can do a lot to improve the look of your home.

  94. I usually do not create many comments, but i did a few searching and wound up here Create a nice
    web design with a lovely textured background. And I actually
    do have a couple of questions for you if it’s allright.
    Could it be just me or does it look as if like a few of these
    comments come across like they are left by brain dead people?
    :-P And, if you are posting on additional online social sites, I’d
    like to follow everything fresh you have to post.

    Could you make a list of the complete urls of all your social pages like your
    Facebook page, twitter feed, or linkedin profile?

  95. This oil is obtained from black currant seeds and accommodates omega three
    and omega six. If you’re intrigued but still not keen on
    applying yeast infection cream on your scalp, you may be happy to know that some hair loss sufferers are using dandruff
    shampoos with similar results. During the past few years hair loss
    transplants are becoming more advance with the development of new technologies.

  96. Big business is for those who don’t know how to
    have a HUGE business. If the children are on a summer vacation, this is the best
    time to urge them to start small businesses. An entrepreneur must be aggressive
    sufficient to pursue his goal despite getting many rivals and rivals.

  97. If you plan to be a book heroine, this means that you must eat
    all the time, except when you’re not eating, and then
    you should be thinking about eating. If I knew how to bake
    cookies, I would do that and send over a care package but Im much
    better at telling jokes so I go there and entertain,
    shake hands and thank the men and women who serve our
    country. Brad Garret is a stand-up comedian but also well known for his acting career.

  98. I just like the valuable information you provide on your articles.

    I will bookmark your blog and check again right here frequently.
    I am slightly sure I will be told a lot of new stuff right here!
    Best of luck for the next!

  99. It acts immediately on all your garage concerns as quickly as possible.
    Tilt up doors use fir, spruce and other soft wood; roll up uses oak, redwood or plywood.
    Just as you did before, watch for any glowing items, since you’ll want to be able to build a new lock
    grinder in a moment.

  100. I loved as much as you’ll receive carried out right here.
    The sketch is tasteful, your authored material stylish.
    nonetheless, you command get bouvht an nervousness over that you wish be delivering the following.
    unwell unquestionably come more formerly again since exactly the same nearly vety often inside case you shield this increase.

  101. Now, using targeted advertising is similar in cost to
    blanket advertising; most advertisements now have a targeted component,
    but by using heavily targeted advertising and SEO in combination,
    you can identify your target audience and make sure that your advertisements appear only
    in front of the people who want to see them, and that anybody who is looking for your
    site or products after seeing an advertisement can find it.
    In all of my testing and working content creation, I have focused
    a lot on SEO and even gone through real hoops to get my content super search engine optimized.
    If your website is easy to use then people will be more than willing to come
    back to it.

  102. Hello, its plewasant paragraph regarding media print,
    we all be aware off media is a enormous source off facts.

  103. The most important thing to research is your pricing.
    What you’re doing is summarizing the detailed information
    you compiled in phase 2, into a boat hire business.
    Would you european union open borders be willing to pay.
    The Small Business Administration SBA offers tips on what should be used
    to form your pricing and marketing strategy
    are undertaken by the expert.

  104. This is the right website for anybody who would like to understand
    this topic. You understand so much its almost tough to
    argue with you (not that I actually will need to…HaHa).
    You certainly put a brand new spin on a topic that’s been discussed for a
    long time. Wonderful stuff, just excellent!

  105. For the benefit of developing a pertinent product comparisons, we have looked
    at routers in this variety that discuss similar aspects for example IEEE 802.11n wi fi standards, 2.4-ghz band and dual antennas.
    If you are buying a new router, nothing significantly less than
    an n router should be considered. If you have a wireless g router, it
    would be a good idea to update to a radio n router.
    The most recent routers also increase speed with wi fi Quality of Support applications (QoS) common, which makes efficient usage of Ethernet connections by prioritizing multimedia traffic based on the application’s sensitivity
    to delay. Many wireless n routers additionally apply multiple-input and several-output (MIMO) radio antennae to boost speeds.

  106. Hi, i think that i saw you visited my website so i came to “return the favor”.I’m trying to find things to enhance my
    site!I suppose its ok to use some of your ideas!!

  107. Your way of telling everything in this piece of writing is really
    pleasant, every one be capable of easily understand it, Thanks a lot.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team