ちょっとした手間で、デザインをちょっとよく見せる小ネタのまとめ

よいデザインとは、ちょっとしたことを積み重ねていくことが大切。
Webデザイン、カラー、PhotoshopやIllustratorなどのテクニックを磨く、デザインをちょっとよく見せる小ネタをDribbbleから紹介します。

デザインの小ネタ、まとめました

画像: Girly Drop

複数のカラーから調和のとれたカラーパレットを作成

広範囲のコントラストをもつ複数のカラーから調和のとれたカラーパレットを作成します。

複数のカラーから調和のとれたカラーパレットを作成

Colour Tips

手順は簡単で、絵の具を混ぜるようにそれぞれのカラーをなじませます。

まずは、カラーを用意。

複数のカラーを用意

広範囲のコントラストをもつ複数のカラー

なじませる用に新規レイヤーを上に重ね、べた塗りします。

オーバーレイを用意

右端のブルーから色を拝借し、くすんだブルーでレイヤーを新規作成

不透明度を50%にし、レイヤーモードを変更します。

レイヤーモードを変更

レイヤーモードや不透明度を調整

角丸パネルを重ねる時、それぞれの角丸をバランスよくする

角丸のパネルに角丸のパネルを重ねたデザインで、親と子のカーブを見た目的になんとなくデザインではなく、しっかりとした数値で2つの角丸をデザインすることができます。

角丸パネルを重ねる時、それぞれの角丸をバランスよくする

Pro Tip 3: Proper Border Radius

それぞれの角丸はどのくらいにしていますか? 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。

サイトのキャプチャ

参考: Rounded Corners Done Right

見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。

中心点を揃えてカーブを描く

親と子の中心点を揃える

CSSのborder-radiusで設定する時は、親と子のマージンがそのまま差の値になります。

CSSでの指定

CSSでの指定も簡単

円をよりくっきり見せる

小さい円でもよりくっきり見せます。

円をよりくっきり見せる

Pro Tips 2

内側の円を円でなく、シャープな多角形にすることで、円をよりくっきりみせます。

小さくてもくっきり

小さくてもくっきりした円に

滑らかなベジェ曲線を描く

Illustratorでベジェ曲線を描く時は、グリッドに平行しているハンドルでアンカーポイントを加えてください。

滑らかなベジェ曲線を描く

Pro Tip

エレメントをくっきり美しく

要素を配置する時は、グリッドにぴったり合っていることを確認してください。

エレメントをくっきり美しく

Keep to your pixel

斜めの線を使った小さいアイコンを作るこつ

斜めの線を使った小さいアイコンを作る時は、細いライン(0.5px)をより深いカラーで加えると、よりくっきり見えます。

斜めの線を使った小さいアイコンを作るこつ

Pixel Trick

0.5pxってどうやるんだろうと、PSDがダウンロードできるので見てみたら、下記のようになっていました。

斜めの線を使った小さいアイコンを作るこつ

レイヤーパネルの設定をカスタマイズ

Photoshopでレイヤー効果などを加えた時に、その効果がドロップダウンで表示されないようにします。

レイヤーパネルの設定をカスタマイズ

Pro Tip 4: Layer Styles Panel

レイヤーパネルのオプションで、「新規効果とフィルターを拡張表示」のチェックをはずす。

レイヤーパネルのオプション

レイヤーパネルのオプション

チェックをはずすと、レイヤー1のように折り畳まれた状態になります。

レイヤーパネル

レイヤー1: チェック無し、レイヤー2: チェック有り(デフォルト)

「ベベルとエンボス」より「シャドウ(内側)」がいい場合

ベベルエフェクトには「ベベルとエンボス」を使うより、「シャドウ(内側)」を使うほうがよりシャープに見えます。これは特に、角丸に有効なテクニックです。

ベベルをくっきり見せる

Pro Tip 5: Inner Shadow Instead of Bevel and Emboss

曲線と直線を美しく手描きするこつ

PhotoshopやIllustratorなどのソフトウェアを使うのではなく、手描きで曲線と直線を美しく描くこつ。

曲線と直線を美しく手描きするこつ

Draw Straight Lines & Avoid Shaky Hand Lettering

曲線を描くこつ
曲線は上から描きはじめ、内側に曲がるように描きます。カーブを常に自分の体に引き寄せる感じです。
直線を描くこつ
直線は下から押しあげるように描きます。最初はゆっくりと、少しずつ速度をあげ、体から離す感じに動かします。

top of page

©2017 coliss