NSCAD DSGN-1000-2: Fall 2019

Tools for Digital Designing

Robert Currie

Wednesday, 9am-12 noon, room N320F

Contact Information: rcurrie@nscad.ca or rcurrie@me.com

Location/Hours: by appointment - please email.

Prerequisite(s)/Corequisite(s): none

Credit Value: 3 credits

This web site will be updated to reflect the course outline in the next week.

Nov 20, 2019

Tasks for today

Quiz

Quiz preparation

In class, 9 am, Nov 27. The quiz covers HTML, CSS, InDesign and related topics.

Computational art and physical computing

Computational art with Processing

Presentation

Processing Basics

Physical computing with Arduino

Examples:

Physical computing

Many examples found at the Arduino Playground.

inFORM - Interacting With a Dynamic Shape Display from Tangible Media Group on Vimeo.

Examples


Nov 6, 2019

Tasks for today

Presentation

InDesign Tools

Videos

The Design Dictionary series from Cooper-Hewitt is an excellent overview of some of the fabrication processes used to produce designs.

The Offset Lithography video shows how offset printing is done by hand. This video from printing press maker Heidelberg shows a modern, computer-controlled offset press in action.


Oct 30, 2019

Tasks for today

Presentation

Page Layout concepts


Oct 23, 2019

Tasks for today

Presentation

HTML Common Problems

CSS

Protecting Your Data

Handout

Basic CSS

Resources

MDN: Reference and tutorials on CSS

W3Schools: More reference and tutorials on CSS

CSS Training Videos Available with the Halifax Public Library free Lynda.com subscription.

An online tool for previewing text styles.

A bit advanced, but a useful framework for building CSS-based grids.

The W3C's CSS validator, similar to its HTML validator.

Bootstrap, the most popular CSS+HTML framework.

Template


Oct 16, 2019

Handout

Basic HTML

Presentation

HTML

Templates

Copy and paste from the text box below to create new HTML documents.

Basic HTML5 template

Resources

Mozilla Thimble Lets you try out code in your browser.

Software: Mac, Windows and Linux

The Firefox browser is the best choice for many people. It has fewer security problems than older versions of Internet Explorer on Windows, and more features than Safari on the Mac. You can download Firefox for free. Google's Chrome is also an excellent browser.

Validating your HTML

Several online tools allow you to validate your HTML, pointing out any syntax errors. The W3C's Markup Validator allows your to validate online files, files your upload, or html you paste in place.

The results can be a bit hard to interpret, however.

The Web Developer Toolbar is a useful add-on for Firefox, adding validation and other tools to your Firefox browser. There is also a version of the Web Developer Toolbar for Chrome.

Software: Mac

TextEdit, the text editor included in Mac OS X, needs some preferences changed to work well with HTML files. There are free text editors you could download which are better:

Software: Windows

NotePad is a good simple text editor, that is included with Windows. You may need to look in the "Accessories" section within "All programs" in your Start menu. Important: Use NotePad, not WordPad.

NotePad does not recognize files ending in .html automatically. Use File->Open to access .html file, and choose "Files of type: All files" in the open dialog box, not "Files of type: text documents(*.txt)

If you are looking for more features, Notepad ++ is a good free text editor for Windows.

Choose "Download 32-bit x86" to download.

Structure of an HTML file

HTML Document Structure

Image formats

PNG 24: 103KB

PNG 24: 103KB

PNG files can be 8 or 24 bit depth. 24 bit PNGs are very high quality, but will usually result in the largest files.

JPEG high quality: 64KB

JPEG high quality: 64KB

JPEG files use lossy compression to reduce file size, and speed loading. When you save a JPEG file, you can usually chose a range of quality options, with higher quality yielding larger files. At maximum quality, JPEG files are very close in quality to files saved with lossless compression.

JPEG low quality: 4KB

JPEG low quality: 4KB

At low quality settings, the loss of quality will be obvious.

GIF, 256 colours: 29KB

GIF, 256 colours: 29KB

The GIF file format is limited to 256 colours (8-bit colour) or fewer. 8 Bit PNG files are usually preferred, but the GIF format is unusual in that it can be animated.


Oct 9, 2019

Tasks for today

Presentation

Digital tools and workflow

Handouts

Understanding digital colour

Understanding digital type

Written Assignment

Write a usability review of a web site. There are three components to this assignment.

  1. Choose a topic (see below)
  2. Submit a draft (due Nov 13) - details to come
  3. Submit a formatted final version (due Nov 27) - details to come

The web site should be one that offers more than just content. E-commerce sites, social networking sites, etc are ideal. Fill in your topic in this form before starting; I must approve each topic. Sign up for a topic here.

  • Make sure to review the main functions of the site from the perspective of a user.
  • Think about what happens when things go wrong.
  • What's good?
  • What can be improved?
  • Find someone to act as a test subject and observe them. Give them a specific task.
  • Minimum length: 500 words.

Assignment resources


Oct 2, 2019

Tasks for today

Tutorials

Assignment

Assignment 5, due before next class.

Presentation

Illustrator presentation

Quiz

Quiz preparation

In class, 9 am, Oct 8. The quiz covers all topics dealt with in the first 5 classes.


Sept 25, 2019

Tasks for today

Assignment

Assignment 4, due before next class.

Samples

Illustrator samples

Resources

Creating a template layer in Illustrator

Steps for creating a template layer in Illustrator for manual tracing:

  1. Create a new Illustrator file (File ->Open)
  2. Choose the “Place Command” (File->Place)
  3. If you can't see the "☑︎ template" option at the bottom of the screen, click the "options" button.
  4. Select the image file you want to place by clicking on it once but...
  5. ...before you do anything else, click the “template” option
  6. Click the “place” button.

One of many good illustrator pen tool tutorials


Sept 18, 2019

Tasks for today

Resources

Imaging presentation

Samples

Download sample images for in-class use.

Download the colour theory handout in PDF format.

Assignment

Assignment 2, due before next class.


Sept 11, 2019

Important Photoshop tools

Tools in bold are vital.

Photoshop Tool Reference

Samples

Download sample images for in-class use.

Photoshop Help

Link to the Photoshop help files

Handout

Download Digital Imaging handout in Acrobat PDF format

Download the colour theory handout in PDF format.

Please sign up for Slack.

Samples

Download sample images for in-class use.

Download a large image to see how to deal with it.

Handout

Download File Formats handout in Acrobat PDF format

Download Resolution handout in Acrobat PDF format

Assignment

Assignment 2, due before next class.

Resources

Bitmap and vector presentation

Resource: Photoshop Tool Reference

Lasso tools Magic wand and quick select tools Crop tool + slice tools Heal/patch/red eye tools Brush/pencil/colour replacement Stamp tools Eraser tools Gradient/paint bucket tool Blur/sharpen/smudge
  • Dodge/burn/sponge
  • Vector pen tools
  • Type tools
  • Vector selection tools
  • Shape drawing tools
  • 3D view tools
  • 3D movement tools
  • Hand/rotate view tool
  • Zoom tool
  • Colour picker

  • Sept 4, 2019

    Tasks for today

    Please sign up for Slack.

    Objectives

    Assignments

    1. Create a 1 or 2 paragraph document in Word, Pages or TextEdit outlining your previous computer experience. Save your work on a flash disk. Print it out and pass it in, or upload it to the class web site.You must name the file YOURLASTNAME_Assignment0.docx (for a Word file, or YOURLASTNAME_Assignment0.pages for a Pages file or YOURLASTNAME_Assignment0.rtf (for a TextEdit file.)
    2. Create a self-portrait using PhotoBooth on the Mac. Do not use any filters or effects that would make you un-recognizable.

      Upload the file to the class web site by 6 pm, Sept 10.

      You must name the file YOURLASTNAME_Assignment1.jpg

      Before you upload, check that your file is named properly, and that your are uploading to the correct folder for your section of the class.

    Presentation

    Operating Systems Handout

    Operating Systems Handout

    Download Basic Computers handout in Acrobat PDF format

    Resources

    If you are not comforatble with the Mac, or even if you are, Basic Mac OS tutorials are a good place to start.

    Switching from Windows? Review and try out these tips for Windows users.