ホームページ制作
■No.4 【アイコン+背景のつくり方】



     ティム

『アリゾナの夕暮れ』

今回のテーマはキャラアイコン。マウンテン・ティムを題材に、実際の手順に沿って解説していきます。
下絵を用意せずに、PC上で直接描画していきますので、普通に絵を描くようにアイコンをつくれるのがポイントです。

また後半では、Photoshop/LEを使って誰でもできるような手順で、雰囲気のある背景のつくり方を作例とともに解説します。
Photoshopで遊ぶ楽しさがわかるtipsになったと思います。


まず構図を考えよう


FFのノートより  まずノートかチラシの裏にイメージスケッチを描きます。
 マンガから受けたキャラのイメージでポーズを考える。劇中で印象のあるポーズもよい。理想はシルエットでキャラがわかること。
 ティムの場合は自信と誇りを持って悪に対峙するイメージで。ちょっと偉そうな感じ。
 スケッチから最終的なアイコンの原画を仕上げてもよいですが、今回は絵画的に制作したいのでPCに移行して直接ラフスケッチに入ります。
ラフスケッチその1  さらさらっとイメージを掴もう。1枚描いたら、不透明度を30%位にしてその上から描きなおす。それを繰り返して納得いくまでシルエットを描きましょう。
ラフスケッチその2  いい形になってきたらパーツを意識して少し描き込んでみます。変なところがあったら描き直す、軽い気持ちでいきましょう。
 大体こんなもんかなー?と思ったら、お次は着色してみましょう。


色を塗ろう


着色その1
 おもむろに色を塗ってみる。ここでようやくアイコンのイメージが掴めてきます。まだ本塗りじゃないから、自分のイメージを掴むために楽しんで塗ってみよう。
着色その2  色をどう組み合わせればいいか悩んだときは、白黒でメリハリのつくようにするとよいでしょう。先に白黒で考えてもよい。
 いい感じにイメージを掴めてきたら、一旦色は置いといて線を整理します。


線画のベースを描こう


ラフスケッチその3  これまで描いたものを下絵にして、1ドットの線でなぞるようにドットを打て!全体のアタリを付けます。細部を修正は後にやるので、今はそのためのベースを作るようにドットを打ちましょう。
下半身ラフ1  上半身のベースができたら下半身に違和感が発生。描き直してみよう。原画からドット絵を起こすときも、違和感があったら描き直そう。
下半身ラフ2  つま先から肩・首までの流れをギュンギュギュンとね。静の中に動を考えるんだ!
 困ったら擬音を見ろ!自分で擬音を表現したポーズをとってみろ!キャラに擬音のポーズを取らせればうまくいく!
ベース  清書したらタイツみたいになった…。まぁ、下半身もできたところで軽く着色してみよう。
ベースに着色  それっぽい形になってきました。ここまで来ると自分が作ろうとしてるイメージを掴めてきてるでしょう。これをベースに細部を描き直します。


一ヵ所だけ作り込んでみよう


下半身ラフ1  全体的な作業でやる気を失わないように、一ヵ所だけ作りこみます。どこを作るかは自由ですが、顔や大きい部分など、特徴的な部分を選ぶとよいでしょう。
 ズボンの色を3色決めて塗っていきます。ズボンの股付近の資料が無かったのでカプコン3部ゲーのジョセフのズボンを参考に描きました。
 立体的に色を塗るには、対象を直方体のように考えて影を付けるとよい。先にズボンを仕上げましたが、後で合わなかったら修正します。


全体を見直そう


 ここで一度全体を見直します。シルエットを仕上げる気持ちで不自然な所を修正しよう。
 左腕が気に入らない。リテイク(描き直し)だ!
 左腕は最初から描き直すつもりで、とりあえず奇妙なポーズを取らせておきました。とくに意味はないですがエスパー魔美の指。
 ティムっぽい左腕とはどんなだろう。悪人には偉そう&だるそうだから…よし、腰に手を当ててみよう。お、右肩から流れるような構図になったぞ。
 明らかに変だった襟元〜右腕を描き直します。ジョジョ風アイコンの決め手は胸、肩、腕です。気合を入れろ!コミックスを見ながら形を捉えましょう。
 線を整えると…アイコンらしくなってきました!ベースをしっかり作れば、このように描き直しても崩れません。
 次は一気に上半身を描きます。ティムの上着は豹柄です。パンサーです。
 こんな小さいスペースに豹柄なんて描けるのかよ!だが、やるしかねぇ。


まず構図を考えよう


豹柄
 豹柄っていっても…。こういうときは手軽にネットで資料を探そう。バッグやジャケットを探すもピンと来ず。豹ねぇ…。英語だとジャガーだっけ?パンサーか?パンサーといえばMac OSX 10.2(通称Panther)。実にいい発色じゃないか!資料決定(笑)
 Pantherの画像からパレット(右図)を作ります。これで豹柄の準備はOK。
豹柄なし  豹柄を描く前に上着の陰影を付けます。この陰影を考えながら豹柄を描きます。
 服のシワを考えて陰影を付けるとよいでしょう。大切なのは布の流れと筋肉の流れです。
 ついでに手袋も仕上げてます。
豹柄描画  豹柄に見えるような見えないような…。なんとなくそれっぽくなったから次へ進もう!次は顔だ!


顔・頭部の描き込み


顔〜後頭部  小さい箇所なので表情でキャラを描くことは難しい。頭部は特徴的なパーツをメインに構成することで表現します。
 ティムの場合は帽子、もみ上げ、後ろ髪に決めました。
帽子着用  そのまま帽子も仕上げます。帽子の柄はゼブラ柄。もしかしたら白黒の帽子かもしれませんが、しっくり来ないので豹柄と同じパレットを使いました。


細部を画き込んで完成!


左胸にさりげなくバッジが  ガンベルトを描きます。銃と弾も描きこみ。ベルトの色はアクセントを付けようと赤にしました。ご自慢の金のバックルも装備。胸には保安官バッジ。
イケメンアイコン完成!  帽子の紐を描き、ロープを持たせて完成です。マウンテン・ティムに見えるかしら。このアイコンは以上の工程で作られました。


軽くアニメーションさせてみたり
 もっと詳しい色の塗り方、作り方など、細かい疑問は気軽に聞いてください。少しでもあなたのアイコン制作に役立てば幸いです。
かっちょいいアイコンを作ってみてくださいね。

アイコンを作ってみたら
アップローダーへ投稿願うッ!
感想やアドバイスでお答えします。





雰囲気のある背景を作ってみよう




アイコンに合わせて、雰囲気のある背景を作ってみよう。
ここでは工程がわかれば誰でも作れるような、なるべく単純な背景のつくり方を解説します。

テーマはアリゾナの荒野。まずGoogleでイメージ検索。
夕暮れのアリゾナ荒野に決めました。

画像サイズは640X120。広大なアリゾナの雰囲気を出したくて横長にしました。ホームページとかにも使い回せるし。

以下、画像をクリックすると原寸の画像を開きます。
アリゾナ1

最初にグラデーションで塗ります。
夕日が沈みかかり、空には夜の闇が開けてきたような。

アリゾナ2

えんぴつツ−ルを使って岩山と丘のシルエットを描きます。最初にヴァーっと高低を描いてから、ちょんちょんと草木を付け足します。描きすぎに注意。

アリゾナ3

不透明度を変えてレイヤーを追加。重なる所は前のレイヤーの選択範囲(Ctrlボタンを押しながらレイヤー名をクリック)で切り抜く。
夕日に当たってる感じを出すため新規レイヤーを作り、一番手前の選択範囲を読み込んで 編集>境界線を描く(幅:1px、位置:内側、色:R255,G0,B0)。左右と最下部の線を削除してから不透明度30%で重ねる。

アリゾナ4

新規レイヤーにザッと雲を描く。流れるように。このレイヤーは後で選択範囲として使います。

アリゾナ5

消しゴムツールをえんぴつ:1pxに設定して雲を削ります。雲の流れに沿って水平に削っていきます。
削り終えたら、えんぴつツールでチョンチョンと突いて仕上げます。
一番面倒な過程ですが、深く考えずに適当で構いません。ペンタブレットなら16連射で速攻完成。

アリゾナ6

作業していたレイヤーを『雲ベース』と名前を付けて非表示にしておきます。
『雲ベース』の選択範囲を読み込み(Ctrlを押しながらレイヤー名をクリック)、新規レイヤーにグラデーションを描画します。
それにフィルタ>ぼかし>ぼかし(移動)(0度、5px)をかけ、不透明度75%にします

アリゾナ7

レイヤーを複製し、複製したレイヤーにフィルタ>その他>スクロール(水平方向へ:240px、ラップアラウンド)をかけます。
スクロールで巻き戻った境界線をスタンプツールなどで修正します。

アリゾナ8

作業中のレイヤーの選択範囲を読み込み、新規レイヤーに白で塗りつぶします。
二つの雲のレイヤーの下に並び替え、不透明度15%に設定。こうすることで二つのレイヤーに表情の差が生まれます。
これで雲が完成しました。

アリゾナ9

最後にサボテンなど樹木のディテールを描き込みます。

これで完成です。
少しカスタマイズしてみましょう。

アリゾナ10

夕日を追加してみたり。

アリゾナ11

色調補正してみたり。
ここではレイヤーを統合して、イメージ>色調補正>色相・再度(色彩を統一をオン)で色調を変えてみました。

背表紙アイコン
  雲のレイヤーをアニメーションさせてみたり。

CSSやTableタグの背景指定でアニメーションGIFを重ね合わせると面白い効果がでます。
 



おわりに


なるべく短い文章に要所をまとめて記載したつもりですが、思ったより長く、わかりづらくなってしまいました。
(似てる似てないはともかく)ティムのアイコンはいい感じに仕上がりました。もう2、3キャラ作ってみたいです。
アリゾナ〜な画像は即興で作ったものです。
簡単だけどそれっぽく作れたので、アイテアをtipsとして公開しようと…文章にしたら難しそうになってしまいました。難しいことは何もしてないです。
人に物を教える身分ではありませんが、何かの参考になればと作った次第です。




トップページへ

★リンクも
大募集中!!
トップページ
ヘルプ/サイトについて
素材トップ/ゴゴゴのオキテ

カベガミ素材
ボタン・アイコン素材
タイポグラフィー
HTMLテンプレート
イラストギャラリー
素材のつくり方

ジョジョネタ(旧コンテンツ)
ゴゴゴ集会(旧コンテンツ)

ゴゴゴ掲示板
ゴゴゴチャット

感想のメール待ってます!
jojoagogogo@infoseek.jp