We had a good turnout of about 25 budding designers at our event in Mountain View. Oscar Salazar spoke on how to make the UI for a Weather app for the Apple Watch in Sketch. 

For good reason, Sketch has been garnering a lot of attention lately. It is becoming the go-to tool instead of Photoshop or Illustrator. That's because Sketch was designed from scratch in a modern way. It is optimized to render vector compositions into output resolutions for the retina screens. It helps you make the graphics you'll need for the iPhone and Apple Watch. 

Session Screencast Video

via Hangout on Air

Sketch Topics

  • Artboard sizing
  • Vector vs raster
  • Images
    • importing by dragging in
    • automatic cropping
    • resize
  • Font manipulation
  • Shape manipulation
  • Icon crafting
  • Nudging numbers by focusing on a field and using the arrow key
  • Performing math calculations in input fields
  • Grouping layers
  • Combining shapes with unify and subtract
  • Artboard duplication to quickly prototype different variations on your app's theme
  • Exporting
    • by dragging a layer to the desktop or Finder
    • by setting up the 1x, 2x, 3x, and SVG variations and sending those to a folder

Thanks to all those who attended. Let us know your thoughts in the comments below.

Notes captured in realtime
by Lynh

sketch- building simple graphics
it's vector.

sketch
insert: choose any shapes
go to inspector to communicate attributes of the layer (rectangle)

you can add pages 
for layer: you can ungroup or separate the layer.

art board:  >> you click on sizes of app art board

page1:
login screen , set up 

mirror-connect to device running sketch mirror 
hold z- to zoom in.
apple watch 42mm 386 x 480 px

****
create artboard
go to background color- plain black
insert type: click on Text.
    72-     typeface:"Avenir"
        Weight: "light"
         Size: 130

    Cupertino
        typeface:avenir
        weight: "light"
        size: 30
        spacing: (character) 1.2
            (Line) 34

    Partly Cloudy
        color: go eyedropper- vertical is better. CECLEAN BLUE 
        spacing: 1.2
    H:81 L:61
        color: gray
        spacing: 1.8
        
go shape: pick oval.
    size: 30x26
    NO fill
    Border color: plain white
    thickness: 6

****
add oval
    no border
    size: 16x16
    edit> duplicate
press shift, right arrow, it will move every 10 pixels
    group: little circles together
    put it in a folder
    
    
///////////////////////////////////////////////////////////////

duplicate artboard
    insert shape: rectangle 
    no border
    add fill: gradient -==> linear 
    opacity: 100%
------------------------------------

building cloud
    pick one oval. then rectangle. - cloud

sunny:
    pick oval. make yellow. 

duplicate cloud and cloud. subtract sun and cloudy.
    sun2
    cloud2
    
=======================================

artboard#3
    drag image inside. it goes behind text.
    sf pic. it crops within art board
    gaussian blur
------
    
    drag art board out of sketch software to desktop. it becomes png
    you can drag as group or individual

CLICK on EXPORTABLE.
1x size 
1x suffix 
PNG format

export icons
    1x, 2x, 3x, 1x, 1.5x