N.S.L: WEEK 62 – Adobe Photoshop CS6: Save For Web

Sebastian Bleak Abstract Shapes

Example of a web graphic made using the “Save for Web” dialog box.

****

There IS a difference between a “Save As” JPEG and a “Save for Web” JPEG!!! I always knew there was, but I didn’t know WHAT it was. So I just continued to “Save As” for everything. Now I see I’ve been messing up because aside from the designs I do for shirts, most of my stuff goes straight and only to web… That’s what started this whole thing. I realized I’m putting most of my work on the net so I better make sure I’m using the best practices. I used to think, “there’s nothing to it. It’s just a way to save down.” but I know better now.
****

Save for Web dialog box in Adobe Photoshop CS6

Right here you can see the difference in the file sizes for each format. If you look real close at the Jpeg, you can see the weird pattern it makes around the gradient edge.

“Save As” will leave your image in the Adobe RGB(1998) color space but the more common workflow would be SRGB color space for web. “Save for Web” will start you off with an option to convert to the SRGB color space. You can change that, if you’d like, and leave your custom color space.

“Save As” will save along a Thumbnail that you will never see on your site so it’s taking up valuable space for no reason. The thumbnail would come in handy if you were viewing them on your PC file browser but that’s not our intent for web graphics. “Save for Web” will not save along a thumbnail.

When you go into “Save for Web”, the metadata is set to only show “Copyright and Contact Info” by default which reduces your file size. You can change that if you want additional information to go along.

If my files are less bulky, they come up quicker on my site and that’s a big deal to me. If it lags, you get impatient then bounce to the next page. NOT COOL

****

There are 3 types of files you can create from the Save for Web dialoge:

JPEG: Photographs, smooth tone images and no transparancy. Doesn’t do well with large flat areas.
GIF: High-contrast graphics, transparencies, and animation
PNG: Does everything GIF can do but a lil better. Its jut not supported in as many places according to Deke when the videos were recorded. Using PNG is the more popular workflow today, sounds like it anyway =D

****

Everybody seems to agree, do not down sample in the “Save for Web” dialoge box. There is a problem with the Quality option. You can change the options but you wont see a difference on your image so it just doesn’t work.

****

Coolest trick I learned was one that I hoped Photoshop could do. If you have a transparent background and your image fades out to nothing, you can trim off any area that does not have pixel information. Image + Trim + Based on Transparent Pixels. I’ve trimmed out a BUNCH of fades in my time =D

****

I got most of my info from Lynda.com:
Photoshop CS6 One-on-One Intermediate
Photoshop for Web Design
****

Checkout my:
Tumblr
Website

Shout out to the homie Kyle http://haroart.tumblr.com/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s