Topic:   Web 2.0 Reflection Tutorial   (Read 5370 times)


0 Members and 1 Guest are viewing this topic.

Silverwind


  • ^ This guy is amazing.

  • ****


  • Posts: 2805

  • For the glory of my maker
Web 2.0 Reflection Tutorial
« on: October 15, 2009, 10:05:02 AM »
After designing those iPhone icons earlier I feel in the mood for graphic sharing, so I thought I'd post a tutorial on something or other. Seeing as how Web 2.0 is all the rage these days I figured I'd do the reflection effect.

http://screencast.com/t/7IK5vKb627e

Enjoy!

EDIT:

Here's the better way of doing it. Thanks Redd. :)

http://screencast.com/t/C2kG50M9k
« Last Edit: October 15, 2009, 12:44:22 PM by Silverwind »
I survived the spammage of 2007

Redd


  • GMG-er

  • **


  • Posts: 118

  • Silent, but very, very deadly.
Re: Web 2.0 Reflection Tutorial
« Reply #1 on: October 15, 2009, 10:16:13 AM »
You can also use the layer mask for fading out instead of making a new one between the original and the reflection :P

Good tutorial otherwise! :D

Silverwind


  • ^ This guy is amazing.

  • ****


  • Posts: 2805

  • For the glory of my maker
Re: Web 2.0 Reflection Tutorial
« Reply #2 on: October 15, 2009, 10:38:10 AM »
Yeah, I do that myself but I thought I'd keep the tutorial as simple as possible. :)
I survived the spammage of 2007

Mystor


  • GMG-er

  • **


  • Posts: 696

  • I am the myst that consumes us all.
Re: Web 2.0 Reflection Tutorial
« Reply #3 on: October 15, 2009, 05:14:51 PM »
Yea, Layer Masks are quite efficient in terms of how to do it.

I personally think that a "matte" look is quite cool atm, but that may just be me. (If you're wondering what I mean by matte, it means "not shiny", so few colors, and no glow, or shiny effects.)
Well, at least that is the design style that works for me, I tried to make redrasor.com based on those principles, however, the logo is kinda shiny :P

I don't have much graphicks excellence, but another way (If you wanted to have it wrapped around the text but no transparency... for some strange reason) is to do what you did in your first tutorial, but then right click on the IMAGE of the reflected layer and choose "select pixels", then go to the select layer, press inverse, and then select the layer with the gradient. press delete, and it is all gone :D
now, if you change the background, it is still a gradient to white, but you can see that the gradient is not overflowing out of the letters.
This is useful for other stuff as well.

I guess this would be a whole lot easier to explain with a movie... oh well...
If you see an effect on redrasor.com or agenosworld.com that you want to know more about, just let me know.
Oh, and if you like the style of webpage that I am using on both of those sites, its really easy to make, so just let me know.

Mist
PS. Someone else who calls it web two point oh! sweet!, I have heard so many people call it web two, and web two-oh, and web twenty (I know, weird).
PPS. I love your accent, I had forgoten how awesome irish people sound :D
"I'll lie to him."
"And if that doesn't work?"
"Then I'll tell the truth. We're allowed to do that, in emergencies. We can't plan for everything, you know."
   -Colonel Graff, Ender&

Silverwind


  • ^ This guy is amazing.

  • ****


  • Posts: 2805

  • For the glory of my maker
Re: Web 2.0 Reflection Tutorial
« Reply #4 on: October 15, 2009, 05:26:30 PM »
Quote
I personally think that a "matte" look is quite cool atm, but that may just be me.
Yeah, with low range gradients on background surfaces I think matte text looks very nice.

Quote
I guess this would be a whole lot easier to explain with a movie... oh well...
Cool! Can't wait to see it.

Quote
PPS. I love your accent, I had forgoten how awesome irish people sound :D
You should check out Astro-Naughts: http://www.mediafire.com/?zjhhezjdo1t

I did some funny voices for the intro.
I survived the spammage of 2007

Mystor


  • GMG-er

  • **


  • Posts: 696

  • I am the myst that consumes us all.
Re: Web 2.0 Reflection Tutorial
« Reply #5 on: October 15, 2009, 08:02:20 PM »
Quote
Yeah, with low range gradients on background surfaces I think matte text looks very nice.

Cool! Can't wait to see it.

You should check out Astro-Naughts: http://www.mediafire.com/?zjhhezjdo1t

I did some funny voices for the intro.
Yea, I don't know if I am going to make the movie :P
I already typed out the entire discription, and yea.
Also there is a whole lot of noise in the background atm...
DLing Astro-Naughts.
And yes, btw, can you look at agenosworld.com?

thanks,
Mist

EDIT: Damn, I have to start up my mac...
« Last Edit: October 15, 2009, 08:03:14 PM by mistron »
"I'll lie to him."
"And if that doesn't work?"
"Then I'll tell the truth. We're allowed to do that, in emergencies. We can't plan for everything, you know."
   -Colonel Graff, Ender&

Gnome


  • GMG Extraordinaire

  • ***


  • Posts: 1073
Re: Web 2.0 Reflection Tutorial
« Reply #6 on: October 15, 2009, 08:04:15 PM »
Quote
Yea, Layer Masks are quite efficient in terms of how to do it.

I personally think that a "matte" look is quite cool atm, but that may just be me. (If you're wondering what I mean by matte, it means "not shiny", so few colors, and no glow, or shiny effects.)
Well, at least that is the design style that works for me, I tried to make redrasor.com based on those principles, however, the logo is kinda shiny :P

I don't have much graphicks excellence, but another way (If you wanted to have it wrapped around the text but no transparency... for some strange reason) is to do what you did in your first tutorial, but then right click on the IMAGE of the reflected layer and choose "select pixels", then go to the select layer, press inverse, and then select the layer with the gradient. press delete, and it is all gone :D
now, if you change the background, it is still a gradient to white, but you can see that the gradient is not overflowing out of the letters.
This is useful for other stuff as well.

I guess this would be a whole lot easier to explain with a movie... oh well...
If you see an effect on redrasor.com or agenosworld.com that you want to know more about, just let me know.
Oh, and if you like the style of webpage that I am using on both of those sites, its really easy to make, so just let me know.

Mist
PS. Someone else who calls it web two point oh! sweet!, I have heard so many people call it web two, and web two-oh, and web twenty (I know, weird).
PPS. I love your accent, I had forgoten how awesome irish people sound :D


Yes....layer masks.....of course....
This Cannot be, NOOOOOOOO!!!!

-Gnomes Cry when the McRib was discontinued again.

Mystor


  • GMG-er

  • **


  • Posts: 696

  • I am the myst that consumes us all.
Re: Web 2.0 Reflection Tutorial
« Reply #7 on: October 15, 2009, 08:09:08 PM »
Quote


Yes....layer masks.....of course....
Is that scarcastic?
I am having mental disibilitationalities.

Mist

EDIT: Just played the game, really simple and really interesting music style :P
You sound halarious :P
« Last Edit: October 15, 2009, 08:15:01 PM by mistron »
"I'll lie to him."
"And if that doesn't work?"
"Then I'll tell the truth. We're allowed to do that, in emergencies. We can't plan for everything, you know."
   -Colonel Graff, Ender&

Gnome


  • GMG Extraordinaire

  • ***


  • Posts: 1073
Re: Web 2.0 Reflection Tutorial
« Reply #8 on: October 15, 2009, 08:17:56 PM »
Quote
Is that scarcastic?
I am having mental disibilitationalities.

Mist


 
On no, I just don't even know what web 2.0 is ;D
« Last Edit: October 15, 2009, 08:18:04 PM by Gnome_Again »
This Cannot be, NOOOOOOOO!!!!

-Gnomes Cry when the McRib was discontinued again.

Mystor


  • GMG-er

  • **


  • Posts: 696

  • I am the myst that consumes us all.
Re: Web 2.0 Reflection Tutorial
« Reply #9 on: October 15, 2009, 08:20:58 PM »
Quote
On no, I just don't even know what web 2.0 is ;D
Hmm...

[size=24]WARNING! WARNING!
NON GEEK ALERT
NON GEEK ALERT
WARNING! WARNING!
[/size]

Mist

EDIT: Err... Wait, is it Geek or Nerd...
« Last Edit: October 15, 2009, 08:21:34 PM by mistron »
"I'll lie to him."
"And if that doesn't work?"
"Then I'll tell the truth. We're allowed to do that, in emergencies. We can't plan for everything, you know."
   -Colonel Graff, Ender&

Tireas Dragon


  • GMG Extraordinaire

  • ***


  • Posts: 1626

  • Trying to recover from my shattered screen.
Re: Web 2.0 Reflection Tutorial
« Reply #10 on: October 15, 2009, 08:25:56 PM »
I like it. I don't know why its called Web 2.0 though maybe it is because some websites use the effect. I might even use it, after all, it is pretty neat.
I must be dreaming (wake up me wake up) How could this have happened. Tireas' cry when he found his computer fallen over in his chair with it's screen shattered.

Mystor


  • GMG-er

  • **


  • Posts: 696

  • I am the myst that consumes us all.
Re: Web 2.0 Reflection Tutorial
« Reply #11 on: October 15, 2009, 08:28:57 PM »
Quote
I like it. I don't know why its called Web 2.0 though maybe it is because some websites use the effect. I might even use it, after all, it is pretty neat.
Its called Web 2.0 style graphics because websites use it.
Web 2.0 is actually the evolution of websites to become more interactive with the user, such as facebook and myspace.
The web 2.0 look is basically the look of cool looking interactive websites.

Mist
"I'll lie to him."
"And if that doesn't work?"
"Then I'll tell the truth. We're allowed to do that, in emergencies. We can't plan for everything, you know."
   -Colonel Graff, Ender&

Tireas Dragon


  • GMG Extraordinaire

  • ***


  • Posts: 1626

  • Trying to recover from my shattered screen.
Re: Web 2.0 Reflection Tutorial
« Reply #12 on: October 15, 2009, 09:27:14 PM »
Well Apparently GM is unable to take the images I make using the reflection effect. If someone can get it to work please tell me how.
EDIT: Never mind I got it to work.
« Last Edit: October 15, 2009, 09:32:36 PM by Tireas_Dragon »
I must be dreaming (wake up me wake up) How could this have happened. Tireas' cry when he found his computer fallen over in his chair with it's screen shattered.

GMG Hendo


  • GMG-er

  • **


  • Posts: 155

  • [WITTY TEXT GOES HERE]
Re: Web 2.0 Reflection Tutorial
« Reply #13 on: October 16, 2009, 08:32:44 AM »
Quote

I personally think that a "matte" look is quite cool atm

Indeed, matte is definitely the new gloss. I have seen some amazing matte iPhone/iPod Touch themes that are matte style. Gloss is on it's way out. Check these beauties out




Silverwind


  • ^ This guy is amazing.

  • ****


  • Posts: 2805

  • For the glory of my maker
Re: Web 2.0 Reflection Tutorial
« Reply #14 on: October 16, 2009, 08:36:17 AM »
Wow, I really like the first set.
I survived the spammage of 2007