catonthecouchproductions
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you both very much! I will give these a shot!
Ryan
Ryan
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
DeeDee
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
Appreciate the help.
Ryan
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.
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.
ASKER
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 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! :)
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! :)
ASKER
Thank you for the tips everyone! I keep this in mind when I am slicing, keeping the quality, but reducing the size.
Ryan
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
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
ASKER
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!
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
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.
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.
ASKER
DD, Thats what i would do as well that or just drag the object from Illustrator to Photoshop.
Ryan
Ryan
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hey man, i never thought of using PNG. This will be my first time using them.
Thanks for that!
Ryan
Thanks for that!
Ryan
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