Hi Merlin,

Would it be possible for you to provide or track down the original source files (Photoshop documents for example) for the rounded corner PNG's?

ie. corner-bits.png, shadow-b.png, shadow-l.png, shadow-r.png, shadow-t.png.

As I imagine you're aware, the transparency is not set correctly on them. While I know I could do my best to adapt them via Photoshop or try to recreate them altogether, I have the feeling both approaches would be faulty and cause the loss some of what makes this style look so great.

If the original layered PSD could be made available, designers could modify these to suit their color scheme with no visual errors on non-white backgrounds.

Thanks.

Comments

merlinofchaos’s picture

Status: Active » Closed (won't fix)

Alas, I didn't build them, and the person who did build them hasn't been around for several years. I'm afraid there is no original.

uomeds’s picture

Status: Closed (won't fix) » Needs review
StatusFileSize
new20.42 KB
new135.23 KB

Thanks for the reply Merlin.

With that in mind, I have gone ahead and done my best to re-produce vector, layered versions of the original corners. I originally attempted to produce fully transparent png's, but found the panels rounded-corner css would have needed significant revisions to make this method work. Additionally, I think some browsers have trouble properly rendering transparencies like the one needed here for the subtle soft effect.

Method:
I did my re-creation in Macromedia (now Adobe) Fireworks 8.

The straight line segments were produced using a 1 pixel, #DFDFDF 'soft line' stroke. The rounded corners use a 1 pixel, #D4D4D4 'soft rounded' stroke and #FFFFFF fill. A drop shadow effect was added to all images to emulate the softened effect with 0 displacement, 15% opacity, and 3 blur.

In retrospect, perhaps a 12-14% opacity on the shadow might have provided a bit smoother transition, but anyone can play with that on their own to suit their personal tastes.

I used Fireworks, not Photoshop, as it is a far better vector design program and allowed more control over how the elements were rendered. Note that although Fireworks uses a seemingly standard PNG file format, it stores layered formatting within that PNG only accessible if opened in Fireworks. Opening the attached zipped PNG's in Photoshop, for example, will provide only a flat image.

Usage:
Each attached Fireworks PNG image has a background layer with a simple solid filled rectangle. Change the color of this item to that of your site background. Click file > export to save it.

For those that wish to use a different panel background color than white (not just a different body background), open the 'corner-bits (fireworks).png' in Fireworks and change the circular path fill to the color desired.

Once you have exported all 5 images with their appropriate names, upload them to:

/sites/all/modules/panels/plugins/styles/corners/

That's it. Hope this helps some of those out there also struggling with the rounded corner theme on non-white backgrounds.

ps. If viewing the attached new-rounded-corners-demo.png, keep in mind the left navigation menu corners are separate and provided by my Acquia theme. I still have to touch those up. But the user profile panels to the right are using the new ones set to match the body background. I'm not sure it's a "perfect" reproduction of the originals, but I think it's close enough. Additionally, as above, I think a slightly lower opacity on the shadow effect might improve it further.

fehin’s picture

This is a good tutorial. It should probably be in the handbook since many people are looking for solution for this.

I fixed mine by selecting the outer part of the cycle with magic wand (also in fireworks) and filled it with the color of my site's background color.

merlinofchaos’s picture

Hm. Does IE7 support proper transparencies? Because IE6 is dead enough that I think we can stop supporting it. So properly transparent pngs would probably be acceptable now.

sunshinee’s picture

Yes, IE7 does support transparent PNG images.

squiggy’s picture

subscribing

merlinofchaos’s picture

Status: Needs review » Closed (won't fix)

At this point, I think the answer is to create a base style for rounded corners that can properly use the colorization.

amir simantov’s picture

Hi,

I would like to have support for RTL languages, that is, to either:
1. have a flip horizontal option; or, better yet -
2. Have images suffixed with "rtl" which should be uploaded for the right locale.

Could I do it in some way already?

Thanks!

merlinofchaos’s picture

This issue has nothing to do with RTL. Please do not take over issues with support questions.

amir simantov’s picture

Sorry merlin, this was not the intention, but rather to avoid duplications. I understand now that it is another issue, so I have opened a new one for it: #870762: RTL Support fot image files of rounded corner

Thanks!

crutch’s picture

StatusFileSize
new1.65 KB

#eee background