New Oval Bust Challenge

[AtlanaAnna]

I'm wanting to use this oval bust as part of a website and now, I'm trying to make the outer color of the vignette the same as the website background. The background isn't just a color, it's a colored texture so there is no exact color #. I'm posting a picture of the regular vignette and another picture of my attempt to try to match the background color of the webpage and I still don't like the way it looks. I'm wondering if there's a way to somehow tranplant the actual webpage background into the vignette. Thanks.

[Caitlin]

Instead of making a coloured vignette, delete the vignette area (with feathering), to reveal your base transparency. Then save the image as a GIF preserving transparency. This way the background of your site will show through.

[AtlanaAnna]

Deleting by feathering? I created a layer with no color to draw the vignette design and I feathered with the Gaussian Blur. I exited Quick Mask and re-Inversed the selection. When I tried to cut the outside area, I get a message saying, "Cannot complete the Cut command because the selected area is empty."

[deadants]

You are probaly on the wrong layer. Check to make sure you have the correct layer selected before doing the delete.

You can see by my quick example on the right I didn't give myself enough room before I made the vignette, hence the clipped edges. but you get the idea.

[AtlanaAnna]

I still don't get it. I'm attaching a picture of my screen. This is what it looks like when I get the message that no cut can be completed.

[deadants]

What you need to do is select the background Copy Layer and then do your delete.

[deadants]

Don't forget to turn off the the Background Layer, otherwise when you do your delete, it will appear as if nothing has happened.

[Caitlin]

Hi Anna,

As Deadants has said, you are trying to make your selection on the wrong layer - you do not need your 'Layer 1'. I've attached a screenshot showing the history steps of the easiest way to achieve what you want. Make sure the layer has a transparency base. Create your oval selection, inverse, feather, then delete the selection. Save as GIF. The transparency probably won't be apparent in this attachment, as the browser default b/ground is white!

[AtlanaAnna]

Maybe my problem is that I don't know how to make sure it has a transparancy base. How do I make sure of that?

[Racc Iria]

What I think they mean is that you don't want a locked background layer, because it can't contain transparency.

Try this...
1. Do a select all in your orginal image. Highlight the original image layer (probably the background). press the CONTROL and C keys at the same time. (This copies the image to the clipboard).

2. Go to the FILE menu and select NEW. A dialog will open and the dimensions, etc. of the image will already be supplied (matching the image in the clipboard). In the BACKGROUND drop down list, choose TRANSPARENT. Then click OKAY.

3. A new image will be created at the same size as your original image, but there will be no background layer, just a normal layer that's completely transparent. press CONTROL and V at the same time to paste in your photo.

You could also just double click the background layer to turn it into a normal layer that supports transparency, but this way makes sure you're working on a copy of the image in a whole other file. Working with another file is a lot safer than just working on a copy of a layer in the same file. If you go the double click route, make sure you duplicate your original image layer and hide it before you do any work on it.

[AtlanaAnna]

Well, I'm still not getting it. Clear as mud to me............. I am beginning to feel dense. You all seem so comfortable with the Photoshop Interface that you may have forgotten how to relate to someone who knows almost absolutely nothing. I'm trying. I really am. I wish one of you could come sit down at my computer and just do it so I could see it done.

Signed,
Frustrated AtlanaAnna

[Caitlin]

Anna, If you told us exactly what you are doing step by step, and what isn't working it could help us help you more. You also might want to read through the instructions here so far again very closely, as it really is all here - for instance have you looked at the history steps I posted, and looked at your own to see if they look the same? Did you notice that the square at the top called "NEW" was a check pattern - meaning it had a transparent layer? Does yours look the same?

[AtlanaAnna]

Caitlin,

My History steps don't look like yours because I'm starting with the basic image which is called Background. The first part of your History says 'New' showing a transparent layer. The instructions I've learned for making a Vignette it to start with your image which is your Background layer. Then make a copy of that image to get a Background layer copy. At this point is where I would create another layer that isn't filled with any color so it would just have the gray pixels. In the Layer Dialog box that comes up, in the area to select a color, I select None. On this layer is where I would draw my oval shape over the image, Inverse it, go to Quick Mask and feather, then exit Quick Mask and try to cut away everything outside of the oval. My finished picture has only gray checks outside of the oval but when I attempt to put it into my web page, it has a while background outside of the oval.

[Caitlin]

It sounds like you may be going around this a rather complex way - the final extra layer is unnecessary, as is the quick mask step. Additionally you can feather your oval with 'feather' under the select menu (you mentioned Gaussian blur before?)

But if you are ending out with a result that displays the oval image, and transparency check boxes around it it sounds like your result is ok. So it might be the way you are saving it. Use save for web, and ensure that the version you save (GIF or PNG-24) preserves the transparency. There is a check mark in the settings for this. It should be clear by the preview if you have your settings correct, as the checkbox transparency should be maintained.

[AtlanaAnna]

See the attached picture. How in the world did I do this?