« ブログの画像のつくりかた(2) | 最新記事 | 珈琲専門店のオリジナル麦酒 »

ブログの画像のつくりかた(3)

  
 完結編です。ここまで、写真を撮る→パソコンに転送する→画像処理ソフトで開き、明るさや色味を調整する→モノを切り抜いて背景を消す、というところまで来ました。実はこのままでも全然かまわないんですが、モノの下に少し影があった方が、なんとなく落ち着いて見えるんですね。座りが良い、というか。
 では、新たに影を作成していきましょう。
 
●影を付ける

Photo15

 Photoshop CSには便利な機能があって、シャドウを付ける程度なら「レイヤースタイル→ドロップシャドウ」で簡単にできます。が、実は、私はこの機能はあまり使ってません。他のソフトにはあるのかな。Fireworksにはあったような気がしますが、同じPhotoshopでも簡易版のElementsにはないんじゃなかったかな。
 ではどうするかというと、まずモノだけになったレイヤーを複製します。
 
Photo16

 
Photo17

 その複製レイヤーを最下層に移し、「50%グレー」で塗りつぶします(「透明部分の保持」にチェックが入っていることを忘れずに)。
 
Photo18

 これに「ぼかし(ガウス)」をかけ、全体に少しだけ下(あるいは右下)にずらします。これでいい感じにぼけた影が付きます。影がちょっと濃いなと思ったら、シャドウレイヤーの透明度を調整して薄くします。私はふだんおよそ「65%」くらいの濃度にしています。影があまり目立ってもしょうがないし、あっさり気味でちょうどいいぐらいではないかと。
 
●リサイズ
 
Photo19

 いよいよフィニッシュです。まず、余分な部分をトリミングして、実際にブログで使用する大きさにリサイズします。
 
Photo22

 私のブログだと、メインで使う画像の場合はだいたい幅400ピクセルにしています。
 
 リサイズの結果、画像が少々眠い感じになってしまったと思ったら、ほんの少しシャープネスをかけます。これで、細かい文字が立って見えます。

Photo21

 ついでに、もうちょっとだけコントラストを強調しておきましょうか。このへんはもう「おまじない」みたいなものです。ここでは「トーンカーブ」を使ってます。

Photo20


Photo04

 これで完成です。本来ならば、特に色調補正のところなどもっと厳密な調整が要求されるでしょう。また、以上の手順じたい、プロの方からご覧になるとなんていい加減な(あるいは、なんて効率の悪いやり方)と言われるかもしれません。
 私の場合は、これでショーバイするでもないし、だいたいの雰囲気が出ればいいよね、というつもりでやってます。
 それと、たとえば「レイヤースタイル」を使わないのは、ブログ開設以来ずっと「シャドウレイヤーを別に複製する」方法でずっとやってきたので、そのリズムが板に付いてるという、ただそれだけのことです。一連の作業自体はまったく機械的なルーティンワークなので、アタマの中ではこれから書くエントリのオチはどうしようかとか考えながら手を動かしているワケです。だから、作業の効率化やスピード化も、必要以上には求めていないんですね。あんまり速く終わっちゃったらリズムが狂いますし(笑)。このへんも、プロの現場とは全然違うところです。
 いずれにしろ、趣味の個人ブログなら、ここまでやればまぁ充分じゃないでしょうか。
 
 
 最後になりましたが、今回「作例」として使用させていただいたCDのタイトル・品番およびジャケットデザイナーのお名前を記しておきます。
 
●琉球アンダーグラウンド 毛遊び
 RESPECT RECORD/RES-73/2003年4月発売
 Design & Graphics:Keith Gordon

2006 01 18 [design conscious] | permalink このエントリーをはてなブックマークに追加

「design conscious」カテゴリの記事

comments

うーむ、なるほど~これは勉強になります~。
とんがりやまさんのとこで掲載してる書籍やCDって
いつも綺麗に加工されてるので
私も「どうやってるんだろう?」ってちょっと気になってたんですよね~。
けっこう手間がかかりそうですが、さすがに完成度はとても高いですね。

で、あんまり関係ないことで感心しちゃったんですが
私はフォトショの7.0を持っていて
コイツで画像に自作のロゴを貼り付ける方法を記事にしたんですが
「フォトショの画面じゃないみたいだ」って言われたんですよ。
その方もマックユーザーだったので
ウィンドウズとインターフェースが違うだけじゃないかと思ってたら
CSってこんな画面だったんですねえ、
これは確かに全然違うソフトだわ(大汗)。
Elementsなら現行のを持ってるんで比べてみたところ
こっちの方がはるかに今っぽい感じでした・・・。

たしか、ElementsとかLiteと、CSや7.0(涙)の違いは
フィルターの種類くらいだったと思うので
(フィルターって単体で買うととんでもない値段するんですよね)
レベル補正やマスクなど、とんがりやまさんが解説なさってる方法は
Elementsなどでも違和感なく使えると思います~。

posted: しのぶ (2006/01/18 14:27:24)

 コメントありがとうございます。
 いやあ、こういうハウ・トゥものは初めて書いたんですが、疲れました(笑)。ふだん、なーんにも考えずに手を動かしていたんだなぁと、あらためて思いましたね。
 ある程度ソフトの使い方をご存じの方でしたらくどくどと余計な説明(いいわけ)が多いでしょうし、全くの「初心者」でしたら、この内容ではまだまだよくわからないでしょうし、そのへんの判断も書いていて難しかったです。しのぶさんの記事は、そのへんいつも的確に書かれてらっしゃいますので、さすがだなあと思います。
 ソフトのバージョンまで気にされる方には、なおさらわかりにくいエントリかもしれませんね。だいたい、今はフォトショもCS2ですし(まあ、この画像加工程度ならCSもCS2もさほど大きな違いはないでしょうが)。原理原則さえつかめれば、ソフトや操作画面が多少違ってても、そんなに慌てなくても済むはずなんですが、どうしても「マニュアル通り」にしか作業できない人もいらっしゃるんで、今回はハウ・トゥ記事の難しさをしみじみ感じました。

 そういえばフォトショで「レイヤー」が扱えるようになったのって、いつのバージョンからだったのか、もう昔のことはすっかり忘れてますが、以前はこういう「影を付ける」こと自体、かなり難しかったですよねぇ。大昔のフォトショの解説本にはマスク版作ったりとかアルファチャンネル作ったりとかがしょっちゅう出てきてましたが、そのへんは私はほとんどマスターできなかったです。

posted: とんがりやま (2006/01/18 23:12:17)

Photoshopのレイヤーは3.0(か3.5)からでしたかね?
私はWindowsなんでMacとは違うかも知れませんが。
まあ理解出来るようになったのが5からで、使えるようになったのは最近、、、まだまだ?かも。
私も影を落とすような場合(テキストレイヤー以外は)スタイル使ってないですね。なぜだろう。
それにしても手間を掛けてますねぇ、この記事も。
台にしている段ボールもただ者では無いですし。

posted: Fujie (2006/01/19 22:40:13)

 コメントありがとうございます。
 あ、レイヤーってそんな以前からありましたっけ。いやあ、昔のことはすっかり忘れております(^_^;)。

> 台にしている段ボール
 あははは、さすが観察が細かいっ! 一時ケース買いをしてこればかり飲んでた時期があったんですぅ。

posted: とんがりやま (2006/01/20 11:53:02)

昔話にしゃしゃり出てまいりました。フォトショップが2.5Jから3.0Jにバ-ジョンアップしてレイヤーが使えるようになったときの驚きと言ったら。ああ、こんなに簡単に画像が扱えるのね。というわけで新しいバージョンのフォトショップも持っておるのですが、いまだに3.0J(for Mac OS9)を使っておるのです。それにしてもとんがりやまさんの書影は美しい。

posted: 漫棚通信 (2006/01/20 21:22:42)

 コメントありがとうございます。
 昔話ついでですが、フォトショでテキストが扱えるようになったのっていつからでしたっけ。5.0か5.5あたりから? 緻密なレイアウトを要するデザインはやはりイラレに頼りますが、たとえばこのブログのトップバナーみたいな、ちょこちょこっと文字を入れる程度でしたらフォトショひとつで全部完結してしまえるのは、やはりとても便利ですねぇ。
 漫棚さん、OS9ユーザーだったんですねっ(^^)。うちにはOS8.6のMacもあって、まだまだIntelMacには負けんぞとばかり、半ば現役で頑張っていたりもします。まぁ、だんだん出番が少なくなってきてはいますが(苦笑)。

posted: とんがりやま (2006/01/21 19:55:04)

ええと、フォトショップの文字でしたら、3.0Jでもアタリマエに使えますです。フォントとスタイル、大きさを設定してレイヤーに乗せて移動もできます。大きさが合わなければ(一発では普通合いませんので)、繰り返し大きさの設定し直しです。最近のフォトショップはもっと便利になってますのでしょうか。

posted: 漫棚通信 (2006/01/25 20:17:55)

 ああ、どうもすみません。よく調べずに記憶と思いこみだけで書くのはホントにダメですね(苦笑)。いまver.2.5の解説をしている雑誌をひっぱり出してみましたが(1993年)、確かにテキストツール自体はその当時からありますね。
 ただ、これは私だけかもしれませんが、その当時は画面上でテキストを直接打ち込んでレイアウトしようという気にはなれなかったです。文字まわりの処理にはまったく使い物にならねー、と思ってました。例えばオリジナルロゴを作る場合でも、まずIllustrator上で文字打ちし字間等をきちんと調節したものをPhotoshopに持って行って加工してました。
 現バージョンのテキストツールは、その頃から比べるとかなり様変わりしています。設定ウインドウはIllustratorのテキストボックスとほぼ同等の機能を有していて、たとえば「行送り」や「垂直・水平比率」の設定はもちろん、「カーニング」「トラッキング」「禁則処理」等の設定項目もありますので、かなり細かな調整が可能になっています。

posted: とんがりやま (2006/01/25 21:38:54)

↑自己追記です。
 昔のテキストツールは、一度確定してしまうと文字が選択範囲になってしまうので、再編集は不可能でしたよね。現在では、テキストは専用のテキストレイヤーを生成し、フォント情報もそのまま残るので、いつでもフォントの変更や誤字の訂正などの再編集が可能になっています。これができるようになったのがver.5.5あたりじゃなかったかな?

posted: とんがりやま (2006/01/26 11:03:11)

 

copyright ©とんがりやま:since 2003