SUCCEED

   

Web Design
Shodor > SUCCEED > Curriculum > Workshops > Web Design

Introduce Basic Tools in Inkscape

  • Open image ProgrammerArt.png
    • This image was created in Inkscape
    • What shapes do you see? Colors? Gradients?
  • Open file ProgrammerArt.png
  • Click different shapes
    • What layers are the shapes on? (layers are at the bottom just to the right of the eye and the lock).
  • Guided Practice
    • Let students follow along on their computers as you demonstrate the following concepts and tools.
    • Pass out Inkscape Quick Reference sheet.
    • Objects
      • All shapes are objects.
      • Objects can be manipulated independent of other objects
    • Basic Tools
      • Rectangle tool
        • Click and drag to create a rectangle.
        • By default, the color of the rectangle is whatever the last used color was.
        • You can use Shift+Drag to drag from the center.
        • Ctrl+Drag to keep an exact ratio. This can be used to keep a perfect square.
        • Keep the square on the page
      • Circle tool
        • Click and drag to create a circle or ellipse
        • Shift+Drag to drag from center
        • Ctrl+Drag to keep ratio
      • Selection tool
        • Can be used to select objects (shapes).
        • When a shape is selected, there should be arrows around it. By default, vertical arrows should come up first. Clicking and dragging one of the arrows will change the size of the shape on that side.
        • Click on the shape again, and the arrows should become horizontal. Dragging the arrows on the faces will skew that side. Dragging the arrows on the vertices will rotate the shape.
      • Text tool
        • Click and it will allow you to enter text.
        • Click+drag to create a text box that text can be entered into.
      • Fill and Stroke palette
        • The fill of a shape is the color that is inside it
        • With an object selected, click on Fill and Stroke palette.
        • On the fill tab, there are four additional tabs:
          1. RGB- edit color in RGB mode
          2. CMYK- edit color in CMYK mode
          3. HSL- edit color in HSL mode
          4. Wheel- use color wheel to edit color
        • Alpha transparency - the opacity of the object - can also be edited on any tab.
      • Text palette
        • Used to edit text objects.
        • With text object selected, click on text palette.
        • Two tabs appear:
          1. Font: to edit font family, size, style, layout, and line spacing.
          2. Text: to edit the text
      • Pen tool
        • This tool is the most critical for making custom shapes - any type of polygon or set of line segments.
        • Demonstrate: create any set of lines that connects back to the starting point, and you will get a closed polygon.
        • Demonstrate: create a square where the top side is an arc, to demonstrate curved points.
          • Single-click to create the straight points - at the upper left, lower left, lower right, and top right
          • Click and drag to create a curved point - find the point halfway through where the arc should fall, and click and drag to the left.
          • Single-click back on the starting point to close the shape.
  • Independent Practice
    • Allow time for students to explore the tools they have just learned.
    • Show them how to save files from Inkscape for the web.

Have the students download the Inkscape Files to their desktops.