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
330
Sketch Basics -Nagoya-
gaspanik
0
90
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
Dinosaur Mayhem
storyartist
0
140
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
230
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
190
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
680
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
210
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
LLMによるRAG評価用合成テストデータの生成
licux
6
660
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Navigating Team Friction
lara
183
15k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Gamification - CAS2011
davidbonilla
80
5.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Practical Orchestrator
shlominoach
186
10k
Six Lessons from altMBA
skipperchong
27
3.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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Ͱ࡞ΒΕ͍ͯ·͢ɻ