exercise - interface design

 

step one: new document

directions

  • Choose File | New
  • Width: 600 pixels
  • Height: 400 pixels
  • Canvas Color: Click on Custom color box
  • Type #003366 into custom color box.
  • Press Enter to accept
  • Click OK
completed design

new document window

step two: rectangle tool

rectangle tool settings

  • Choose Rectangle tool
  • Fill: Solid, #336699
  • Stroke:
    Color: #000066
    Tip Size: 4
    Stroke Type: Pencil: 1- Pixel Soft

directions

  • Draw a vertical rectangle with the
    width of 65 pixels and
    height of 300 pixels

  • Size (W,H): 65, 300
  • Location (X,Y): 150, 90
  • Rectangle Roundness: 100
test tube

step three: knife tool

directions

  • Select rectangle with the Selection tool
  • Choose Modify | Ungroup
  • Select Knife tool
  • Slice through top left and right points
  • Choose Select | Deselect
  • Choose Arrow tool
  • Click on top section to select it
  • Press Delete key
slicing test tube

step four: ellipse tool

ellipse tool settings

  • Choose Ellipse tool
  • Fill: Solid, #336699
  • Stroke:
    Color: #0099CC
    Tip Size: 1
    Stroke Type: Pencil: 1- Pixel Soft

directions

  • Circle 1
  • Draw a circle:
  • Size (W,H): 65, 30,
  • Location (X,Y): 150, 105
  • Choose Select | Deselect

ellipse tool settings

  • Choose Ellipse tool
  • Fill: None
  • Stroke:
    Color: #000066
    Tip Size: 4
    Stroke Type: Pencil: 1- Pixel Soft

directions

  • Circle 2
  • Draw a circle
  • Size (W,H): 65, 30
  • Location (X,Y): 150, 75
cirlce one

top circle

step five: line tool

line tool settings

  • Choose Line tool
  • Stroke:
    Color: #000066
    Tip Size: 4
    Stroke Type: Pencil, 1- Pixel Soft

directions

  • Line 1
  • Hold the Shift key down and draw a vertical line
  • Size (W,H): 1, 50
  • Location (X,Y): 150, 90

  • Line 2
  • Hold the Shift key down and draw a vertical line
  • Size (W,H): 1, 50
  • Location (X,Y): 215, 90

  • Line 3
  • Hold the Shift key down and draw a vertical line
  • Size (W,H): 1, 160
  • Location (X,Y): 165, 102

  • Line 4
  • Hold the Shift key down and draw a vertical line
  • Size (W,H): 1, 120
  • Location (X,Y): 180, 105

  • Line 5
  • Hold the Shift key down and draw a vertical line
  • Size (W,H): 1, 220
  • Location (X,Y): 205, 102

  • Line 6
  • Hold the Shift key down and draw a vertical line
  • Size (W,H): 1, 50
  • Location (X,Y): 190, 150
connected lines

testtube wth lines

testtube with lines

step six: Effects and rotatation

directions

  • Choose Select | Select All
  • Choose the "+" button in the Effect section
  • Choose Bevel & Emboss | Inner Bevel and choose Smooth bevel
  • Choose Select | Select All
  • Choose Modify | Group

  • Choose Modify | Transform | Numeric Transform
  • Choose Rotate from menu
  • Enter 30 degrees
  • Click OK
  • Select test tube
  • Location: 150, 90
rotated testtube

step seven: ellipse tool

ellipse tool settings

  • Choose Ellipse tool
  • Fill: Solid, #336699
  • Stroke:
    Color: #000066
    Tip Size: 2
    Stroke Type: Pencil: 1- Pixel Soft

directions

  • Bubble 1
  • Size (W,H): 25, 25
  • Location (X,Y): 100, 100

  • Bubble 2
  • Size (W,H): 30, 30
  • Location (X,Y): 200, 120

  • Bubble 3
  • Size (W,H): 40, 40
  • Location (X,Y): 130, 160

  • Bubble 4
  • Size (W,H): 50, 50
  • Location (X,Y): 100, 250

  • Bubble 5
  • Size (W,H): 40, 40
  • Location (X,Y): 300, 300

  • Bubble 6
  • Size (W,H): 30, 30
  • Location (X,Y): 250, 350

  • Bubble 7
  • Size (W,H): 20, 20
  • Location (X,Y): 260, 310
testtube with bubble locations

Shortcut:

  • Frequently when it is necessary to perform repetitive tasks, using the copy/paste command can save a number of clicks.
  • For example:
    • After creating Bubble 1, make sure it is selected and copy (Edit | Copy, or Ctrl v on PC, Command v on Mac)
    • Paste a new bubble back to the stage (Edit | Paste, or Ctrl p on PC, Command p on Mac)
    • Use the Properties editor to set the size and location
    • Repeat for each bubble

step eight: effects

directions

  • Select all bubbles by choosing the Selection tool, holding down the Shift key, click on each bubble
  • Choose the "+" button in the Filters section
  • Choose Bevel & Emboss | Inner Bevel and choose Smooth bevel
  • Choose Select | Select All
  • Choose Modify | Group
''

step nine: text tool

text tool settings

  • Choose Text tool
  • Font: Arial,
    Size: 15 point
    Color: #CCCCCC
    Attributes: Bold, Left align

directions

  • Type UW - MADISON
  • Location: 40, 20
  • Choose Select | Deselect

text tool settings

  • Choose Text tool
  • Font: Arial Black
    Size: 30 point
    Color: #FFFFFF
    Attributes: Left

directions

  • Type SCIENCE SUPPORT CENTER
  • Location: 40, 35
completed design

step ten: line tool

line tool settings

  • Choose Line tool
  • Stroke:
    Color: #666666
    Tip Size: 2
    Stroke Type: Basic : Hard Line

directions

  • Hold the Shift key down and draw a horizontal line
  • Size (W,H): 555, 1
  • Location (X,Y): 45, 70
completed design

step eleven: save

  • Choose File | Save
  • Save In: SSC_Site folder
    File Name: site.png