1pxの線でクオリティーを高める

寒くなったのでそろそろ冬眠したいatsushiです。:hamster_7:

つい最近ウイイレやりたさにPS3を買いました。ウイイレはもちろんオンライン対戦しまっくてますが、グラフィックがすごいキレイですね。選手の顔などもリアルに描かれてます。:cat_5:

そんな感じで、ホームページの素材もキレイで、クオリティーの高いものに仕上げたいと日々研究しています。:kaoemoji3:

クオリティーの高いものをつくるには、やはり時間とコストがかかるものですが、時間をかけず、ちょっとした工夫だけでもクオリティーを高めることができます。:hoshi1:

それが「1pxの線」なんです。:maruhi:

実際に例を紹介します。

1.まずは、単純にグラデーションだけの塗りを用意します。

2.次に下にアクセントとして使っているカラーの濃いめの色を高さ2pxを塗ります。

3.次に上端に使っているカラーの薄めの色を1px内側に高さ1pxで塗ります。

たったこれだけでも質感がまして、ただのグラデーションよりも作りこんだ感じが表現できます。
さらに縦にボタンの境界線を引くとナビゲーションに最適な素材が完成します。

意外とちょっとしたところにクオリティーの差があるもんなんですね。:kaomoji7:

:kaomoji6: ブログランキングの投票をお願いしたします!
:onegai: 人気ブログランキングへ

  :yubileft:

トラックバックURL