PhotoshopPhotoshopやCSSでアナログ風にデザインするPhotoshopやCSSを使って、アナログ風にデザインする方法を紹介します。今回は、かすれた感じに加工してアナログテイストに仕上げるようにしていきます。Photoshopでアナログ風に作るまずは、Photoshopを使ってかすれを表現したアナログテイストのデザインをします。テキストを配置カンバスに適当に文字を配置します。選択範囲を作成する次にテキストの選択範囲を作成します。文字レイヤーを「Ctrl+クリック」で作成したら、新規レイヤーを文字レイヤーの上に作成します。すれを作るブラシツールを使ってかすれた感じを表現していきます。ブラシツールで「スポンジ」を選び、選択範囲を作成した状態で塗りつぶしていきます。CSSでアナログテイストのデザインアナログテイストのテクスチャさえあれば、画像として文字などのパーツを書き出して用意しなくても、CSSだけでデザインしていくこともできます。テキストをアナログ風にする例えば、見出しをデザインするのにテキストをアナログ風にしたいときも、画像にしなくてもテキストベースでデザインすることができます。transparent;}この場合では、h1タグに背景画像でテクスチャを敷いて、文字色を透明にしてテキストの形で背景画像をくり抜くようにしています。簡単なサンプルページも用意してあるので、FirefoxやChromeで確認することはできます。IEでは単色の文字で表示されると思います。DEMO対応しているブラウザが限られているので使い方は限定されてしまいますが、一応CSSでもそれなりにデザインすることができます。