Realistic plastic/glass button - SWiSHMax Tutorials
 
  Buy Ebooks, Video Games, DVDs, Electronics and more !
Home | Help Forums | Web Design Tutorials | Free Swishmax Downloads Make Money Online Blog . Free Image and Photo Sharing and Hosting

 

 

Company

Home

Nework Details

Tutorials

SWiSH 2

SWiSHMax

Flash MX

PHP & MySQL

HTML / JScript

Adobe Photoshop

Corel Draw

Gimp

Miscellaneous

Downloads

Templates

Plugins

Fonts

Wallpapers

Free Images

Scripts and Codes

Products

E-Books

SWiSH BB

SWiSH Templates

SWiSH-DB Newsletter
Subscribe to our newsletter : GO
  Partners / Affiliates

   Free image hosting
   Web Design Pakistan
   Swish Templates
   SWiSH Climax
   Talkfreelance Community
   Template Desire
   Lite boards
   Script Sector
   GimpTalk
   13dots
   Idea Designs
   PHP Cafe
   Sposatoettore
   Free swishmax templates
   Swishzone

Manage your site with Flax Article Content Management System
Realistic plastic/glass button
Category : SWiSHMax | Level : Beginner | Language : English
Ask Question | Read Comments | Post tutorial | Previous | Next

Web www.swish-db.com

Swish: Realistic Glass/Plastic 3D button Level: Beginner/Intermediate By: Nikita_a

I decided to create this tutorial for those who don't have access to Photoshop or other imaging software who want that realistic plastic/glass effect. You can use this tutorial for anything. buttons, headers, banners ... play around with it.

Start with an empty movie, 50x50px is what I did.
  1. Draw a square. for the sake of the tutorial I chose rounded rectangle user posted image for a cleaner more realistic end result.
  2. Next place a black outline of 1px and fill it with a radial gradient. Opacity for both should be 100% and colours should be similar to each other in contrast (very subtle)
  3. Next rotate and move the gradient using the fill tool user posted image I rotated mine CCW 90degrees and moved it so the lighter part of the circle was towards the top. It looked like this:

    user posted image
  4. Next step is make similar rectangle without the outline and fill with a linear gradient. The colours in the gradient should be the original darkest colour from the first shape (use the eyedrop tool if u need to) then fade to white .. opacity for white at around 50% and original colour 100%
  5. next resize the square so that its a bit smaller than the original square. position it like so:

    user posted image
  6. then draw an elipse and position it like such:

    user posted image
  7. Fill with linear gradient once again. using the original darkest colour used go from 100% to 65-75% opacity of the same colour. Should look like this so far:

    user posted image
  8. Now for adding text or symbol. Im going to do a letter for you.
  9. Type the letter, size it and position it. then click modify -> group -> group as shape this will allow you to fill it with a gradient fill
  10. Fill sympbol, shape or letter with linear gradient i went from black to the original darkest colour set at an opacity of 80%. once again you will most likely have to rotate and reposition the gradient. play around with it for a bit. this is what it looked like when i was moving the gradient.

    user posted image

then your final outcome:

user posted image


© 2002-2005 Flaxweb Network | Article Manager | Gimp Tutorials Library | RAD C++ Library | Free C/C++ Sourcecode |
Sites of interest : Web Design Blog | Swish Templates | Swishmax Ebook | Photoshop Templates | Gimp Tutorials | Text Forum | Make Money Online