Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Sketchハンズオン超簡単4つのキーで覚えるはじめ方
井上辰徳
March 27, 2017
5
5.8k
Sketchハンズオン超簡単4つのキーで覚えるはじめ方
Sketchは4つのキーを覚えればUIが作れます。
井上辰徳
March 27, 2017
Tweet
Share
More Decks by 井上辰徳
See All by 井上辰徳
そのスキル本当に必要?デザイナーが伸び悩まないためにはじめたこと
inoue_tatsunori
1
630
デザイナーが30年成長し続けるために知っておくべき罠
inoue_tatsunori
8
13k
キャリアリフレクションのすすめ
inoue_tatsunori
6
990
デザイン・マネジメント -経営のためのデザイン-
inoue_tatsunori
4
210
クリエイターのマネジメントとは何か?組織と個人を強くする仕組みづくり
inoue_tatsunori
1
5.7k
デザイナーが伸び悩まないためのスキル27分類
inoue_tatsunori
12
85k
リードデザイナーってどんな人か考えてみた
inoue_tatsunori
10
7.5k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
19
3.1k
A Philosophy of Restraint
colly
192
15k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
Side Projects
sachag
450
37k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
107
16k
Faster Mobile Websites
deanohume
294
28k
4 Signs Your Business is Dying
shpigford
169
20k
Infographics Made Easy
chrislema
233
17k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
12k
Designing Experiences People Love
moore
130
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
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 େΧςΰϦʔ தΧςΰϦʔ
ٙɾ࣭ίʔφʔ