文字がにじむ！
こんにちは。
初心者がWEBデザイナーを目指し、学んだことを記録していくブログです。
本日はフォトショップで文字がにじむ！について勉強します。
前回の投稿はこちら↓
フォントに悩む初心者の話④
筆者はフルーツ大好きで、お給料の1/5はフルーツにつぎ込んでいるくらい、
とにかくフルーツをよく食べています。
最近は国産のパッションフルーツが旬で、スーパーでもよく見かけると思いますが、
見つけては購入し、完熟を前に完食・・・笑
ここ数年は完熟のパッションフルーツを食べられていません。
目の前にあると待てません・・・
仕事で嫌なことがあった夜も、仕事に行きたくないなって思う朝も(笑)
フルーツを食べるとアドレナリンが出るのか、頑張れている気がします。
さて、ECサイトの運営をしていて、あーこのサイトかっこいいな・イケてるなって思うサイトって、
全体のデザインもさることながら、細かいところもイケイケなんだと思いました。
その中でも、いろんなECサイトのバナーを見ていて、これは意識したらすぐ解決しそう！
というのが、【文字のにじみ】だと思いました。
こちらの画像をご覧ください。↓
にじんでいる画像を作りました。
フォトショップでは全然にじんでいる感じがしないのに、画像にして、UPすると、にじんでいる・・・何てこと結構あるとおもいます。
ここであげてもあんまりにじんでいないような・・という印象を持たれるかもしれませんが、
html・cssを使ってデザインしたものと、画像で張り付けたものを見比べると一目瞭然だったりします。
html・cssで作ったものって、対比がきれいに保たれるからなのでしょうが・・
そこでにじまないように、うすーく【ドロップシャドウ】を入れてみましょう！
どうですか？
少し立体的になった気がしませんか？
拡大図で見てみるとこんな感じ
before
after
うすーく影が入っていますね。
これを入れるともったりして見えていた文字も、
少しくっきりに見えます。
ドロップシャドウは、文字の大きさや背景と文字のコントラストにもよりますが、
描写モード：通常
不透明度：10％
距離：1px
スプレッド：1px
サイズ：1px
いつも使うレイヤースタイルであれば、スタイル保存しておくと、
作業するときに大変便利です。
文字だけとりあえず入力して、ドロップシャドウかけたいものを全選択→スタイルを押す
これで作業時間がかなり短縮に！
たまに後でやろーって思いつつ、忘れてしまうことがあるので、忘れずにやりたいものです！
