[Theme idea] Photoshop gurus - refraction?

[evilc]

I have had a bit of an idea for skins, but lack the knowledge to acheive it.

The train of thought goes like this:

Given something like rlToday that lets you put per-pixel Alpha PNG buttons on your desktop (Today screen), there is a rise in popularity of "Glass" buttons.

However, I would like to take this one step further.
If the buttons were really glass, they would refract (bend the light) the background - per-pixel alpha cannot mimic this.

So what if you were to Pre-Refract (I am coining the phrase "Prefract") the backgrounds where you knew the buttons were going to be? OK so you could just prefract the background into the button, but that would limit you to only using that button in that place and also mean if the user switched button icon to one that wasn't prefracted, then the effect would be lost - hence the idea of a prefracted background.

So does anyone know how to create a realistic refraction effect (and good glass effect buttons to complete the illusion) in photoshop / GIMP?

I am currently coding an open source rlToday-like app myself, and would like to include a theme of this kind with the prog, so if you are an artist and would like to contribute, let me know!!

[DaVince]

You can just cut the area of the background where the button is going to be placed and make a layer out of it then play around with the Filter options of PS. The Filter Gallery of CS2/3 will be an easy way to preview the result you want.

You won't need to make it transparent anymore, except the edges of course.

[DaVince]

I suppose this is the kind of effect you're talking about? Much like how Vista does with Aero.

Clear:
http://img32.picoodle.com/img/img32/4/5/4/f_Clearm_4bf8733.jpg
Glassed:
http://img30.picoodle.com/img/img30/4/5/4/f_Glassm_48ab166.jpg

It's basically just blurring the picture I think.

[jchrist]

Thats a great idea. I've been looking for round buttons for a while now. I wanted like a marble effect, where the colors inside the marble were, to use your new term, prefracted colors of the background in use. Then the icon in the marble was the application. Another cool option would be that when you select the button, the marble would spin, icon staying put, and then launch. I know thats asking alot, but it would be cool.

[evilc]

I suppose this is the kind of effect you're talking about? Much like how Vista does with Aero.

Clear:
http://img32.picoodle.com/img/img32/4/5/4/f_Clearm_4bf8733.jpg
Glassed:
http://img30.picoodle.com/img/img30/4/5/4/f_Glassm_48ab166.jpg

It's basically just blurring the picture I think.

Blurring is one method to do it, and like refraction would not be possible using per-pixel transparency (as there is "bleed" from one pixel to the next) but it's not exactly the effect I am looking for.

This is the effect I want:
http://www.unleash.com/jeffh/glassbutton/fisheye.jpg

Another idea I had would be to make it a function of a today screen app such as rltoday or ultimatelaunch - it would be entirely possible, given a greyscale image with each pixel representing depth of the glass, to generate a refraction or blur effect and modify the background before rendering the transparent button.

I found a plugin for GIMP to do refraction given a grayscale image to represent the lens here (http://www.unleash.com/jeffh/glassbutton/fisheye.jpg)

I have been working on a Today Screen widgets app (ie similar to rltoday) and am in communication with someone developing another one, I will definately look into whether this can be made a function of one of those apps.

Obviously processing speed of the PPC would be an issue, but I guess that could be solved by pre-calculating the effects of using a given lens image. In other words, for a given lens image (the greyscale height map image of the "lens"), write a file that tells you what to do with each pixel of a same size image that is below the lens.

[evilc]

Dammit, the GIMP refract plugin is linux only I think.
Looking into it, it should be possible using photoshop's displace filter, but that's a bit of a tricky beast to master.
I also found http://www.texture-editor.com/ - that may do it.

[N3xt2N0N3]

make the glass button on one layer and background u want refracting on another layer use the liquify filter to pull off the illusion.

[littld]

Looking at the example shown, the majority of the image is slightly larger. The refraction is only at the edges of the buttons. I'd suggest faking it with a pixel-by-pixel routine on the enlarged image. The tricky part will be the edges but it on;y needs to be good enough to fool the naked eye.

Good luck.

[rhov23]

You can use the distort>lenscorrection filter in Photoshop. Mask and use separate layers.

[S.V.I]

You can use the distort>lenscorrection filter in Photoshop. Mask and use separate layers.

better to use pinch.
Liquifi would be a better way to do it if your buttons are not round. "Spherize" would work extremely well if your buttons ARE round.

[evilc]

Thinking about it, there is possibly a slight flaw in the idea of prefracting the backgrounds.
If you switch orientation, you would need to prefract different areas.

Possible solutions I see:
* Background Switch on orientation change to a different prefracted bg.
* Prefract the bits behind buttons as seperate images and overlay them over the bg but under the buttons - could waste too much CPU, but at least the extra blit is not an alpha blit.
* Do it programmatically

[DuChene]

Blurring is one method to do it, and like refraction would not be possible using per-pixel transparency (as there is "bleed" from one pixel to the next) but it's not exactly the effect I am looking for.

This is the effect I want:
http://www.unleash.com/jeffh/glassbutton/fisheye.jpg

Another idea I had would be to make it a function of a today screen app such as rltoday or ultimatelaunch - it would be entirely possible, given a greyscale image with each pixel representing depth of the glass, to generate a refraction or blur effect and modify the background before rendering the transparent button.

I found a plugin for GIMP to do refraction given a grayscale image to represent the lens here (http://www.unleash.com/jeffh/glassbutton/fisheye.jpg)

I have been working on a Today Screen widgets app (ie similar to rltoday) and am in communication with someone developing another one, I will definately look into whether this can be made a function of one of those apps.

Obviously processing speed of the PPC would be an issue, but I guess that could be solved by pre-calculating the effects of using a given lens image. In other words, for a given lens image (the greyscale height map image of the "lens"), write a file that tells you what to do with each pixel of a same size image that is below the lens.



Search in RapidShere about Alien Skin or Kais Power Tools "KPT" (the old of Metacreations) or Kais Power Goo, free plug in I can see my Photoshop plugins library (much more than 2000).
This lens of Corel Draw I never see in Photoshop or any Adobe program.

[twolf]

I really loved RLToday and was sad the author never continued development and add more stuff so it would grow along the years, but I do understand that ppl have their own lives and need to get out of a project after some time, as it gets boring, at least I know I do...

I really dont understand why the new Titanium plugin is so complicated to create, when compared to RLToday... :(

Anyway, this is my idea for a simple "glass effect for the icons" or reflection, it would grab the user's icon and duplicate it right below it, minus 5%.
Then it would rotate the image 180º and flatten it a little.
Finally it would grab a pre-made PNG with a gradient and use it as a mask (like M2D does).

So the result would be like this:
http://img13.imageshack.us/img13/7654/iconglow.jpg

all this would be automatic, as the user chosed this "filter" to apply to all icons.