Friday, November 13, 2009

Creating 1 pixel transparent png image with outer glow shadow in CS4

I came across this weird problem in Adobe Photoshop CS4 today(I upgraded to CS4 just 1 month back) where I needed to convert a 450px width rounded box with outer glow shadow for a Sign Up box I am creating for our product. I didn't want to use any Java Script rounded corners for this quick beta release so it was as simple as have 3 images, one a top, a bottom with backgrounds and the middle one have a running repeat-y and thus serve my purpose. I needed a PNG because I had this beautiful graphic below these rounded box divs.
This is how it looked like:

So here I was quickly created top and bottom images, insert them quickly in my css and again back to CS4 to create this last image with 1 px height. Here is when I got this shocker to my disbelief that I am not able to create a image for my background to repeat @ 1px and if I do it any bigger than that there are breaks in HTML when I use repeat-y. I kept on scratching my head hurling abuses @ CS4 until it struck me that may be because of the filters I have applied to this layer the layer loses it's style when reduced to one pixel. So I remembered of this new feature called SMART OBJECTS in CS4 while going through it's demo and put on my detective hat to look into CS4's help content and was amazed. ADOBE has done it again for us designers in some way or the other.

Select the layer in the layer pane and right click on it to Convert To Smart Object or on the top menu use Layer > Smart Objects > Convert to Smart Object.
Now you can transform it (moving, scaling, warping, skewing, and so on) and it will maintain all of its original quality and resolution, even if you scale it down to 10 pixels tall and back up to 1000 pixels tall. The key is that a Smart Object contains the complete object information, and doesn’t actually rasterize it to a specific resolution until you output or flatten the Photoshop document.

As a wise man has said:
"Somewhere, some thing incredible is waiting to be known".
Dr. Carl Sagan (American AstronomerWriter and Scientist1934-1996)

No comments:

Post a Comment