アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

適切なシャドウの色が分かる「Material Icon Shadow Color Picker」

投稿日:

オブジェクトを立体的に見せたいときに使うシャドウですが、新米デザイナーさんはつい黒ばかり使っていませんか?(私がまさにそうなんですが…。)

シャドウというと黒をイメージしがちですが、実はオブジェクトの色と同系色にすることで、より自然な立体感を演出することができますよ。

とは言っても、適切な色を探すのは難しい…という方のために、今回は様々なカラーにあったシャドウの色を教えてくれる便利なサイトをご紹介します!

 

Material Icon Shadow Color Picker

Material Icon Shadow Color Picker

こちらのサイトでは、左側から選択したカラーに合わせて適切なシャドウの色を表示してくれます。

自分で調べたい色を入力できないのが残念ですが、既存のカラーを見ているだけでも、どのようなシャドウの色が適切なのか分かるのでとても参考になりますよ。

 

また、円の中のアイコンをクリックすると様々な模様に変化させて見ることもできます。

 

まとめ

シンプルなサービスではありますが、シャドウの適切な色ってなかなか分からないと思うので、とても参考になるサイトだと思います。

よかったら活用してみてくださいね。

 

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Illustrator】文字を縦書きにする方法

今回は、イラストレーターで文字を縦書きにする方法をご紹介します。 方法としては2つあるので、どちらか使いやすい方、または状況に応じて使い分けてみてくださいね。   イラストレーターで文字を縦 …

カーンング練習ができるサイト「KernType」

Webデザインにおいて、重要だけどつい見落としがちな文字詰め(カーニング)。 そんなカーニングを体感的に楽しく学べるWebサービス「KernType」をご紹介します。   KernTypeの …

Webデザイナーとして採用されるために、私が作ったポートフォリオの内容をご紹介。

  Webデザイナーの面接には必ずポートフォリオが必要です。     ですが、   ポートフォリオに何を載せたらいいのか分からない… どんな形式で作成すればいいの…?   と悩 …

【Illustrator】印刷データ入稿時に気をつけること

製作会社に入社して早半年…今回初めて紙のデザインを担当させていただくことになりました。 Webでのデザインと違い、後からの修正がきかないものなので緊張感がすごい(ドキドキ)です&#8230 …

超便利!アイコンフォントを一括検索できる「GlyphSearch」のご紹介

Webサイト制作では、出番の多いアイコン。 私は以前まで画像のアイコン素材を使用していましたが、その存在を知ってからはアイコンフォントに頼りっぱなしです まずアイコンフォントについて簡単に説明すると、 …