0

モノクロにして色を強調する方法

 

ホームページを制作するときのデザインについて、
目立たせたい箇所をカラーにし、他の箇所をモノクロにすることで
そこのカラー部分が強調される法則について説明します。

 

モノクロにして色を強調する方法

●モノクロ画像の特徴について
モノクロの画像は彩度よりも明度で表現する分、カラーよりも
情報量が少なく、やや抽象的な印象になります。
モノクロの一般的な特徴としては
時代感を出したり、まるで時が止まっているような感覚を
見る人に与えます。
また、被写体によっては知的で芸術的な印象を与えます。

 

●一部分のみカラーを残して、モノクロにする
色を強調するうちの一つとして、一部分のみカラーを残し
ほかをモノクロに加工することで、カラー部分が浮き上がり
ドラマチックな印象になります。

 

色を多く使用すると、悪い言い方ではありますが雑な印象に見えることがあります。
そういったときに、上記の方法を行うことで印象が落ち着き、
文字や素材が配置しやすくなります。

ホームページ制作をしていく中で、配置について悩んだりした際は
この方法もぜひ、視野に入れてみてください。

0

描画をパスにするか ビットマップにするか

 

このような吹き出しをつくる時にどんな手順がふさわしいでしょうか。
光が左上に丸くかかっているので、
直線のグラデーションツールでは塗れません。
下の階層の矩形をマットな青にしておいて、
もう1レイヤー上から重ねるようにエアブラシで描くことにしました。

上が完成例、下はギザギザしている失敗例です。

path

 

両者の違いは上はパスで描いたこと、
下は選択ツールで楕円形を選択し、中を塗って吹き出しにしたことです。

まず、楕円形ツールで楕円形を作ります。

 

名称未設定-3

 

次に、ペンツールに持ち替え、シェイプを選びます。塗りを青にします。

?名称未設定-2

しっぽを描いて用意します。角度を切り替える時はALTを押しながらするとできます。

名称未設定-4

 

二つを選んでから、レイヤー→シェイプを結合、で合体します。

名称未設定-5

 

効果レイヤーでドロップシャドウをかけ、境界線の外側【または光彩(外側)サイズを9px、スプレッド77%】にすると完成です。

ラスタライズをすると、ペイントのように矩形を塗れるので、扱いの自由さが好きですが

このようなきちんとしたカタチをかく時は、単純な選択範囲ではダメで、きちんと描かねば…と学びました。

0

ドロップシャドウの法則

itaku_03

これはあるホームページの一部なのですが、いくつの影が使われているでしょうか

 

矢印の所など、ホームページの中にたくさんありますね。

itaku_04

 

 

左からです。厚みのあるシールに見せる光です。

下のはがれているところは下に少し広く、ふんわりした影にします。

メールアイコンの影は、シールの影と少し役割が異なります。下地のオレンジから視認性を高めるために、濃い色を「光彩」で2pxくらいかけました。

ホームページ制作における視認性について書いてある投稿へ

不自然にならないよう、オレンジ系の光彩にするのがポイントです。

 

ホームページで読ませたい赤い電話番号の光。これは、レタープレスエフェクト風に制作しました。

スマホの方はタッチでコールの噴出しの影、これは他の箇所が上から光が当たっているので、「べベルとエンボス」はもちろん下にかけます。

影の方向が、バナー内でこっちの文字は上から、こっちの文字は下から、あるいは横から…とバラバラにならないように。さらに、ホームページ内でも、方向は統一した方がいいです。

最後に、このプレート自体の下側にもさりげなく、影が付いています。

プレートも、真ん中の方が少し薄い色になっていて、金属みたいな質感にしています。

影を繊細に付けてホームページ制作をすると、品質が良く見えます。