Have you thought about designing your own website? The truth is you don’t need to be a professional web designer to design websites. However, you do need some design background in order to create a decent looking website. If you have done some research yourself, you know the first step begins with Photoshop or paper. You need to create the design before any coding can take place. Fortunately, it’s actually quite simple when you know the basics of web design and how a website is structured.

Creating a website layout in Photoshop will require you to know the three main components of a webpage – the header, the body and the footer. You might also have a sidebar. Think of these as containers that will hold your contents on the page. You should create a folder in the layers palette for each one of these containers and put graphics, text, images in them accordingly. Doing so will keep your document organized.

The next thing you need to decide is the width of your website. At the time of writing this article, the most common screen resolution is 1024px x 768px. Knowing this, your website layout should be no wider than 950px; otherwise the scroll bar will appear. You can take a screenshot of the browser window and use that a guide to help you see how the page would look. Simply cut out the content section after the printscreen command and then stick it on the very top layer. You can switch it on and off to see the difference.

When you’re done designing the page, you can start slicing the graphics up with the slice tool. I found that using the guide tool to lay out some guides on the page helps the slice tool to snap to the exact positions. You’ll want to save the images using the “save for web” function, as this will export all slices for you in a folder. You will then need to import these to a web design software to code the page up.

Tagged as: Photoshop, tips, Tutorials, Web Design, Web Designers