In our recent post we showed you how to mock up a wooden background layout in Photoshop. In this post we will show you how to covert that PSD to HTML.

As we know the Average screen size is 1024×768, we have created the PSD for that size and we are going to code for that screen size as well. However, since we have added gradient at the end of the page, it should not look awakward if it is viewed on a big screen.

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.  Also you will learn how to use layer styles to create an engraved text effect. Give it a try!

Navigation in web design is one of the most important usability element. Today I will show you how to create a modern grunge navigation design in photoshop.

In this tutorial you will learn how to use gradients, textures and layer styles. The result looks modern and can be used as a web design element. Hope you will learn something new and share your opinion in comments.

In this ultimate collection, we bring you a massive selection of great Web design tutorials from all over the design community. All of the tutorials use Photoshop for the main application. By the end, you should have a pretty good idea of where and how to start designing for the Web.

If you’re already an experienced Web designer, don’t ignore this post. Even the most talented and professional designers can pick up tips and tricks from others. After all, design is a field in which no one knows it all.

HTML5 is the next big thing in the land of web developers, so I figured the best way to show you how it’s all gonna come together is by giving you a lesson on how to make your own HTML5 and CSS3 layout. Although this isn’t a practical solution to building websites today, in a couple of years it’s going to make our lives so much easier.

Good evening everybody welcome to another tutorial by HV-Designs. In today’s tutorial I’ll be showing you how to create a sleek web design company style web template.

Start off by creating a new document with the following dimensions “1200 x 1400″, don’t worry if the document seems big as you can crop the canvas when finished.

Select the rectangular marquee tool and make a small selection across the top of the canvas, the selection should be the width of the canvas and no larger than about 10 pixels

Today we’re going to convert the Modern Design Studio PSD Template created by Tomas Laurinavičius a few days ago to a clean and working XHTML/CSS code. You can download free PSD from The Modern Design Studio PSD Template.

Start out by creating a new folder on your computer in which we will put all of the site files. I named it ModerndesignStudio. Create another folder in your working folder you just created and call it images, it will contain all the images of the site. Next open up your favorite code editor (I use Dreamweaver) and create a new HTML file titled index.html in the root of the folder, this will be our main page template. Now create a new css file, and name it style.css.

In this tutorial you will learn how to create an attractive Game product layout. This will teach you the basics of typography, information layout and product display Preview: Create a new photoshop document 1 Open up Photoshop, create a new document that is 1000px by 1000px, with a background color of #737f91 Creating the background 2 Select the rectangular marquee ..

In this tutorial you will learn how to create a clean and minimalistic portfolio layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Enjoy !!

In this tutorial we will create a amazing vibrant layout. we will use Filters, layer styles and more to create each effect to achieve the stunning end result

Open up Photoshop, create a new document that is 1000px  by 1000px, with a background color of #ffffff

Select the rectangular marquee tool (M) and create a rectangular section across the top part of the canvas,

its height should be 400px-500px