Link to home
Start Free TrialLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

asked on

Making GIFS better looking - working with gradients

Hi,

I am making a layout in Photoshop and a really quick mock up is here:

http://ryancoughlin.com/ryan/index.php

When I go to save for the web, the default GIF with 256 Colors looks HORRIBLE.

The gradients look blocky and everything. The link that I gave you has the JPG export version at 100% quality.

I am thinking loading time wise, does anyone have any suggestion on how to get good quality, but also a decent loading time.

Thanks,

Ryan
ASKER CERTIFIED SOLUTION
Avatar of ddhamm
ddhamm
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I also tried to reduce the size of the .jpg file:
 Your file has successfully been uploaded!
To download the file, you must be logged into EE-Stuff. Here are two pages that will display your file, if logged in:


Direct link to your file
https://filedb.experts-exchange.com/incoming/ee-stuff/4389-web-header_smaller.zip 

For this one I changed the image size to resolution: 96 and at the same time changed the width to 8 inches, and before saving it, I selected bicubic sharper in the "resample image" part of the image size window.

DeeDee
 
 
Avatar of catonthecouchproductions

ASKER

Thank you both very much! I will give these a shot!

Ryan
SOLUTION
Avatar of SheharyaarSaahil
SheharyaarSaahil
Flag of United Arab Emirates image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
DragKng, I made a smaller jpg (and posted it on ee-stuff). I agree with you that optimizing a jpg for that kind of image is a better way to go.

DeeDee
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Wow! i never thought of that, great way of looking at slicing images. thank you for that tip. i will do that.

Appreciate the help.

Ryan
Avatar of DragKng
DragKng

The slicing is a great recommendation. I have done this quite a bit and with great success... where the color is not gradiented (?) so much you can combine gifs for the flat color areas and jpgs for areas with more photographic/gradiented areas ...

there are ways to optimize your jpg further using masks. where certain areas you mask retain more quality than others... great for just the pond say... the larger gradients you can let decay quite a bit before they really look bad.  If you wish to go this route or are curious I found a tutorial that is good
http://www.adobepress.com:80/articles/article.asp?p=441754&seqNum=10&rl=1

actually this might be the most well suited to the task at hand... it's kinda fun to do too.  I love masks ... what a geek.
I never thought of the slicing idea. Ill do that and give it a shot. So just slice up all the images by chunk, like the hills, sky, etc? I slice where it is not gradiented? I am just trying to understand the concept.

I have never really understood layer masks, but ill read that article, so do you think setting up layer masks would somewhat help?

Thanks for that tip!

Ryan
>> I slice where it is not gradiented?
well you can slice that area too....but should be well balanced :)

layer masks are useful while blnding images....i don't really find them useful while creating designs for web.....but well....can be my own preference and thought! :)
Thank you for the tips everyone! I keep this in mind when I am slicing, keeping the quality, but reducing the size.

Ryan
I agree with Sheharyaar, that I don't really see how masking will help with making a web optimized image. Masking does help in the creation of images.

What software did you create your illustration in?

I think that slicing would probably reduce the time it takes to load the image.

I like to use Adobe Image Ready for slicing. It does an ok job of creating the html for you.
ImageReady slicing tutorial:
http://www.webdesign.org/web/photoshop/imageready-animation/slicing-tutorial-easy-one.3085.html

Some Photoshop slicing tutorials:
http://www.laikanet.com/howto/slicing.html
http://www.heathrowe.com/tuts/slices.asp

DeeDee
Hey,

I used Illustrator/Photoshop CS3. I keep hearing about everyone saying slicing smaller, I never thought of that. I am definetly going to use that when i go to slice the images, then just make DIV's to go along with the images.

Thanks for those links!

Also, from Illustrator, you might get good results if you export or save as a Photoshop file (not a .jpg) to work on for slicing.

DeeDee
You would have to read the tutorial to understand.
You know how you can choose the % of quality for a jpg in the Save to Web dialog?
Well you set a lowest and highest % and the Save for Web process uses this mask to decide which parts are optimized at which % black being the lowest, white being the highest.

It's an advanced technique that many people don't know about... but it is very useful.
DD, Thats what i would do as well that or just drag the object from Illustrator to Photoshop.

Ryan
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hey man, i never thought of using PNG. This will be my first time using them.

Thanks for that!

Ryan