Tutorials > How to set up your Photoshop design for coding

Every site should start in Photoshop or some similar software that allows you to slice your images.

Designing for the web is not like designing for a brochure or a poster. Yes, any design can be made into a website, but not all of them will be efficient. You can get a great design without using faded image backgrounds, gradients, stroked fonts etc... Not only are these unfriendly to the coder, but also force the use of more images, hence making your pages load slower. Keep in mind that your cool gradient will look very choppy on a monitor that's set to 16 bit color quality (some people still have that setting). It's true that everything is getting sharper, and faster but why not optimize?

Here are a few things I find useful.

1. Have a set width

   Pland ahead and remember that monitors are getting wider and bigger. Specify the content width and page alignment from the start. (Left and center is good, right is strange for a person reading English at least). Keep in mind that if the page is going to be as wide as the screen, then the design will have to have a banner that has an end image which can be repeated, or continued with a solid color. It will look odd on a large new wide screen monitor if the banner finishes half way, but the text keeps going.

   I think it's best to have a fixed width. It can be tiring on the eyes to read across the entire screen. Another solution would be to make sure that everything is split up into blocks, like a newspaper. Before you decide on the width do some research on your target audience on what kind of monitor size they use. Whatever width you pick, don't forget about the scroll bar: ≈16px (its width varies across browsers).

2. Align to the pixel

   Zoom into your design to see if everything you want to have aligned, is aligned. For example, make use of guides to see that the banner at the top starts at the same place as the left hand side panel. Even though a 1px shift is not visible in Photoshop, it will become apparent and look unprofessional on the web. Often I get the design from the designer and the first thing I have to do is start aligning objects.

   Use the Info Panel in Photoshop to measure everything. To bring out the Info Panel go to Window>Info. To change from pixels to inches or other units, right click on the lower left hand side of the info panel on the plus sign with an arrow.

   

   return to top

3. Don't use gradients, but if you must...

   If you like gradients, make sure that you apply vertical or horizontal ones. You’ll have a hard time dealing with a gradient that’s going across diagonally. Depending on the length of the gradient, you might end up with a really large image.

4. Navigation should be HTML

   For menus (navigation), try to avoid using any special fonts, so that you don’t have to use images. Stick to the basic Arial, Helvetica, Georgia, Times, Verdana fonts. Use the fancy fonts for your logo or on top of pictures. A gradient over fonts, or stroked fonts, will also force the use of images.

   Everyone wants to be "Google Friendly" nowadays, in that case, a navigation that search engines can read, is your first step. Besides, as your site grows, you'll want to add links or change them and it will be easier to change the HTML than the images.

   To avoid coding headaches the navigation links (if possible) should not be in a circle or aligned up diagonally.

   In the example underneath, the person coding this design, would have to use images for the navigation because of the fonts, the background and the glow. The biggest problem will be the diagonal lines between the links. It can be done, but it would be a hassle for something that will not necessarily make the site.

   

5. Rounded Corners Fun

   Rounded corners look pretty, but they require the use of images or messing around with JavaScript or CSS and having extra HTML code. The fewer images you have the faster your web page will load. Read here about coding rounded corners.

   return to top

6. Are you sure you're done?

   Before you start coding (or give someone your design to code), make sure you really do have everything designed and planned out exactly how it is going to look on the web. If the copyright text is missing at the bottom then you’re not ready. As a side note it’s also a good idea to repeat at the bottom any links you have on the page. Besides the home page you should also design at least one interior page to plan out how the content will look for the rest of the site, but also to see what kind of elements you will be repeating. The rollovers for the links should also be part of the design. They should be done in a different Photoshop layer that you can show and hide and visualize how the rollovers will look. Again, for navigation, you should keep away from image rollovers, unless you have to.

   Underneath are the screenshots of the previous designs for this site. The first one shows an interior page, the second one shows how the rollovers (only on the right hand side) would look.

   

7. Save an un-flattened copy for yourself

   If you're not coding the site yourself, it is a good idea flatten everything to three layers(make sure you save a copy that's not flattened). One layer should have the images, another all the text and another all the rollovers. The person coding the site, will most likely not change your design, hence they don't need all the layers. If you're not sure about this, don't flatten anything. The worst thing you can do is flatten the sample text to a background image that is wanted under the text.

8. Font Sizes are not Your Choice

   You should keep your user in mind and allow for the text to shrink and grow based on the user's preferences. Not everyone can read a 10px font size and if you want them to hang around your website, you shouldn't force that on them. Here is a good explanation on the best way to deal with font sizes.

9. Clean and Simple is often best

   Finally, a simple, clean design that will require minimal amount of coding and images is better for the search engine optimization too. Hidden messages, images, links, pop-ups will only annoy your user and make them leave your site. Have someone who's not familiar with the design and ask them about the first think they would click on and hope they don't say "the browser closing button".

   return to top