Sketch Basics -Nagoya-

Sketch 3 勉強会 in NAGOYA + Webデザインと開発の未来 | Grow WS / 2014.10.18

Transcript

1. Sketch 3 Basics Masaaki Komori at Nagoya, October 18 2014
2. Profile ͜΋Γ·͖͋͞ ೥୅લ൒ɺ౎಺ͷσβΠϯձࣾʹͯΞϧόΠτΛ։࢝ɻ େֶଔۀޙͦͷ··ਖ਼ࣾһͱͳΓɺೖग़ྗɺσβΠϯۀ຿ɺ ωοτϫʔΫؔ࿈ۀ຿ʹฒߦͯ͠ैࣄɻ೥ʹձࣾΛୀ৬ ͠ϑϦʔϥϯεʹɻҊ݅͝ͱʹۀ຿಺༰΍ཱͪҐஔ͕ҟͳΔ ͨΊɺ৬Ҭతͳݞॻ͖͸ͳ͠ɻࣥචଟ਺ɻ
3. Agenda • Sketch Fundamentals 4LFUDIͷجૅ • Artboards, Pages, Templates ΞʔτϘʔυɺϖʔδɺςϯϓϨʔτ • Styles and Symbols ελΠϧͱγϯϘϧ • Using plugins ϓϥάΠϯͷར༻ • Let's try Ͱ͸ɺ΍ͬͯΈ·͠ΐ͏ ˞ຊεϥΠυ͸ɺษڧձ༻ͷ΋ͷͰ಺༰ͷଟ͘͸ޱ಄Ͱઆ໌͍ͯ͠Δ΋ͷͰ͢ɻ
5. Sketch Fundamentals Sketch is built for modern graphic designers. 4LFUDI͸ɺ͍·Ͳ͖ͷάϥϑΟοΫσβΠφʔͷͨΊʹ࡞ΒΕ͍ͯ·͢ɻ
6. They are already using There is a lot of companies that are already using Sketch. ΄ΜͷҰѲΓͰ͕͢ɺҎԼͷஶ໊ͳձࣾͰطʹ࢖ΘΕ͍ͯ·͢ɻ
7. Artboards Sketch has an in nite canvas. You can draw any artboards as you like. 4LFUDIʹ͸ແݶͷΩϟϯόε͕͋Δ͚ͩͰ͢ɻͦ͜ʹࣗ෼͕޷͖ͳΑ͏ʹΞʔτϘʔυΛ࡞Ε·͢ɻ
8. Pages Supports multiple pages, and any number of artboards per page. ඪ४ͰϚϧνϖʔδΛαϙʔτ͍ͯ͠·͢ɻϖʔδΛෳ੡͢Δ͜ͱ͸΋ͪΖΜɺϖʔδຕ͋ͨΓʹΞʔτϘʔυ͕͍ͭ͋ͬͯ͘΋ߏ͍·ͤΜɻ
9. Templates Create new le from template. Work better, faster. ςϯϓϨʔτ͔Β৽نϑΝΠϧ͕࡞ΕΔͷͰɺ࢓ࣄ͸଎͘ޮ཰Α͓͘͜ͳ͑·͢ɻ
10. Shared Styles and Symbol Sketch has shared styles, text styles and symbol. It's like Illustrator. 4LFUDIʹ͸ɺγΣΞʔυɾελΠϧͱςΩετɾελΠϧɺͦͯ͠γϯϘϧͷػೳ͕͋Γ·͢ɻ·ΔͰ*MMVTUSBUPSͷΑ͏Ͱ͢Ͷɻ
11. Various export options Sketch has various export options. You can export slices, layers, artboards and pages. 4LFUDI͸͞·͟·ͳॻ͖ग़͠Φϓγϣϯ͕͋Γ·͢ɻεϥΠεɺϨΠϠʔɺΞʔτϘʔυɺͦͯ͠ϖʔδɺॻ͖ग़͍ͨ͠΋ͷΛ͓޷͖ʹɻ΋ͪΖΜɺߴղ૾౓ͷը૾΋Ұൃɻ
12. Plugins Sketch supports plugins. 4LFUDI͸ϓϥάΠϯΛαϙʔτ͍ͯ͠·͢ɻ
13. How to install Download .zip le or git clone to Sketch plugin directory. ϓϥάΠϯ͸ɺެ։ઌͷαΠτ͔Βμ΢ϯϩʔυ͠·͢ɻ[JQϑΝΠϧΛμ΢ϯϩʔυ͢Δ͔ɺ(JU)VCͳΒ(JUΛ࢖ͬͯ௚઀Ϋϩʔϯ͢ΔͱΞοϓσʔτΛ௥͍͔͚ΒΕ·͢ɻ
14. Sketchpack.in & Sketch Toolbox.app Plugin registory and plugin manager app has come. ࠷ۙɺϓϥάΠϯϨδετϦͱͯ͠4LFUDIQBDLJO͕ొ৔ɻ·ͨ৽ͨʹ4LFUDI
    5PPMCPYͱ͍͏ϓϥάΠϯϚωʔδϟʔΞϓϦͷ։ൃ΋ਐΜͰ͍·͢ɻ
15. Sketchtool & Sketchflow Export assets with command line tool. ެࣜͷ4LFUDIUPPMΛ࢖͑͹ɺίϚϯυϥΠϯ͔ΒʮϖʔδʯʮΞʔτϘʔυʯʮεϥΠεʯʮϨΠϠʔʯΛॻ͖ग़ͤ·͢ɻ·ͨɺ4LFUDIqPXͱ͍͏ผͷπʔϧ΋͋Γ·͢ɻ
16. Sketch X Framer Framer Studio allows you to import layers directly from Sketch. 'SBNFS
    4UVEJPʢ༗ঈʣΛ࢖͏ͱɺ4LFUDIϑΝΠϧΛμΠϨΫτʹಡΈࠐΜͰΠϯλϥΫςΟϒͳϓϩτλΠϓ͕࡞Ε·͢ɻॻ͖ग़͚ͩ͢ͷϓϥάΠϯ͸(JU)VCʹ
17. Let's try ͊͞ɺ࣮ࡍʹ͞ΘͬͯΈ·͠ΐ͏
18. Thank you. This slide made with Sketch 3. ΋ͪΖΜɺ͜ͷεϥΠυ΋4LFUDI
    Ͱ࡞ΒΕ͍ͯ·͢ɻ