PM5:00-

今日は、Macでいきます。最近フリーズがとまらないPowerBook G4です。膨大なオリジナル写真素材が入っています。（趣味で撮ったものですが。）

日記でも書きましたが、現在３つの企画を遂行するためホテルに滞在しています。64k-モバイル環境でどんどん配信していきます。

PM5:10-

とりあえず、見直しでも‥。
Photoshop、起動。
前に作ったものですが、修正するかどうかチェックしてみます。

ちなみにPhotoshopは、バージョン５です。

PM5:10-

この作業には、いろいろな携帯電話が必要でした。ところが、そう簡単にケータイを集められない。
いろいろ調べたら、秋葉原に行けばモック売ってることがわかったのです。いゃ〜、何でもありますね秋葉原。100〜3,000円とワゴンにいろいろ。モックって、店頭に展示してあるものです。

PM5:20-

ケータイの液晶部分は「なげなわ」で囲んで、ベタ色を塗った。
そのベタ面を選択範囲にして、写真を「選択範囲内にペースト」。
で、強力にぼかす。
彩度も上げておく。これがポイント。

※上に表示されている時間は「いい加減」です。テンプレートファイルに付いたものなので正しくありません。お知らせ。

PM5:20-

オリジナルの写真をもう一度ペースト。（レイヤーが追加される。）
このオリジナル写真と下のぼかした写真を「乗算」で合成。（要するに、オリジナル写真のレイヤーをクリックしておいて、合成モードから「乗算」を選ぶ。）

これで、液晶の画面っぽく馴染む。

PM5:20-

でも、まだまだ。
ペーストした写真の選択範囲をもらって、グラデーションを塗る。
このレイヤーを選択して、合成モードから「オーバーレイ」。

ガラスの反射らしく。‥なっていないが、まぁとりあえず。

PM5:20-

よ〜く見ると、まだ違和感がある。

液晶画面のフレームだな。
またまた、ペーストした写真の選択範囲をもらって、枠線を描く。３ポイントくらいの。そして、フィルターでぼかす。
すると、段差ができたように見え、それらしくなった。

レイヤーパレットはこんな感じ↓

PM5:30-

材料集めるのも大切なんですが、まずはスケッチですね。
私は、ノートに描きなぐり。
ボールペンしか使いません。（なぜか？鉛筆は苦手。消しゴムはもっと苦手です。）今回のデザインも、やはりスケッチから起こしています。

PM5:30-

さて、コラージュ。
見直しだけど‥

こちらは、64Kなので少々モタつきます。

PM5:30-

続き。

同じ写真をケータイの下のレイヤーへ。
不透明度を調整。少し透明にして背景と馴染ませないと、うるさくなる。

PM5:30-

アップの写真や文字など、いろいろコラージュ。
このあたりの作業は、何も考えませんよ。

一応、ヒストリー機能はありますが、レイヤーのコピー（もちろんレイヤーパレット内のこと）は頻繁にとりながら進めています。

PM5:30-

引出し線は、慎重に。
アンチエイリアスがかかるとダサくなっちゃうから。
シャープに線引き。
黒線と白線を使い分けます。

アンチエイリアスって、要注意なんです。OFFにしたり、いろいろピクセルを操作した方がいい。

PM5:30-

背景は、白。

これで見直し、終わり。
JPEG形式で書き出して、Webページに配置する‥

修正版は、mov channel をご覧ください。

PM5:40-

※業務連絡；上の「ブラウザの「更新」ボタンを〜」の表示やめます。

このパーツは修正なし。
簡単に解説だけ。

PM5:40-

Adobe Illustrator での作図がベースになっています。
ここでは、できるだけシンプルに整形するのがポイントです。
まぁ、下書きですね、Photoshopへ持っていく前の。

IllustratorとPhotoshopの連携は、もう‥何も言うことなし。２つともAdobe社の製品ですから、当然かもしれませんが。

PM5:40-

人物シルエットは、mov 氏です。
こういう処理は、Photoshopのお得意芸ですから、あっという間の作業。
まぁ、そういう処理をしやすいように逆光で撮っているんですけど。

PM6:00-

ここから、新規の作業。
見直しとはいえ、やっぱり時間かかる。

デジタルカメラで撮った写真をPhotoshopで開きます。私は、CFカードの抜き差しで、データを持ち込んでいます。
一番、手っ取り早い‥と、私は思っています。

PM6:10-

なげなわツールで”大まかに”切り抜きました。
大まか、ですから早くできます。
なにより、切り抜きやすいように撮る。

PM6:10-

次の写真。
マイクです。実は私がいつも取材で使っているものです。

これは切り抜きやすい。10分かからないでしょう。
撮影画像は、幅1,360ピクセルの高解像度。このくらいの大きさがないと、”大まかに”切り抜く作業が成り立ちません。

PM6:20-

上の画像と比較してください。
ちょっと、鮮やかになっていませんか？
縮小（バイキュービック）して、引き締めました。Photoshopの拡大縮小は、デフォルトでバイキュービックになっています。
縮小のときにおこなわれるピクセルの補完を利用して、色の厚みを増やしています。

PM6:30-

次の写真。

‥って調子でやってますと、かなり時間がかかりますね。
まずは、パッとやってしまいましょう。
どんどん切り抜きますよ。
左の画像も、”引き締め”で厚みをだしてます。補正とは若干違うのかな。

PM6:50-

切り抜き完了。

これからスケッチして、アイディアをまとめていきます。
多分、またIllustratorの作図をベースにPhotoshopで切り貼りしていくと思います。

‥あぁ、でも時間がなくなりましたね。
もう７時です。

時間になってしまいました。
やはり、予想以上に時間がかかってしまいます。ただ、仕組みとしてはうまくいきそうです。（自動化できれば。）
明日は、Photoshopのコラージュテクニックを進めます。もう少し解説をつけたいと思います。
ここでデザインしているのは、ループシーケンサー（mov channel 内）を紹介するページです。
質問メールも頂きましたが、ぜんぜん余裕がなく、反映できませんでした‥。
方法はありそうです。
それでは、また明日。

PM7:00-

なんと‥開始が遅れてしまいました。今日は、取材で葛飾柴又に行っておりました。
さて、早速始めます。一度やった作業なので、早いテンポで進めます。円を描いてみました。

今回もヘビーなページになっていきますので。（28.8kbpsの方、すみません。）

PM7:05-

なんとなく描くイメージを持っていますが、このときは描きながら考えています。（‥といっても、同じ作業を２回やるのですから、ここで書いているコメントは１回目の描画のことになります。）
使っているのは、Adobe Illustrator 8 です。Photoshop で画像処理する前に、Illustrator でベースを作り上げます。（いつものやり方です。）

PM7:10-

もう、わかりますね。熊です、クマ。ツールボックスの楕円ツールとラインツールだけで描きました。鼻のテカリは、楕円を複製しながら上に重ねて、（重ねた方の楕円で）切り抜いています。Illustrator では、簡単にできますよね。「型抜き」なんて、すごく楽です。

PM7:10-

お利口なクマさん、なので目つきを悪くします。楕円を上に描くだけです。この楕円の置く位置によって、人相が変わります。

PM7:15-

文字をのせます。白フチは単純に文字の枠線に白を指定しただけ。要するに２つの文字を重ねているだけでした。

PM7:40-

クマは完成。あと２つバリエーションを描きます。１つ描くと、エンジンがかかりますので調子よく進みます。基本は、楕円とか矩形で構成していきます。

PM8:00-

一気に３次元っぽく描いてみました。いわゆる”キューブ”技法ですね。３つのバリエーションしかありませんので、上図のようなアングルで構成しました。（この3D化については、次のライブでご紹介しましょう。）

PM8:10-

ベースに載せます。錯視に注意しながら、”イイ感じ”のレイアウトをおこないます。スピーカー、ブランド（キャラクター）、ループサウンドの３つのモチーフをキューブを使って表現しました。
実際、ほとんどの人は”補完”しながら見るので、意味付けは制作者の「こだわり」かもしれませんね。でも、仕事のプロセスでは必要なことです。

PM8:20-

さぁ、ベースが完成しました。これから、Photoshop に読み込んで画像処理が始まります。
ん〜、しかし時間が。そろそろ出掛けないといけません。

PM9:30-

意見交換、終わりました。
中継が中断して申し訳ございません。
　↑
「中」が重複して読みにくいですね。本ならチェック入ります。

作業の続き。
Photoshop に読み込みました。もちろん、レイヤーごとに読み込んでいます。

PM9:30-

レイヤーの構成は、こんな感じです。ソフトライトで輝かせて、下地を作ってみましたが、結果的にCGっぽくなるので止めました。（上図は未完の状態です。）
このレイヤーパレットを見て、バージョン6では？　と思われた方もいるかもしれませんが、私もバージョンアップしました。（前回までは、バージョン5 を使っていたのです。）
実は、ImageReady が好きになれず‥PhotoshopからFireWorksへ持ち込んでいました。今回、バージョン6 にしてImageReady を使ってみたところ、すごく良くできているんで驚きました。（単体の頃のImageReadyしか知らなかったので。）

PM10:00-

もう、完成しましたよ。（30分かかりましたが。）

レイヤーは長くなりましたが、処理はシンプルです。不透明度だけ、ほとんどのレイヤーに適用しています。つまり、全体に透けた感じを与えているわけです。

PM10:00-

前回（中継の第一回目）、切り抜いた写真はこのように使用しています。上の２つの写真は切れていますが、ちょうどキューブが重なるように調整しました。
写真は全て「乗算」で合成、さらに不透明度を下げています。テキストは、書類からコピー＆ペーストしているだけです。

PM10:00-

完成！がこれ。キューブはメリハリをつけるために「乗算」で調整しました。バリエーションは、６つほど用意（１つのレイヤーに収めています）しましたが、結果的にこの表現で決まり。Webデザインのパーツですから、あとで圧縮することを考慮して、彩度を高めに。
便利ですね Photoshop！ 私は、Photoshop の伝道師ではありませんが、（Webデザイナー職で、画像パーツも作成されている方には）お薦めします。価格が高いのが難点ですが、商売道具ですからね‥。でも、印刷に使わないのなら「Photoshop Elements」でもいいのかな？

PM10:10-

最後です。スライスします。FireWorks とほとんど変わらないですね。使いやすいです。ただ、ImageReady だとGoLive が都合いいですね。（反対に、FireWorks ならDreamweaver です。）今回は、書き出したHTMLソースをテンプレートにペースト（貼付け）するだけで問題ないので、障害にはなりませんでした。
スライスの方針は、独立したパーツとして分割させることです。どういう順番で表示されても視認できるようにスライスしていきます。

PM10:10-

Netscape 6 で表示させました。

”非視覚表現の最強ツール「ループシーケンサー」を学ぶ”は、「mov channel」のコンテンツです。12月にはアップされます。

尚、このWebデザインの素材および完成版（CSS版）は、12月に発売されます「Web Design Basic（仮）」の付属CD-ROMに収録します。素材をいろいろイジりたいという人は、ご利用ください。

それでは、また次回。（←次回もあるんです）
メールをくださった皆さん、ありがとうございます。