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
93
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
330
Sublime Text -html5j Web Platform Vol.3-
gaspanik
4
320
Sketch 3 Basic -'DAI-TOKAI' Okayama-
gaspanik
2
1.6k
Sketch 3 Basic -Osaka-
gaspanik
2
1.4k
Sketch 3 Basic -Hiroshima-
gaspanik
0
140
Sketch 3 Basic at kkmsz
gaspanik
1
280
Sketch 3 Basic at kkmsz -ja-
gaspanik
2
240
OSS Cafe 0411
gaspanik
3
700
Responsive Publishing / WordCamp Tokyo 2011
gaspanik
1
190
Other Decks in Design
See All in Design
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
プロダクトデザインの「守破離」の「破」について
hayashirine
0
320
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
0
100
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
200
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
250
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
260
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
610
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
220
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
180
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
210
aya_murakami_portfolio
ayakaimi1101
0
1.2k
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
590
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Unsuck your backbone
ammeep
669
57k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Agile that works and the tools we love
rasmusluckow
328
21k
A Philosophy of Restraint
colly
203
16k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Statistics for Hackers
jakevdp
797
220k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
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Ͱ࡞ΒΕ͍ͯ·͢ɻ