整理などについていろいろ

お久しぶりの投稿です。MacOSXLeopardとFireFox3では、アメブロの相性が悪いんかな？

タグ非表示での書き込みができないっぽい。

仕方ないので、普通にタグ打ちしながらブログ書いてます。面倒くせー。

というわけで、まぁ今日はPhotoshopやIllustratorの操作上の整理、HTMLファイルなどの整理を含めてやっていこうかと思います。

まぁ、Adobeのビットマップ画像作成ソフトとベクター画像作成ソフトの２つは整理に関しては優れたソフトだと個人的には思ってます。
FireWorksもきっとできるんだろうけど、食わず嫌いです。すみません。ただCS3はスライスに関しては随分便利なんだなぁーという印象は持ってます。

そんなわけで、この２つのソフトにはそれぞれレイヤーという概念があります。レイヤーというのはセル画のようなもので、透明なセル画に、それぞれのパーツが描き分けられていて、全部を一緒にすると一つの画像になるというイメージを持っていただけるといいと思います。これについては前に書いたかもしれませんが。

というわけで、それぞれのソフトのレイヤーの大まかな捉え方はこれでよいのですが、ソフト間での細かい差異はあります。その差異を押さえておくと整理のやり方がより楽になると思います。

どういった差異があるのかということですが、Photoshopの場合のレイヤーは文字通り、セル画の１枚１枚という感じで１枚のレイヤーの一部分を動かしたい場合は、選択範囲を作って動かすという面倒臭い作業が発生します。それを避けるために、パーツごとにレイヤーを分けて作るんですが、それが増えるとまとめる必要が出ます。それがグループというフォルダの概念になります。これはレイヤー画面の右下にフォルダのアイコンをクリックすると作れます。

僕がよくやるのはヘッダーとかメインとかいう具合に大雑把にグループ分けをして、その中で、ロゴとかその辺をまとめる子要素のグループを作って整理します。

対してIllustratorでは、レイヤーというのはPhotoshopのグループという概念と近いものがあり、レイヤーに近いものがそれがオブジェクトというものです。ただこのソフトでは、オブジェクトはそれぞれが独立したパーツとして別々に動かすことが可能なので、ついついレイヤー分けの作業を忘れがちで、後で、編集するときに面倒だということがままあります。

僕がよくやるのは、ガイドレイヤーや文字レイヤー、ビジュアルレイヤーなどと分けて、それぞれの中にグループ化したオブジェクトを整理してます。

というように今日は整理の序盤をお話しましたが、長くなったので最初の予定よりも短めですみません。

今日は２００９年一発目です。

かなり遅いですが明けましておめでとうございます。

忙しくてなかなか更新する暇がなくて、４ヶ月ぶりの日記で、２００９年も早くも折り返し地点が見えてきているので、少し怖いです。

というわけで、本日の更新についてですが、PhotoShopについて書いてみようと思います。

皆さんは、デザインをする上で、かなりこのソフトにお世話になっているはずですが、いろいろな使い方があります。
グラデーションをかける方法についても何種類かあるし、枠線をつける方法も何種類もあるし、そんなわけで、本日は小技をちょこっと書きます。

あくまで僕が使っている方法だったりするので、ほかにもいろいろ方法はあると思います。
慣れながら、自分の使い方を覚えるといいと思います。

基本的に、僕はレイヤー効果を多用します。

ここで、良く使うのが境界線、光彩、グラデーションオーバーレイ、カラーオーバーレイ、ドロップシャドウくらいでしょうか。

それぞれの使い道ですが、境界線はベタな線をつけるのに良く使います。ただし、微妙に角丸っぽくなります。文字なんかに使うといいでしょう。

グラデは、何か塗りがある部分に対してグラデーションをかける方法です。
グラデは、あまりはっきりと分かるグラデ（ビビッドトーンから、ホワイトなどのグラデ）はやらしくて使いづらいです。
微妙なのが好き。

カラーオーバーレイはパス抜きをした人物などをシルエット化するのに楽です。

ドロップシャドウは指定した方向に影をつける方法です。ただし、影があまり自然ではなく、軽く物が浮いてる感じなので、そこは使い道によりけりでしょうか。

光彩に関しては、境界線みたいにハイライトや区切りをつけることができますが、違いはぼかしがあることです。

これを応用すると内枠の両サイドに影がついて少し立体感のある感じをつけれたりします。

光を黒くすると表示されないので、レイヤーモードをスクリーンから通常にしてやります。ドロップシャドウもそうですが、影の濃さはデフォルトだと濃すぎるので、３０～４０％くらいでかけるのが好きです。

またスクリーンは黒い部分を透明にしてくれるので、雲模様を作って、スクリーンにすると湯気に使ったりといろいろと使えます。次回はこれをご紹介しようかなと考えています。

また読んでくださればうれしいです。今年もよろしくお願いします。

web用に保存の注意点（ジャギー編）

IllustratorもしくはPhotoshopにはweb用に保存という便利な機能が備わっています。

これはPSDやAIデータをJPEGデータやGIFデータに変換してくれて、ファイルサイズを落としてくれる便利な機能です。

JPEGやGIFの違いなどは以前のエントリ－に書いてるので、今回は注意点その１としてジャギーというものについて説明します。

ジャギーって何？って言うことを理解するためにまず、透明背景の●画像を右側のオプションのマットあり、マット無しでそれぞれGIF画像として書き出しました。

その違いが２番目の画像ですが、左側がちょっとギザギザというか滑らかではないのが分かりますでしょうか？

そのギザギザ感がジャギーです。

これはあまり見た目の処理的によろしくないので、これを滑らかにする場合は、置くことが予定されている背景の色（今回は黒）でマットの部分を彩色しました。

こうすることにより、ギザギザを黒背景で補ってくれて、●本来の滑らかな曲線を再現してくれます。

背景を透明にしてGIF画像を作るときは、■以外の画像を作るときは、必ずマットをかけましょう。