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
- Artboard sizing
- Vector vs raster
- importing by dragging in
- automatic cropping
- 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
- 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
sketch- building simple graphics
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
login screen , set up
mirror-connect to device running sketch mirror
hold z- to zoom in.
apple watch 42mm 386 x 480 px
go to background color- plain black
insert type: click on Text.
spacing: (character) 1.2
color: go eyedropper- vertical is better. CECLEAN BLUE
go shape: pick oval.
Border color: plain white
press shift, right arrow, it will move every 10 pixels
group: little circles together
put it in a folder
insert shape: rectangle
add fill: gradient -==> linear
pick one oval. then rectangle. - cloud
pick oval. make yellow.
duplicate cloud and cloud. subtract sun and cloudy.
drag image inside. it goes behind text.
sf pic. it crops within art board
drag art board out of sketch software to desktop. it becomes png
you can drag as group or individual
CLICK on EXPORTABLE.
1x, 2x, 3x, 1x, 1.5x