New Oval Bust Challenge

[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