Design your websites using photoshop

The ability to design your websites using photoshop is an excellent way to improve the end result of your website. Not only will you be able to see what you’re trying to achieve in the final site however, the power of the tools on offer lets you create amazing designs in a matter of minutes. However, it’s not always as simple and I’ll run through the basics for creating a clean, beautiful layout in Photoshop.

1.) It is important to provide yourself with a good canvas to start off with. Height will vary depending on the amount of sample content you’re planning to include on your site. I generally aim for in the range of 900 to 1000 pixels, which means I’m always able to leave plenty of room to add text pay  additional content should I need to. It’s a width that a lot of people struggle with. If you’re making an unusually shaped website, always go for the width of around 996 pixels. I nearly always use a 960 grid on my site, so somewhere in the vicinity is a good base to begin. In addition, you’ll never ever encounter a client who has a resolution smaller than 1024×768, so you’re in good hands with that kind of width.

2) OK – the text you want to put on your mock-up. It’s vital that for sections of your site in which live text will be displayed, you select a font that is browser-compatible. It’s pointless using an attractive font and impressing the client with your photoshop file, when you’re unable to then go and convert it into CSS or XHTML code and not replace it by images. Remember that search engines will not be capable of reading text on images, so don’t use images to create anything other that the logo, since it’s all a waste when it comes to SEO.

3) Keep it tidy. Use folders and layers to separate the various elements on your page, and label all your layers. It may be boring, but trust me, it’s worth it. If you send it off for approval and the client doesn’t respond for two weeks, when it comes to cutting it up, you’ll have no clue which layer is which until you sort it all out when you started it in the first place.

4.) Use clear anti-aliasing for the entire text. You know, that drop down on the toolbar? It’s the closest thing to how your browser will render it, which is why it’s a good idea do it. Strong is too thick, and if it doesn’t contain any, it looks awful.

5) When it comes to transmitting your design to the client do not save it at low-quality. Always send jpg files at full quality. It’s a little larger file, however it will appear a lot better from the clients perspective.

6) In the event that the client has not specified a specific text that you’d like to display at the top of the page (I’m guessing that they haven’t yet at this time) Use the lorem ipsum passage fill in any paragraphs on your page, so you don’t get caught creating fake content to go into the gaps. But, be certain to tell the client that this is what you’re doing in the first place, and not planning to display it on the final website!

7) Blending options should be used effectively! They can be extremely helpful to create amazing effects on the various aspects of your page so long as you don’t use default settings and don’t use them too often. There’s only so several drop shadows appearing on a website before it becomes tedious to take a look at. However, it is a good idea to look at them because they are an easy method of bringing amazing effects onto your site.

8) Include some interesting effects to your images. Plain images can look so dull on a page and that’s why you should add the drop shadow, outer glow, inner glow or similar to your images to bring the images up.

9) When you are cutting up your images, utilize the ‘Save for Web’ feature. This way, the image will be optimised for web use, avoiding lengthy loading times, and keeping the image’s size at a minimum, without sacrificing the quality. Keep in mind that only pngs and gifs have transparency (with PNGs being the only ones with partial transparency), so if you have an image that overlays the other content on the page or needs to have the content behind it, be sure you save it in the correct format.

10) Last but not least, always think ahead. Make sure that what you’re creating in Photoshop is feasible to code up in the future. It’s more awkward having to explain to your client why you’re unable to achieve what you’ve shown them than having such an amazing original concept. Be aware of your limitations and don’t try to make it harder for yourself! You’ll only have to go through this one time.