Help with Photoshop CS2

[howey1702]

Hi everyone.

I have been experimenting with the image slice tool in Photoshop CS2 and cannot seem to get my head around a few things. Can anyone help?

1. I divide the chosen image into the desired sections and use the slice tool to separate the sections. I then click on 'file/save for the web' which then brings up a new window in the right-hand top corner of the screen asking whether the image is to be saved as a .jpg or .gif etc.
I am also asked to set the image quality. I chose the option to 'save as .jpg' with an image quality of 85%.

When I click 'save' I am asked to enter a file name for the image and I am asked to select either 'save as html', 'save as image only', 'save as html and image'.

When saving as image only, the image is saved as a .gif instead of a .jpg no matter what I do. In the 'save-as' drop down menu .jpg simply does not show up. So effectively, whatever I chose in the first menu seems apparently overidden. Can anyone explain what I'm doing wrong here? Also, what is the best image quality to chose for my designs, based on the fact that they will appear on the web (parts of a website template.)

Could I save some slices of my image as .jpg and some as .gif? Not that I want to, but it would be good to know. If so, how do I do this?

2. Once image slices are saved as .jpg or .gif it appears that they can no longer be manipulated or altered in any way using Photoshop CS2.
Is this correct? If so, is there a save option that allows me to continue working on, or adding to, each individual slice once it's separated from the original image?

3. When slicing an image in Photoshop it's possible to view a numerical display of the exact x-y position of the mouse cursor in pixels, so as to allow for accurate division of the image. However, I couldn't seem to identify any similarly exact ways of positioning elements within a given area when in the earlier stages of design. O.K, so I realise that there is the ruler option, but this didn't seem very accurate as the divisions are not very fine. Perhaps I missed the way to do this properly. Can anyone explain?

Hope someone can shed some light on any/all of these issues.

[Ryan Fait]

I prefer using the marquee tool and just copying and pasting into a new file to save all my images. I find it takes less time. As for the x-y coordinates, pressing ctrl-r (I think... It's cmd-r on my Mac) will show rulers around the image. It's quite handy.

[howey1702]

Thanks for the information. Much appreciated.

There was one other thing that I mentioned in my post. The issue of continuing work on saved slices. I wonder if anyone can assist.

Here is what I have been trying to do.

I created a colour background and placed upon it a new layer. Next, I created a large rounded rectangle, used the warp tool to create a curved upper edge and filled the layer with a dark blue. Next, I created a outer glow around the filled rectangle. I then proceeded to duplicate that layer, filled it with white and removed the outer glow. Placing the white rectangle over the top of the blue one gives a very nice blue glowing outline to my white shape.

I would like to slice the image into several sections, some of which are required to remain white, some are required to be tinted in grey, and some a light-to-dark grey gradient effect. Certain areas are also required to have some various edge effects.
I realise that a fair bit of experimentation will be required before I reach the desired effect, especially for someone as new to photoshop such as myself.

Here is where I come unstuck.

When creating the grey areas on the white layer, their position needs to be very precise, so that once the image is sliced (each piece to the appropriate dimensions, say 192px x 70px) the grey will remain within that section and not overlap into the next area which may need to remain totally white.

I considered that it may be more accurate to do this once the image is sliced. I could then work on each slice seperately, whilst leaving neighbouring slices unaffected. However, once each individual slice is saved as a jpg or gif, the images become unworkable.

Is there a way that I can save slices so that they remain workable? If not, how would I precisely draw and position coloured areas on a large shape, so that they will be precisely positioned for when the image is finally sliced? If I have to do all this before slicing, should I use a new layer for each individual area effect? Is there a truly accurate way of positioning effects?

Perhaps this is something ridiculously easy, that as a beginner I am completely overlooking. If so, my apologies. Any advice gratefully received.

Oh, and by the way. What are the advantages of slicing/working on an image in 'ImageReady' as opposed to Photoshop?

[moojoo]

Doing slicing etc in Imageready, Fireworks etc is bad news. You should cut the "slices" by hand and piece them together with CSS. But that is my crazy method. Its easier to manage imo as each "slice" is its own graphic with the correct dimensions and can easily be modified just by editing your CSS file/graphic. Not to mention the code pumped out by those apps is just awful and bleh.

[howey1702]

Hi there,

As a beginner, how do I cut the slices by hand, as opposed to using ImageReady? I know it must be easy, but as a beginner there are so many tools available in each of these programs that it all gets a bit crazy. This can get really frustrating when you just want to get on and design an idea that you have in your head. I know that it's best to learn the ins and outs of every program first, but honestly, I just think that if I had to learn everything there is to know about Photoshop or Dreamweaver alone, I'd be about 90 before I actually got anything else done!

You mention Fireworks as being a better way of editing slices. Does this mean that I can save a slice in a format that will allow me to continue editing it once it's been seperated from my original Photoshop creation?

[moojoo]

Easiest way would be to save a flattened version of your comp, set your guides and use the marquee to select, copy, paste into a new file each "slice" then you just insert them with CSS to piece it back together.

[mschroeder]

I would have to agree. By placing each graphic into a separate psd file you will be able to make quick changes if needed and re-save the graphic as needed. if you have your entire layout already created in one file you can pick the marque tool and then select the options to the right of it that allow you to enter the exact fixed width and height. then when you click the marque onto the image it will copy that exact width and height without you having to set guides or drag out what you think is close it will be exact dimensions as you wanted. Hope i made sense in describing that. you want to select from the drop down menu that says style and change it from normal to fixed size. Maybe you already knew this but just in case you didn't. Hope it helps. (note it will only select the content from the layer selected)

[moojoo]

Alternately save a layered comp file with each "slice" on its own layer for easy selection/modification. Really starting at the comp your page should be constructed correctly. i.e. when I do it in Fireworks say, my layered png files are designed/cut that way, while maintaining the complete comp.

[howey1702]

Once again, thankyou for the feedback. I am going to experiment over the next couple of days, using all the information you have supplied. Hopefully some of the things that I was previously finding hard to conquer will now become easier. Will come back to you shortly and update on my progress.