Adobe Photoshop Tutorials: Micro Buttons

Start by opening Photoshop and creating a new image; make sure to click the trasparent background box when doing so. The size only as to be as large as you want your button to be. Zoom in to 400% so you can more easily see what your are doing by holding Alt and hitting + three times. Create rectangle that will be the outer border of the button with the rectagular marquee tool (). Fill the rectangle with black by hitting D and then Alt+Backspace.

Hold Ctrl and click the layer with the black rectangle in the Layers Palette to load the selection. Then go Select>Modify>Contract and choose 1 pixel. Choose two colors that you want the background of your button to be (one as the foreground color, one as the background color). Create a new layer by hitting . Select the linear gradient tool () and fill the selection by first clicking slightly above the selection, then hold down Shift and click slightly below the selection. This should produce a vertical gradient like the image to the left. Afterwards, click the layer with the black rectangle in the Layers Palette and use the rectangular marquee to select each of the four corner pixels and press Delete.

Now add white text in to the button with the Type Tool (). Try to make the text centered so the button looks spoonodelic. (If you like the font I used, you can download it from our Font Archive in the Pixel section. It's called 04b_09).

All right, now it's time to add a nice outline to your text. Ctrl+Click your text layer and create a new layer on top of it. In a new layer, go to Select>Modify>Expand and expand by 1 pixel. Now, fill your selection with black. Then, go to your blending mode options for that layer, and change Normal to Soft Light. Adjust the opacity until the color looks right to you, I used 60%.

Create yet another layer and grab the Pencil Tool (). Make the row of pixels directly below the top black border and the column of pixels directly right of the left border white. Similarly, make the row of pixels above the bottom border and to the column to the left of the right border black. Change the blending mode to either Overlay or Soft Light, as in the Step 4, and adjust the layer's transparency. Now, zoom back out to 100% and view the final image. All right, it looks great.

You can also apply this technique to make those ever popular 88x31 buttons that many web sites use to exchange links.

© Copyright 2003-2007 Templates Resource