WebDesign Graphics (WebGr)

An add-on to the Web1 unit, this course deals with creation of web graphics and image manipulation.

Please note that attendance to the course is limited to students who either:
- have successfully completed the Web1 or Web2 course or
- have a decent knowledge of web editing.

Course details

Level: Beginner
Max. no. of participants: 13
Computer Lab: #2
Duration: 4 days
Requirements for pass: assignment & minimum attendance - 3 days
When the course is offered: see the list of courses for the current semester and/or the UIS

Course outline

Day 1

• Creating new documents, Saving and Opening
• Introducing the workspace, dialogue windows
• Resizing, Rotating, Mirroring (Flip tool) and the Crop Tool
• Mode (RGB vs. Grayscale). Graphic formats (JPEG, GIF, XCF – for layers)
• Toolbox and Working space windows. Examples from the Toolbox (Zoom, Brush/Pen (tip, the color selection, default color), Gradient tool (default and customized gradients), Bucket tool (Patterns)

Day 2

Backgrounds and layers:

• create a simple background, pattern filled and insert it in a page
• other Backgrounds: from Gradients, Brush stoked(?), With right margin only, etc.
• backgrounds from pictures (Filters>Map>Make Seamless) and (Filters>Map>Tile)

• Layers functioning and Window (present an image and explain – it sill be used just for explaining how text works). Floats and way of functioning. Anchoring
• Text as layers (place over image, editing text, font, color, size, alignment)

Day 3

Buttons and web banners:

• make a classic rectangular button (white and transparent background)
• fill text with gradients and patterns (the latter needs “Alpha to selection”)
• elliptical buttons
• round buttons
• outlined text buttons

Day 4

Animations and filters:

• typing text effect
• flashing text effect
• IWarp
• commonly used filters and several applied examples (Supernova, Blur, Emboss, etc.)

Useful online resources

The GIMP book online - http://gimp-savvy.com/BOOK/index.html
Comprehensive online tutorials - http://www.gimp.org/tutorials

NOTE: all links open in new windows.