Graphics in Photoshop: 6 Beginner Tips for Web Designers

Sep 19 2011 by Jen Stroman | 25 Comments

Graphics in Photoshop: 6 Beginner Tips for Web Designers

Graphic design and web design are two distinct visual fields that have different requirements, best practices and methodologies.

For example, it’s much easier in web design to use pixel-based/raster-based file formats (like JPG, GIF or PNG). Conversely, vector files such as EPS and AI — which are scalable without leading to pixelation — are better suited for graphic design, for things like logos that might be used in a variety of sizes. As of yet, vector-based graphics designed for the web (such as SVG or HTML5 Canvas) are not universally and uniformly supported in all browsers.

In addition, graphics meant for web use have certain best practices associated with them. One of these best practices is that you should be conscious of file weight because you want your web pages to be as fast as possible. As a web designer, you have to try to reduce the amount of HTTP requests done by your graphics — whether through lowering the amount of images you use or combining some of them into a CSS sprite — as well as make sure you pick the right image format that strikes a perfect balance between file size and image quality.

Photoshop is an industry-standard tool used by both graphic designers and web designers. What follows are some simple tips to follow as you create graphics meant for use on websites.

1. Save Your Graphics with the "Save for Web & Devices" Command

In web design, you have to make sure that your images are as small in file size as possible. But it’s more than that — your images need to look good as well.

The perfect approach to creating graphics in Photoshop is by balancing image quality and file size.

A common mistake that web designers make is using the Save as command instead of the Save for Web & Devices command in Photoshop.

The Save for Web & Devices command creates files optimized for web design, in terms of image quality, image resolution, browser compatibility and file size.

The command additionally has a dialog window that you can use to fine-tune your images. While you tweak the settings of your graphic, it will show you its effects on file size and image quality.

In comparison, the Save as dialog window doesn’t have as many options and often creates images that are larger in terms of file size.

Below is a comparison of the same image saved using the Save for Web & Devices command and the Save as command. Notice that the file size difference is significant.

2. Consider Using Web-safe Colors

Web-safe colors will display correctly in most browsers and on most monitors, ensuring your website looks the same no matter where it’s viewed.

The two easiest ways to guarantee that the colors you use are web-safe are as follows.

"Only Web Colors" Option

In the Color Picker dialog window, check the "Only Web Colors" option located at the bottom-left corner. This will limit the colors being displayed in the window to just web-safe colors.

Convert a Color to a Web-safe Color

Convert any color into the closest web-safe color by clicking on the little cube in the Color Picker (next to the "Current" and "New" color boxes).

3. Consider Using the "Progressive Scan" Option for JPG

The JPG file format is ideal for photographic and high-resolution images. Depending on your projected audience, a progressive scan JPG can be the way to go, as the image will gradually render as the site loads (though on modern broadband Internet connections, this type of wait time is rarely an issue). This allows the user the ability to quickly see the image before it fully downloads, making the web page feel more responsive.

For a more extensive guide on the subject, read JPEG 101: A Crash Course Guide on JPEG.

4. Save Graphics with Transparency as PNGs

The PNG image format is great for images that need to be rendered with transparency.

PNG transparency is supported in most mainstream browsers but watch out if you find yourself having to cater to IE6: parts of your PNG that are meant to be transparent will show up gray. There are workarounds to avoid this issue (e.g., IE PNG Fix JavaScript library) but they can be a hassle to implement.

For more information on PNGs, read the Web Designer’s Guide to PNG Image Format.

5. Save Animated Graphics as GIFs

The GIF image format, while now mostly replaced with PNG, is still useful for one thing. While they are noticeably grainier than PNG and JPG files, one important feature of the GIF image format is its ability to be animated.

While there is an extension of the PNG image format called APNG (which stands for Animated Portable Network Graphics), it lacks browser support.

If you’re choosing between PNG and GIF, it’s usually a good idea choose PNG unless the image is to be animated.

6. Pay Attention to the "Download Time" Information

It’s vital to make sure that a site loads quickly and looks good, which is why saving and optimizing your graphics is important. Below, see what a simple change in a file-saving option can do to an image’s file size.

JPEG at Maximum Quality

JPEG at Low Quality

A good practice to follow is to lower the quality until you visibly notice degradation in image quality.

When you’re optimizing your images, always pay attention to the Download Time, which is displayed on the lower-left corner of the Save for Web & Devices dialog window. Below, you can see that the image being saved will take approximately 2 seconds to download on a DSL Internet connection at its current settings.

Related Content

About the Author

Jen Stroman is part of the DWUser.com education team (led by Nathan Rohler) and the primary contributor to this article. Indianapolis-based DWUser.com offers software tools for developers and designers, including an easy and free jQuery slider builder, EasyRotator.

25 Comments

Alex Blaken

September 19th, 2011

Web designing without good graphics is not attractive & therefore will not have high viewers. Photoshop always do tha magic. thanks for sharing.

Edwin

September 19th, 2011

I feel so out of date !! I was using Photoshop 3.05 for years then finally upgraded to Photoshop 5. It’s so expensive to upgrade but all the best tutorials usually for the most recent versions.

Marcell Purham

September 19th, 2011

Very good tips for web designers. I run into alot of these problems now lol but its good to know how to compress images and what color format to use when designing a webite.

fotograaf

September 19th, 2011

webcolors, really?
The time that our monitors displayed no more than 256 colors to use webcolors is long gone.
Same with webcolors…

fotograaf

September 19th, 2011

[edit, typo]
webcolors, really?
The time that our monitors displayed no more than 256 colors is long gone.
Same with webcolors…

glandix

September 19th, 2011

heh got a kick out of the websafe tip … that was a LONG time ago when that was necessary … long since become a thing of the past along with an animated “e” at the bottom of every page and a Java-based 3D clock

also, i HIGHLY recommend using something like PNGout or PNGcrush to compress PNG (and other) images after saving them in Photoshop … “Save for web” is mediocre at best when it comes to compressing PNG files and you will oftentimes see anywhere from 10-50% savings after running a PNG through PNGout (with no visible differences) … this is always a part of my workflow and also saves me having to decide whether PNG24 or PNG8 is appropriate for my image … save everything as PNG24, run through PNGout, and you have the smallest version of that PNG possible :) … it’ll automatically “enable” transparency/translucency ONLY if your image uses it … it also strips out color profile info (you ARE saving everything as sRGB, right? some browsers *cough cough* Chrome *cough cough* STILL don’t properly support other profiles)

Isiah

September 19th, 2011

Where Photoshop falls down is in the export to web function. It doesn’t do it very efficiently and size savings (can be made by uploading jpgs to Yahoo’s Smush.it. These file size savings are lossless too – so no worries on image quality degradation.

Cheers
I

RustyH

September 19th, 2011

If your new to webDesign and Photoshop, I highly suggest ditching Photoshop and going with Fireworks. Photoshop is like a multi-tool. It can handle a lot of different tasks. But when your need a screwdriver… use a screwdriver. Fireworks is for webDesign.

That said, If you are already a pro in PS, making the transition from PS to FW can be tedious.

Irina

September 20th, 2011

Thanks for sharing.
I never save transparent graphics as PNGs when I know the site is most likely to be accessed by older/not computer-savvy people using old browsers (PNG has a bad support by old browsers). I simply save in GIF format – it’s much easier and work for all browsers.

d

September 20th, 2011

I disagree with saving it as progressive. It’s really annoying watching a pixelated image being built up.

Rich Miles

September 20th, 2011

I dont use the save for web in photoshop, I save it out full res and then use fireworks to do the magic. Always end up with better images and smaller file sizes.

Anar

September 20th, 2011

Wow.. its really great tips dear… thanks for sharing it…

Chris

September 20th, 2011

+1 for Fotograaf. Kinda baffled me as well, it´s really outdated…

Also, you can save animated GIFs through the “Save for Web and Devices” Dialoge and get more options like looping the animation. Not sure if this affects file Size at all.

Nice Guide for starters!

dreadpirategrace

September 20th, 2011

Great article, except for the part about web safe colors. That part is outdated information, and no longer necessary. Hasn’t been necessary for years now. Thanks for the rest!

Carol Lieb

September 20th, 2011

Very useful. Good design with thoughtful file preparation creates web sites that are user friendly.

chris

September 20th, 2011

agree with fotograaf… webcolors?! 1998 called and would like their list back.

Technbuzz

September 20th, 2011

Using progressive scan for jpeg is a great learn for me, hope sixrevisions bring more introductory articles regarding web design.

andrew

September 21st, 2011

Web safe colors – LOL
Dude, have you come from the past? It’s 2011 and this was nessecary years ago before 2000.

Chris

September 21st, 2011

@Irina: I´m not sure which browsers exactly don´t support png but i´d rather take that risk than restricting myself to 256 colors and no possibility of doing an alpha fade (as gif is either fully transparant or filled, which I think is the biggest problem with it).

Tracey

September 22nd, 2011

Hi Jen, as a graphic designer, I always love reading articles like yours that are simple and completely informative. There is always something to learn. Keep these coming. Thanks.

adam

September 23rd, 2011

really great tips thanks!! not being the designer in our lil team it’s great to get some beginner tips for dabbling time, please keep these ones coming!: )

Kevin Cannon

September 25th, 2011

Web colors – seriously? They haven’t been relevant since the 90s.

Swamykant

September 26th, 2011

Progressive JPG and transparent PNG file are must. really it will be helpful for designers. Thanks

André Lelis

November 8th, 2011

Thanks for sharing. Thanks for the tip

josey jasen

November 25th, 2011

I feel satisfied after finding this one.

Leave a Comment

Subscribe to the comments on this article.