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 -Osaka-
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Masaaki Komori
June 22, 2014
Design
1.5k
2
Share
Sketch 3 Basic -Osaka-
2014.06.22 ふにセミWS Vol.3 - Sketch3ことはじめ - スライド
Masaaki Komori
June 22, 2014
More Decks by Masaaki Komori
See All by Masaaki Komori
Sublime Text
gaspanik
1
410
Sketch Basics -Nagoya-
gaspanik
0
140
Sublime Text -html5j Web Platform Vol.3-
gaspanik
4
380
Sketch 3 Basic -'DAI-TOKAI' Okayama-
gaspanik
2
1.7k
Sketch 3 Basic -Hiroshima-
gaspanik
0
180
Sketch 3 Basic at kkmsz
gaspanik
1
320
Sketch 3 Basic at kkmsz -ja-
gaspanik
2
280
OSS Cafe 0411
gaspanik
3
740
Responsive Publishing / WordCamp Tokyo 2011
gaspanik
1
220
Other Decks in Design
See All in Design
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
4
1.6k
研修担当者が一番伸びた 熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
garyuten
2
350
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
2
760
Goodpatch Tour💙 / We are hiring!
goodpatch
31
1.1M
hicard_credential_202601
hicard
0
220
タイル紹介サイト「タイルだもんで」
calpin
0
120
爆速開発でAIプロダクトが40万インプレッションになった話
tsubura
0
230
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
350
Figma MCPを活用するためのデザインハンドブック
vivion
7
16k
デザインの文脈を理解する:エンジニアがデザインカンファレンスに参加して得た学びと気づき
hypebeans
0
170
つくり方を変えていく | change-how-we-build
mottox2
2
1.1k
root COMPANY DECK / We are hiring!
root_recruit
2
27k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.8k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Facilitating Awesome Meetings
lara
57
6.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
440
Joys of Absence: A Defence of Solitary Play
codingconduct
1
340
How to Think Like a Performance Engineer
csswizardry
28
2.5k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
310
Transcript
Sketch 3 Basics Masaaki Komori at Osaka, June 22 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Ͱ࡞ΒΕ͍ͯ·͢ɻ