Author Topic: Help! Faded Blur Gradient Effect  (Read 2784 times)

asahendrix

  • Full Member
  • ***
  • Posts: 76
    • View Profile
Help! Faded Blur Gradient Effect
« on: December 20, 2019, 02:37:09 PM »
Greetings fellow artists,

    I have been pulling my hair out on photoshop trying to create a single gradient blur layer that I could then use to place over any other image in an attract mode layout.

I need the layer to have a faded opacity as you can see below. I know blurring can be done on AM, I just don't know how or even how to fade it for that matter. Could someone pretty please help me with this? I'd be forever indebted to you!

Here is an example of what I'm looking for. The credit for this image goes to lomax2k at RetroPie

https://retropie.org.uk/forum/topic/1892/my-idea-for-a-theme/2

jedione

  • Hero Member
  • *****
  • Posts: 1135
  • punktoe
    • View Profile
Re: Help! Faded Blur Gradient Effect
« Reply #1 on: December 20, 2019, 05:14:29 PM »
try, using a white.png and adjusting the alpha .....over it...   might give you the desired affect

mabey... :D

also can tweek the rgb...
« Last Edit: December 20, 2019, 05:16:32 PM by jedione »
help a friend....

jedione

  • Hero Member
  • *****
  • Posts: 1135
  • punktoe
    • View Profile
Re: Help! Faded Blur Gradient Effect
« Reply #2 on: December 20, 2019, 05:43:46 PM »
just to through it out..  im always happy to work with friends,  on themes
to help it come together.....  just send a pm if you need...

have a great xmas...   
help a friend....

asahendrix

  • Full Member
  • ***
  • Posts: 76
    • View Profile
Re: Help! Faded Blur Gradient Effect
« Reply #3 on: December 20, 2019, 05:49:16 PM »
try, using a white.png and adjusting the alpha .....over it...   might give you the desired affect

mabey... :D

also can tweek the rgb...

That’s a good idea! I’m further ahead with the gradient effect itself. With photoshop, the gradient effect automatically picks black and white as the two primary colors for the gradient (fade) effect. I want to be able to pick only one primary color and have the secondary color set to 0% opacity.

I can set the primary to white, lower the opacity, and then try and fade it but I will have to pick another color to fade it into.  So I’m still trying to get that fade to 0 opacity layer. One might say “you can just fade it into the picture”, but I need 0 opacity on half the layer because I need to be able to place that layer over game screen shots like the picture above. It is truly a head scratcher.

Thank you for the great ideas!!

zpaolo11x

  • Hero Member
  • *****
  • Posts: 1233
    • View Profile
    • My deviantart page
Re: Help! Faded Blur Gradient Effect
« Reply #4 on: December 21, 2019, 12:27:57 AM »
The effect you want is very similar to what I did on the thumbnails in my Arcadeflow theme (and actually the mockup you are linking was the main inspiration for Arcadeflow :D ). I don't suggest you look into my code because it's a mess :D

What you need to do is use GLSL shaders. You can use gauss blur shaders to generate the blurred background, then you can overlay your snapshot on top and apply to that another GLSL shader that will tweak transparency so that it fades along the Y axis. Doing this require some trick with nested surfaces because GLSL gaussian bulr is a two-pass filter.

I'd love to have the time to prepare a simple mock up but I'm not sure I'll be able to do it.

asahendrix

  • Full Member
  • ***
  • Posts: 76
    • View Profile
Re: Help! Faded Blur Gradient Effect
« Reply #5 on: December 21, 2019, 07:10:45 PM »
just to through it out..  im always happy to work with friends,  on themes
to help it come together.....  just send a pm if you need...

have a great xmas...

You are a true champion, friend. An endless amount of thanks.

asahendrix

  • Full Member
  • ***
  • Posts: 76
    • View Profile
Re: Help! Faded Blur Gradient Effect
« Reply #6 on: December 21, 2019, 07:12:16 PM »
The effect you want is very similar to what I did on the thumbnails in my Arcadeflow theme (and actually the mockup you are linking was the main inspiration for Arcadeflow :D ). I don't suggest you look into my code because it's a mess :D

What you need to do is use GLSL shaders. You can use gauss blur shaders to generate the blurred background, then you can overlay your snapshot on top and apply to that another GLSL shader that will tweak transparency so that it fades along the Y axis. Doing this require some trick with nested surfaces because GLSL gaussian bulr is a two-pass filter.

I'd love to have the time to prepare a simple mock up but I'm not sure I'll be able to do it.

No way! Small world! Haha I don’t know anything about GLSL shaders but I’ll sure look into it - thank you for the help!