文字タイポグラフィを3ソフトで比べてみる1/3

SaCSS Vol.21で話しました、文字の加工を3ソフトで作った場合、どのような違いがあるのか、をまとめました。作成の元となる画像は、コリスさん経由から海外のサイトで紹介されている内容を使わせて頂いてます。 ・コリス→http://coliss.com/ ・Metal Text Under 12 O’clock Spot Light→http://www.psawesome.com/tutorials/metal-text-under-12-oclock-spot-ligh

Photoshop

1 カンバスサイズ600px×900px、解像度300dpiの新規ファイルを作成します。 2 文字を書きます。フォントはCaviarDreams_Boldを大きさ36px、色は白で文字は任意です。 文字を書いたら背景レイヤーとリンクさせ、中央に配置しましょう。配置したらリンクを解除します。 3 文字の中身を作ります。新規レイヤーを90%の灰色で塗りつぶし、メニューバーのフィルター>描画>逆光を選び、明るさ125%をかけます。このレイヤーが上にあり、文字がしたにある状態で、レイヤー>クリッピングマスクを作成で文字の形にクリップします。 逆光をテキストでくり抜いた画像 4 文字に対して立体感を出します。まずはドロップシャドウをかけます。レイヤースタイルからドロップシャドウ、乗算75%、角度90度、距離2px、サイズ8pxに設定します。 5 次はベベル(内側)です。同じくレイヤースタイルからベベルとエンボス、深さ100%、サイズ0px、角度90度、高度65に設定します。 ベベルとドロップシャドウを適用した画像 6 背景を作ります。背景レイヤーを描画色#332222で塗りつぶし、メニューバーのフィルター>描画>逆光を選び、明るさ100%をかけます。その後、メニューバーからフィルタ>ぼかし(ガウス)で45px、同じくメニューバーからイメージ>色調補正>明るさ・コントラストの明るさを20下げます。 7 文字の後ろにある影を作ります。テキストレイヤーのクリックして文字の選択範囲を取り、新規レイヤーに色を黒で塗りつぶします。 メニューバーのイメージ>カンバスサイズでカンバスの高さを下に合わせ1600pxにします。 メニューバーのウィンドウ>アクションから新規アクションを作成、記録開始ボタンを押します。 先ほど文字を塗りつぶしたウインドウを選択してメニューバーからレイヤー>レイヤーを複製、さらにメニューバーから編集>自由変形を選び、移動ツールのオプションバーからバウンティングボックスを表示させ、文字の中心をSHIFTを押しながらドラッグしそのままに一番上へ移動します。 オプションバーの高さと幅を100.2%にします。ここで記録停止。アクションを13回繰り返して影の大きさを増やします。 終わったら、元のレイヤーと複製したレイヤーを選択してメニューバーからレイヤー>レイヤーを統合で1枚のレイヤーにします。 8 まとめたレイヤーをメニューバーからフィルタ>ぼかし放射状を選びぼかしの中心を上部中央に、方法はズーム、画質を高いにして3pxでかけます。 光が差した文字の影の部分のみを表示 9 さらにこのレイヤーをメニューバーから編集>自由変形で中心を一番上中央に移動、メニューバーからフィルタ>ぼかし(ガウス)を2pxかけ、カンバスサイズを元に戻して完成です。 タイポグラフィ完成画像

スライスの3ソフト別比較

SaCSS Vol.21で話しました、WEBデザイン制作3ソフトについてまとめたものをアップしました。興味ある方はご参考下さい。 WEBデザイン制作で使われるソフトはPhotoshop、Illustrator、そしてFireworksが主に使用されています。これら3ソフトでWEBデザインを行った場合、どのような特徴があるのかを調べました。

Fireworksの特徴

スライスはFireworksが一番機能に優れています。WEBデザインで重宝するのは次の機能でしょうか。
  • スライス用レイヤーの存在
  • スライスレイヤーの重ね順による書き出し優先
  • シンプルロールオーバーによるロールオーバー画像の書き出し
  • ピクセルスナップによるアンチエイリアスの削除(CS5)
  • グラデーションディザによるバンディングの低減(CS5)
  • HTMLテキストの太字設定が可能
  • ピクセル単位での制作・移動・調整
ロールオーバー画像については現在ではCSSスプライトとjQueryを併用することが広まっているため、必要性は下がっています。 また、オブジェクト名の変更を行う場合、より簡単にできる「1 Slice Name Changer」というのがあります。Fireworks8、CS3、CS4のみの対応ですが、該当バージョンを持っている方は入れると作業が捗ります。 詳しくはURLをご確認下さい。http://d.hatena.ne.jp/zakira/20090612

Photoshopの特徴

WEBデザイン用途して重宝するのが画像やタイポグラフィの加工、制作です。
  • スライスはスライスツール、ガイドによるスライス、レイヤーによる3種類
  • グリッド指定可能(※グリッドがあってない場合があります)
  • シェイプによる設置後の編集が可能
  • スマートオブジェクト機能
  • ロールオーバー画像は別途レイヤーかファイルを用意
PhotoshopCS4にはFireworksの様な疑似スライス機能を持ったプラグイン「スライスチップ作成パレット」があります。 詳しくはURLをご確認下さい。http://lovwar.com/blog/?p=216

Illustratorの特徴

IllustratorCS5になってWEB用途の新機能が追加され、WEBデザインの制作効率が上がっています。
  • スライスはスライスツール、ガイド、選択範囲からスライス、スライス-作成の4種類
  • ピクセル整合による正確なボケない画像制作が可能(CS5)
  • テキストのアンチエイリアスが実装(CS5)
  • ロールオーバー画像は別途制作が必要
IllustratorはDTPレイアウトが基本のため、下位バージョンだとピクセル太りなど細かい問題が生じます。 そのため、WEBデザインするためのルールを設定しておく必要があります。 http://kojika17.com/2011/01/how-to-slice-the-ai-data-for-illustrator.php 結論としてはFireworksを使うのが一番バランスが良いです。ただ、各ソフトで一長一短があり、現場で制作環境によりソフトが決まるかと思われます。