Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Graphic Design Exercises
Illustrator/Photoshop: Web Buttons

Objective

To learn Illustrator and Photoshop production techniques by recreating this button art:

Procedure

prepping for the exercise

  1. download starter files
  2. launch Illustrator
  3. file > new: profile=web, size=1024x768
  4. view > grid
  5. view > snap to grid
  6. Illustrator > preferences > guides & grid: gridline every 100px, subdivision=10
  7. file > place "sketch.jpg" (scale up to match grid)
  8. rename "layer 1" as "template" (make template layer)

creating the globe art in Illustrator

  1. new alyer "art"
  2. draw 3 circles: 180x180px, 120x180px, 60x180px (option click)
  3. fill=none; stroke=black, weight=10px
  4. delete top anchor point
  5. object > path > outline stroke
  6. object > group
  7. reposition (snap to grid)
  8. draw 10px horizontal rule using rectangle tool

creating the button art in Illustrator

  1. new layer "button"
  2. draw box 800x140px (fill=black, stroke=none)
  3. effects > stylize > round corners: 70px
  4. make all "art" layer objects white
  5. new layer "type"
  6. type tool: "SEARCH" (verdana bold), fill=white
  7. draw 10x10px "pixels", position randomly
  8. new layer "white": draw white box 1000x300px (restack to bottom)
  9. file > export "button.psd" (72dpi, write layers=yes)

adding layer styles in Photoshop

  1. open "button.psd" in Photoshop
  2. select "art" layer: mode=overlay
  3. window > styles: replace styles with "Wow-Button Styles.asl"
    (flyout menu)
  4. select "button" layer: choose a style preset
  5. adjust brightness on "color overlay" so "art" interacts with button
  6. new adjustment layer: hue/saturation (refine hue)
  7. new adjustment layer: levels (must be top layer)
  8. save for web: image size=20% (bicubic sharper); apply

grading

  1. print a b&w proof @100% with your name on it for grading
  2. file graded proof in your Process Book for individual review
  3. publish a JPEG linked from your Process Page (no wider than 800px)

BACK TO TOP
Last updated: 3/2/17 ■ Webmaster: Paul Young