How to create a professional and clean web layout (with PSD-to-HTML conversion)

How to create a professional and clean web layout (with PSD-to-HTML conversion)

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.

Do you want to download the source files 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 fresh style. Click here to see a live preview of the template.

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

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.

<!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>Download.Movie - A great database of movies</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>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>

<div id="top_background">

<div class="main_container">

	<div class="top_bar">

	</div>

	<div class="header">

	</div>

	<div class="main_box">
		<div class="slide">
		</div>

		<div class="tagline">

		</div>	

		<div class="content">

			<div class="left_content">

			</div>

			<div class="right_content">

			</div>

		</div>

	</div>

</div>

</div>

<div class="footer">

</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 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 unordered lists for the menu and h1 for the logo.

<!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>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>

<div id="top_background">

<div class="main_container">

	<div class="top_bar">
		<ul class="login">
			<li><a href="#">login |</a></li>
			<li><a href="#">sign-up</a></li>
		</ul>
	</div>

	<div class="header">
		<div class="logo">
			<h1><a href="#">Download.Movie</a></h1>
		</div>

		<ul class="navigation">
			<li><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Support</a></li>
		</ul>
	</div>

	<div class="main_box">
		<div class="slide">
		</div>

		<div class="tagline">

		</div>	

		<div class="content">

			<div class="left_content">

			</div>

			<div class="right_content">

			</div>

		</div>

	</div>

</div>

</div>

<div class="footer">

</div>

</body>
</html>

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.

<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.cycle.lite.min.js"></script>
</head>

For the elements contained into the main-box we will use the following images.

Now take a look at the markup for the entire main-box section.

<!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>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>

<div id="top_background">

<div class="main_container">

	<div class="top_bar">
		<ul class="login">
			<li><a href="#">login |</a></li>
			<li><a href="#">sign-up</a></li>
		</ul>
	</div>

	<div class="header">
		<div class="logo">
			<h1><a href="#">Download.Movie</a></h1>
		</div>

		<ul class="navigation">
			<li><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Support</a></li>
		</ul>
	</div>

	<div class="main_box">
		<div class="slide">
			<img src="images/screenshot1.jpg" alt="screenshot" />
			<img src="images/screenshot1_2.jpg" alt="screenshot" />
			<img src="images/screenshot1_3.jpg" alt="screenshot" />
		</div>

		<div class="tagline">
			<h2>The best way to watch your favourite movies</h2>
			<span class="know_more_green"><a href="#"></a></span>
			<p>The use of commerce is conducted in this way, spurring and drawing on innovations in electronic funds transfer, supply chain management.</p>
			<span class="cta_browse"><a href="#"></a></span>
			<span class="cta_signup"><a href="#"></a></span>
		</div>	

		<div class="content">

			<div class="left_content">
				<h3>Featured entries this week</h3>
				<p>We want to provide only high-quality DVD movies to our members. High-quality,
easy-to-find: the best of the week.</p>
				<ul>
					<li><img src="images/screenshot2.jpg" alt="screenshot" /><h4 class="orange"><a href="#">The first movie this week</a></h4><p>The group sets out for the treasure. They walk to Pete's cousin's house</p><span class="details">dur. 110’ | action | 2011 | <a href="#">more...</a></span></li>
					<li><img src="images/screenshot3.jpg" alt="screenshot" /><h4 class="green"><a href="#">The first movie this week</a></h4><p>The group sets out for the treasure. They walk to Pete's cousin's house</p><span class="details">dur. 110’ | action | 2011 | <a href="#">more...</a></span></li>
					<li><img src="images/screenshot4.jpg" alt="screenshot" /><h4 class="cyan"><a href="#">The first movie this week</a></h4><p>The group sets out for the treasure. They walk to Pete's cousin's house. </p><span class="details">dur. 110’ | action | 2011 | <a href="#">more...</a></span></li>
				</ul>
			</div>

			<div class="right_content">

				<h3>Featured entries this week</h3>
				<div class="box_trailer">
					<a href="#"><img src="images/screenshot5.jpg" alt="screenshot" /></a>
					<span class="meta_info meta_orange">action | 12.04.2010</span>
					<h4 class="orange"><a href="#">A new movie is coming on our website</a></h4>
					<p>Rumpelstiltskin tricks a mid-life crisis burdened Sdrok into allowing himself to be erased from
existence and cast in a dark alternate...</p>
					<span class="trailer_more"><a href="#"></a></span>
				</div>

				<div class="box_trailer">
					<a href="#"><img src="images/screenshot6.jpg" alt="screenshot" /></a>
					<span class="meta_info meta_green">drama | 12.04.2010</span>
					<h4 class="green"><a href="#">Another movie downloadable</a></h4>
					<p>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.</p>
					<span class="trailer_more"><a href="#"></a></span>
				</div>

			</div>

		</div>

	</div>

</div>

</div>

<div class="footer">

</div>

</body>
</html>

Now activate the slider adding the following lines of code just above the </body> tag.

<script type="text/javascript">
$(document).ready(function() {
    $('.slide').cycle({
		fx: 'fade',
		speed:  1500,
		timeout: 4500
	});
});
</script>

It’s time for the style.

.main_box { clear: both; }

	.slide { background: #fff; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); -khtml-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); -webkit-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); width: 560px; height: 274px; display: block; float: left; margin-bottom: 40px; }
	.slide img { padding: 10px; }

	.tagline { background: url(images/slog_bck.png) no-repeat; float: left; width: 370px; margin: 25px 0 0 30px; }
	.tagline h2 { font-family: 'DejaVuSansCondensedBook'; color: #fff; text-shadow: 1px 1px 0px #0f334f; font-size: 23px; line-height: 26px; font-weight: normal; letter-spacing: -1px; width: 300px; padding: 10px;}
	.tagline p { margin-top: 40px; padding-left: 10px; color: #0b537f; }

	.know_more_green a { float: right; display: block; position: relative; top: -55px; right: -6px; width: 86px; height: 74px; background: url(images/know_more_green.png) no-repeat; }

	.cta_browse a { display: block; width: 168px; height: 56px; background: url(images/cta_blu.jpg) no-repeat 0px 0px; float: left; margin: 26px 0 0 10px;}
	.cta_browse a:hover { background-position: 0px -56px; }
	.cta_signup a { display: block; width: 168px; height: 56px; background: url(images/cta_orange.jpg) no-repeat 0px 0px; float: left; margin: 26px 0 0 24px; }
	.cta_signup a:hover { background-position: 0px -56px; }

	.content { clear: both; overflow:auto; margin-bottom: 20px; }

		.left_content { width: 280px; float: left; }

		.orange a { color: #ed7d0f; }
		.green a { color: #5a9e28;}
		.cyan  a { color: #28819e; }
		.orange a:hover { color: #ff9e05; text-decoration: underline; }
		.green a:hover { color: #74d82b; text-decoration: underline; }
		.cyan  a:hover { color: #2fb4e0; text-decoration: underline; }

		.content h3 { font-size: 20px; color: #0b537f; font-weight: normal; border-bottom: 1px solid #e0e0e0; padding-bottom: 10px; margin-bottom: 20px; }
		.left_content ul { margin-top: 25px; }
		.left_content ul li  { border-bottom: 1px solid #e0e0e0; padding-bottom: 8px; margin-bottom: 15px; font-size: 11px; line-height: 16px; color: #757474; }
		.left_content ul li img { float: left; margin-right: 10px; }
		span.details { font-size: 10px; color: #a8a8a8;  }
		span.details a { color: #333; }
		span.details a:hover { text-decoration: underline; }

		.right_content { width: 630px; float: left; margin-left: 50px; }

		.box_trailer { clear: both; }
		.box_trailer img { background: #fefefe; padding: 5px; -moz-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); -khtml-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); -webkit-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); float: left; z-index: 100; position: relative; margin: 0 15px 30px 0; }
		span.meta_info { padding: 1px 6px; color: #fefefe; z-index: 99; margin-top: 18px; position: relative; top: 8px; left: -15px; font-size: 10px; }
		.meta_green { background: #5a9e28; }
		.meta_orange { background: #ed7d0f; }
		.box_trailer h4 { font-size: 16px; font-weight: normal; margin: 20px 0 10px 0; }
		span.trailer_more a { display: block; width: 83px; height: 19px; background: url(images/more.jpg) no-repeat 0px 0px; float: right; margin-top: 10px; }
		span.trailer_more a:hover { background-position: 0px -19px; }
Step 9 – The footer

Finally we create the footer with three lists of useful links, a box with a little description and some credits. We use only the image for the background.

The HTML structure for the footer.

<div class="footer">

	<div class="foot_cont">
		<div class="foot_col">
			<h3>Resources for you</h3>
			<ul>
				<li><a href="#">Browse our database</a></li>
				<li><a href="#">Read our magazine</a></li>
				<li><a href="#">Job opportunities</a></li>
				<li><a href="#">Support</a></li>
			</ul>
		</div>

		<div class="foot_col">
			<h3>Our network</h3>
			<ul>
				<li><a href="#">Download.TvSeries</a></li>
				<li><a href="#">Download.Music</a></li>
				<li><a href="#">Download.Book</a></li>
				<li><a href="#">Download.Apps</a></li>
				<li><a href="#">Download.Games</a></li>
			</ul>
		</div>

		<div class="foot_col">
			<h3>Connect with us</h3>
			<ul>
				<li><a href="#">Twitter</a></li>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">FriendFeed</a></li>
			</ul>
		</div>

		<div class="foot_col last_col">
			<h3>Our mission</h3>
			<p>We want to provide only hidh-quality DVD movies to our members.
High-quality, easy-to-find: the best of the week.</p>
			<span class="about_but"><a href="#">Read more about us</a></span>
		</div>
	</div>

	<div class="credits">
		<p>by WeGraphics - Copyright © 2010. A premium template.</p>
	</div>

</div>

Use the following css lines of code to enhance the style of the footer.

/* Footer */

.footer { background: url(images/foot_bck.jpg) repeat-x; clear: both; }	

		.foot_cont { height: 218px; margin: 0 auto; width: 960px; }

			.foot_col { float: left; width: 220px; margin: 45px 20px 0 0; }
			.last_col  { margin-right: 0px; width: 240px; }
			.foot_col h3 { color: #cfdcf8; font-size: 14px; font-weight: normal; }
			.foot_col ul { margin: 10px 0 0 10px; }
			.foot_col ul li { padding: 4px 0 4px 20px; background: url(images/list.png) no-repeat 0px 7px; }
			.foot_col ul li a { color: #f1f3f8; font-size: 12px; }
			.foot_col ul li a:hover  { color: #89c0dd; }
			.foot_col p { color: #f1f3f8; margin-top: 10px; }

			span.about_but a { color: #cfdcf8; padding: 2px 5px; background: #3e5077; -moz-border-radius: 3px; margin-top: 10px; float: right; font-size: 10px;}
			span.about_but a:hover { background: #4e6188; color: #fff; }

		.credits { clear: both; background: #cfdcf8; margin-top: 20px; }
		.credits  p { text-align: center; font-size: 11px; color: #1c3059; padding: 8px; }

Nice job, friends! We have just built our nice, professional, 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

68 Comments

(+add yours)
  1. Great and high quality tutorial. I like it.

    Nice job piervix ;)

  2. looks great Piervincenzo! Thanks for the tutorial.

  3. steve

    Great tutorial and stunning final result. Thx!

  4. Tuntikorn Asawayuthapol

    Great tutorial as i ever seen. Thank you again

  5. Thank you, guys. I’m glad and honored for your appreciation.

  6. A very detailed tutorial. Thanks for making and sharing this. And I love your blog. It’s very clean and elegant!

  7. Awesome tutorials. I still don’t have time for your previous tut and you already come up with this.

    • eheheh… and another will come soo ;)

      Thank you for the comment, dear friend.

  8. Michael

    Good job

  9. I use this same technique to create websites, it’s so much better to do than to just go out of nowhere figuring out what you want to do when it comes to designing a website.

    You made a awesome website, but personally I don’t know what I’d do with this kind of website… So I didn’t do it. I like the colors though.

    I decided to follow you on twitter by the way, and I’m subscribing, so I’m expecting a lot more from you :D. By the way you’re really talented in this, I’ve not found a site to come close to this talent yet.

  10. Excellent tutorial. Thanks for taking the time to teach the “rest of us”!

  11. Nice Tutorial…. :-)

  12. nice tut dude..5 stars!!

  13. great tutorial, thanks!

  14. ulises

    excellent tutorial

  15. LiHao

    Wonderful!

  16. Nice tutorial.Very interesting blog.I would love to read more about this topic.I ‘m a community member at Snaps Technologies. I came to know many things about Design.I shall keep this blog in touch.

  17. Thank you for all your comments, guys!

  18. ivan

    In step 2, the path to the Gaussian blur filter is wrong – it should say: Filter>Blur>Gaussian blur

  19. ivan

    very cool tut, though

  20. Hello sir,
    Thank u so much for sharing this tutorial!

  21. Thanks a million for a great step by step tutorial :-)

  22. Very nice tutorial balancing beautifully between being informative and quick hitting the most important headlines all the way through. I learned a lot from this.

    (I think the parenthesis under “Step 2 – Logo” should have said Filter>Blur>Gaussian Blur and not Filter>Blur>Add Noise)

  23. Great tutorial dude, i refer to it alot for ideas !! Thanks a Mill.

  24. Wow, great explanation,
    thanks sir,
    i have just learnt from your explanation and designed my website,

  25. best!! you are experience . thank a lo0o0o0oooottt ;)

  26. thank i have a topic for you * How to create a professional website* eco-magazin.blogspot.com/2012/10/how-to-create-professional-website.html

  27. wow nice tutorial..thanks it helps me a lot..

  28. Great tutorial as i ever seen. Thank you again

  29. It’s Awesome.Thanks for share this :)

  30. Waynevii

    You’re awesome! Thanks for sharing! =)

  31. This is an awesome tutorial. Just 1 question though… how would you gracefully degrade the slideshow if the user has javascript disabled?

  32. Thanks for your personal marvelous posting! I seriously enjoyed reading it, you can be a great author.

    I will always bookmark your blog and definitely will come back in
    the future. I want to encourage continue your great work, have a nice evening!

  33. wilmer

    The big boss :) = * thanks

  34. Kalyan simpi

    This is an awesome tutorial. Thank you for your great information about creating a website

  35. Shreyas

    This is nice and helpful high quality tutorial. Thanx

  36. Avijit Apu

    VERY VERY VERY USEFULL TUTORIAL.THANKS A LOT.

  37. This post is genuinely a pleasant one it helps new internet visitors,
    who are wishing in favor of blogging.

  38. continuously i used to read smaller articles or reviews which as well clear their
    motive, and that is also happening with this paragraph which I
    am reading now.

  39. Whether this is in applying make up, or trimming a beard and or mustache, ensure that they are mirror images of each other on the
    left and right sides. For those with unknown food allergies,
    it would help to keep a food diary where you can note your food intake
    as well as describe the severity of your skin condition.
    Here are a few simple ideas I use that you can try to keep your symptoms under control in the meantime: Add moisture
    to your skin with a humidifier.

  40. This page definitely has all of the information I wanted about this subject and didn’t
    know who to ask.

  41. No is very important keep an excellent as well as regular
    blood vessels. The Solar Energy Industries Association membership directory provides contractors’ contact
    information along with area(s) of expertise, including solar shingle installation.
    Ask your roofing contractor what sort of Special Installations are required for installing high quality ridge shingles.

  42. Right now it looks like Expression Engine is the top blogging platform out there right now.

    (from what I’ve read) Is that what you are using on your blog?

  43. Thanks , I have just been searching for information approximately this
    topic for a while and yours is the greatest I have
    discovered till now. But, what about the conclusion? Are you positive in regards to the supply?

  44. ROSHAN

    I am trying to create PSD following your tutorial but i am unable to create the logo soft light background using Elliptical Marquee Tool. When applying Gausian Blur, Its not completely blur and i see circle line boundary which doesn’t match properly. Plz advise

  45. Magnificent site. A lot of helpful information here.
    I am sending it to a few buddies ans also sharing in delicious.

    And naturally, thanks in your sweat!

  46. This design is spectacular! You cetainly know how to keep a reader
    amused. Between your wit and your videos, I was almost moved to start my own blog (well,
    almost…HaHa!) Wonderful job. I really enjyed what you had to say, and more
    than that, how you presented it. Too cool!

  47. Bonjour tout le monde, c’est ma première rendre visite à cette
    page Web et article est vraiment en faveur de me, suivre l’affichage ces
    articles ou commentaires.

  48. Hallo zusammen Guten Tag! Ich hätte schwören können, ich
    habe es, besucht Blog vor, sondern nach Blick auf einige der Artikel Ich erkannte,es
    ist neu für mich. Irgendwie, ich bin auf jeden Fall sicherlich glücklich Ich stolperte über sie, und ich werde sein Bookmarking es und die
    Kontrolle zurück häufig regelmäßig! weblog alert bewusst über Google, und befindet es ist wirklich wirklich informativ.
    Ich bin Gonna vorsichtig sein für Brüssel. Ich schätze in der Veranstaltung, die
    Sie weiter dies in Zukunft. Eine Menge andere Menschen wird wahrscheinlich
    profitiert von Ihrer Schreiben. Cheers! und
    mit
    Nachdem dies lesen Ich dachte, es war aufschlussreich. Ich schätze Sie sich die Zeit und Energie zu setzen Dieses informative Artikel zusammen.
    Ich habe mal wieder zu finden mich persönlich Ausgaben viel zu viel Zeit
    sowohl das Lesen und kommentieren Kommentaren. Aber so was, war
    es immer noch wert lohnt sich! Website ‘s Post regelmäßig aktualisiert werden
    whoah diese blog ist great Ich mag Ihre Artikel. Bleiben Halten Sie sich die gute tolle Arbeit!
    Sie wissen, viele Personen sind Jagd Rund dafür Information, Sie
    könnten Hilfe Hilfe sie sehr. für Blog, ich Ihnen von Fehler gefunden etwas anderes, Dennoch Ich bin jetzt hier und möchte nur sagen, vielen Dank Lob
    bemerkenswert angenehm Blogs (ich liebe auch das Thema /
    Design), ich habe keine Zeit, um zu lesen, durch alles auf die
    Minute Moment, aber ich habe Buch-Kennzeichnung gespeichert und inklusive Ihre RSS-Feeds
    hinzugefügt, so, wenn ich Zeit habe werde ich zurück sein, las sehr
    Brombeeren Deal, Bitte halten Sie die genial b. für Blog, ich Ihnen von
    Sie sind wirklich a ausgezeichnete Webmaster. Der site
    Frieden erstaunliche. Es scheint, dass Sie Sie dabei jede unverwechselbaren Trick.

    Auch Darüber, Meister. Sie haben geführt a ausgezeichnete Prozess in this subject!

  49. I’m really enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often.
    Did you hire out a developer to create your theme?
    Outstanding work!

  50. Good day! This is my first visit to your blog!
    We are a collection of volunteers and starting a new project in a community in the same niche.
    Your blog provided us benefifial information to work on. You have done a extraordinary job!

  51. Greate post. Keep writing such kind of info on your site.

    Im really impressed by your blog.
    Hey there, You’ve done an excellent job. I will certainly digg it
    and in my opinion suggest to my friends. I am sure they will be benefited from this web site.

  52. What’s Going down i am new to this, I stumbled upon this I’ve found It positively helpful and it has helped me out loads.
    I am hoping to contribute & help other customers like its helped me.
    Good job.

  53. I loved as much as you’ll receive carried out right here.
    The sketch is attractive, your authored material stylish.
    nonetheless, you command get bought an nervousness over that you wish be delivering the following.

    unwell unquestionably come more formerly again since exactly the
    same nearly a lot often inside case you shield this hike.

  54. Excellent beat ! I would like to apprentice while you amend your web
    site, how can i subscribe for a blog web site? The account aided me a acceptable deal.

    I had been a little bit acquainted of this your broadcast
    provided bright clear idea

  55. WOW just what I was searching for. Came here by searching for photoshop

  56. Fine way of telling, and good paragraph to take data regarding my presentation topic, which i am going too deliver
    in school.

  57. Bedanktt ter ondersteuning van delen zo’n aangenaam denken, paragraaf is aangenaam,
    dat is waarom ik heb het gelezen volledig
    Hey there uitstekend blog!Is het runnen van een blog als deze vergelijkbaar met
    deze neem een ?? grote hoeveelheid werken? ik heb vrijwel
    geen kennis programmering maar I was hoop om mijn eigen blog
    te beginnen in de nabije toekomst. Anyways, als je enige suggesties of technieken voor
    nieuwe blog eigenaars kunt u delen. Ik begrijp dit is off
    onderwerp desondanks ik gewoon moest vragen. Thanks!

  58. fantastic issues altogether, you simply received a new reader.
    What would you recommend about your put up that you made
    some days in the past? Any sure?

  59. It’? very simple to find out any matter on web as c?m??red to
    textbooks, as I found this articloe ?t this site.

  60. Awesome things here. I’m very satisfied to look your article.
    Thanks a lot and I’m looking forward to touch you.
    Will you kindly drop me a mail?

  61. Pretty! This has been an incredibly wonderful article.
    Thank you for supplying this info.

  62. Hi to all, how is the whole thing, I think every one is getting
    more from this web site, and your views are pleasant in support of new people.

  63. I am not sure where you’re getting your info,
    but great topic. I needs to spend some time learning more or understanding more.

    Thanks for magnificent info I was looking for this info for my
    mission.

  64. Pretty! This was an extremely wonderful article. Thank you for supplying these details.

  65. Great article.

  66. As the admin of this web site is working, no doubt very quickly it will be well-known, due to its feature
    contents.

Leave your comment

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