ブログ

Blog

MarkUP24スタッフブログ。
ちょっと役立つコーディング知識をご紹介します。

ページイメージ

WEBデザイン2016/06/13
画像のフチをひと工夫。3つの簡単&おすすめな方法。

イメージ画像

サイトデザインにおいて1つのポイントとなる、画像の装飾。
シンプルなレイアウトが好まれるようになった流れから、装飾をくわえず、質のいい画像をそのまま使うデザインもよく見られます。
しかしサイトデザインによっては一手間加えたほうがいい場合もあるでしょう。
Photoshopで簡単にできる、画像装飾の方法を3つご紹介します。

 

準備として、作成したい画像サイズの長方形(シェイプ)を作成し、画像をクリッピングマスクします。

 

160620_01

 

 

①まずはこれ、白枠と立体感で写真風に

 

160620_02

 

1.レイヤースタイル『光彩(外側)』で影を設定し、立体感を出します。
カラーは黒、もしくは背景色に合わせた濃く暗い色。
影は強くすると違和感があるので、「はっきりわからない」程度にするのがおすすめです。
『不透明度』は8〜12%、『サイズ』は3〜5px程度で調節します。
どうしてもぼんやりしすぎるように見える場合は『範囲』『スプレッド』を調節してみましょう。
他の項目は0にします。

 

2.レイヤースタイル『境界線』を設定します。
『サイズ』は画像の大きさに合わせて調節します。目安は3〜5px程度。
『位置』は内側に設定します。
写真風にするならカラーは白に。

 

 

②シンプルさも残したいならこれ、半透明枠でスタイリッシュに

 

160620_03

 

レイヤースタイル『光彩(内側)』を設定します。
『サイズ』の目安は3〜5px程度。
『チョーク』を100%に設定してぼやけないようにします。
『不透明度』は30〜45%で調節しましょう。
『ソース』はエッジ、『ノイズ』『適用度』は0にします。

 

 

③女性向けなデザインに合わせるならこれ、紙の質感でガーリーに

 

160620_04

 

1.まずクリッピングマスクしているシェイプ(長方形)レイヤーのの選択範囲をとります。
(『command』キーを押しながら、画像をクリッピングマスクしているシェイプ(長方形)レイヤーのサムネイルをクリック)

 

160620_09

 

2.メニュー『選択範囲』から『選択範囲を変更』→『縮小』で1pxほど縮小します。

 

3.キーボードの『Q』キーをクリックし、クイックマスクモードに切り替えます。
(選択範囲以外がオレンジ色になります)

 

160620_10

 

4.メニュー『フィルター』から『ピクセレート』→『水晶』で『セルの大きさ』を3〜5に設定します。

 

160620_07

 

5.『Q』キーをクリックし、クイックマスクモードを解除します。

 

6.そのままシェイプ(長方形)レイヤーにレイヤーマスクをつけ、切り抜きます。
(シェイプのレイヤーを選択した状態でレイヤーパネル下部にある『クリッピングマスク』をクリック)

 

7.①と同様に光彩(外側)を設定し、立体感を出します。

 

 

画像の装飾を決めるときは、CSSで再現できるかどうか、後日画像の差し替えが発生するかどうかを考慮に入れておきましょう。
ジャンルに合わせた装飾の手法をストックしておくと便利です。
まとめサイトなどで一つのジャンルのサイトを、特に画像の装飾だけに注目して見ていくと、どんなサイトデザインにどんな装飾が合うのかを知ることができます。
「いいな」と思う装飾があったら再現して作成し、ストックを増やしていきましょう。