Successfully reported this slideshow.
Your SlideShare is downloading. ×

エンジニアでもできる⁉︎それっぽいデザイン

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 49 Ad

More Related Content

Viewers also liked (19)

Recently uploaded (20)

Advertisement

エンジニアでもできる⁉︎それっぽいデザイン

  1. 1. 2 0 1 4 . 0 9 . 0 3
  2. 2. 突然ですが
  3. 3. デザインなんてもんは やれば誰でもできます
  4. 4. さすがにクオリティを 求めちゃうとなかなか難しいこともあ りますが ちょっとしたことを 気をつけるだけで それっぽく見せることは 可能なんです
  5. 5. 本日は“それっぽく”見せるための デザインのコツをおしえます アプリケーションの使い方とか テクニック云々は無
  6. 6. あ く ま で ” そ れ っ ぽ い ” だ け な の で 付 け 焼 き 刃 に 過 ぎ ま せ ん
  7. 7. よって ちゃんとしたデザイナーからしたら なめんなよ! といわれちゃうかもしれません
  8. 8. 悪 しか らず
  9. 9. ソレっぽく見せるための第1歩
  10. 10. その1 『そろえるのですなにごとも』
  11. 11. まずはこちらをご覧下さい
  12. 12. ガイドラインを引いて 揃えてみましょう
  13. 13. 見えないラインで 揃えることで 若干ですが まとまりができて 美しく見えます
  14. 14. その2 メリハリをつけましょう
  15. 15. メリハリ? メリハリって何?
  16. 16. 簡単に言えば 目立たせるものは大きく どうでもいいもの( 語 弊 あ り ) は 小さくすることですね。
  17. 17. この場合はタイトルとかボタンとかの サイズやウエイトを変更して メリハリをつけました 場合によっては テキスト内でサイズを変えたり 並んだ画像の一部のサイズを変えて アクセントをつけるのも よいですね。
  18. 18.
  19. 19. その3 それっぽい画像を使いましょ
  20. 20. どんなにレイアウトがオシャレでも 画像のクオリティが低ければ それっぽく見えません。
  21. 21. そこらへんにいるデザイナーひろった り お金にものを言わせて素材つかったり タダでつかえるフリーの素材なんかも あるんで 意外とどうにかなるもんです。
  22. 22. 今回はこんな画像にしました
  23. 23. ついでにボタンも変えちゃいました ( P h o t o s h o p 使 い ま す )
  24. 24. ツールのここから四角をつくって
  25. 25. メニューバー> ウィンドウ> 属性
  26. 26. 属性パネルの数値をいぢって
  27. 27. レイヤーウィンドウのここ
  28. 28. 境界線と 光彩(内側)の 数値をいぢると
  29. 29. こんなのができます
  30. 30. その4 色はY字で
  31. 31. 12色相環
  32. 32. 12色相環 オ レ ン ジ が 補 色 に な り ま す ね メ イ ン の カ ラ ー を 青 と す る と
  33. 33. 補色を素直に使うとこんな感じ 悪くはないんだけど…う〜ん
  34. 34. 12色相環のY字バランス そこで 補色の両側の 2色を使います ここがY字になってますね
  35. 35. Y字バランスで配色すると… さっきよりメリハリが出ましたね
  36. 36. その5 余白をデザインする
  37. 37. 余白をデザインといっても 揃えるだけです
  38. 38. それぞれの余白が同じサイズになってますね
  39. 39. これで“それっぽく“なりましたね
  40. 40. まとめます。
  41. 41. それっぽく見せるためのポイントは4つ ( 5 つ あ っ た け ど ま と め る と 4 つ ね ) 一、とにかくそろえる(線はもちろん余白もね) 一、サイズの変化は大胆に 一、素材はなるべく良いものを (ボタンはシェイプとレイヤースタイルで) 一、色の決め手は12色相環のY字バランス
  42. 42. この法則を思い出せば きっと それっぽいデザインが 完成するはずです
  43. 43.

×