Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sketch Basics -Nagoya-
Search
Masaaki Komori
October 18, 2014
Design
0
70
Sketch Basics -Nagoya-
Sketch 3 勉強会 in NAGOYA + Webデザインと開発の未来 | Grow WS / 2014.10.18
Masaaki Komori
October 18, 2014
Tweet
Share
More Decks by Masaaki Komori
See All by Masaaki Komori
Sublime Text
gaspanik
1
250
Sublime Text -html5j Web Platform Vol.3-
gaspanik
4
310
Sketch 3 Basic -'DAI-TOKAI' Okayama-
gaspanik
2
1.4k
Sketch 3 Basic -Osaka-
gaspanik
2
1.4k
Sketch 3 Basic -Hiroshima-
gaspanik
0
140
Sketch 3 Basic at kkmsz
gaspanik
1
250
Sketch 3 Basic at kkmsz -ja-
gaspanik
2
240
OSS Cafe 0411
gaspanik
3
670
Responsive Publishing / WordCamp Tokyo 2011
gaspanik
1
180
Other Decks in Design
See All in Design
行動変容ワークシート / Behavior Change Worksheet
dmattsun
0
260
デザインシステムで解消するさまざまな分断
hirataaa0220
0
150
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
17
5.3k
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
280
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.2k
Climb Visual Development
rkendrick25
0
100
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
140
DMN2024年度プログラム
mct
0
350
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
280
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
Product-Writing
aguringo
5
2.7k
Lecciones de desarrollo de producto en Get on Board
getonbrd
0
200
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
How to train your dragon (web standard)
notwaldorf
71
5.1k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Product Roadmaps are Hard
iamctodd
43
9.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Fireside Chat
paigeccino
19
2.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Transcript
Sketch 3 Basics Masaaki Komori at Nagoya, October 18 2014
Profile ͜Γ·͖͋͞ લɺͷσβΠϯձࣾʹͯΞϧόΠτΛ։࢝ɻ େֶଔۀޙͦͷ··ਖ਼ࣾһͱͳΓɺೖग़ྗɺσβΠϯۀɺ ωοτϫʔΫؔ࿈ۀʹฒߦͯ͠ैࣄɻʹձࣾΛୀ৬ ͠ϑϦʔϥϯεʹɻҊ݅͝ͱʹۀ༰ཱͪҐஔ͕ҟͳΔ ͨΊɺ৬Ҭతͳݞॻ͖ͳ͠ɻࣥචଟɻ
Agenda • Sketch Fundamentals 4LFUDIͷجૅ • Artboards, Pages, Templates ΞʔτϘʔυɺϖʔδɺςϯϓϨʔτ
• Styles and Symbols ελΠϧͱγϯϘϧ • Using plugins ϓϥάΠϯͷར༻ • Let's try ͰɺͬͯΈ·͠ΐ͏ ˞ຊεϥΠυɺษڧձ༻ͷͷͰ༰ͷଟ͘ޱ಄Ͱઆ໌͍ͯ͠ΔͷͰ͢ɻ
None
Sketch Fundamentals Sketch is built for modern graphic designers. 4LFUDIɺ͍·Ͳ͖ͷάϥϑΟοΫσβΠφʔͷͨΊʹ࡞ΒΕ͍ͯ·͢ɻ
They are already using There is a lot of companies
that are already using Sketch. ΄ΜͷҰѲΓͰ͕͢ɺҎԼͷஶ໊ͳձࣾͰطʹΘΕ͍ͯ·͢ɻ
Artboards Sketch has an in nite canvas. You can draw
any artboards as you like. 4LFUDIʹແݶͷΩϟϯόε͕͋Δ͚ͩͰ͢ɻͦ͜ʹ͕͖ࣗͳΑ͏ʹΞʔτϘʔυΛ࡞Ε·͢ɻ
Pages Supports multiple pages, and any number of artboards per
page. ඪ४ͰϚϧνϖʔδΛαϙʔτ͍ͯ͠·͢ɻϖʔδΛෳ͢Δ͜ͱͪΖΜɺϖʔδຕ͋ͨΓʹΞʔτϘʔυ͕͍ͭ͋ͬͯ͘ߏ͍·ͤΜɻ
Templates Create new le from template. Work better, faster. ςϯϓϨʔτ͔Β৽نϑΝΠϧ͕࡞ΕΔͷͰɺࣄ͘ޮΑ͓͘͜ͳ͑·͢ɻ
Shared Styles and Symbol Sketch has shared styles, text styles
and symbol. It's like Illustrator. 4LFUDIʹɺγΣΞʔυɾελΠϧͱςΩετɾελΠϧɺͦͯ͠γϯϘϧͷػೳ͕͋Γ·͢ɻ·ΔͰ*MMVTUSBUPSͷΑ͏Ͱ͢Ͷɻ
Various export options Sketch has various export options. You can
export slices, layers, artboards and pages. 4LFUDI͞·͟·ͳॻ͖ग़͠Φϓγϣϯ͕͋Γ·͢ɻεϥΠεɺϨΠϠʔɺΞʔτϘʔυɺͦͯ͠ϖʔδɺॻ͖ग़͍ͨ͠ͷΛ͓͖ʹɻͪΖΜɺߴղ૾ͷը૾Ұൃɻ
Plugins Sketch supports plugins. 4LFUDIϓϥάΠϯΛαϙʔτ͍ͯ͠·͢ɻ
How to install Download .zip le or git clone to
Sketch plugin directory. ϓϥάΠϯɺެ։ઌͷαΠτ͔Βμϯϩʔυ͠·͢ɻ[JQϑΝΠϧΛμϯϩʔυ͢Δ͔ɺ(JU)VCͳΒ(JUΛͬͯΫϩʔϯ͢ΔͱΞοϓσʔτΛ͍͔͚ΒΕ·͢ɻ
Sketchpack.in & Sketch Toolbox.app Plugin registory and plugin manager app
has come. ࠷ۙɺϓϥάΠϯϨδετϦͱͯ͠4LFUDIQBDLJO͕ొɻ·ͨ৽ͨʹ4LFUDI5PPMCPYͱ͍͏ϓϥάΠϯϚωʔδϟʔΞϓϦͷ։ൃਐΜͰ͍·͢ɻ
Sketchtool & Sketchflow Export assets with command line tool. ެࣜͷ4LFUDIUPPMΛ͑ɺίϚϯυϥΠϯ͔ΒʮϖʔδʯʮΞʔτϘʔυʯʮεϥΠεʯʮϨΠϠʔʯΛॻ͖ग़ͤ·͢ɻ·ͨɺ4LFUDIqPXͱ͍͏ผͷπʔϧ͋Γ·͢ɻ
Sketch X Framer Framer Studio allows you to import layers
directly from Sketch. 'SBNFS4UVEJPʢ༗ঈʣΛ͏ͱɺ4LFUDIϑΝΠϧΛμΠϨΫτʹಡΈࠐΜͰΠϯλϥΫςΟϒͳϓϩτλΠϓ͕࡞Ε·͢ɻॻ͖ग़͚ͩ͢ͷϓϥάΠϯ(JU)VCʹ
Let's try ͊͞ɺ࣮ࡍʹ͞ΘͬͯΈ·͠ΐ͏
Thank you. This slide made with Sketch 3. ͪΖΜɺ͜ͷεϥΠυ4LFUDIͰ࡞ΒΕ͍ͯ·͢ɻ