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.

Tutorials: Photoshop

Title/Description

Level

3D Globs
Make those big trendy 3D globs using nothing but Photoshop.

Beginner

Actions and Batching
Save your precious time by automating tasks by using Actions and Batching.

Beginner

Box Art
Learn how to turn 2D artwork into a 3D software box, hardcover book, or other object.

Intermediate

Brushes
Create custom brushes and learn to use Photoshop's powerful brush engine.

Intermediate

Chromage
Make oh so smooth chrome effects.

Advanced

Colorburst
Learn how to make simple, eye-catching colorbursts.

Beginner

Colorize
Colorize is a artistic effect used by a lot of graphic designers to detail pictures.

Intermediate

Fire Text: Tutorial
Set your text ablaze with burning wrath.

Intermediate

Grunge: Tutorial
Create grungy background effects.

Intermediate

Ice Text: Tutorial
Learn who to chisel your own ice text.

Intermediate

Keyboard Shortcuts: Tutorial
Find out about all of Photoshop's lovely shortcut keys.

Beginner

Lighting Effects: Tutorial
Create realistic-looking plastic objects by using powerful lighting effects techniques.

Intermediate

Masking: Tutorial
Hide parts our your layers with style by using Photoshop's powerful masking features.

Intermediate

Micro Buttons: Tutorial
Learn how to make micro buttons in Photoshop.

Beginner

Neon Glow Text: Tutorial
Make neon text like that often found on commerical signs.

Intermediate

Outlines
Create suave outlines the old-fashioned way.

Beginner

Paths: Tutorial
Use paths to create smooth and editable selections.

Beginner

Seamless Water Texture: Tutorial
Make a very stylish and useful water texture.

Intermediate

Texture Wrapping: Tutorial
Learn how to realistically wrap a texture around an object.

Intermediate

Templates Resource Hosting
Domain Names · Templates Resource