Intro to Visual Design | What You Can Learn

By Trilby Goouch December 2, 2015
Share

Visual Design course in Vancouver

We’re pleased to announce that our Toronto and Vancouver campuses are now offering Intro to Visual Design workshops! Hubert, who is on the design team at Slack and Malin a Graphic Designer from Lululemon kicked off Vancouver’s first workshop this week in Vancouver, and we had Teresa Man, Senior Designer at Konrad Group lead our Toronto workshop. Here are the highlights.

What is the difference between UX Design and UI Design?

UX

  • Define how users will interact and use the product
  • Craft the flow of the application depending on user’s needs and product goals.
  • Tools to use: pencil/paper, Omnigraffe, Balsamiq, axure.
  • You might hear them say: Do we want to push the use to sign up for an account before or after they checkout?

UI

  • Creates the visual language of the product.
  • Tools to use: Photoshop, illustrator, Sketch
  • You might hear them say: the menu icon is 1px too far from the left.
  • Spoke about the difference between Pixel images vs vector images

Photoshop Formats: Input

  • Raster Image
    • Made up of pixels
    • Rich detail (DPI, PPI)
    • Pro: each pixel can be modified
    • Con: large file sizes so the quality degrades when enlarged
    • Examples
      • Type: photographs
      • Ex: JPG, PNG, GIF, TIFF, BMP
      • Tools within Photoshop: brush, rasterize layer, merge layer, flatten layer
  • Vector Image
    • not made up of pixels, made up of mathematical points with paths (lines, curves)
    • Pros: small file size, can be resized infinitely and resolution remains crisp
    • Cons: does not have as much depth in colour information, editing vectors require the appropriate program
    • Examples
      • Type: Fonts, Logos
      • Format: SVG, EPS, AI
      • Tool: Smart Objects

Photoshop Formats: Output

GIF (Graphics Interchange Format)

  • Pros: small file size, can be animated, allows for transparency
  • Con: limit of 256 colours

JPG (Joint Photographic Experts Group)

  • Pros: support 16 million colours, small amount of compression reduces file size drastically
  • Cons: lossy compression (degrades with every save), high compression rate creates artifacts (this contributes to the loss of colour and details in the image)

PNG (Portable Network Graphics)

  • Pros: lossless compression, same range of colours as JPEGs, supports transparency
  • Cons: Large file size

After a brief introduction, attendees were given an activity where they learn first hand how to apply their knowledge in using Photoshop.

  • When you start a new file (File > New), you get the option to describe the size of your image as well as some additional features of it.
  • Layers are one of the most important aspects of Photoshop. These can be locked so that the entire image doesn’t get affected when you only want to change something. They can be named, grouped, and locked.
  • When your background looks like a grey and white checker board, it means that your background is transparent
  • The “Rectangular Marquee” tool represents a rectangular selection tool through which you can selec
  • in order to rasterize the layer, you have to right click the layer you wish to rasterize and click “Rasterize Layer”
    • anything drawn with the shape tools on photoshop are vector images
  • If you want a perfect shape, hold shift and drag. This will make your square a perfect square and your circle a perfect circle
  • In order to edit/draw on a shape, you must rasterize it first (i.e. you must rasterize the vector image of a circle in order to use the brush tool to draw a happy face)
  • in order to group layers, hold shift and click the two layers in the layer tab. With those two selected, in the drop-down menus on the top, click “Layer” and then “Group Layers”. You will end with those selected layers in the “Group 1” Tab
  • To save the file, click “Save As” and change the format of it.
    • PSD (Photoshop Document) – use this when you want to work on the image again in Photoshop
    • use any of the other output formats to upload it to websites and/or social networks

Quick Tricks for Photo Editing and Retouching

Colour Correct

  • When a photo is too yellow, we want to add more blue to it
    • Use the Adjustments tab on the right hand side menu – Click on Photo Filters to apply filters to the image
    • You can also use the Colour Balance Tool – it will give you 3 bars which you can drag to get the colour balance you are going towards. It will show you what your picture looks like through a live preview.
  • To get rid of unwanted things in the picture, you can use the clone tool (shortcut is “s”)
    • You want to pick a sample area which is what you want it to look like. You can do this by using option click and then painting over the area that you want to change
  • Liquify under the filter drop down menu
    • here you get to tweak the rasterized image and their pixels and you will be able to work with other people’s images and tweak it (i.e. how magazine pictures are edited to make models look skinnier)

Making GIFs

Resources: GIPHY is a library of GIFs

  • Each one of the layers will be a frame of the GIF
  • In the first frame/layer, draw a square
  • In the second frame/layer, draw a circle
  • In the third frame/layer, draw a triangle
  • Click Window dropdown menu, Click “Timeline”
  • You want to change the option to “Create Frame Animation” instead of the video option – you need to keep creating new frames for each of your layers
  • You can click play to preview what your GIF will look like
  • In order to make loop it, you can click the loop option and choose how many times you want it to loop
  • To export it, click File > Export/Save for Web and change the format of the output to a GIF instead of the default