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.


Dec 4, 2019

Tasks for today

SketchUp Resources

Log in to SketchUp Free in your web browser to use the free online version.

On your own computer, you can still download and install SketchUp Make 2017

A quick reference card is available for the full version, and is helpful for the online verion.

SketchUp Key Tasks

  • Initial setup - units and template
  • Simple shape drawing and push-pull
  • Controlling views
  • Working with components
  • Nov 27, 2019

    Tasks for today


    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.