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 3 Basic -Hiroshima-
Search
Masaaki Komori
June 08, 2014
Design
210
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Sketch 3 Basic -Hiroshima-
2014.06.08
Masaaki Komori
June 08, 2014
More Decks by Masaaki Komori
See All by Masaaki Komori
Sublime Text
gaspanik
1
420
Sketch Basics -Nagoya-
gaspanik
0
150
Sublime Text -html5j Web Platform Vol.3-
gaspanik
4
400
Sketch 3 Basic -'DAI-TOKAI' Okayama-
gaspanik
2
1.7k
Sketch 3 Basic -Osaka-
gaspanik
2
1.5k
Sketch 3 Basic at kkmsz
gaspanik
1
340
Sketch 3 Basic at kkmsz -ja-
gaspanik
2
300
OSS Cafe 0411
gaspanik
3
760
Responsive Publishing / WordCamp Tokyo 2011
gaspanik
1
230
Other Decks in Design
See All in Design
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
3
610
Basket_of_love.pdf
terencebasart
0
280
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
abokadotyann
4
1.1k
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
9
5.7k
デザインツールを開く前に その画面は誰に何と言わせたい?受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
garyuten
1
190
TOPOSTOPOS
shoheyey
0
160
Warner Bros. Discovery 2025 Box Office Booklet
samb1rd
0
120
【CEDEC2026】派手さと見やすさは両立できる!『Shadowverse: Worlds Beyond』エフェクト・3D背景の超進化したビジュアル設計
cygames
PRO
1
1.7k
富山デザイン勉強会_デザイン思考.pdf
keita_yoshikawa
3
130
PLATEAUで白い街を作る
aikautau
0
170
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
dmattsun
2
380
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
ayumidesign
0
210
Featured
See All Featured
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
810
WCS-LA-2024
lcolladotor
0
820
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
1
390
Typedesign – Prime Four
hannesfritz
42
3.2k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
490
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
KATA
mclloyd
PRO
35
15k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Transcript
Sketch 3 Basics Masaaki Komori at Hiroshima, June 8 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 les with command-line that called 'Sketchtool'. 4LFUDI͞·͟·ͳॻ͖ग़͠Φϓγϣϯ͕͋Γ·͢ɻ4LFUDIUPPMΛ͑ɺίϚϯυϥΠϯ͔Βॻ͖ग़ͤ·͢ɻ
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ͱ͍͏ϓϥάΠϯϚωʔδϟʔΞϓϦͷ։ൃਐΜͰ͍·͢ɻ
Let's try ͊͞ɺ࣮ࡍʹ͞ΘͬͯΈ·͠ΐ͏
Thank you. This slide made with Sketch 3. ͪΖΜɺ͜ͷεϥΠυ4LFUDIͰ࡞ΒΕ͍ͯ·͢ɻ