Page 1 of 1

Need tutorial

Posted: Fri Jun 23, 2006 10:59 pm
by alex.barylski
http://www.experts-exchange.com/Web/Gra ... 53478.html

That orange circle button...

How the heck do people do that...

I need a tutorial on how those are made :)

Please :)

Posted: Fri Jun 23, 2006 11:18 pm
by feyd
two concentric circles filled with gradients, one slightly larger than the other (in the background.) The larger, background one has a gradient that goes from a darker color to a lighter. Same for the smaller but brighter colors. The foreground is then cut such that it is waxing. To give the little glint in the upper region the foreground is duplicated and cut into a sliver.

Posted: Sat Jun 24, 2006 12:20 am
by RobertGonzalez
Google 'glass buttons' or 'plastic buttons'. I ran across a few in photoshop. Usually you draw a shape, fill it, then select an inverse portion of the shape (like the upper circular gradient), the gradient that with a white to transparent with the opacity lowered to 40% - 50%. There is a little bit of trial and error involved, but the results are usually worth it.

Posted: Sat Jun 24, 2006 12:33 am
by shoebappa
Caught me bored, give me a couple minutes...

Posted: Sat Jun 24, 2006 1:34 am
by shoebappa
Aqua/Glass/Plastic Tutorial

Got about 800KB of screenshots, didn't figure it'd be quite that much but hope it's worth the load...

Heh, I just realized the text and little graphic I used on the button makes it look like PHP DAN and not DN, but what can you do...

Posted: Sat Jun 24, 2006 10:02 am
by RobertGonzalez
Nice tutorial. Thanks for posting.

Posted: Sat Jun 24, 2006 11:19 am
by alex.barylski
feyd wrote:two concentric circles filled with gradients, one slightly larger than the other (in the background.) The larger, background one has a gradient that goes from a darker color to a lighter. Same for the smaller but brighter colors. The foreground is then cut such that it is waxing. To give the little glint in the upper region the foreground is duplicated and cut into a sliver.
LOL

Thanks for the impromptu tutorial :)

I already broke it down like that, but actually carrying out the tasks of creating 2 circles which overlap and yadda yadda...

My current method is taking waaaaaaay to long and is likely not ideal...there must be a better way :)

Thus the reason I wanted a step by step tutorial

Cheers :)

Posted: Sat Jun 24, 2006 11:22 am
by alex.barylski
shoebappa wrote:Aqua/Glass/Plastic Tutorial

Got about 800KB of screenshots, didn't figure it'd be quite that much but hope it's worth the load...

Heh, I just realized the text and little graphic I used on the button makes it look like PHP DAN and not DN, but what can you do...
Whoa 8O

Waaay different than how I was doing it... :P

I was using layers... :(

Posted: Sat Jun 24, 2006 5:38 pm
by feyd
Hockey wrote:I already broke it down like that, but actually carrying out the tasks of creating 2 circles which overlap and yadda yadda...
You didn't say you did, just that you wanted to know how to do it.

Posted: Sat Jun 24, 2006 7:19 pm
by alex.barylski
feyd wrote:
Hockey wrote:I already broke it down like that, but actually carrying out the tasks of creating 2 circles which overlap and yadda yadda...
You didn't say you did, just that you wanted to know how to do it.
Fare enough :P

My bad...

Posted: Wed Jul 19, 2006 10:58 pm
by JellyFish
Oh how I love making Glassy!
Image
Easy 4 Step: Glassy-sphere Tut!

As you can see my new avatar resembles my statement above. I love glassy! I use gimp to let you know and the tutorial goes as follows.

Step 1:

Create a new image(100x100) for the tut. First take your round select tool and make an nice selection fitting within the boundaries of your image.
Image
Note: Make sure you remember to know how to make this selection as you need to later in step 4.
Now Fill the selection with your desired color.
Image


Step 2:

Now, with gimp we have a "Intersect with current selection" option on the round select tool which basically makes a selection only within the current selection. Find a similar tool with your image editor and make a selection using the bottom part of the round tool selection. It's a little hard explain.
Image
But basically this is just part of a new circle.
Once you get it, turn fill the selection with a lighter color like so.
Image
Once you get the color right, move on to step 3.


Step 3:

Now dis-select everything(ctrl+shift+A in gimp).

Make a new round selection centered at the top of the button/sphere.
Image
Now take the gradient tool. Grade from top to bottom of the new selection, repeat, of the new selection, not the whole image. Like so.
Image
Good. Moving along.


Step 4:

Now remember in step one how I said to remember how to make the first selection? Well do this now to select the button/sphere.
Image
Now take the gradients tool once again. Bring down the opacity to let say 40.0 or whatever works best. Grade from bottom too top.
Image
And WAHLAH!(or how ever you say that.)

Surface:

As you get familiar with your editing software, you grow better and better. And as you study other's work, play around while bored and get creative, this skill comes as well. So practice this tut some and you'll get the hang of it. Experiment some.

BTW with my avatar it's just step 1 and step 3. And I'd say it looks pretty impressive. lol.

Have a good one. :D