文字がにじむ！

こんにちは。
初心者がWEBデザイナーを目指し、学んだことを記録していくブログです。

本日はフォトショップで文字がにじむ！について勉強します。
 
 

前回の投稿はこちら↓
 
 
フォントに悩む初心者の話④
 
 
筆者はフルーツ大好きで、お給料の1/5はフルーツにつぎ込んでいるくらい、
 
 
とにかくフルーツをよく食べています。
 
 
最近は国産のパッションフルーツが旬で、スーパーでもよく見かけると思いますが、
 
 
見つけては購入し、完熟を前に完食・・・笑
 
 
ここ数年は完熟のパッションフルーツを食べられていません。
目の前にあると待てません・・・
 
 
仕事で嫌なことがあった夜も、仕事に行きたくないなって思う朝も(笑)
フルーツを食べるとアドレナリンが出るのか、頑張れている気がします。

 
  
 

さて、ECサイトの運営をしていて、あーこのサイトかっこいいな・イケてるなって思うサイトって、
全体のデザインもさることながら、細かいところもイケイケなんだと思いました。
 
 
その中でも、いろんなECサイトのバナーを見ていて、これは意識したらすぐ解決しそう！
というのが、【文字のにじみ】だと思いました。
 
 
こちらの画像をご覧ください。↓
 
  

 
  

 
  

 
  
にじんでいる画像を作りました。
  
フォトショップでは全然にじんでいる感じがしないのに、画像にして、UPすると、にじんでいる・・・何てこと結構あるとおもいます。
  
ここであげてもあんまりにじんでいないような・・という印象を持たれるかもしれませんが、
html・cssを使ってデザインしたものと、画像で張り付けたものを見比べると一目瞭然だったりします。
  
html・cssで作ったものって、対比がきれいに保たれるからなのでしょうが・・
  
そこでにじまないように、うすーく【ドロップシャドウ】を入れてみましょう！
    

  
どうですか？
少し立体的になった気がしませんか？
  
拡大図で見てみるとこんな感じ
    
before
   

   
after

   

うすーく影が入っていますね。
これを入れるともったりして見えていた文字も、
少しくっきりに見えます。
   
ドロップシャドウは、文字の大きさや背景と文字のコントラストにもよりますが、
描写モード：通常
不透明度：10％
距離：1px
スプレッド：1px
サイズ：1px
   
いつも使うレイヤースタイルであれば、スタイル保存しておくと、
作業するときに大変便利です。
   
文字だけとりあえず入力して、ドロップシャドウかけたいものを全選択→スタイルを押す
これで作業時間がかなり短縮に！
   
たまに後でやろーって思いつつ、忘れてしまうことがあるので、忘れずにやりたいものです！