Halloween Graphics Contest

It's on and it's live!!! The NewbieHangout Halloween Graphic Contest is going on now ... just got the website up. This should be alot of fun. Everyone is welcome to join ... or to help judge.

Tutorial: Pearlized Graphics Buttons

I found a method of making web elements (navigational buttons) that is really pretty simple and it makes for great customization for your site. The possibilities are unlimited.

No two buttons will ever be alike.

First, open up a new, transparent image any size will do ... just make sure it's big enough for you to move around a bit ... and not so big that your button will get lost ;o)

I started off with an image of 130 x 130 ... and my end product was 54 x 17. You can usually get a good idea of what size you want your buttons by looking at either your current buttons (if you're just redoing buttons) or looking at some other sites and what size their buttons are. Remember that "undo" is your friend ;o) You can always start over.

Okay .....now that you have your image open click on your "preset shape" tool, make sure that "retain style", "anti-alias" and "create as vector" are all checked. Choose a line style (I have solid) and width (I am using 20.) Now choose a shape .... I chose rounded rectangle .... but choose whatever you like. Now draw your shape into the middle of your canvas, saving some room on the sides.

in your layer palette click on the plus sign next to the your shape layer ... mine is called "Vector 1". You'll see the name of your shape there. Put your mouse over the name of the shape and right click. From the menu choose, "Create Raster Selection"

Now go to selections --> Modify --> Modify by 1. While your layer is still activate, create a new raster layer and name it "border". Lock the layers transparency by right clicking on it in the layer palette and choosing "properties" and then "lock transparency" Fill it with whatever gradiant or color you like. For this tutorial I used one of my leopard prints from the mixnmatch backgrounds at www.newbiehangout.com/mixnmatch/ The gold and brown colors work well to end up with a metallic look. But you can experiement with many different types. If you're prompted that it has to be promoted to a layer before you can fill it just click okay. Now .... before you fill it...

Now, with your magic wand, click on the center area ... the transparent area and once it's active and you see all the magic ants around it .... create a new raster layer and name it "center" Fill it with a color of your choice, I chose #F0EAEA and then lower the transparency of that layer ....... I lowered it to about 90. Now go to effects, cutout ... with opacity at 50, blur at 11 offset vertical-1 offset horizontal- 2. Shadow color I used was black and fill with interior color checked and the color was #F0EAEA. New raster layer ... name it cutout ... same transparency settings and apply cutout using the same settings only 2 for vertical and 1 for horizontal.

In your layer palette, highight your "border" layer and go to selections, select all, then float. Effects -- 3D effects --> Inner Bevel with the following settings: Bevel 1, width 10, depth 20, ambience -11, angle 315, intensity 56 and elevation 35. Or you can just use the "web elements" preset here. Click okay.

IN your layer palette, right click on any layer, and select "merge visible"

Now, highlight your image and click Control + C (Copy) and then Control + V (Paste) and you will have a neat little button with no extra space on the sides that you can save a a jpg, gif or export as a picture tube for later use.

Hope you enjoyed this tutorial!

CSS : CSS Test Blog

Checking out the background.

Testing the NEW CSS blog ;o)