Web Design With Photoshop – 10 Top Tips

Designing your websites with photoshop is something that will greatly enhance the final result of your website. Not only will you know where your trying to end up with the finished site, but the sheer power of the tools on offer allows you to create breath-taking designs in a matter of minutes. However, it’s not always that easy, so I’m going to run through the basics for making a beautiful, clean design in photoshop.

1) Make sure you give yourself a decent canvas to start off with. Height will vary depending on how much example content you’re going to put on your page. I usually go for something around 900-1000 pixels, so that I’ve always got room for extra content if I want. It’s width that most people struggle with. Unless you are making an abnormally shaped site, always go for a width of about 960 px. I nearly always use a 960 grid on my site, so somewhere around there is a good place to start. Plus, you will hardly ever find that your customer is using a resolution of less than 1024×768, so you’re safe with that kind of width.

2) Okay – the text to use on your mock-up. It’s essential that for any areas of the site where live text will be displayed, you use a font that is browser-compatible. There’s no point using an impressive font and wowing your client with your photoshop file, if you can’t then go and convert that into XHTML/CSS coding without replacing it with images. Bear in mind that search engines will not be able to read text off images, so avoid using images for anything other than the logo, because it will all be a waste when it comes to SEO.

3) Keep it tidy. Use folders and layers to separate the various elements on the page, and name all of 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 get back to you for two weeks, when it comes to slicing it up you’ll have no idea which layer is which unless you sorted it all out when you made it in the first place.

4) Use crisp anti-aliasing on all your text. You know, the drop down on the toolbar? It’s the closest to how the browser will eventually render it, so it’s a good idea to do it. Strong is too thick, and if you don’t use any it just looks appalling.

5) When it comes to sending off your design to the client, don’t save it at rubbish quality. Always go for jpg, at full quality. It will be a slightly bigger file, but it will make it look a lot better from the clients perspective.

6) Unless the client has given you specific text he would like to see on the page (I’m assuming they haven’t at this stage), use the lorem ipsum passage to fill in any paragraphs on your page, so that you don’t waste your time thinking up fake content to go in the gaps. However, do be sure to mention to the client that that’s what it is, and that you’re not expecting to put that on his final site!

7) Use blending options to your advantage! They can be so helpful in producing great effects on the various elements of your page, so long as you don’t use the defaults, and you don’t overuse them. You can only have so many drop shadows on a page before it becomes tiresome to look at. However, do have a play with them as they can be a very easy way to get great effects onto your site.

8) Add some nice effects to your images. Plain images can look so boring on a web page, so add a drop shadow, outer glow, inner glow or similar to your images to liven them up a bit.

9) When it comes to slicing up your images, use the ‘Save for Web’ feature. This way, the image will be optimised for the internet, avoiding ridiculous loading times and keeping the image size to a minimum without losing too much quality. Bear in mind that only pngs and gifs support transparency (with pngs being the only ones that support partial transparency), so if you have an image that overlays the rest of the page, or needs to have content behind it, make sure you save it in a compatible format.

10) Finally, always plan ahead. Make sure that what you’re designing in photoshop is actually possible to code up later on. It’s more embarrassing having to explain to a client why you are unable to produce what you previously showed them than it is not having such an amazing original design. Know you’re limitations, and don’t make life harder for yourself! You only want to have to do this once.

Well that’s it for this one. As long as you keep these ten tips in mind when working on your next photoshop design, your good to go.