homepage Welcome to WebmasterWorld Guest from 54.196.196.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
Using photoshop 6 to reduce photo size
AmyNY




msg:857497
 4:19 am on Jan 6, 2003 (gmt 0)

Currently using photoshop 6 and then livepix for the task. Reason: photoshop is difficult to use.

I start with a 300 resolution jpg about 100kb and 5 inch size. I crop out the excess which I do by making a box around the photo and pasting to a new file. (Can't even figure out how to crop properly in photoshop.)

Then I reduce image size to about 2 to 2.5 inches. Easy to do in photoshop.

Next I use Livepix to reduce to 72 dpi (keep as jpg) because I don't understand in photo shop how much res I'm getting from their scale.

I still end up with pictures from 3kb to 12 kb. I don't want them larger than 2 or 3kb.

I know there is a better way to do this. Something else needs to be reduced in these pictures before reducing the resolution.

I'm doing a catalog and I put about 5 - 10 of the above pictures on the same page. For the page with one larger pictures showing more details about the product, I try to save a 150dpi and gif format and keep at 12 - 15 kb. That's probably not necessary.

Can anyone tell me how do all of the above in photoshop 6?

Thanks for your help.

Amy

 

aus_dave




msg:857498
 4:43 am on Jan 6, 2003 (gmt 0)

AmyNY, are you creating GIFs or JPEGs? JPEGs are best for photos and will give you much smaller file sizes where there are blocks of colour (sky, backgrounds etc.).

You can do 'save for web' in Photoshop 7, not sure about 6. Another thing to look at is the colour depth used, less colour depth = smaller file size. On most small pics you can't even tell if the colour depth has been greatly reduced.

I'm no Photoshop guru though, I think Paintshop Pro and Fireworks are less complex and Fireworks particularly is web orientated.

martinibuster




msg:857499
 4:46 am on Jan 6, 2003 (gmt 0)

When talking about images for the web, DO NOT use the term inches. Web images are pixels.

CROPPING:
1: Use your "marquee" tool to make a box around your subject. You should now have the "marching ants" which denote your selection.
2: Then, use your magnifying glass (or CTRL+Z) to zoom in close on the "marching ants".
3: Then on the menu at the top of the screen, go to Selection, Modify Selection. Now you can tug the "marching ants" and adjust them to within one pixel of where you want the selection to be.

Another way to crop is to drag out some guides and place them where you want your crop (make sure to have your rulers out and that the measurment settings are set to pixels). You can zoom in and adjust your guides to within a pixel. Now use your marquee tool and crop it.

REDUCING FILE SIZE:
A file size is determined by the resolution (dpi), the actual size (width and height as measured in pixels), and the amount of color you have in the photo (AKA Color Depth).

You are apparently not reducing the amount of color. There are many ways of doing this. You can reduce the color over the entire image. A better way is to select a portion of the photo and reduce the color just in that portion. Most of the tools for accomplishing this can be found in the top pull down menu under Image, then Adjust.

Saturation is a good one to play with. Just don't suck all the color out of the photo. Experiment.

Another trick is to go to filter-blur-gaussian blur. Blur the image, or a portion of the image(like the background).

Once you have the photo cropped and manipulated ready to go, go to the drop down menu and go to Image, Image Size. Adjust the image to exactly the pixels you want (width and height). Don't worry about Resolution. Press ok.

Now go to File-Save for Web. Select "jpeg" (if it's a photo) and play around with the "quality" setting. I find that anything less than 54 will start shifting the colors. But depending on the situation, that's usually ok.

Good luck.

[edited by: martinibuster at 4:51 am (utc) on Jan. 6, 2003]

fathom




msg:857500
 4:51 am on Jan 6, 2003 (gmt 0)

I start with a 300 resolution jpg about 100kb and 5 inch size. I crop out the excess which I do by making a box around the photo and pasting to a new file. (Can't even figure out how to crop properly in photoshop.)

Two ways... Reduce Canvass size: Select image tab top menu, scroll down the canvass size, select on arrows your image anchors decrease height and/or width (if all sides can be reduced leave center canvass.

Rectangular Marquee Tool (on toolbar top left) is croping tool.

depress select image area, select edit top menu, copy open new file & paste.

Then I reduce image size to about 2 to 2.5 inches. Easy to do in photoshop.

Next I use Livepix to reduce to 72 dpi (keep as jpg) because I don't understand in photo shop how much res I'm getting from their scale.

I still end up with pictures from 3kb to 12 kb. I don't want them larger than 2 or 3kb.

I know there is a better way to do this. Something else needs to be reduced in these pictures before reducing the resolution.

Go to image tab scroll image to image size deselect image resample (bottom left of window) reduce to 72dpi - reselect image resample - done.

I'm doing a catalog and I put about 5 - 10 of the above pictures on the same page. For the page with one larger pictures showing more details about the product, I try to save a 150dpi and gif format and keep at 12 - 15 kb. That's probably not necessary.

Can anyone tell me how do all of the above in photoshop 6?

In file tab there is a batch command that allows you to do repetitive tasks with one "hotkey". Read up on batch command in help menu.

Another point - try selecting image tab, adjustments and then autolevels - you should note an improvement to your images. You can manually do this as well for say images that were under or over exposed.

[edited by: fathom at 4:57 am (utc) on Jan. 6, 2003]

martinibuster




msg:857501
 4:55 am on Jan 6, 2003 (gmt 0)

Repetitive tasks. Missed that one.

The best way to do this is by using your actions. It's easier to do than you may think. Basically, once you've optimized one image the way you like it, go back and do it again, this time recording your actions. Now, all you have to do is hit the play button and your work is done.

Use with caution. Read up about it first. Buy a used Photoshop 5.5 tutorial and read about using Actions.

fathom




msg:857502
 4:59 am on Jan 6, 2003 (gmt 0)

Buy a used Photoshop 5.5 tutorial

It seems dueling tutors here at WebmasterWorld work quite well too!;)

trismegisto




msg:857503
 2:35 pm on Jan 6, 2003 (gmt 0)

>>>I start with a 300 resolution jpg about 100kb and 5 inch size. I crop out the excess which I do by making a box around the photo and pasting to a new file. (Can't even figure out how to crop properly in photoshop.)

1) crop the image:
select your tools palette. if you tipe ‘c’ photoshop will select the crop tool. use the tool and reshape the crop area to your desired size.

>>>Then I reduce image size to about 2 to 2.5 inches. Easy to do in photoshop.
>>>Next I use Livepix to reduce to 72 dpi (keep as jpg) because I don't understand in photo shop how much res I'm getting from their scale.

2)resize the image:
in the image menu (image>image size…) you can adjust the size of your image AND the resolution. it’s all in the same dialog box, you should see it there.

>>>I still end up with pictures from 3kb to 12 kb. I don't want them larger than 2 or 3kb.

3)optimize the image:
in the file menu (file>save for web…) you can adjust the quality of your image. choose jpeg from the menu and move the settings to adjust the quality/size fo your image, the preview lets you see your best option; usually a 25-35% jpeg is the best bet.

>>>JPEGs are best for photos and will give you much smaller file sizes where there are blocks of colour.

aus dave is totally right amy, you shouldn’t use gifs for pictures.

>>>When talking about images for the web, DO NOT use the term inches. Web images are pixels.

martinibuster is also right, you should use pixels and don’t inches.
a 72dpi image has 72 pixels per inch.

BlobFisk




msg:857504
 2:48 pm on Jan 6, 2003 (gmt 0)

Also, adjust the resolution before the image size, as Photoshop will resize the image after a resolution change.

AmyNY




msg:857505
 4:02 pm on Jan 6, 2003 (gmt 0)

Thank you everyone for the detailed directions. Cropping worked. Reduced saturation. Not sure how much saturation reduction reduced picture size. Not sure where to find kb size in program. Used the magic wand to reduce white background using filter-blur-gaussian blur. Guess white can't be reduced. :) Reduced 152kb picture to 8kb. Shouldn't I be able to get it smaller? Wanted to reply to thank everyone. I need to spend more time trying the various functions to reduce the quality of the picture.

fathom




msg:857506
 9:39 pm on Jan 6, 2003 (gmt 0)

Not sure where to find kb size in program

Under image (top menu) -- scroll to "image size" and atop of the appearing window.

tedster




msg:857507
 10:14 pm on Jan 6, 2003 (gmt 0)

One method for getting smaller JPEG images is to go into L*a*b color space and run the Gaussian Blur filter on only the (a) and (b) channels, but not on (L). You can run some pretty big blurs that way - 2 or 3 px and more - and that helps the jpeg algo compress further without visible artifacts. The Blur filter will only affect color, since the detail is all held in the (L) channel.

If there is a sharp color line in the image, you may need to create a selection that omits that edge from the blurring. Otherwise, you can rarely see enough visual change to worry about.

Then return to RGB for any final moves. When you save, definitely use Save for the Web - it loads Photoshop's companion program ImageReady which makes choices and comparisons a breeze.

I'm a fan of boosting saturation rather than lowering it. The images pop more, especially if your source file ever went through CMYK space, which lowers the gamut and makes images look dull on screen. Anthing printed went thorugh CMYK, so if your using a scan of a print image you've got the gamut loss.

I've done a bit of testing on this, and boosting the saturation for a product image has often boosted sales.

Boosting saturation doesn't need to increase file size. Beginning with Photoshop6 you could do it on gif images without moving them into RGB. It leaves the file size exactly the same.

martinibuster




msg:857508
 10:54 pm on Jan 6, 2003 (gmt 0)

do it on gif images without moving them into RGB.

Gifs are always in RGB. They can't be cmyk. Desaturating (removing a color) will indeed lower the kb size of an image. There's less information to convey.

tedster




msg:857509
 11:03 pm on Jan 6, 2003 (gmt 0)

Martinibuster, I was talking about the color space. Gifs are indexed color and jpegs are in RGB space. GIFs use a color table of 256 colors max -- many fewer colors than full RGB color space allows.

But yes, the GIF color table does assign RGB values to each color in the index. It's a [very] small subset of full RGB space.

<added>
The term saturation, as Photoshop uses it, refers to the HSB model (hue saturation brightness) for representing a color, and not the number of colors. You're correct that removing colors from a color lookup table will decrease the image's file size. But that's not what the Saturation slider does.
</added>

martinibuster




msg:857510
 11:33 pm on Jan 6, 2003 (gmt 0)

The term saturation, as Photoshop uses it, refers to the HSB model (hue saturation brightness) for representing a color, and not the number of colors.

Tedster: Good points. I agree with you... And I don't.

Adobe has this [adobe.com] to say on their web site:

Saturation
Sometimes called chroma, the strength or purity of a color.

Thus, by lowering the saturation, you get gray. Put another way, you get less color.

And here [adobe.com]:
100% Saturation is the fullest saturation of a given hue at a given percentage of illumination.

So in a way I was slightly off, but the intended effect is entirely as advertised.

:)

Thanks for bringing it up.

AmyNY




msg:857511
 4:19 am on Jan 7, 2003 (gmt 0)

Tried to reduce an 80kb picture.

Still can not find picture size in kb in photoshop.
Was told in this thread to find it:
Under image (top menu) -- scroll to "image size" and atop of the appearing window.

Went to "image size" and at the top of the window my 80kb picture read "2.2m". What's that mean? Think it also said 2.2m in lower left hand corner. I feel really dense with this one.

Opened windows explorer to see size of picture (background was probably 50% of entire picture), did the blur, gaussian, blur on the entire white background of the picture (selected with magic wand). Chose the # 10 for the new background and it turned into off-white color. Saved a new version of the picture and win explor showed it as 36kb. A really nice size reduction! Then reduced saturation down to 20, resaved and looked at win explorer and the new file was still 36kb.

One method for getting smaller JPEG images is to go into L*a*b color space and run the Gaussian Blur filter on only the (a) and (b)
channels, but not on (L).

Help, I'm new at this. What is "L*a*b color space? Tried gaussian blur filter by clicking "filter, blur, gaussian blur" and did not see any options for "a" and "b" channels.

hakre




msg:857512
 3:44 am on Jan 8, 2003 (gmt 0)

seems that this thread will lead into a course of computer graphics.

LAB is a logical construct for colors, a so called color-model. RGB is another one too. CMYK also.

all these try to make a display of colors possible. and all they try to do better, to match any color possible. but none can. you ever wondered why sitting in front of a bombasting flash animation isn't that blown away like seeing the sun sinking into the see? because your computer/tv is not able to create these full sensual colors. on the one hand this is because of the hardware, on the other hand this is because of the color-model, too.

(not to forget: the first is work, the second holiday ;-) )

when you open your jpeg you got a RGB picture i think. you can change this under image -> mode.

then you can select the different channels of the color mode in the channels palette (like the layer palette). use the menu to show it up, if you can't find it. it's the view menu.

select only the channels you want to modify and apply filter then. so you don't need to select the channel in the filter dialogue (as you wrote first).

fathom




msg:857513
 3:52 am on Jan 8, 2003 (gmt 0)

Went to "image size" and at the top of the window my 80kb picture read "2.2m". What's that mean? Think it also said 2.2m in lower left hand corner. I feel really dense with this one.

Took me a few minutes to decypher what you were refering to (2.2m)

In photoshop the opened image being saved does not revert to the saved format but remains as a psd, thus the 2.2 megabyte file size.

after saving gif/jpg etc. - if you really what to view the file size of the saved image you need to open it.

AmyNY




msg:857514
 4:54 am on Jan 8, 2003 (gmt 0)

Sorry to ask so many questions. Thanks everyone for the responses. They were very helpful. I am finally able to resize my pictures using only one program.

Amy

martinibuster




msg:857515
 5:17 am on Jan 8, 2003 (gmt 0)

Clap-clap-clap!

:) Y

John_Caius




msg:857516
 11:41 pm on Jan 8, 2003 (gmt 0)

In Photoshop 5 there is a specific crop function in the Image dropdown menu called Crop. Select the area with the marquee tool then go Image, Crop - that's it. No copy and paste, open new image or anything. Has that been taken out of 6 and 7?

John_Caius




msg:857517
 11:43 pm on Jan 8, 2003 (gmt 0)

You set resolution for an image when you first go File, New - there you set image size, resolution, background type and other stuff. Again in PS5, dunno about 6 or 7.

korkus2000




msg:857518
 11:45 pm on Jan 8, 2003 (gmt 0)

John_Caius both of those are in 6 and 7.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved