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ハンズオン超簡単4つのキーで覚えるはじめ方
Search
井上辰徳
March 27, 2017
6
6.2k
Sketchハンズオン超簡単4つのキーで覚えるはじめ方
Sketchは4つのキーを覚えればUIが作れます。
井上辰徳
March 27, 2017
Tweet
Share
More Decks by 井上辰徳
See All by 井上辰徳
そのスキル本当に必要?デザイナーが伸び悩まないためにはじめたこと
inoue_tatsunori
27
16k
デザイナーが30年成長し続けるために知っておくべき罠
inoue_tatsunori
58
61k
キャリアリフレクションのすすめ
inoue_tatsunori
8
2k
デザイン・マネジメント -経営のためのデザイン-
inoue_tatsunori
6
880
クリエイターのマネジメントとは何か?組織と個人を強くする仕組みづくり
inoue_tatsunori
14
13k
デザイナーが伸び悩まないためのスキル27分類
inoue_tatsunori
28
130k
リードデザイナーってどんな人か考えてみた
inoue_tatsunori
11
11k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Music & Morning Musume
bryan
46
6.2k
Typedesign – Prime Four
hannesfritz
40
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Unsuck your backbone
ammeep
668
57k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Automating Front-end Workflow
addyosmani
1366
200k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
We Have a Design System, Now What?
morganepeng
50
7.2k
Transcript
Sketch Challenge
4ͭͷΩʔͰ͡ΊΔ ΠϯλʔϑΣΠεͷઆ໌ 1 2 3 4 5 6 6 *Λ࡞ͬͯΈΔ
ϚεΫͱάϧʔϓ ॻ͖ग़͠ γϯϘϧͷ֓೦ 7 ͦͷଞ
ΠϯλʔϑΣΠεͷઆ໌ 1
ΞʔτϘʔυ ΦϒδΣΫτ Πϯαʔτ ϨΠϠʔ ϖʔδ ΠϯεϖΫλʔ ϨΠϠʔ ϖʔδ ΠϯεϖΫλʔ
WHERE WHERE WHAT
ʮ ԿΛ࡞Δ͔ ʯ جຊతʹΠϯαʔτʹೖ͍ͬͯΔ
σβΠφʔ ΠϯαʔτΛ։͖·ͤΜ
4ͭͷΩʔͰ͡ΊΔ 2
͜ͷ 4 ͭ ͷγϣʔτΧοτΩʔͰ 6 * ࡞ΕΔ
σόΠεͷը໘Λ࡞Δͱࢥ͍ͬͯͩ͘͞ A r t b o a r d
ӈͷΠϯεϖΫλʔ͕มΘΓ·͢ υϥοάͰϦαΠζ
3FUJOBͷొͰQJYFMͱσόΠεαΠζͷ͕ࠩ J04ϙΠϯτΛݟΔ J1IPOFॳظ ʷ ʷ
ʷ ʷ ʷ 3FUJOB σόΠε ʷ ʷ ʷ ʷ ʷ J1IPOF1MVT Ҏ߱ 3FUJOBొ J1IPOF J1IPOF( J1IPOF(4 J1IPOF J1IPOF4 J1IPOF J1IPOF4& J1IPOF J1IPOFT J1IPOF J1IPOF1MVT J1IPOFT1MVT J1IPOF1MVT ϙΠϯτ
࢛֯ܗͷΦϒδΣΫ τΛ࡞Δ R e c t a n g l
e
ӈͷΠϯεϖΫλʔʹใ͕ೖΓ·͢
ԁܗͷΦϒδΣΫ τΛ࡞Δ O v a l
ςΩετΛೖྗ͢Δ T e x t
ςΩετ༻ͷΠϯεϖΫλʔʹมΘΓ·͢
ΦϒδΣΫ τҐஔ ΦϒδΣΫ ταΠζ ΦϒδΣΫ τͷಁ໌ ໘ͷ৭ ઢͷ৭ γϟυ ଆγϟυ
ϒϥʔޮՌ ͖ స ςΩετ༻ͷΠϯεϖΫλʔʹมΘΓ·͢ ςΩετϘοΫε ϑΥϯτ ৭ɾαΠζ ἧ͑ํ ϘοΫεͷϑ Ο ο τPS ݻఆ จࣈؒͱߦؒͷௐ
ϘλϯΛ࡞ͬͯΈ·͠ΐ͏ ʂ 335ʷ60ͷ࢛͍֯Ϙλϯ4QYͷؙ֯ ৭#4a8a46 Өx:0ɺy:2ɺBlur:0ɺSpread:0 Өͷ৭#3b7635ɺ ෆಁ໌ ʮΞϓϦΛμϯϩʔυʯ ͷϥϕϧ͕ηϯλʔʹೖ͍ͬͯΔ ϥϕϧͷαΠζ16QYɺ
৭#FFFFFF ϑΥϯτώϥΪϊ֯ΰ86 Ϙλϯͷஔॴ্͔Β200px
͜ΜͳϘλϯʹͳΓ·͢
6 * Λ࡞ͬͯΈΔ 3
ຊͷڭࡐ TLFUDI@DIBMMFOHFTLFUDI
ΩʔΛҙࣝͯ͠࡞Γ·͠ΐ͏ʂ ϚʔδϯΛҙࣝͯ͠ ϨΠΞτ͢Δͷ͜ͱ͕ϙΠϯτ ʂ ΦϒδΣΫτΛબͯ͠BMU Λԡ͢ͱϚʔδϯ͕දࣔ͞Ε·͢ alt
ϚεΫͱάϧʔϓ 4
ϨΠϠʔΛཧ͠·͠ΐ͏ ʂ 㵰 G
֊ ֊
ϚεΫΛͬͯΈ·͠ΐ͏ ʂ 㵰 M DPOUSPM
ࣸਅΛૠೖͯ͠ϚεΫΛ͔͚Δ 'JOEFS͔Βυϥοάͯ͠ૠೖ ͭͷϨΠϠʔΛબ͠ ͯ ͍ͭͰʹάϧʔϓʹ͢Δ 㵰 M DPOUSPM
ॻ͖ग़͠ 5
ॻ͖ग़͠ͷഒ ϑΥʔϚο τબ ΞʔτϘʔυͱύʔπʹॻ͖ग़͠ͷઃఆΛ͢Δ ॻ͖ग़͠
υϥοά ԿͳΒυϥοάͰ͍͚Δ υϥοά
·ͱΊͯॻ͖ग़͢ 㵰 E TIJGU
νΣοΫΛೖΕΔͱ·ͱΊͯॻ͖ग़ͤΔ
෦తʹॻ͖ग़͢ S l i c e S
γϯϘϧͷ֓೦ 6
γϯϘϧΛ࡞Δ ϨΠϠʔΛબ͠ ͯ $SFBUF4ZNCPMΛԡ͢ γϯϘϧϨΠϠʔ͕Ͱ͖Δ γϯϘϧʹͨ͠ύʔπ͕ཷ·Δ
γϯϘϧΛ࡞ΔͱͲ͏ͳΔʁ ύʔπΛ࠶ར༻͠ ͯɺ มߋҰׅͰߦ͑·͢ Ϙλϯ Ϙλϯ Ϙλϯ Ϙλϯ
ΠϯεϖΫλʔ͔Βݸผʹมߋ ৭ɺࣸਅͷใݸผʹ࣋ͭ͜ͱ͕Ͱ͖·͢ ϩάΠϯ ߪೖ Ϙλϯ " " " " "
# $ % " # $ %
ཧͷγϯϘϧͷΈํ NAME NAME NAME 定義 色、アイコン、フォント シンボル スタイル シンボルを含む シンボル
パーツ モジュール
ͦͷଞ 7
Φʔτηʔϒʹҙ ͍࣌ؒͬͯΔͱΩϟογϡ͕ཷ·ͬͯ1$ͷ༰ྔΛѹഭ͠·͢
Ϙλϯ " Ϙλϯ " Ϙλϯ # Ϙλϯ " ଞͷϑΝΠϧ͔ΒγϯϘϧͬͯ͘Δͱ૿͑ͯհ Ϙλϯ
" γϯϙϧ ݩ͔Β͋Δ ૿͑Δ
γϯϘϧͷωʔϛϯάنଇॏཁ button Primary େΧςΰϦʔ தΧςΰϦʔ
ٙɾ࣭ίʔφʔ