画像の上にテキストを載せたい方へ

こんばんは。

晩ご飯がコンビニのゆでたまごと納豆まきのみだったため若干元気がありませんが、今回は画像の上にテキストを載せる際視認性をあげる簡単な方法を書きます。

まずはただテキストを中央配置しただけの画像。

この写真は美大在学中に学食で友達がトイレから戻ってくるのを待っている時、暇つぶしに撮った1枚です。

美大生が個性的だからか、ただ単に生物が密集しているからか、はたまた選んだフォント自体が視認性が悪いのか...(あるある)

こんな時は、ブラシツールを用いて思いっきりテキストの背景をこのように塗りつぶしてみましょう。

固さは0%が背景になじみやすいので良いでしょう。

「これはいくらなんでも雑過ぎんだろ」

という声が聞こえてきますが、このまま終わる訳ではなく不透明度をおおよそ12~20%に変更しましょう。

こんな感じで。すると、

見えやすくなりましたね。

これは、写真になるべく影響を及ぼさない形で視認性をあげたい時に使います。

よくフォント自体にドロップシャドウをあてがう方がいますが、なんとなく色の密度の関係なのかこの方法の方が見栄え良い気がするのでおすすめです。

といいつつ、

「パワポじゃこの技つかえないよ！」

「もっと視認性あげたい！」

という方がいらっしゃると思うので、そういう方は

写真とテキストの間のレイヤーに1枚透明度20%くらいの黒い長方形を重ねてみてください。

こんな感じになります。

これも割と使います。

更に、

「なんかオシャ感がほしい」

という方は

黒でもなく白でもなく灰色の長方形レイヤーを挟んでみてください。

おレトロな感じになりますね。

あと最近よく見るのは、濃紺のレイヤーとか。

個人的には好きです。

最後に割と力技ですが、ぼかし(ガウス)を使う方法があります。

うん。

こんな感じでいじった写真をサイトのトップに配置しておけば、っぽいデザインになること間違いなし。

でも...

「いっつも小出しにするからデザインの全体感がイマイチわからんちん...」

そうですよね。

と、いうことでこれまで扱って来たデザイン方法を総導入したサイトを試しに制作してみました。

はてなぶろぐの画像掲載の問題上footerまでの長い画像にすると一気に画質が落ちるので中途半端なところで切れてしまいましたが、こんな感じのものができたりできなかったりすると思います。

あとはよしなに。

おしまい。