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.4k
Sketchハンズオン超簡単4つのキーで覚えるはじめ方
Sketchは4つのキーを覚えればUIが作れます。
井上辰徳
March 27, 2017
Tweet
Share
More Decks by 井上辰徳
See All by 井上辰徳
そのスキル本当に必要?デザイナーが伸び悩まないためにはじめたこと
inoue_tatsunori
35
20k
デザイナーが30年成長し続けるために知っておくべき罠
inoue_tatsunori
60
63k
キャリアリフレクションのすすめ
inoue_tatsunori
10
2.2k
デザイン・マネジメント -経営のためのデザイン-
inoue_tatsunori
7
1.1k
クリエイターのマネジメントとは何か?組織と個人を強くする仕組みづくり
inoue_tatsunori
16
14k
デザイナーが伸び悩まないためのスキル27分類
inoue_tatsunori
31
130k
リードデザイナーってどんな人か考えてみた
inoue_tatsunori
12
11k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Embracing the Ebb and Flow
colly
87
4.8k
A Tale of Four Properties
chriscoyier
160
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Cult of Friendly URLs
andyhume
79
6.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Writing Fast Ruby
sferik
628
62k
Thoughts on Productivity
jonyablonski
70
4.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
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 େΧςΰϦʔ தΧςΰϦʔ
ٙɾ࣭ίʔφʔ