Incorporating photoshop into your website design is an excellent way to enhance the final result of your site. It’s not just that you will know where your trying to end up with the finished site however, the capabilities of the tools available on offer lets you create amazing designs in a matter of minutes. However, it’sn’t always this simple and so I’ll run through the basics for creating a gorgeous, neat layout in Photoshop.
1.) Make sure you give yourself a decent base to work from. The height of your page will be contingent upon the amount of example material you’ll put on your site. I usually go for something between 900 and 1000 pixels, so that I’ve always got space for more content , if I’d like. It’s a width text pay that a lot of people have a hard time with. If you’re not creating an unusually shaped site Always go with the width of around the 960 pixels. I generally use the 960 grid for my site, so somewhere close to that is a great base to begin. Also, you’ll rarely ever find that your customer uses a resolution less than 1024×768, so you’re in good hands with that kind of width.
2) Okay – the text that you’ll use in your mock-up. It’s essential that for any areas on the website where live text is displayed, you select the font that is compatible with browsers. There’s no reason to use an amazing font and then impressing clients with your photoshop files if you can’t then go and convert that into XHTML/CSS and not replace it by images. Be aware that search engines won’t be in a position to read text from images, therefore avoid using images for anything other than the logoas it will all be a waste in SEO.
3) Keep it tidy. Utilize layers and folders to organize the various elements of the page and also to name your layers. It’s not the most exciting, but trust me, this is worth the effort. If you send the file off for approval and the client doesn’t get back to you for two weeks in the process of cutting it up, you’ll be left with no idea which layer is which unless you sorted it all out when you started it first.
4) Make sure you have a crisp anti-aliasing effect on the entire text. You know, that dropdown menu on the toolbar? It’s the closest thing to what the browser could eventually render it, which is why it’s a good idea to take it on. It’s too thick, and if you do not use any, it looks awful.
5) When it comes to sending off your design to the client Don’t save it in low quality. Always go for jpg, in full resolution. It’s likely to be a bit larger file, but it will appear a lot better from the clients perspective.
6.) If the customer has not provided you with a specific message they would like to see on the page (I’m assuming they haven’t at this stage) then use the lorem’s ipsum passage to fill in any gaps on your page so that you don’t have to spend time thinking up fake content to fill in the gaps. However, make certain to inform the client that that’s the content you’re using and not planning to use that on the final website!
7.) Blending options can be used effectively! They are extremely useful in creating amazing effects on various aspects of your page so long as you don’t make use of the default settings and don’t use them too often. You can only have so the amount of drop shadows you can have on a website before it becomes tedious to take a look at. However, do have a look at them because they could be an simple way to bring amazing effects to your site.
8.) Add some nice effects to your photos. Simple images look boring on a webpage Add a drop shadow, an outer glow, inner glow or similar to your images to liven them up.
9) When it comes to slicing up your photos, you can use the ‘Save for Web’ feature. This way, the image will be optimised for use on the web, reducing excessive loading times and keeping the size of your image to a minimum and without losing any quality. Remember that only pngs and gifs can be transparent (with PNGs being the only ones that can support partial transparency) If you have an image that covers the rest of the page, or requires information behind it, make sure that you save it in a compatible format.
10) Always think ahead. Check that what you’re creating in Photoshop is actually possible to code later. It’s more embarrassing having to explain to a customer why you’re unable to make what you’ve already shown them than it is not creating a stunning original design. Know your limits, and don’t create more work for yourself! You’ll only need to go through this one time.