Incorporating photoshop into your website design is a great way to enhance the final appearance of your website. You will not only know how you’ll end in the final site, but the sheer ability of the tools that offer lets you create breath-taking designs in a matter of minutes. However, it’sn’t always an easy task and I’ll go over the fundamentals of creating a clean, beautiful design using photoshop.

1.) Make sure you provide yourself with a good canvas to start off with. The height will differ based on how much example content you’ll be putting on your site. I usually go for something around 900-1000 pixels, so that I have enough plenty of room to add additional content should I need to. This is the width that most people have a hard time with. Unless you are making an unusually shaped site Always go with an approximate width of 1000 pixels. I generally use an 960 grid on my website, so somewhere in the vicinity is a good starting point. Also, you’ll rarely ever see that a customer is using a resolution lower than 1024×768, so you’re in good hands with that kind of size.

2) Okay , the text to use on your mock-up. It’s crucial that for areas on the website that live text is displayed, you select a font that is browser-compatible. It’s not worth using an Lorelai impressive font and wowing your client with your photoshop-based file but if you’re not able to and convert it into XHTML/CSS and not replace it by images. Bear in mind that search engines won’t be able to read text off images, so don’t use images for anything else than the logoas it will all be wasted in terms of SEO.

3) Keep it tidy. Utilize layers and folders to categorize the different elements on the page, and also to name your layers. It’s not always fun, but trust me, your time is well spent. If you send the file off for review and the client doesn’t get back to you for two weeks, when it comes to cutting it up, you’ll have no clue as to which layer belongs until you sort it all out before you created it in the first place.

4.) Use clear anti-aliasing for the entire text. You know, the dropdown menu on the toolbar? It’s the closest to how the browser will eventually render it, so it’s a good idea do it. Strong is way too thick and if you don’t apply any of them, it will look awful.

5) When it comes to the design you want to send off to the customer do not save it at rubbish quality. Always use jpg at the highest quality. It’s a larger file, however it will appear more appealing from the customers’ perspective.

6.) In the event that the client has not provided you with a specific message they would like to see in the webpage (I’m guessing that they haven’t yet at this time) Use the lorem ipsum passage complete any paragraphs on your page, so you don’t waste your time thinking up fake content to go into the gaps. But, be certain to inform your client that it’s exactly the content you’re using in the first place, and not planning to display it on the final website!

7) Blending options can be used in your favor! They can be very helpful in creating stunning effects on the different elements of your website, providing you don’t use default settings and don’t overuse them. There is only so many drop shadows on a page before it becomes tiresome to view. However, do have a play with them as they can be an easy way to get great effects to your site.

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

9) When you are cutting up your images, use the Save for Web feature. This way, the image will be optimised for use on the web, reducing long loading times and limiting the image’s size to a minimum and without losing the quality. Be aware that only pngs and gifs can be transparent (with PNGs being the only ones that allow partial transparency) So if you have an image that overlays the background of the page or has information behind it, make sure you save it to the right format.

10.) Finally, always plan ahead. Check that what you’re designing in photoshop is actually possible to code up in the future. It’s more embarrassing having explaining to a client why you are unable to create what you’ve previously shown them than it is not with a great original design. Be aware of your limitations and don’t make things more difficult for yourself! You’ll only have to do this once.

Leave a comment

Your email address will not be published. Required fields are marked *