Thursday, March 4, 2010

try to write any...
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 starts from Photoshop or paper. You need to create the design first 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. You might want to read some materials on this before designing one.

Creating a website layout in Photoshop will require you to know there are three main components – 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. A web page is normally structured in this way, so if you can get your head around this you will find it much easier in designing it. 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 wide 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 like with it. 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 done designing the page you can start slicing the graphics up with the slice tool. I found that by using the guide tool to lay out some guides on the page helps the slice tool to snap to the exact positions. You 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.

No comments:

Post a Comment

<