Forum Moderators: not2easy

Message Too Old, No Replies

How do you create a transparent box in photoshop

to outline something

         

Clark

4:43 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In photoshop, i'm trying to create a sample image to show users which area of the screen customizing something would show up in. You would think this is simple but all I want is to use the rectangle tool, put it over the area I want to highlight, make the center transparent and just have the borders around the box show up. No clue how to do it.

Also, never understood channels, alpha masks, masks etc... If there's a real good tutorial out there can someone link it for me? Oops. Forgot myself a moment. Can you sticky me the urls?

Thanks.

rocknbil

5:08 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



1. Convert the image to Indexed color in an acceptable color palette. I like to use "Adaptive Color" and work in 8-bit increments: that is, try 8 colors first, if no good, 16, then 32, then 64, 128, or 256. Use the lowest palette possible.
2. Select area you want to be transparent.
3. Select Select->Save Selection from the main menu. This indeed creates an "alpha channel." Name it as you wish, or not.
4. Select File->Export->Gif89a. At the bottom where it says Transparency From, select Alpha 1 or the channel name if you named the channel when saving the selection.
5. Save the file as a .gif.

There are other methods but this is the most straightforward. You can also transparent an image by selecting the colors in the export box, play around with it.

Clark

5:13 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks. Actually what I want is a lot simpler than that. I'm notoriously bad at explaining these things, I don't know why.

I've got a screenshot of my web page. One particular area of the screenshot is customizable by the user. I want to draw a box around that area. So I picked the "Rectangle tool" and made a box in black. Which covered the area I'm trying to highlight. I want the inside of the rectangle to be transparent and only the border to show so that the area I want to highlight is highlighted. The file format of the image does not need to be transparent...

Hopefully that was a better explanation?

cornwall

5:34 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Its not rocket science, but I just make erase the centre of the solid rectangle with the background eraser.

You are left with the outline of a rectangle.

I suspect there is a higher tech way of doing it!

travelin cat

5:34 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Use the rectangle tool to outline the area that you want highlighted and choose "Stroke" from the edit window. I believe this is what you are trying to accomplish

Clark

5:41 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Exactly!

Uh, what edit window? I'm on Photoshop 6.0...

Oh, one more question, is there a way to modify the dimensions once the box is drawn?

cornwall

5:43 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes, Travelin Cat's way is much better. You do learn here!

cornwall

5:45 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Clark,

Create new layer

Along top tool bar, edit is 2nd button, and stroke is on the drop down

Clark

5:53 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks Cornwall. It won't let me. It's greyed out. And everytime I apply the little box, some weird crap shows up in that new layer. Like a thumbnail image on the left and a thumbnail image on the right all within the layer. And a clickable linkie thing in the middle which selecting causes these words to show up in the history:

Link Layer Clipping Path
Unlink Layer Clipping Path

As an article I just googled stated:

Photoshop makes me feel stupid

For an application more ubiquitous than sand in the desert, I find it amazing how useless Photoshop is without additional training or reading material. For years Photoshop has successfully defended the honor of being the only program that makes me feel stupid every time I'm trying to use it.

Clark

6:05 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Got it now, thanks!
There are two rectangle tools. Going along with Photoshop protocol, select the nonintuitive Rectangle Tool (Marquee M) rather than the intuitive one (Rectangle Tool U) and it works!

travelin cat

10:32 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



sorry, I meant edit menu, not window...

Clark

11:01 pm on Sep 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



As long as between the 3 of us we figured it out, that's what counts and I much appreciate your direction :)

Now anyone want to explain masks and channels :)
I don't even have the slightest idea what they even are, despite several attempts to learn such. Is there an online tutorial that's really good, with lots of pictures and well written text?

rocknbil

9:47 am on Sep 9, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you're going to use your image on a web page, it still needs to be exported as a transparent .gif or .png, no matter how you make the area transparent in Photoshop.

jessejump

8:41 pm on Sep 9, 2006 (gmt 0)

10+ Year Member



>>>>> with lots of pictures and well written text?

That sounds like a book to me. Get PS Bible - you can learn PS in a month.

Or you can click around all over the web getting disjointed information

Clark

11:24 pm on Sep 9, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



PS Bible. Danke.