Graphics Software

  1. Home
  2. Computing & Technology
  3. Graphics Software

Creating Interfaces and Web Objects in Photoshop and ImageReady

Tutorials for creating Web objects, navigation bars, buttons, interface elements and advanced Web navigation consoles. Includes techniques for creating wires, buttons, screws, rust, pipes, and more. Also covers information on slicing and coding your interfaces for the Web.
Adobe Photoshop Web Button
[Video Tutorial] You don't have to be a graphic designer to make your Website look professional. Use Adobe Photoshop tools to create custom buttons that differentiate your site from its competition and encourage user interaction.
How To Make Rounded Rectangles
Learn how to create rounded rectangles in Photoshop with a few simple steps.
Gradient Buttons in Photoshop 6
Gradient buttons in Photoshop 6 are very easy to make using the layer styles command and a few simple techniques from Photoshop 5.
Interface Design in Adobe Photoshop: Lesson 1
"This series of tutorials shows how to create interfaces for games, multimedia, motion graphics and web." by John Selvia. Lesson 1: Creating a pitted metal effect for the interface background.
Button Mask
Creating button masks to use with the lighting effects filter. Version unspecified.
Creating A Graphical Web Page Header
How to make a Web page header using Photoshop 6.
Adjacent Panels
Replace your rectangular or circular panels with interlocking adjacent panels.
Aqua Buttons
A tutorial for creating those nifty aqua buttons using only the gradient tool and a few selection options and features. This technique is pretty simple and requires no fancy steps or methods.
Aqua Interface
Apply the aqua button effect on more complex patterns or shapes
Chrome Caps
Another great thing you can make out of your chrome rings.
Classy Glass Buttons
Create elegant-looking glass or plastic buttons for your Web page. Add color and text to complete the button.
Cornering Technique
One way to take out the square edges and replace them with smooth rounded corners.
Texture Wrapping
Learn how to add realism to 3D shapes you create in Photoshop by wrapping them with a texture. Version unspecified.
Corroded Edges
A wear and tear effect to make your interface look worn down.
Cracks
Creating cracks on the surface of the your interfaces is another technique you can use to produce the wear and tear effect for your designs.
Dingbats
Use dingbat fonts and Photoshop effects to create your own unique Web graphics.
Embedded Slots
This tutorials is great for integrating design elements like buttons, bars and other objects into your interfaces. The technique is very simple and makes use of the cornering technique and the contract selection option of Photoshop.
Glass Button
A simple effect for a glass button.
Inset Bars
How to create inset divider bars or text. Version unspecified.
Interface Pattern I
Interface pattern tutorial using inside curves and cornering techniques.
Interface Skin and Bone
Create combo interfaces with the skin and bone technique.
Maximizing use of Textures
Textures can be another great way of adding detail to your interfaces. Adding a texture can be as easy as putting the texture on top of the interface but certain texture application methods can greatly enhance your interfaces and get more out of your textures.
Menu Buttons
Here's how to create a very simple button bar in Photoshop 5.5.
Metallic Menus and Buttons
Create metallic effects with gloss contour layer styles in Photoshop 6 and up.
Metallic Panels
Create a 3D metallic panel for an interface or Web button. This site is not compatible with Netscape 4.
Metallic Wires
An advanced tutorial for creating metallic tubes and wire. This site is not compatible with Netscape 4.
Miter Joints
Join two pipes in a 90 degree angle with a mitered joint. Also a useful technique for creating frames.
Outer Bevel II
The old bevel effect but this time with the flat top.
Reflective Shiny Button
Easy to make reflective button. No, it doesn't look like plastic.
Rounded Rectangles
The quick and easy way to make rounded rectangles in Photoshop. Download the action set to create three variations of rounded rectangles in a single click.
S-Curve
The S-Curve cut is a great way of producing a sleek curve on your interfaces. This is a simple technique that makes use of the Photoshop pen tool.
Signed Pipe
There are lots of pipe tuts - this one shows you how to apply text on it.

Explore Graphics Software

About.com Special Features

Build Your Own Website

Step-by-step advice on how to do everything from choosing a Web host to promoting your content. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

Graphics Software

  1. Home
  2. Computing & Technology
  3. Graphics Software
  4. Adobe Photoshop
  5. Essential Tutorials
  6. Web Graphics / ImageReady
  7. Make Web/Interface Objects

©2009 About.com, a part of The New York Times Company.

All rights reserved.