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
0
160
Sketch 3 Basic -Hiroshima-
2014.06.08
Masaaki Komori
June 08, 2014
Tweet
Share
More Decks by Masaaki Komori
See All by Masaaki Komori
Sublime Text
gaspanik
1
380
Sketch Basics -Nagoya-
gaspanik
0
120
Sublime Text -html5j Web Platform Vol.3-
gaspanik
4
360
Sketch 3 Basic -'DAI-TOKAI' Okayama-
gaspanik
2
1.6k
Sketch 3 Basic -Osaka-
gaspanik
2
1.5k
Sketch 3 Basic at kkmsz
gaspanik
1
300
Sketch 3 Basic at kkmsz -ja-
gaspanik
2
260
OSS Cafe 0411
gaspanik
3
720
Responsive Publishing / WordCamp Tokyo 2011
gaspanik
1
210
Other Decks in Design
See All in Design
Memory Man v3 (WIP)
storybychad
PRO
0
2.7k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
650
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
710
decksh object reference
ajstarks
2
1.3k
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.3k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.1k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
590
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
710
アクセシビリティに取り組むメリット
magi1125
2
270
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Navigating Team Friction
lara
190
15k
The Language of Interfaces
destraynor
162
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
BBQ
matthewcrist
89
9.9k
Documentation Writing (for coders)
carmenintech
75
5.1k
A better future with KSS
kneath
239
18k
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Ͱ࡞ΒΕ͍ͯ·͢ɻ