Printable Version of Topic

Click here to view this topic in its original format

GameReplays.org _ Tutorials _ Tutorial: Optimizing Images With Photoshop Or Gimp

Posted by: Maniac Mar 17 2005, 05:29 AM

Here's a quick tutorial on how to get sigs under 50kb.

First i present an example signature image.

Notice that this unoptimized signature is at 90.2 KB. Once resized it till be well under 25kb without any loss of quality.


Attached image(s)
Attached Image

Posted by: Maniac Mar 17 2005, 05:34 AM

Now we start the optimization process. Open up the image in photoshop.

First we head to the File menu, and click on Save for Web


Attached image(s)
Attached Image

Posted by: Maniac Mar 17 2005, 05:36 AM

Now in the Save for Web dialog, select the options to match the image below.

Jpeg
Quality - 60
Blur - 0
No Matte
Optimized = Check
Progressive = Check


Attached image(s)
Attached Image

Posted by: Maniac Mar 17 2005, 05:39 AM

Make sure you have selected the Optimized Tab as shown below. This shows you how the image looks with your Quality setting.


Attached image(s)
Attached Image

Posted by: Maniac Mar 17 2005, 05:39 AM

Now if you look at the bottom left corner of the Save for Web dialog box, you`ll see the image size once its optimized and saved.


Attached image(s)
Attached Image

Posted by: Maniac Mar 17 2005, 05:42 AM

Now click save, and save the image and then upload it to cncreplays.

For comparison, here are the two images next to each other. Notice the quality is still more or less the same.

The first one is the optimized version, at 21.8kb , well under the 50kb limit.
The second one is the original one posted on this website at 90.2kb


Attached image(s)
Attached Image Attached Image

Posted by: Maniac Mar 17 2005, 05:43 AM

If you have any questions, post them here.

Posted by: Lateralus Mar 17 2005, 07:30 AM

For those of you that doesn't have Photoshop, you can use the program http://www.gimp.org/. It's a 100% free program and has almost all the features of Photoshop. Give it a try and you'll love it!!

Here a tutorial on how to perform the same procedure using GIMP:


1) Go to Save as...

user posted image

Posted by: Lateralus Mar 17 2005, 07:32 AM

2) The following screen will appear. Just click on Save or if you want to rename, change the filename.

user posted image

Posted by: Lateralus Mar 17 2005, 07:35 AM

3) GIMP now will show the standard screen for saving jpg's. From here, press Advanced options.

user posted image

Posted by: Lateralus Mar 17 2005, 07:37 AM

4) A screen will appear that looks very simliar to the one we saw at Photoshop. Just enter the options like we did with Photoshop and click on Save.

user posted image

Posted by: Lateralus Mar 17 2005, 07:38 AM

Here's the final result. The filesize is now 15.17 KB (15531 bytes). There are no apparent differences to be find. There IS a difference. But just hardy noticeable to the naked eye.

user posted image
user posted image

Posted by: SnA`DrAkEy Mar 17 2005, 08:56 AM

lol i cinsider myself a fairly goos sig maker and still i didnt know that, thx m8 this has helped biggrin.gif

Posted by: Soundwave Mar 17 2005, 09:44 AM

yeah i got one my sigs are often verry fuzzy howcome ??? i want to get hard collors to unsure.gif ohmy.gif

Posted by: lil9 Mar 17 2005, 11:12 AM

Cool tut

When i check the Progressive, the Optimized becomes unchecked and uncheckable. Is that ment to happen?

Posted by: Vendetta Mar 17 2005, 12:18 PM

That is really good thanks fir showing it to us guys. smile.gif

Posted by: OmegaSt0rm Mar 17 2005, 12:33 PM

Well now members have a solution around the 50kb signature limit =).

-OmegaSt0rm

P.S. Great job Maniac/Lateralus.

Posted by: Nubbe Mar 17 2005, 13:59 PM

Is there any simular way to reduce sigs with animations?

Posted by: Lateralus Mar 17 2005, 14:08 PM

QUOTE(Nubbe @ Mar 17 2005, 03:58 PM)
Is there any simular way to reduce sigs with animations?
*




Not sure. If you have the original source file of your sig, send it to me and I'll see what I can do smile.gif.



(pro sig btw)


[edit]:
Here is what I've done to it using GIMP and http://www.gifworks.com/. I can't lower the filesize unless the color was reduced and the image was resized and cropped. This is the best I can do for now. The letters are now kinda fuzzy. You can still use GIMP though and try and touch up the letters. Hope this is good enough sad.gif.
http://www.gamereplays.org/community/index.php?showtopic=79&st=40&p=4080&#entry4080

Posted by: MxSuPeRfLy Mar 17 2005, 22:27 PM

yo can u provide a link for GIMP dude??

Posted by: Lateralus Mar 17 2005, 23:04 PM

QUOTE(MxSuPeRfLy @ Mar 18 2005, 12:27 AM)
yo can u provide a link for GIMP dude??
*



The link is at the first post of my tutorial.

Posted by: TecH Mar 18 2005, 02:18 AM

like i posted in the other topic, the easiest way to make sigs smaller is when you save the jpg, there is a quality bar from 1-12, just take it down until your sig is small enough, simple
no loss in quality either
as for animation, your screwed unless it is simple animation like my current sig

Posted by: PlayBoy89 Mar 18 2005, 02:44 AM

omg pro. ohmy.gif

Posted by: TecH Mar 18 2005, 03:55 AM

what can i say.....lol tongue.gif


edit: btw, my sig was about a half kb over, heres a lil smaller one cool2.gif


Attached image(s)
Attached Image

Posted by: TeKnoMaN Mar 18 2005, 04:07 AM

yeah... basically what you are doing is taking away color from your sig when optimizing like this.


I guess its a solution but all it does is degrade the color and beauty of a sig. sad.gif

Posted by: TeKnoMaN Mar 18 2005, 04:15 AM

QUOTE(DrAkEy @ Mar 17 2005, 12:55 AM)
lol i cinsider myself a fairly goos sig maker and still i didnt know that, thx m8 this has helped biggrin.gif
*




btw drakey your sig may be under 50k...... BUT ITS STILL TO BIG. ffs drakey LOL you never listen to the rulz.


the filesize is supposed to be 500x100 pixels max. rolleyes.gif

Posted by: Hartigan Mar 18 2005, 04:23 AM

cool thanks for telling me how to save it for web

Posted by: TeKnoMaN Mar 18 2005, 04:25 AM

ok now here is what the difference between images that are forced to be optimized under a certain size...... say such as 50kb......wacko.gif and a normal image with animation that doesnt have such restrictions.

the first one is the optimized sig with obvious degration in colors....... since gifs are already limited in colors 256.....web safe colors, they look worse and even more worse the more you take away colors from them, then a jpg would. unsure.gif


therefore this 50kb rule means basically no cool animations or no cool sigs. I dont care what any of you guys think if you are gonna dispute the fact that the loss of color in both gifs and jpg images aren't noticeable after optimization. :angry:


now notice the obvious grainy factor that gifs recieve when you take away from their already limited color source. WTF.gif but hey i guess the solution for me is just not to visit this site anymore since its obviously turning into a shadow of its former self. huh.gif


Attached image(s)
Attached Image

Posted by: Lateralus Mar 18 2005, 07:27 AM

QUOTE(TeKnoMaN @ Mar 18 2005, 06:24 AM)
ok now here is what the difference between images that are forced to be optimized under a certain size...... say such as 50kb......wacko.gif  and a normal image with animation that doesnt have such restrictions.

the first one is the optimized sig with obvious degration in colors....... since gifs are already limited in colors 256.....web safe colors, they look worse and even more worse the more you take away colors from them, then  a jpg would. unsure.gif
therefore this 50kb rule means basically no cool animations or no cool sigs.  I dont care what any of you guys think if you are gonna dispute the fact that the loss of color in both gifs and jpg images aren't noticeable after optimization.  :angry:
now notice the obvious grainy factor that gifs recieve when you take away from their already limited color source. WTF.gif   but hey i guess the solution for me is just not to visit this site anymore since its obviously turning into a shadow of its former self. huh.gif
*



Come on man!! Don't take this whole sig thing too dramatically. TBH, I don't really see such a big difference between the optimized sigs and the normal ones. I do see differences, but the sigs still look great. Also, think about bandwidths. The site is having trouble with downtimes as it is anyways. Having a lesser sig is a perfectly fair compromise for what the site has to offer in return.

Posted by: GiDeoN Mar 18 2005, 10:35 AM

QUOTE(Lateralus @ Mar 18 2005, 07:27 AM)
TBH, I don't really see such a big difference between the optimized sigs and the normal ones. I do see differences, but the sigs still look great.
*



There is a big difference, about 50% if you look at it mathematically, unfortunately Photoshop is limited in the way it actually optimizes the images in a vector output.

The only way to have a higher quality signature within the new 50Kb limit is to allow .swf signatures made in something like FlashMX, which uses a mathematical formula to animate and results in amazing signatures <20Kb.

However the sigs do still look great as outdated .gif format files, so i have to concur with you on that point Lateralus.

The only problem some will find is the clarity or dimensions given to work within - which is appalling if you ARE trying to acheive a certain style that NEEDS clarity, such as the style TeKno strives for. I can understand his total dismay at the lower filesize limit, which would be far easier to stomach if the sig makers were allowed to use .swf files.

It's an old arguement about the bandwidth, and on this occasion i really do side with the members on this and not Admins. I fail to understand how (given the fact the old 3 sites are no longer to be used and this is the emergence of something greater in the community) bandwidth can be an issue.

The whole point of the 50Kb limit on the sister sites was purely because we were running 3 sites - it is now one site.

100Kb + 50Kb + 50Kb = 200Kb

200Kb / 3 = 67Kb - surely 75Kb would not be pushing the boat out on the old issue of bandwidth.

It would probably preserve this part of the community if a compromise was offered, either a new limit of 75Kb or .swf files would work well enough to resolve this problem.

And it should be remembered this is an issue that affects the community, who wants an awful signature which is meant to be a personal show of identity?

GiDeoN

(N.B. My personal views in this post ARE NOT INTENDED AS OFFENSIVE TO ADMIN WHO ARE WORKING HARD TO MAKE THIS SITE WORK FOR ALL OF US)

Posted by: Maniac Mar 18 2005, 19:15 PM

I`ll respond to this in more detail in a few hours.

Posted by: TeKnoMaN Mar 18 2005, 19:28 PM

Gideon said it best. As a graphic artist myself using flash .swf files would be ownage. But again this is up 2 the admins............. unsure.gif


Im glad Gideon expressed exactly how i feel about his issue, so i dont have to write a page of explaining it myself. cool2.gif

Posted by: LoCk-On^ Mar 19 2005, 00:06 AM

This is a little retarded, a new site with more stringent rules and guidelines that spoil any fun that actually existed?

The thing is I cant be assed downloading programs after programs linked to by cncreplays etc that clog my hard drive and no doubt infect my computer...

Whats the problem with 100Kb limit...or even a 75Kb limit, the average of the two? This site is SO incomplete and its really beginning to annoy me sad.gif It should have been completed before cncreps was taken offline tbh. Please sort out replay postings in clan forums, at the moment you cant pick armies and you get ugly box "X" box things appearing mellow.gif

I'm assuming the new limits are concerned with the increased total users that will be online, but this sites already lagging like crazy...god help it in 5 weeks time sleep.gif

Can someone kinldly 'optimise' my sig for me smile.gif

EDIT: Just noticed theres practically no way your gonna get my sig into 50Kb with its animation...and the animation is kinda crucial tbph dry.gif

Posted by: Hartigan Mar 19 2005, 00:14 AM

yeah is there a way to save optimized for sigs with animation?
like this new one?

user posted image

Posted by: LoCk-On^ Mar 19 2005, 00:36 AM

I dont think the staff care for animation since few (none?) of them have animation in their sigs.. sad.gif

Posted by: -TooN|Tw33Ty Mar 19 2005, 04:00 AM

does it work with animated sigs?

Posted by: TeKnoMaN Mar 19 2005, 07:32 AM

guys... optimizing animated sig is easy... but it still degrades the integrity and clarity of the sig and its colors. Gideon explained it best.

If you guys wanna optimize your sigs that have animation just take them into image ready, which comes free along with Adobe Photoshop...... anyways then make sure you go to the optimize pallete and either change the amount of colors you are using for your gif.... from say 256 down to 128..... and if that doesnt shrink it enough u can change the lossy ratio on it to bring it down to perfect size.


either way its still never gonna look as clear and as clean as it would if we didnt have these gay 50kb restrictions. >=\

Posted by: Warcryy Mar 20 2005, 01:28 AM

Eeek I dont think I have adobe, can someone do it for me.

Posted by: Lateralus Mar 20 2005, 19:30 PM

QUOTE(Warcryy @ Mar 20 2005, 03:28 AM)
Eeek I dont think I have adobe, can someone do it for me.
*



Try GIMP. Just following the instruction of the tutorial smile.gif.

Posted by: AgmLauncher Mar 22 2005, 05:56 AM

There is also another free program that actually has excellent jpg compression. It's called IrFanView.

Here is Warcryy's original signature at 65.91kb:
Attached Image

Here is Warcrry's signature resaved at 100% quality using IrFanView. This means there is no image quality loss at all. It has now been reduced to 36.82kb
Attached Image
The only difference is a slight loss in image contrast/saturation, but that's ONLY if you look at them side by side very carefully. You simply wont care if it's by itself in the forum.

Now here is his signature saved at 85% quality. Again, this is nearly impossible to see unless you're zoomed in and comparing the images side by side, it has been reduced to 15.39kb
Attached Image

Here is the link to download this free program:
http://www.irfanview.com/

So there you go, NO ONE, absolutely NO ONE has an excuse for having a perfectly high quality jpg image over 50kb. Anyone who is making sigantures should either be optimizing their images in photoshop before hand, or resaving them after using this free program to get the file size down. If you do it right your image quality will not suffer, and if it does, no one is going to be scrutinizing the sigantures and somehow comparing them to the original. This is an internet forum, not a high power graphics production facility. There is no need for ultra perfect quality jpgs here. If you want extreme high quality sigantures, then you'll have to reduce their dimensions (which is crazy considering I've just shown how easy it is to maintain indistinguishable high quality while cutting the file size by nearly 75%.


Now, in terms of animated sigs,
If you want to optimize animated sigs, you simply optimize each frame and then add them together. Keep your animations short and simple and they'll fit. Personally I dont care for animated sigs. I dont see the point in an animation that repeats itself every couple of seconds. It's like a 2 second movie that you watch over and over. It can actually get annoying. Some sigs (like Lock On's tongue.gif), actually do that annoying flashing thing which is actually in violation of our rules simply because of how annoying it is to see flashing sigantures like that.

Sigantures like Tweety's arent so irritating to look at it, but the fact that 'Tweety' gets glossed over and over and over and over is pointless tbh. Animated sigs are not against the rules so long as they dont flash, but having them is NOT an excuse to complain about a 50kb siganture limit. You always can just use a still image, or make your signature smaller. Again, this isnt deviantart, this is a gaming forum. If you are into high quality sigs with huge file sizes, then deviantart is your place.

Posted by: Warcryy Mar 22 2005, 23:51 PM

I wub you so much agm!

Posted by: Sparks Jul 9 2005, 07:49 AM

anyway to do this with fireworks? I have looked and i can't find anything sad.gif

Posted by: Zpex Jan 13 2006, 17:20 PM

nice technique mate smile.gif didnt really know that

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)