PDA

View Full Version : Are Photoshop questions welcome?


Bruce Newman
02-25-2002, 01:30 PM
I'm having trouble creating a gradient in Photoshop. Are technical questions appropriate here?

Bruce

Ron van den Boogaard
02-26-2002, 05:04 AM
It is no different than asking how much glycerine do I mix into my watercolours in that specific section.

Rather than giving you the whole tutorial on gradients: what is it specifically you want to do? And why specifically doesn't it work? That would make it easier on the both of us.

Ron van den Boogaard (http://home.wanadoo.nl/brainbox)

Bruce Newman
02-26-2002, 07:10 AM
I'm using Photoshop 6.0 on a Mac and am familiar with basic uses. I learn quickly when I need to use a new feature, but this one has me stumped and the manual isn't helping much.

I am building a web page and I am trying to make a gradient that ranges from full color to transparent. Then, when I put it on the solid color background, the background would show through the transparent part. It sounds easy enough, but my transparent is opaque each time I try. After two days of this, I'm pulling out hair! :) I've explored both Photoshop and ImageReady.

If someone could just point me in the right direction, I'd appreciate it. I'm sure the solution will be embarrassingly easy.

Thanks,

Bruce

Ron van den Boogaard
02-26-2002, 08:25 AM
Let's see if I understand this correctly; you want a gradient on a webpage that has a background and you want the gradient from full density to transparent. If this is the case: forget it, we can do a lot in html these days, but this not part of it.
The only way to go transparent is to go with a gif. But it is either full transparency or none. So, theoretically you could make a gradient from your colour to white, convert that into a two-colour GIF and have that dither, export the gif and make the white transparent. It will work and it will be ugly, guaranteed.

If I understood the question wrong and you want to do the effect in one single jpg, ask again and I'll explain that one.

Ron van den Boogaard (http://home.wanadoo.nl/brainbox)

Bruce Newman
02-26-2002, 08:52 AM
Thanks for your help, Ron. I'll try to explain this better.

Ideally, I would have a .gif that would range from full intensity color to transparent in an even gradient. Then, I could put this on any color HTML background. This would be best for me because I wouldn't need to create a new image for each background color.

The alternative would be to create a .gif that ranges from full intensity color to the background color, again in an even gradient. I've seen this used often on web pages, but am at a loss how to go about either of these. I'd prefer the transparent solution if it is possible.

Another little question: I can't seem to save a file as a .gif in Photoshop and have to use ImageReady instead. Is this correct or am I missing something. Photoshop gives many "Save As" choices, but not .gif.

Thanks again, Ron.

Bruce

Ron van den Boogaard
02-26-2002, 09:51 AM
Originally posted by grrromit


Ideally, I would have a .gif that would range from full intensity color to transparent in an even gradient. Then, I could put this on any color HTML background. This would be best for me because I wouldn't need to create a new image for each background color.

Not possible, you will have to go with the solution below.

The alternative would be to create a .gif that ranges from full intensity color to the background color, again in an even gradient. I've seen this used often on web pages, but am at a loss how to go about either of these. I'd prefer the transparent solution if it is possible.

In the preferences you set the colour picker to Apple and restart. In the colour you select a colour for both foreground and background. You do this by clicking on it (i do have 5.5 so some things could be a little different) this takes you to the colour picker and you select the html picker, this gives you the nice hexadecimal numbers that you can later use in your webbuilding tool (write them down). Now you select the options window and in this select "foreground to background" and then select your gradient tool from the tool menu. In your picture you pull with the mousebutton down the direction in which you want to have the gradient over the distance you want to have it. Let go of the mouse button, et voila.

Another little question: I can't seem to save a file as a .gif in Photoshop and have to use ImageReady instead. Is this correct or am I missing something. Photoshop gives many "Save As" choices, but not .gif.

First go to image>mode and select indexed colour (gifs can only have 256 colours max.) You might have to play around a little here and see what it does.
GIF would now be in the "save as" menu, but better is it to go to export and select gif89a, from there you can still change some settings, save it and you're done.

Have Fun

Ron

Bruce Newman
02-26-2002, 10:42 AM
Thanks again, Ron. Off to play with Photoshop now! :D

Bruce

Bruce Newman
02-26-2002, 03:22 PM
Well, I had some success. The key was to make the foreground and background colors the same. After that, it was easy to add a colored rectangle and produce a gradient. The gradient looked fine, too. Just what I wanted. The problem I had next was in saving it.

I still couldn't find a way to "save as" a .gif in Photoshop, even after following your directions. Also, I tried "export" and the "import" was available and the "export" was grayed out for some reason. Next, I just shifted over to ImageReady and "saved optimized as" a .gif file. Everything went fine.

I then went to my HTML editor and inserted the image but when I viewed the page in my browser, the image of the gradient was REALLY chunky, not smooth.

Have you any guesses about what I did wrong? I went back several times and did it again, this time looking for options. No difference though.

Bruce

Bruce Newman
02-26-2002, 03:45 PM
Ron, I played with various dithering options and that helped a lot. I still have bands though. They aren't terrible, but I wish it was a smoother gradient.

Bruce

cwnyc
02-26-2002, 04:42 PM
You will almost always get banding in a gif- gif's are limited to 256 colors no matter what - 216 in a web safe pallette. Dithering can help, but again, yer still limited.
Furthermore, gifs dont do opacity, or 'partial transparency'.
It's either a solid color or completely transparent. Also an unfortunate shortcoming.

You're hitting a wall that every web designer discovers eventually. Now you get to experiment and find your own ways around it :D
Consider your colors carefully, as you can match html code colors to your photoshop pallettes and vice versa. Blending from random color to carefully chosen HTML Web color is an option.
Consider mixing jpgs into your pages for things like gradients as well, as they are not limited to 256 colors.

You'll start to find a middle ground in the way you create your images and html as you go along. Just keep experimenting :)

Bruce Newman
02-26-2002, 05:16 PM
Good stuff! I've done some samples and stayed with web safe colors and they don't look too bad. Thanks, cwnyc.

Bruce

Ron van den Boogaard
02-26-2002, 05:17 PM
Remember I said, it was gonna look ugly. Well you just figured that one out. JCNYC just pointed out the tech details of this.
As far as the saving goes, there might be the discrepancy between version 5.5 and 6.0. Sounds like it.

So you have to go jpeg's now: make all the flat backgrounds on different layers in html colours. Make a new layer. Select from your gradient options "foreground to transparent" make the gradient. save the file as PSD file.
Click the 'eyes' on or off for the background colour you wish to have.
Do a "save a copy" as .jpg for each background colour and you have the whole set in 10 minutes. You can always add a new bk colour to the psd file and go back and forth.

Ron (http://home.wanadoo.nl/brainbox)
something completely different (http://www.wheelsoffortune.nl)

Bruce Newman
02-26-2002, 09:24 PM
When I saved the .gif, it looked pretty good. When I displayed it in my browser though, it looked REALLY ugly!!! But then I plasyed with dithering (a term I had heard many times, but didn't understand). That made quite a difference and the .gifs are now passable. I'll still try .jpgs, if only as a comparison.

Thanks you both for your help with this. Much appreciated!

Bruce