ちょっとした手間で、デザインをちょっとよく見せる小ネタのまとめ
Post on:2015年8月31日
sponsors
よいデザインとは、ちょっとしたことを積み重ねていくことが大切。
Webデザイン、カラー、PhotoshopやIllustratorなどのテクニックを磨く、デザインをちょっとよく見せる小ネタをDribbbleから紹介します。
画像: Girly Drop
- 複数のカラーから調和のとれたカラーパレットを作成
- 角丸パネルを重ねる時、それぞれの角丸をバランスよくする
- 円をよりくっきり見せる
- 滑らかなベジェ曲線を描く
- エレメントをくっきり美しく
- 斜めの線を使った小さいアイコンを作るこつ
- レイヤーパネルの設定をカスタマイズ
- 「ベベルとエンボス」より「シャドウ（内側）」がいい場合
- 曲線と直線を美しく手描きするこつ
複数のカラーから調和のとれたカラーパレットを作成
広範囲のコントラストをもつ複数のカラーから調和のとれたカラーパレットを作成します。
手順は簡単で、絵の具を混ぜるようにそれぞれのカラーをなじませます。
まずは、カラーを用意。
広範囲のコントラストをもつ複数のカラー
なじませる用に新規レイヤーを上に重ね、べた塗りします。
右端のブルーから色を拝借し、くすんだブルーでレイヤーを新規作成
不透明度を50%にし、レイヤーモードを変更します。
レイヤーモードや不透明度を調整
角丸パネルを重ねる時、それぞれの角丸をバランスよくする
角丸のパネルに角丸のパネルを重ねたデザインで、親と子のカーブを見た目的になんとなくデザインではなく、しっかりとした数値で2つの角丸をデザインすることができます。
Pro Tip 3: Proper Border Radius
それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。
参考: Rounded Corners Done Right
見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。
親と子の中心点を揃える
CSSのborder-radiusで設定する時は、親と子のマージンがそのまま差の値になります。
CSSでの指定も簡単
円をよりくっきり見せる
小さい円でもよりくっきり見せます。
内側の円を円でなく、シャープな多角形にすることで、円をよりくっきりみせます。
小さくてもくっきりした円に
滑らかなベジェ曲線を描く
Illustratorでベジェ曲線を描く時は、グリッドに平行しているハンドルでアンカーポイントを加えてください。
エレメントをくっきり美しく
要素を配置する時は、グリッドにぴったり合っていることを確認してください。
斜めの線を使った小さいアイコンを作るこつ
斜めの線を使った小さいアイコンを作る時は、細いライン（0.5px）をより深いカラーで加えると、よりくっきり見えます。
0.5pxってどうやるんだろうと、PSDがダウンロードできるので見てみたら、下記のようになっていました。
レイヤーパネルの設定をカスタマイズ
Photoshopでレイヤー効果などを加えた時に、その効果がドロップダウンで表示されないようにします。
レイヤーパネルのオプションで、「新規効果とフィルターを拡張表示」のチェックをはずす。
レイヤーパネルのオプション
チェックをはずすと、レイヤー1のように折り畳まれた状態になります。
レイヤー1: チェック無し、レイヤー2: チェック有り（デフォルト）
「ベベルとエンボス」より「シャドウ（内側）」がいい場合
ベベルエフェクトには「ベベルとエンボス」を使うより、「シャドウ（内側）」を使うほうがよりシャープに見えます。これは特に、角丸に有効なテクニックです。
Pro Tip 5: Inner Shadow Instead of Bevel and Emboss
曲線と直線を美しく手描きするこつ
PhotoshopやIllustratorなどのソフトウェアを使うのではなく、手描きで曲線と直線を美しく描くこつ。
Draw Straight Lines & Avoid Shaky Hand Lettering
- 曲線を描くこつ
- 曲線は上から描きはじめ、内側に曲がるように描きます。カーブを常に自分の体に引き寄せる感じです。
- 直線を描くこつ
- 直線は下から押しあげるように描きます。最初はゆっくりと、少しずつ速度をあげ、体から離す感じに動かします。
sponsors
