Web Design - El Centro College
 
HTML More HTML JavaScript Design Dreamweaver Fireworks Flash Photoshop More Info Home
 

Photoshop Buttons

  Backgrounds & Buttons (Examples)

Alias or Not

Buttons come in many shapes and sizes - circular, rectangular and anything in-between. Large complex sites often use navigation bars with text - a tabbed button effect.

Create the buttons in a larger size.

After the button is created, use edit > free transform or image > resize to size down before saving.

TIP: You can draw with the Elliptical Marquee Tool from the center out by holding down the ALT/COMMAND key while you drag.

TIP: To fill a selection with the background color - CTRL + backspace
To fill a selection with the foreground color - ALT + backspace

NOTE: COMMAND or OPTION on the MAC

 

Simple Rectangular Buttons

  • File > New > 100 x 100 (transparent)
  • Rectangular Marquee > draw the shape
  • Filter > Blur Gaussian Blur > establish amount of roundness to the corners
  • Foreground color > Paint > fill color
  • Select > Deselect
  • Options: Layer > Layer styles > experiment!
  • Save

Simple Rectangular Buttons with Gradient

  • File > New > 100 x 100 (transparent)
  • Rectangular Marquee > draw the shape
  • Edit > Fill (select a color)
  • Magic Wand > "wand" the button
  • Gradient Tool > select a gradient > drag from left to right across the button or from upper left to lower right
  • Select > Modify > Contract > 2
  • Gradient Tool > bottom right to top left or right to left (opposite of the previous direction)
  • Options: Layer > Layer styles > experiment!
  • Save

Rectangular Button #2

  • File > New > 100 x 45
  • Layer > New Layer > Activate Layer 1
  • Layer > Layer styles > Bevel & Emboss (or any other styling effects)
  • Rectangular marquee > draw a smaller area > fill with foreground color
  • Save

 

Texturized Rectangular Button

  • File > New > 200 x 200
  • Layer > New Layer
  • Background color (white) / foreground color (dark gray)
  • Gradient > options bar > select a stripped pattern
  • Drag the gradient from top left to lower right
  • Filter > Gaussian Blur > set a blur amount
  • Filter > Noise > Add Noise > 50 (uniform distribution) > click ok
  • Filter > Blur > Motion Blur > set an angle & distance > click ok
  • Image > Adjust > Color Balance > adjust to look you desire
  • Layer > Layer Styles > experiment!
  • Save

Rectangular Button with Enhancements

  • File > New > 100 x 70
  • Layer > New Layer > Activate Layer 1
  • Background color
  • Layer Styles > Bevel & Emboss
  • Rectangular marquee > select a smaller area with the block of color
  • Select > Modify > Contract > 3
  • Copy (CRTL + C) and then paste (CTRL + V) to past in the same spot on the new layer.
  • Layer > Layer Styles > Bevel & Emboss (change DIRECTION to down) and soften a bit.

Rectangular Button with Enhancements #2

  • File > New > 100 x 70
  • Fill with a Background color
  • Select All >
  • Select > Modify > Border > 12
  • Select > Save Selection
  • Channel > New (all colors disappear)
  • Select > Deselect
  • Filter > Render > Lighting Effects > Texture > alpha 1 > rotate light direction to northwest.
  • Click ok

TIP: By default the elliptical marquee draws from the where you click your mouse. You can draw from the center outward by holding ALT while you drag. Add SHIFT if you want a perfectly round circle as you drag.

 

Circular Buttons and/or Bullets

  • File > New > 200 x 200
  • Layer > New Layer
  • Elliptical marquee > SHIFT + drag to create a circle
  • Background color (dark) and foreground color (lighter)
  • Gradient tool > radial gradient > drag from upper left to bottom right
  • Select > Deselect
  • Elliptical marquee > make a smaller circle inside the larger circle you just drew
  • Edit > Transform > Rotate 180
  • Select > Modify > Contract > 3
  • Edit > Transform > Rotate 180
  • Image > Adjust > Hue/saturation > Colorize

 

Beveled Circular Button

  • File > New > 200 x 200
  • Elliptical marquee > SHIFT + drag to create a circle
  • Selection > Save Selection > nickname
  • Select background/foreground colors set as contrasting colors
  • Gradient tool > drag from upper left to bottom right
  • Select > modify > Contract > 5
  • Gradient tool > drag from bottom right to upper left
  • Save

 

Shiny Beveled Circular Button

  • File > New > 200 x 200
  • Elliptical marquee > SHIFT + drag to create a circle
  • Background color (dark)
  • Select > Save Selection > click ok
  • Select > Modify > Contract > 5 > click ok
  • Foreground color > fill the inside with this color
  • Select > Load Selection
  • Filter > Distort > Spherize > click ok
  • Filter > Render > Lighting Effects > Adjust Settings > click ok
  • Filter > Render > Lens Flare > drag the crosshair off the button > adjust settings > click ok
  • Save (transparent .gif)
  • TIP: Resize image as needed.

 

Beveled Circular Button #2

  • File > New > 200 x 200
  • Layer > New Layer
  • Elliptical marquee > SHIFT + drag to create a circle
  • Background color (dark) and foreground color (lighter)
  • Gradient tool > drag a gradient from the northwest to the southeast (diagonal)
  • Make sure the circle is selected, copy and then paste. It will automatically appear in its own layer
  • Edit > Transform > Rotate 180
  • Edit > Transform > Numeric Transform (check scale, reduce selection to 80% on both axes) > click ok
  • Activate Layer 1
  • Layer > Layers styles > Drop Shadow (try distance of 10 and blur of 20)
  • Click ok

Beveled Circular Button #3

  • File > New > 200 x 200
  • Layer > New Layer
  • Elliptical marquee > SHIFT + drag to create a circle
  • Background color (light color)
  • With circle still selected > Select > Save Selection > Alpha 1
  • Channels > activate Alpha 1
  • Radial Gradient tool > drag a gradient from the center to the edge
  • CTRL + L > Levels Dialog Box > shadows (32) - highlights (235)
  • Activate RGB Channel
  • Filter > Render > Lighting Effects > spotlight (northwest) - texture channel to Alpha 1 > click ok

Pill Shaped Button

  • File > New > 200 x 200
  • Layer > New Layer
  • Elliptical marquee > SHIFT + drag to create a circle
  • Layer > New Layer > Fill with color
  • Drag out a Ruler Guide by clicking inside the ruler on the left side and dragging out. Position the Guide in the middle of the circle. (NOTE: to turn on rulers: View > Show Rulers)
  • Rectangular marquee tool > drag a box around the right side of the circle
  • While holding down CTRL-ALT, click the arrow key to drag out the sides of the rectangle until you have a pill shape
  • Deselect once you have the right length.

 

Selection Tool Shaped Buttons

  • File > New > 200 x 200
  • Elliptical marquee > oval
  • Hold down ALT, then drag smaller ovals to erase a little from the top and bottom of the shape you just created
  • Layer > New Layer
  • Fill the new shape with color
  • Select > Modify > Contract > 8
  • Layer > New Layer
  • Fill with another color
  • Select > Deselect
  • Layer > New Layer
  • Drag this layer from the Layers palette so it is just above the first layer
  • Elliptical marquee > oval (smaller than the original oval)
  • Fill the oval with the first color
  • Select > Deselect
  • Option: Experiment with Layer > Layer Styles
  • Save

 

Water Puddle Buttons (Using the Selection Tools)

  • New > File > 200 x 200
  • Layer > New Layer
  • Lasso > create a water puddle shape
  • Radial Gradient tool > starting in the center, create a gradient from white to light blue
  • Select > Deselect
  • Layers > Layer Styles > Bevel & Emboss (highlight) > Inner Bevel (depth - try 10), experiment with settings > click ok
  • Option: Filter > Distort > Wave or Zig-Zag (low amounts) > click ok
  • Layers > Layer Styles > Bevel & Emboss > (opacity - try 35%) > click ok
  • Select > Deselect
  • Save

    TIP: When adding text to this button, try these effects:
    Layer > Type > Render Layer…
    Filter > Distort > Ripple

 

Return to the Top