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 -'DAI-TOKAI' Okayama-
Search
Masaaki Komori
July 26, 2014
Design
2
1.6k
Sketch 3 Basic -'DAI-TOKAI' Okayama-
2014.07.26 Sketch勉強会 in 大都会岡山 - スライド
Masaaki Komori
July 26, 2014
Tweet
Share
More Decks by Masaaki Komori
See All by Masaaki Komori
Sublime Text
gaspanik
1
320
Sketch Basics -Nagoya-
gaspanik
0
89
Sublime Text -html5j Web Platform Vol.3-
gaspanik
4
320
Sketch 3 Basic -Osaka-
gaspanik
2
1.4k
Sketch 3 Basic -Hiroshima-
gaspanik
0
140
Sketch 3 Basic at kkmsz
gaspanik
1
270
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
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
230
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
120
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
110
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
LLMによるRAG評価用合成テストデータの生成
licux
6
600
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.8k
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
8.9k
LayerX DesignersDeck
layerx
PRO
0
2.2k
横断組織デザイナーの働き方
mixi_design
PRO
0
320
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
2.9k
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Designing for Performance
lara
604
68k
Practical Orchestrator
shlominoach
186
10k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
6
220
Making Projects Easy
brettharned
116
6k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
270
RailsConf 2023
tenderlove
29
980
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Scaling GitHub
holman
459
140k
Transcript
Sketch 3 Basics Masaaki Komori at 'DAI-TOKAI' Okayama, July 26
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Ͱ࡞ΒΕ͍ͯ·͢ɻ