いや、そんな期間限定なんて大それたものではないのです。
が、中には公開許可をとったかとってないか不明なものもあり、
また「でも自分で作ったものは見てもらいたいよねぇ」っていう欲求もあり
そんなゆれる気持ちと事情の狭間っていうことで期間限定です。

demoreel 2012
https://vimeo.com/46272167

PW設けています、ごめんなさい。
私の携帯番号から090を消したものです。
ご感想お聞かせください。


Illustrator初心者向け 処方薬検索サイト「おくすり検索」バナー制作要項


表題の通り、Illustrator初心者向け制作に関するエントリーです。

完成見本はこのようになります。※原寸です。

所要時間は授業時で1時間半、手順をマスターした場合は約20分で制作可能になっています。

使用ソフトはIllustratorのみ、作例はcs5で作成していますがcs6でも問題なく進められます。
使用するツールも以下のものに限定しています。
・ブレンドツール
・パスのオフセットツール
・描画モード
・グラデーション
・パスファインダー

フォントはwindows版Officeに標準で入っている【HG丸ゴシックM-PRO】を使用します。

以下制作手順です。
なるだけ分かりやすくするため画像を多く使っています。
クリックすると 画像が大きくなります。
戻る際はブラウザの戻るボタンで戻ってください。 

 ●ではまず薬のカプセルの制作からスタートしましょう。

1.アートボードは400×180(px)、RGBカラーで作ります。

2.オブジェクトのアウトライン化

3.オブジェクトの同位置コピー&ペースト(ショートカットはCtrl+C、Ctrl+F)

4. 複製したオブジェクトの変形(拡大・縮小)1

5. 複製したオブジェクトの変形(拡大・縮小)2

6. カプセルを構成するパーツの複製と配置

 

7. パスファインダ(分割)の前準備として直線ツールでラインを縦に引く

8. パスファインダの実行とパーツの色分け

9.①と②のパーツのブレンド

10. 描画モード(スクリーン)でカプセルの光沢を出す

11.描画モードを比較(暗)にして立体感を出す

12. カプセルを複製して片方の色を変える

13.カプセルをそれぞれグループ化する

●これでカプセルは完成です。最後のレイアウトまで隅に移動させておきます。
これ以降各パーツはレイヤーで分けておくと後の作業が楽になります。
このカプセルは最初からあるレイヤーに格納されているはずです。
レイヤー名を【カプセル】に変えておきましょう。

次は文字の入力とデコレーションを行います。 
【文字レイヤー】を作成し作業を進めていきます。 

14. 文字の入力

15.【おくすり】の文字をアウトライン化して着色

16.アウトライン化した文字にパスのオフセットをかける

17. オフセットをかけた部分をグループ化する

グループ化しますと、オフセットをかける前の元々の部分とレイヤーの順番が混ざってしまいます。
ピンクで着色した元々の文字よりも下にくりようにレイヤーの順番を入れ替えてください。

18.オフセット部分の複製(コピー&背面ペースト)を行い、ピンクに着色しなおして位置をずらす

オフセット部分を複製すると複製前と同じ色になります。
これを元々の文字と同じ色であるピンクにするのですが、まったく同じ色を適用する場合は
スポイトツールが便利です。
ます、色を変えたいオブジェクト(この場合は複製したオフセット部分)を
選んで(背面ペーストした直後なのですでに選ばれています)スポイトツールに持ち替え、
元々の文字のピンク色の部分をクリック、これで複製したオフセット部分の色が変わりました。

しかし 背面ペーストしたオフセット部分は複製元であるオフセット部分の下にありますので
そのままの位置では色が変わった感じがしません。
落ち着いて斜め下にずらしてちゃんと色が変わってることを確認してください。

●これで文字のデコレーションは終了です。
次に虫メガネの作成に進んでいきます。
【虫メガネレイヤー】を作成して作業を進めていきます。 

19.正円の作成(Shiftキーを押しながら左斜め上から右斜め下にドラッグ)

20. 円の複製

21. 二つの円をパスファイダで分割

22. 円に対してグラデーションを与える

23. 分割したパーツからいらない部分を削除

24. 長方形ツールで虫メガネの柄の部分になるパーツを作成

25. 長方形の複製と着色

26. 整列ツールで二つの長方形を合わせ描画モード(乗算)を加える

27. 先に作った虫メガネのレンズ部分と柄の部分の位置を合わせグループ化

●これで虫メガネの作成は終了です。
 スキルに応じてレンズのガラスの反射などを入れると一層リアルに仕上がるでしょう。

28.レイアウト

背景や文字の下に色をつけたり、お好みで各パーツにドロップシャドウを加えて立体的にしましょう。
作例では取り扱う対象(お薬)とそれを見るであろうターゲット(主婦や年配の方)を考慮して
全体的にやわらかい感じの色使いにしています。
その時々のクライアントやターゲットによって配色やレイアウトを変えてみてください。

29.Web用に保存する

Adobe Illustrator cs5では「Webおよびデバイス用に保存」
同cs6では「Web用に保存」になっていますが、基本的には同じと思っていただいて結構です。
※一部形式での書き出しが削除されています。
今回はもっとも一般的なjpegで保存していますが、デバイス(PC、携帯電話)の種類などによっては
別の形式が良い場合もあります。

なお、Web用に保存した場合、アートボードからはみ出たオブジェクトは書き出しの対象にはなりません。
作例にもありますとおり、虫メガネのオブジェクトはアートボードからはみ出た部分が切られた状態で書き出しされています。
「完成形には不要なんだけど消さないで取っておきたい」 、そのようなオブジェクトは
アートボードの外側に置いておくと良いでしょう。

以上でチュートリアルを終了します。



学校での課題として制作してもらった某漫画の主人公の部屋です。
課題を出すにあたり、生徒だけにさせるのもなんなので自分で制作してみた次第です。
参考になるか、見本になるかはわかりません。

また今回のエントリーは字が多いです。
生徒に読んでもらいたいという理由で前置きはどうしても外せないのでどうかご容赦願いたいと思います。
では参ります。

制作における学んでほしい要素としては、
・適度な手抜き。
・見た目と解る範囲内でのリアル。
の2点です。

「適度な手抜き」に関しては3Dだからと言ってバカ正直に作らなくていいんだよ
と言うことを知ってもらいたかった部分です。
例えば同じ物体でもカメラに近い場所にある場合と遠くにある場合ではその細かさは
同じじゃなくて構わない、むしろ遠くのものは粗くしてデータを軽くする必要がある、
ということを理解してもらいたかったのです。
実際の制作での具体例に関しては後述します。

「解る範囲内でのリアル」ですが、専門的知識や建築工法を知る必要はない、という意味です。
とは言え、誰が見てもある程度「和室である」点や「某漫画の主人公の部屋」であることが
理解できることが本課題の目的でもありますので、その辺りのリアルさを追求するために
最低限の資料収集を行います。

調べてみますとこの漫画、連載が開始されたのが1969年とあります。
物語に出てくる時代は話によってまちまちですので連載開始時と同じと解釈しました。
また立地に関しても調べてみますと東京都練馬区という設定がありましたのでこれも採用します。

という訳で、「1969年の東京都練馬区にある一般的な木造2階建て」という設定にします。
また縛りとしてリニューアルしたアニメはあまりに色々なものが2000年代になりすぎているのと
映画版は新旧に関わらず家の構造が変更されているので、これを参考にしないということにしました。

さて、「1969年の東京都練馬区にある一般的な木造2階建て」ということで
次にこの時代の一般的な家の寸法などを算出してみます。
もちろん適度に適当に。
寸法を出すにあたって一番重要となる建材は畳です。
畳のサイズはフローリングが当たり前になった現代でも当たり前に使われてる単位と言えます。
この部屋は東京都練馬区にあるということで江戸間(880mm×1760mm)を採用します。
次に何畳かを調べるわけですが、これはネットで調べてみるとどうも6畳のようですので
疑うことなく採用します。ここら辺が適当です。

日本家屋の寸法は畳を基準にして考えられているのであとはそう難しくありません。
一般的な畳の敷き方である「祝儀敷き」をして、そこから敷居や押入れのサイズを当てはめていきます。
おおよそすべての建材の寸法が出たところでMayaの作業に入って参ります。
最初はスケールです。
Mayaの1グリッドは1センチです。
一方建物や家具の単位はミリが多いです。
Mayaのグリッドをミリに直してもいいのですが後々、別の作業の時戻すのが面倒なので
今回は建物の寸法をセンチに直す事で合わせます。

次にスケールです。
プラモデルなどのスケールモデルで一般的な縮尺にしようと思ったのですが、
これも面倒なのでPerspective Viewのグリッドの範囲に収まるくらいという理由で1/25としました。


では準備が整いましたのでモデリングに入っていきます。
気をつける点としては「なるだけ少ないオブジェクト数で簡単に組んでいく」という所です。
一部のオブジェクトを除きほとんどをプリミティブを変形させるだけで組んでいきます。
BevelやBooleans、Smoothなどは極力使いません。
理由としては本制作環境が古い為(Maya4 Pentium4 1.8Ghz)、重くなるような事をしたくない為です。
とは言え、最終的に印刷可能な状態にしたいので都度考えながら使用していきます。


部屋のモデリングはテクスチャを貼ってライトを設置して終了としました。
本棚や机、その他の小物は作っておりません。
上記と同じ理由で全部を1つのシーン内に作ってしまうとハングアップの危険性があった為です。


新しいシーンを開いて机(と椅子、小物)の制作に入ります。
ここで重要なのは「オブジェクトの座標を移動させない作り方」です。
最終的に「部屋だけのシーン」「机と椅子だけのシーン」「本棚のシーン」を
別の「全てのシーン」に統合させる訳ですが、その際にいちいち移動とかしたくないわけです。
ですので最初から机は、「その机があるべき座標上」で作り始めます。

まず先ほど作った部屋のシーンを複製してこれを「机と椅子のシーン」にリネームします。
リネームしたファイルを開くと部屋を構成してるオブジェクトが並んでるわけですが、
この中で床と、机の置かれる周辺の柱以外を消してしまいます。
床と一部の柱が残ってるので机の置かれる場所はわかると思います。
机と椅子、その他の小物が出来上がったら部屋のパーツは全て消して、これで完了となります。
テクスチャを貼るのを忘れずに。


次は本棚です。ファイルの扱い方は机の時と同じです、部屋シーンを複製してから制作に入ります。
本自体はCubeをExtrudeしたブロック状のものです。
1冊だけ取り出したい、と言われても無理な状態です。
車の模型は別の仕事で作ったものをそのまま入れていますのでやけに細かいです。


これら3つのシーンを新しい何もないシーンにインポートしてモデリングは完了です。
インポートした際にそれぞれのオブジェクトに貼っていたマテリアルもちゃんとついてくるはずです。
最後にカメラを設置してレンダリングです。
決してPerspective Viewのレンダリングはしないでください。
カメラを設置することで焦点距離や被写界深度の設定も行えますのでぜひカメラを設置しましょう。
またレンダリングと言うのはジオラマなんかと似てる行為だと思います。
カメラや照明を効果的に配置してかっこいいアングルを作り出してください。

いかがでしたでしょうか。
ざっくりではありますが今回の課題の進め方が理解できたと思います。


大学の夏休みが終わりました。

で、一発目は【卒業研究の中間発表】でした。
中間とは言えすでに最終まで@2ヶ月という状態。
事実上の完成披露なわけです(←サカイ的にはそう思ってます)。

当日、みんなには言わなかったけどホントは言いたかったこと。

『その研究はだれかの生活を便利にしてくれるのか、幸せにしてくれるのか』

他の先生の言いぶんは知らない。
あくまで僕の思う「これ忘れちゃ意味ないよ」な事なんです。

簡単なことなのにね。


サカイが行ってる大学の前期日程が終了しました。
最後は学年関係なく前期で学んだものをパネルで展示、プレゼンしてもらうというもので〆。
以下感じたこと。

1年生:素直。元気もいい。将来が何か、何を求めるのかは定まってないけど色々なものに興味あり。
良い意味で迷いがあって、あれもしたいしこれもしたいしという感じ。達観してほしくないと思う。
世の中はそんなに狭くないらしい、走り回れ。

2年生:1年間の大学生活で少し馴れが生じてるような。身も心もどっぷり大学生活真っ只中で卒業まで
まだまだあるし大学生活には慣れてきたしというある意味無防備状態。当然スキが多し。
気をつけろ、君らは言うほど距離走っちゃいない。

3年生:確実に近づきつつある卒業研究と就職活動で少しびびり。まだ卒業なんてだいぶ先じゃん?と
無理やり思い込もうとでもしてるっぽいような。一番授業数が多いのもあって体力ダウンモード。
それもあってか自信喪失気味。
瞬発力じゃないんだよね、どうもこの世は持久走みたいだから走り方変えろ。

4年生:求めたのか命ぜられたのかいつの間にか卒業研究。ストレートにおかしいところを教えてくれない
指導教官に頭混乱。精神的にくたくたで、へたすると行動がずれてきてることに気づけもしない。
言われたとおりにやってりゃ良かったのかと言えばそれは自尊心が許さないらしい。
冷静になろう。判断材料はけっこうそろってるよ、周りみてみ。

後期もよろしく。


どうも数日経つと、あれはあれで買ってもいいスペックなんじゃないか?
と思い始めてるサカイです。

パスと思ってた理由ですが、メモリ上限とHDD上限、そしてグラフィックが
Mobility Radeon HD5800シリーズじゃなかったことです。

ではなんで買ってもいっかって思ったかというとやっぱり価格ということになります。
そして今使ってるMBPの液晶に縦縞が入ったから。。。。

コストパフォーマンスと性能の両立的なところから、買うとするなら
15インチのi7 2.66Ghzかなと思いました。
メモリは4Gにしといて後からバルクで追加、あとは画面をノングレアで223,920円、
教育機関の方は202,008円、アップルオンキャンパスプログラムに参加してる教育機関なら
さらにここから4%程度割引が発生するようです。

20万切りますね。
なんとなく軽い気持ちで買えそうな気がしてきました。

さて、買いたいものはこれだけじゃありません。
春ですから色々と新製品が出てきます。
まずは、
・Adobe Creative Suite 5 Master Collection
これまた学生版だと13万以下らしいです。
Master Collectionもだいぶ安くなりました。         まだ高いけど。
あとこれが気になります。
・Autodesk Entertainment Creation Suite
内容といい価格といい大丈夫か?って感じの商品です。
問題は【使用制限1年間】を過ぎるとどうなるんだ??ってことです。
知ってる方がいましたら教えてください。

まああの価格なら毎年買ってもいいんじゃないかと思ったりもしますけどね。