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?

[AtlanaAnna]

It's still not working for me. I've looked at your History steps and I don't really understand why your first step is 'New'. New what? If it were a layer, wouldn't it say, 'Layer'? Then it says, 'Paste'. What are you pasting? From there, I understand Eliptical Marquee and Feather but I don't quite know where you got 'Clear'. Why not 'Cut'? I don't see a 'Clear' command anywhere. I don't know what I'm doing wrong. After you talked about being sure to save it as a .gif, I also thought that might be my problem but it's still not producing the results I want. I either get a picture like the one attached to the post just before this one or I get a Vignette with a white background. I'm wondering if all the instructions are beginning to be a bit muddy in my thinking. Right now, I'm ready to resort to cropping and pasting the post that has the results I want.

[Flora]

Hi AtlanaAnna,

Like for nearly everything else in PS, there are different ways to achieve what you are aiming for .... One is to save your image in such a way that it preserves transparency (not all formats allow it ... .JPG, for one, doesn't ... you could get informations about this topic by searching for 'transparency' in the Photoshop help - just press F1 after you opened PS.. below, a small list of what I found on it):

• JPEG for continuous tone images, such as photographs. JPEG compression preserves a broad range of color and subtle variations in brightness, but does not support transparency.
• GIF for animations, solid-color images, and images with repetitive color, such as line art and logos. GIF supports transparency.
• PNG-8 for solid-color images with sharp detail. Note that many older browsers do not support the PNG format.
• PNG-24 for continuous tone images, such as photographs. PNG-24 preserves transparency, a broad range of color, and subtle variations in brightness. Note that many older browsers do not support the PNG format.

The other way I know is to place your corrected/manipulated/fixed image on the same background (be it plain coloured or patterned) of the web-page it is intended for..
In this case you'll have to go through the procedure of changing the background of your image whenever you decide to change the background of your web-page, but you can save your image in .JPG format making sure that everybody will be able to see it the way you want it.

Here is how I did it:

Using your posted image ScreenCapUg, first, I created a pattern sampling from the background of your web-page:

• made a rectangular selection with the Marquee Tool (feather=0 pixels) from your web-page background (Attachment 1).
  
  
• with the selection active (marching ants), I went for Filter>Pattern Maker. In the top right of the dialog window that opened, first I changed the Width and Height values from 128 to 256 then I clicked on 'Generate' (Attachment 2).
  
  
• The whole image in the 'Pattern Maker' window changed to show you how it would look like were I to click OK at that point, but this is not what I wanted ... so, in the bottom right of the window I just clicked on the 'Save Preset Pattern' icon and OK when proposed a name for the new Pattern I'd just created. (Attachment 3).
  
  
• Now, up again to the top right, clicked on 'Cancel' to close the 'Pattern Maker' window.
  
  
• Back to my PS working space, I closed the ScreenCapUg image.

....Continued in my next post as I have more than 5 Attachments ...

[Flora]

....

I then opened your Bust_of_Daddy picture

• Change the Mode to RGB.
  
  
• Duplicated the background Layer and created a new blank Layer (Layer 1) between Background and Duplicate (Attachment 1).
  
  
• Working on Layer 1 I went to Edit>Fill and in the 'Contents' I chose Pattern>Custom Pattern and in the cascading menu I clicked on the pattern I just created .... usually the last one in the list. (Attachment 2)
  
  
• Now, I activated my top Layer (Background Copy), made the oval/elliptical selection, feathered it and clicked on the 'Add Layer Mask' icon at the bottom of my Layers' Palette. (Attachment 3).
  
  
• Attachment 4 shows how it looked like after the Layer Mask was added and, happy with the result, I flattened the image and saved as .JPG
  
  
• Attachment 5 shows how this will look on your web-page side by side with your result.

As I said before, you'll have to go through the whole procedure again should you desire to change the background of your web-page ... but only this way you can be sure that you can blend perfectly any image with its web-background just the way you want everybody to see it ... without having to worry about transparencies and how they will show (if at all..) on different browsers!

I know it sounds very complex, but you'll see that following step-by-step you'll have fun doing it and I assure you that it was much faster doing it than not writing how I did it ...

Hope this helps .... but just 'yell' if you have more questions ...

[AtlanaAnna]

Thank you, teacher! Here is my bust.........

[Leah]

I don't know how you did that, but what you need to do is:

1. Open your image (the rectangular one without any bits deleted) in PS. If you have multiple layers, flatten them now. (Screenshot 1)

2. On the Background layer in the Layers palette, to the right you will see a little padlock. Double-click on the padlock.

3. A "New Layer" dialog box should pop up. Accept its default settings and click on OK. Your Background layer should now be called "Layer 0" and the padlock should be gone. (Screenshot 2)

4. Use the Elliptical Marquee tool to select the oval you want. (Screenshot 3)

5. Do Select -> Feather and type in a value (e.g. 20 pixels).

6. Do Select -> Inverse. (Screenshot 4)

7. Hit Delete.

8. You should now have the central part of the oval there at full opacity, laid over a transparent (checkerboard) background. (Screenshot 5)

... continued in next post

[Leah]

Darn, Flora beat me to it while I was doing my screenshots. But I shall continue anyway as this is a slightly different way to do it.

9. Do File -> Save for Web. Under settings, select GIF, whichever one of Perceptual, Selective or Adaptive looks best, check the Transparency box, whichever one of Diffusion, Pattern or Noise Transparency Dither looks best, and set the Colors to 64 (probably -- your image might do better with more or fewer colors). Then click on Save. (Screenshot 6 plus detail)

10. Final attached image shows transparent GIF produced in this way as it appears on top of a background pattern.

[Leah]

P.S. Flora's method is great but you won't be able to get the background pattern in the image to line up with the background pattern in your web page for all browsers, because they place the image in slightly different ways just to make your life difficult. It's up to you whether or not that bothers you.

P.P.S. Even Easier Method: change the background on your web page to be a singloe solid color

[AtlanaAnna]

Thank you so much for your input, Leah!

[Flora]

Originally Posted by AtlanaAnna

Thank you, teacher! Here is my bust.........

You are welcome! Your 'bust' looks great!!

Leah,

Originally Posted by Leah

P.S. Flora's method is great but you won't be able to get the background pattern in the image to line up with the background pattern in your web page for all browsers, because they place the image in slightly different ways just to make your life difficult. It's up to you whether or not that bothers you.

True, particularly if the background pattern is very geometric or with a very regular pattern ... In this case I tried it with both, Netscape and IE6 ... and it looked just fine... The .GIF transparency way will never give you a smooth 'vignette' transition as all options: Diffusion, Pattern or Noise Transparency result in a 'dotty' transition .... The only format which on Netscape looked 'perfect' is PNG-24, but its transparency was ignored by IE6