Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sketchハンズオン超簡単4つのキーで覚えるはじめ方

77f534f55e74ea62def69f25016e2c18?s=47 井上辰徳
March 27, 2017
5.6k

 Sketchハンズオン超簡単4つのキーで覚えるはじめ方

Sketchは4つのキーを覚えればUIが作れます。

77f534f55e74ea62def69f25016e2c18?s=128

井上辰徳

March 27, 2017
Tweet

Transcript

  1. Sketch Challenge

  2. 4ͭͷΩʔͰ͸͡ΊΔ ΠϯλʔϑΣΠεͷઆ໌ 1 2 3 4 5 6 6 *Λ࡞ͬͯΈΔ

    ϚεΫͱάϧʔϓ ॻ͖ग़͠ γϯϘϧͷ֓೦ 7 ͦͷଞ
  3. ΠϯλʔϑΣΠεͷઆ໌ 1

  4. ΞʔτϘʔυ ΦϒδΣΫτ Πϯαʔτ ϨΠϠʔ ϖʔδ ΠϯεϖΫλʔ ϨΠϠʔ ϖʔδ ΠϯεϖΫλʔ

  5. WHERE WHERE WHAT

  6. ʮ ԿΛ࡞Δ͔ ʯ ͸ جຊతʹΠϯαʔτʹೖ͍ͬͯΔ

  7. σβΠφʔ͸ ΠϯαʔτΛ։͖·ͤΜ

  8. 4ͭͷΩʔͰ͸͡ΊΔ 2

  9. ͜ͷ 4 ͭ ͷγϣʔτΧοτΩʔͰ 6 * ͸࡞ΕΔ

  10. σόΠεͷը໘Λ࡞Δͱࢥ͍ͬͯͩ͘͞ A r t b o a r d

  11. ӈͷΠϯεϖΫλʔ͕มΘΓ·͢ υϥοάͰϦαΠζ

  12. 3FUJOBͷొ৔ͰQJYFMͱσόΠεαΠζͷ͕ࠩ J04͸ϙΠϯτΛݟΔ J1IPOFॳظ ʷ      ʷ

    ʷ ʷ ʷ 3FUJOB σόΠε ʷ ʷ ʷ ʷ ʷ J1IPOF1MVT Ҏ߱ 3FUJOBొ৔ J1IPOF J1IPOF( J1IPOF(4 J1IPOF J1IPOF4 J1IPOF J1IPOF4& J1IPOF J1IPOFT J1IPOF J1IPOF1MVT J1IPOFT1MVT J1IPOF1MVT ϙΠϯτ ୺຤
  13. ࢛֯ܗͷΦϒδΣΫ τΛ࡞Δ R e c t a n g l

    e
  14. ӈͷΠϯεϖΫλʔʹ৘ใ͕ೖΓ·͢

  15. ԁܗͷΦϒδΣΫ τΛ࡞Δ O v a l

  16. ςΩετΛೖྗ͢Δ T e x t

  17. ςΩετ༻ͷΠϯεϖΫλʔʹมΘΓ·͢

  18. ΦϒδΣΫ τҐஔ ΦϒδΣΫ ταΠζ ΦϒδΣΫ τͷಁ໌౓ ໘ͷ৭ ઢͷ৭ γϟυ΢ ಺ଆγϟυ΢

    ϒϥʔޮՌ ܏͖ ൓స ςΩετ༻ͷΠϯεϖΫλʔʹมΘΓ·͢ ςΩετϘοΫε ϑΥϯτ ৭ɾαΠζ ἧ͑ํ ϘοΫεͷϑ Ο ο τPS ݻఆ จࣈؒͱߦؒͷௐ੔
  19. ϘλϯΛ࡞ͬͯΈ·͠ΐ͏ ʂ 335ʷ60ͷ࢛͍֯Ϙλϯ4QYͷؙ֯ ৭͸#4a8a46 Өx:0ɺy:2ɺBlur:0ɺSpread:0 Өͷ৭͸#3b7635ɺ ෆಁ໌ ʮΞϓϦΛμ΢ϯϩʔυʯ ͷϥϕϧ͕ηϯλʔʹೖ͍ͬͯΔ ϥϕϧͷαΠζ͸16QYɺ

    ৭͸#FFFFFF ϑΥϯτ͸ώϥΪϊ֯ΰ86 Ϙλϯͷ഑ஔ৔ॴ͸্͔Β200px
  20. ͜ΜͳϘλϯʹͳΓ·͢

  21. 6 * Λ࡞ͬͯΈΔ 3

  22. ຊ೔ͷڭࡐ TLFUDI@DIBMMFOHFTLFUDI

  23. ΩʔΛҙࣝͯ͠࡞Γ·͠ΐ͏ʂ ϚʔδϯΛҙࣝͯ͠ ϨΠΞ΢τ͢Δͷ͜ͱ͕ϙΠϯτ ʂ ΦϒδΣΫτΛબ୒ͯ͠BMU Λԡ͢ͱϚʔδϯ͕දࣔ͞Ε·͢ alt

  24. ϚεΫͱάϧʔϓ 4

  25. ϨΠϠʔΛ੔ཧ͠·͠ΐ͏ ʂ 㵰 G

  26.  ֊૚  ֊૚

  27. ϚεΫΛ࢖ͬͯΈ·͠ΐ͏ ʂ 㵰 M DPOUSPM

  28. ࣸਅΛૠೖͯ͠ϚεΫΛ͔͚Δ 'JOEFS͔Βυϥοάͯ͠ૠೖ ͭͷϨΠϠʔΛબ୒͠ ͯ ͍ͭͰʹάϧʔϓʹ͢Δ 㵰 M DPOUSPM

  29. ॻ͖ग़͠ 5

  30. ॻ͖ग़͠ͷഒ཰ ϑΥʔϚο τબ୒ ΞʔτϘʔυͱύʔπʹॻ͖ग़͠ͷઃఆΛ͢Δ ॻ͖ग़͠

  31. υϥοά ԿͳΒυϥοάͰ΋͍͚Δ υϥοά

  32. ·ͱΊͯॻ͖ग़͢ 㵰 E TIJGU

  33. νΣοΫΛೖΕΔͱ·ͱΊͯॻ͖ग़ͤΔ

  34. ෦෼తʹॻ͖ग़͢ S l i c e S

  35. γϯϘϧͷ֓೦ 6

  36. γϯϘϧΛ࡞Δ ϨΠϠʔΛબ୒͠ ͯ $SFBUF4ZNCPMΛԡ͢ γϯϘϧϨΠϠʔ͕Ͱ͖Δ γϯϘϧʹͨ͠ύʔπ͕ཷ·Δ

  37. γϯϘϧΛ࡞ΔͱͲ͏ͳΔʁ ύʔπΛ࠶ར༻͠ ͯɺ มߋ΋ҰׅͰߦ͑·͢ Ϙλϯ Ϙλϯ Ϙλϯ Ϙλϯ

  38. ΠϯεϖΫλʔ͔Βݸผʹมߋ ৭ɺࣸਅͷ৘ใ͸ݸผʹ࣋ͭ͜ͱ͕Ͱ͖·͢ ϩάΠϯ ߪೖ Ϙλϯ " " " " "

    # $ % " # $ %
  39. ཧ૝ͷγϯϘϧͷ૊Έํ NAME NAME NAME 定義 色、アイコン、フォント シンボル スタイル シンボルを含む シンボル

    パーツ モジュール
  40. ͦͷଞ 7

  41. Φʔτηʔϒʹ஫ҙ ௕࣌ؒ࢖͍ͬͯΔͱΩϟογϡ͕ཷ·ͬͯ1$ͷ༰ྔΛѹഭ͠·͢

  42. Ϙλϯ " Ϙλϯ " Ϙλϯ # Ϙλϯ " ଞͷϑΝΠϧ͔ΒγϯϘϧ΋ͬͯ͘Δͱ૿͑ͯ໽հ Ϙλϯ

    " γϯϙϧ ݩ͔Β͋Δ ૿͑Δ
  43. γϯϘϧͷωʔϛϯάنଇ΋ॏཁ button Primary େΧςΰϦʔ தΧςΰϦʔ

  44. ٙ໰ɾ࣭໰ίʔφʔ