Webデザインをしていく上で、知っているとちょっと便利なPhotoshopの小技を羅列してみる。
■写真の入れ替え
カンプで制作したデータを購入した写真や、レタッチした写真など正式なデータに差し替える場合に知っておくと便利な小技。
(1)サイズを調整する側のレイヤーの描写モードを「差の絶対値」にする。
(2)「自由変形ツール」でサイズを調整する。
レイヤーのアルファ値を低くしても同様のことはできるけど、 これだと細かい箇所まではチェックしづらい。
「差の絶対値」を使った場合、まったく同サイズになった場合、画面が真っ黒になるので分かりやすい。
(比較レイヤーと差がなくなれば差の絶対値＝0になるため)
■テキストの一部の色を変える
リンクテキストをPhotoshop上で表現する場合に知っておくと便利な小技。
(1)テキストを打ち込む。
(2)新規レイヤーを作成し、色を変える範囲を塗りつぶす。
(3)メニューから[レイヤー > クリッピングマスクの作成]を選択する。
テキストパネルから該当箇所のカラーを指定して変更することもできるけど、それだとテキスト全体の色を変更した場合に、再度該当箇所のカラーを再指定する必要がでてくる。
クリッピングマスクを使っておくとこうした手間を省ける上、「透明ピクセルをロック」を選択しておけば、塗りつぶすことでリンクカラーを一気に変更することもできる。
最初は面倒かもしれないけど、慣れれば結構便利。
また、インストールされていないフォントをのカラーを変える場合にも、この小技は使える。
とりあえず、2つだけ。
category : Blog, デザイン |
tag : Photoshop
| comment & trackback : 0
by 青山 in 2008.03.02. 23:03
仕事の合間に、お蔵入りになったPSDファイルを整理中。
今回はぷるぷるな丸型アイコン。
表現としては、ちょっと古い感はするけど、PSDもアップしておきます。
ぷるぷる丸型アイコンPSD
category : Blog, デザイン |
tag : Photoshop
| comment & trackback : 0
by 青山 in 2008.02.15. 16:30
ここ2～3日会社の後輩の作ったFlashバナーを見て、基礎部分があまりにもできていないので覚書程度にエントリー。
Flashに限らず、バナーの制作には多くのレギュレーションがかかる。
フレームレート、バージョン、ループ回数、ファイル容量制限、etc…。
今回のエントリーは、僕が気をつけているFlashバナーの制作のポイントを書いてみる。
内容としては非常に基本的なことだけれど、そこが足りないだけで、完成度がかなり変わってきてしまう。
今回のポイントはどれもそれほど手間がかかるわけじゃないので、ほんのひと手間加えてみては？
(1)FlashにインポートするPNGの使い分け
PhotoshopからFlashへ画像を持ち込む時はPNGを利用ことが多いと思うけど、この場合に24bit、8bitの使い分けをちゃんとする。
なんでもかんでも24bitで取り込むと、全部ロスレスで扱うならキレイだけどファイルが重い。
逆にJPEG画質で扱うと、当然、向き不向きな画像があり、美しくない画像もできてしまう。
この辺りは「何をいまさら？」と言われそうだけど、なにげに出来てない人が多かった。
使い分けのポイントはGIF、JPEGとまったく同じ。
テキストのような色数が少なく、背景が単色(またはそれに近い)であれば8bit。
写真などは24bitで扱ったほうが良い結果を得られる。
Flashにインポートした後は、8bit PNGはロスレス。
24bit PNGはJPEG圧縮で扱えば、容量も抑えることができて、美しい仕上がりになる。
逆にテキストやイラストなど8bitに適した画像にJPEG圧縮をかけると、ブロックノイズが出て美しくない上に容量も増えてしまう。
(2)描写モードを使った画像の持ち込み
レイヤーの描写モードを使って背景などと合成をしている場合、必要なレイヤーだけを集めて結合をしてしまうと白いエッジが出たり色が変わってしまったりすることがある。
これはひとつのレイヤーが持てる描写モードはひとつしかないため、結合されたレイヤー以外との描写モードが一旦リセットされてしまうためだ。
僕は髪の毛の切り抜きで、乗算をよく使ったりするのだけど、そのときにも起きる。
これを防ぐには、描写モードの影響範囲ののレイヤーをすべて合成するしかないけど、Flash上でバラバラに扱う必要がある場合はそうもいかない。
この場合は例えば、背景の一部。
つまり必要となるレイヤーの“描写された部分”の外側1ピクセル大きな画像を持ってきて結合してしまう。
手順としては
1.レイヤーの描写部分を選択。(ctrlを押しながらレイヤーをクリック)
2.[ 選択範囲 > 選択範囲の拡張 > 1px ]として外に1PX広げた選択範囲を作る。
3.背景を選択範囲でコピー&ペーストする。
4.そのレイヤーを含めて結合する。
これで外側に1px分の背景が付いたレイヤーができあがる。
これですべてのケースが解決できるわけではないけど、知っていると便利なテクニックのひとつ。
(3)画像の歪みを防ぐ
これは有名なFlashの不具合(?)だけど、ピッタリサイズの画像を取り込むと、Flash上で画像が歪むことがある。
(歪むというより、潰れる？)
これは画像を切り出す場合に外側1pxずつ余白を作ることで回避できる。
1pxずつ余白を作っても、ムービークリップ内の配置でx=-1px、y=-1pxとかするとまた歪んでしまうことがあるので注意。
大人しくステージの配置で1ピクセルずつズラす方が無難だろう。
(4)画像の縮小
画像を縮小した場合は、最終的にきちんとシャープをかける。
縮小するとどうしてもエッジが緩くなるので、最終の仕上げとして忘れないようにしよう。
特に最近はアートワークができたことで、レイアウト段階ではでかい画像のままで扱っていて、そのままインポートしてしまっているケースが見られるので注意。
また、印刷用のPSDなど高解像度の画像をそのまま縮小したりすると、画像によってはエッジが潰れてしまったりするので一度72dpiに変換したほうが無難かも。
(経験的にはオリジナルの画像から「画像解像度」を使って72dpi、直接サイズを指定したほうがディティールまでキレイに出る気がする)
最後に縮小によってエッジが変に欠けてしまう場合がある。
この場合は、描き足せる範囲であればペンツールで描き足してしまうとよりベター。
(5)PNGの色ゴケをなるべく抑える(Macのみ)
Mac版のPhotoshopでPNGを描き出すと、妙に色が浅くなる。
仕様なのか、不具合なのかわからないけれど、悩ましい現象には違いない。
この問題はPNGをFireworksから描き出すことで、ある程度軽減できる。
(面倒なんだけどね…)
以上、とりとめもなく書いてみた。
本当はサンプルなんかも作ったらいいんだろうけど、それはまた後日。
category : Blog, デザイン | この投稿にタグはありません。 | comment & trackback : 0
by 青山 in 2008.02.08. 00:46