Creating a Web 2.0 Site Button

I'd recommend to use your result on Sivatar.com to promote your website!

Create a new image. (Width: 70px, Height: 70px)

Select your Rounded Rectangle Tool, and set the radius to 3 pixels, and the color to #ee920e. Create a Rounded Rectangle that is 1px away from the edge of the image on all sides.



Now, duplicate this layer and set the layer's blending options to screen. Reposition the screened duplicate so it only overlaps in the bottom right. (Remember, it's always good to hold shift while doing these sorts of things to maintain straight paths.) Rasterize both of these layers.



The next step is to remove a small portion of the bottom right corner, so the button will appear to be dogeared. Use your Polygonal Lasso Tool to create a right triangle selection, line it up with the button properly, then delete the selection from both layers.



Select your dogear layer, and apply a gradient overlay. (blend mode: multiply, #ee920e -> #FFFFFF, 120 degrees) Merge the two existing layers.



Pull out your Elliptical Marquee Tool and create a selection over your whole image that will be satisfying to yourself as a "lighting" layer. Create a new layer and fill your selection with a gradient that fades from white to transparent. Delete all areas of this "lighting" layer that do not overlap with the base image.



Last step, throw some text on there! I chose Tahoma, 11 pt (no anti aliasing), bold. Give it a drop shadow (2px distance, 1px size) and a stroke (#d48310) of 1 pixel.

Ta - da!



Hope you enjoyed this tutorial, if you did, please subscribe to the feed.

Apply a Reflection to Your Text

Ever wanted to mimic that reflective text effect you see in many sleek advertising images? Well here is how to do it, step by step!

Create a new image (300x300 pixels) and choose your text application tool. (Set font to Impact, 48pt)

Go ahead and enter some text, and when you're done, create a duplicate of your new text layer (drag this layer onto the new layer icon, it will automatically create a clone of the layer you dragged) and slide it down to align the top of this cloned layer with the bottom of the original layer. Before we proceed, lower the opacity of this layer to 25%. Your image will look like this.


Now, to make it believable. Go to the reflection layer's styles, and apply a gradient overlay to it. Leave the overlay with its default settings, only click the checkbox to reverse your gradient. Voila, instant reflective text!

Creating a Basic Forum Signature

If you've ever posted or lurked on a message board before, you probably have come across some users that have images in their post signature, usually touched up in a graphics program, and having their username printed somewhere on the image. You've probably also wanted one of these at some point, too.

Well, here is a short and easy tutorial on how to create a basic image to represent yourself on whatever message board you post on.

First, create a new image in Photoshop, with a width of 350 pixels (standard forum image width size, made popular by user bars), and a height of 85 pixels.

Next, change your foreground color (default: white) to this awesome green (as you read my blog you'll easily spot that my favorite color is this) a4de60.

Select Render > Clouds from the Filters menu (ALT + T) until you get a background you are comfortable with.



Now, to spice up this signature a little bit. Select Pixelate > Mosaic from the Filters menu and leave the cell size at the default (8). Then, select Sharpen > Sharpen from the Filters menu, and repeat this two or three times to your liking. You should have something like this.



It's time to add your username to personalize this image. Choose your text tool, and select a font you think would look good on the signature. I'll choose Impact. Set your font color to white, and your font size to 36 pt, and let's proceed.

Type out your forum username, and position your text in the bottom right. Now, go to your text layer's styles (double click the layer with the layer control window), and add a stroke to the text (1px, 22440f), and also select outer glow, leave the default settings.



Now, I personally like to have a 1px border around the edge of my signature to distinguish it from the rest of the websites layout, usually a black or white line depending on the background color of the forum, and what color my signature used. We'll use a black line here. Create a new layer, and press select all (CTRL + A). Select Stroke from the Edit menu (ALT + E), and create a black 1px stroke around the edge.



Congratulations, you're all finished. Now, just upload this image to your favorite image host (or your own personal webspace) and edit your signature to include this image! (You may have to use BBCode or HTML to post your signature.)