So, your client just signed off on your design and your Photoshop file is ready to be developed into a website; now, you simply need to press the “make it into a website” button, right? (If only it were that simple). In exporting your image files from Photoshop to a format to be used on the web, I’ve found that there are a few steps you can take to ensure your design retains its professional quality, while not sacrificing the website’s load time. These include being familiar with different file types, keeping your assets organized, getting a second and third opinion on your final draft, keeping within the bounds of the standard RGB mode and having a few cheat sheets on layout and style. Stick to these guidelines of ever-evolving best practices and you’ll be well on your way towards a successful website development career.
Organize Your Photoshop Document:
We’re talking labels, people!
Name your layers! There’s no greater waste of time, and nothing more frustrating, than clicking through generic layers; trying to remember what you meant by “layer 56 copy”. In this regard, take advantage of folders; grouping a document into how it will appear in HTML makes a lot of sense. For example, grouping your navigation, search bar, logo and other header assets will save you, your future self and any other designer who has access to your Photoshop files, the headache and hassle.
Ask Someone Else to Look at it:
Hey, Secretary!
Let’s be honest; you’ve been staring at this design for a few weeks now, your eye might be overlooking something blatantly obvious, such as a misspelling or a watermarked photo. It’s really important to get a fresh set of eyes to proofread your work (your ego can handle it; trust me).
Is Your Document Really Web Ready:
In Living Color
Monitors and other display devices utilize the RGB color mode. The (aptly named) RGB mode is comprised of three color channels: red, green and blue. In an 8 bits-per-channel image, each color has a value intensity that ranges from 0 to 255, with 0 adding none of the color and 255 adding all of it. The color you see is the sum of the color intensities. For example, if the color you see has a red value of 255, a green value of 132 and a blue value of 22, you would have “Briteskies Orange”. For each color mode, there is a different gamut, or, range of colors that can be properly displayed or printed. Because monitors display colors in RGB, they only recognize colors within that gamut. To make certain that the colors you want will appear on the web as what you intend, stick to the RGB mode, as opposed to CMYK, which is predominantly used for printed materials. Otherwise, the monitor will essentially need to “guess” which color you meant, resulting in something close to what you may have wanted, but not exactly.
Know your File Types:
Be a Master Craftsman
Before creating any design that will be developed into a website, take the time to educate yourself on the different file types; each has its own set of strengths and weaknesses that will vary with every situation. When I save graphics for the web in Photoshop, I use the “Save for the Web” command, which can be accessed through File>Save for the Web & Devices. If you select the “4-Up” tab at the top of the dialog box, you can compare 4 different compression settings at the same time. I try to keep their sizes smaller than 150k (200k max).
A Few Common File Types
JPEG
JPEG (aka JPG) files offer millions of color options using a 24-bit color mode so it’s great for complex images like photographs. It offers high quality and low file size by utilizing lossy compression. This basically means JPEGs selectively throw out pixel information based on how much quality you want to take out. Be careful because overuse can create unwanted artifacts in your image. Another drawback of the JPEG is that it doesn’t produce transparency. When saving for web, use the “Optimized” option. This enables maximum file compression. If you cannot avoid saving a large file size, you might want to consider using the “Progressive” option. If enabled, a web user will see a low resolution version while the image is being downloaded.
GIF
A GIF is used for logos, illustrations or graphics that use a minimal amount of solid colors. It supports an 8-bit color mode so it can only display up to 256 colors. The GIF can also be used to create simple animations and allows transparency. “Save for Web” allows you to select the GIF’s color table with a process called indexing. If your graphic has a wider color range, it would be wise to include a larger color lookup table. If not, drop your colors to a number lower than 256 to compress your file. You can also play around with different color reduction methods that generate your color lookup table for you. If your image contains a lot of color detail and fear that the available color tables won’t properly display your GIF, add a percentage of dithering. Dithering simulates colors outside of your color table. But dithering increases file size so try and keep it at the lowest percentage possible.
PNG-8
The PNG-8 format is similar to the GIF format, in that it supports an 8-bit color mode and usually is used for graphics and illustrations with solid areas of color. It differs because it cannot produce animations and it offers more transparency options. Some of these transparency options do not work in older browsers like IE 6. Also, sometimes PNG-8 can give you the same quality as a GIF, but with a smaller file size.
PNG-24
Similar to a JPEG, PNG-24 can compress complex images like photographs within a 24-bit color mode. It differs in that PNG-24 can render transparency, but it sacrifices compression for quality so most of the time you’ll end up with a much larger file size. I’ve experimented with different techniques to reduce a PNG-24’s file size. One that seems to work relatively well is by adding a “Posterize” adjustment layer to your flattened image. One strange tip that I learned at the In Control Web Design Conference is to actually use Fireworks instead of Photoshop. For some reason, saving your PNG using Fireworks creates a smaller file size than saving straight out of Photoshop. If you have access to the program, I definitely would recommend using it.
Practice Makes Perfect
Quite honestly, the best way to determine the appropriate file type will be through a process of trial and error; take the time to know and love what’s available.
Layout and Styles Cheat Sheets
Break it down, now! Make yourself layout and styles cheat sheets. For the layout, over a mock-up of your design, highlight the height and width of your main design areas; these can include items such as the header, navigation bar, content area and footer. Now, if you need to check a dimension, you can simply refer to your cheat sheet instead of having to whip out your ruler tool. In addition to the layout, have a styles cheat sheet as well. This document should contain font information, border specs, hexadecimal values, etc. Keeping these two items on hand will prevent you from having to go back to search minor information.
That’s It
I’ve found that by sticking to these guidelines, my (website design and development) life is a bit easier, so get out there and explore, organize and conquer the world (wide web) with these tips and your talents!
No Comments Yet
Let us know what you think