ウェブデザインにアクセントを加える画像加工のテクニック7選 | ITキヲスク

レイアウトもばっちり、配色構成もＯＫ、いざガシガシとデザインを組んで行ってはみたものの、何か物足りない。。。

そんなまとまりすぎたデザインに、ピリッと印象的なアクセントを加える7つのテクニックをお届けしちゃいます！

どれもカンタン、ひと手間ちょいと加えるだけでデザインが引き締まるコト間違いなし!?

そんなこんなで今回のエントリーは、いまいちインパクトの足りないウェブデザインにアクセントを与えるテクニックをご紹介してまうでー。

ウェブデザインにアクセントを加える画像加工のテクニック

1.1pxのドロップシャドウ

これは文字と背景色の兼ね合いが少し悪い（視認性があまり良くない）場合に文字を少し目立たせたり、単純に文字にパキッとした印象を付加したりしたい場合に使えるテクニックです。

ポイントは「はっきりとした色差で、くっきりと1px」って感じで、Photoshopならドロップシャドウで「距離1、スプレッド100％、サイズ0」って設定がオススメですね。

比較的小さな文字にでも使えるので、いろんな場面で活用できるネタですよ。

2.濃色と淡色の2pxの区切り線

これは区切り線だけじゃなく、ボックスのボーダーなんかにも使いまわせるテクニックです。

印象的には上記1.と同じく、パキッとカチッとしたアクセントになりますね。

さらにコレの両端をぼかしつつフェードアウトさせたりなんかしちゃっても、なかなかにオシャレです。

3.ボックスの下部両端に影を付ける

ただ単純にドロップシャドウするんじゃなく、そこにひと手間加えるだけで愕然と印象が変わるってゆー好例のひとつです。

これはPhotoshopで実現させる場合、影を付けたい部分を複製してから「塗りの不透明度0％」にして、適当なドロップシャドウを加えてから「スマートオブジェクトに変換 → レイヤーをラスタライズ」にして、範囲選択ツールで楕円形を選び、複製した影の真ん中辺り、具合い良い感じのトコを選んでDeleteすればOK。

文章で書くとメンドクサイですが慣れれば数十秒で出来る工程ですので、まずは恐れずチャレンジ！

4.ボックスの下部片側に影を付ける

これも上記3.と同じく、ひと手間加えたドロップシャドウのテクニックになります。

工程は先ほどの3.とほぼ同じで、3.の作業後に両端の影の片側をDeleteするだけ。

これはサイドメニュー部分やちょっとしたボタンなんかにも応用の効く、オールラウンドなエフェクトですよ。

5.ボックスの四辺の片隅を折り曲げる

比較的古くからある表現方法ですが、これもまだまだ全然現役で使えます。

多用するとしつこくなっちゃうので、どこかでワンポイント的に使うのが一番効果的な利用方法ですね。

視覚的にもはっきりとしたインパクトになるので、理路整然とシンプル過ぎるレイアウトデザインなんかに当て込むのもアリアリです。

6.端からはみ出して折り曲げる

これは結構最近流行りのテクニックの一つです。

かなりいろんなトコで使えるのですが、あまりに無茶な使い方をしちゃうと、いざCSSコーディングって時に痛い目に逢いますｗ

それさえ踏まえて使用すれば、幅広く使える上に結構多用しても収まりが良いので、めちゃめちゃ便利なネタとして扱えますよー。

7.端から斜めの帯を入れる

これは視覚的インパクトが強いので、上記5.と同じく一発ネタ的なテクニックになるかと思います。

目立たせたい部分、イチオシのコンテンツ、最新記事など、ここぞって時に使えば高い効果が望めるんじゃないかと。

どうせなら左図のように強い色味でガツンとアクセントにしたいところです。