au by KDDI 開発者向け技術情報はこちら EZfactory

ヘルプ | サイトマップ

EZfactoryサイト内検索

WEBページ マルチメディア・コンテンツ 技術情報 ダウンロード
マルチメディア・コンテンツ
Flashコンテンツ

写真フレーム・写真スタンプ

EZムービー (Eメールに添付)

EZムービー (ウェブページで再生)

ダウンロードCGI

GIFアニメーション

着信メロディ・着信ボイス

サウンド付きページ

ドット絵

モノクロ

カラー

スクリーンセーバー



カラー


ドットで絵を描こうVol 2 「カラー編」


前回モノクロで練習〜実践したドット絵、今回はカラーを用い、よりカラフルでグラフィカルな壁紙を作ってみましょう。
色々な色のグラデーションなどを使うことで立体感や素材感がリアルに表現できます。

EZwebで使用する場合、保存方法はPNG、カラーは256色以内、ファイルの大きさは7.5KB以内とします。

図: ドット絵サンプル
図: ドット絵サンプル
図: ドット絵サンプル
図: ドット絵サンプル
図: ドット絵サンプル
図: ドット絵サンプル
図: ドット絵サンプル
図: ドット絵サンプル
図: ドット絵サンプル

写真: タブレット モノクロの時と同様、使うソフトはフォトショップ、 使用するツールは鉛筆ツール、バケツツールなどあればタブレットが便利です。カラーでも同じように碁盤の目を塗りつぶしていく、という方法で描きます。

1. 実際に描いてみる

では実際に右図のようなイラストをドットで描いてみましょう。
実際に描いてみる

1.  初めに携帯電話に合ったサイズの画面を新規につくります。
2.  そこに右図の様な下絵になるイラスト (手書きやイラスト) を置きます。 置く時には色の見本用に一部コピーをして使いましょう。 デスクトップには「見本 (原本) 」、「作業用」、「新規ビュー (実寸サイズ) 」 の3点を常に見ながら制作していきます。
図: 制作1

3.  絵を下絵として使うために色を落として新規レイヤーを上に乗せトレースしていきます。
図: 制作2

4.  円選択ツールで顔を囲い、メニュー>境界線を書くで顔のアウトラインを取ります。
図: 制作3 図: 制作4

5.  任意の鉛筆ツールでアウトラインをトレースしていきます
図: 制作5

6.  このような左右対称のイラストの場合、半身を描いた時点で 体半分を選択>コピー>ペースト>水平方向へ反転。で、 もう半身を簡単に作ることができます。全身のアウトラインが取れたら下絵以外のレイヤーを結合して 1枚にしておきましょう。ずれているところ、細かいところは鉛筆ツールで修正します。
図: 制作6 図: 制作7 図: 制作8

2. では、色を塗っていきましょう

1.  色を塗るとき、右図のような色パレットを使いますが携帯電話の性質上、 淡い色やグレーがかった目立たない色より明るくはっきりした色を使うとよいでしょう。 色塗りには「バケツツール、鉛筆ツール」を使います。
図: 制作9

2.  パレットの中から肌色を選び、バケツツールで塗りつぶしたところです。
図: 制作10

3.  同様にバケツツールや鉛筆ツールを使って塗り絵の要領で色をつけていきましょう。これがベタ塗りの状態です。
図: 制作11

3. 立体感や陰影を付けていきましょう

1.  ベタ塗りをした色よりも暗い色、を影の部分に、明るい色をハイライトの部分に 使用することでイラストに立体感が現れます。 暗い色、明るい色を選ぶとき、どちらも2段階ほど暗い (明るい) 色を選んだほうが 実機で見た場合にも効果がより良く現れます。 上図のべた塗りのイラストと比べてみて下さい。
図: 制作12

2.  立体感や陰影を付けるときもつけすぎたり、 色の違いが解らなかったり、ぼやけてしまったりしないよう 必ず新規ビューで実寸サイズを確認しながら塗っていくことが大事です。
図: 制作13

3.  背景に色をつけた状態。
図: 制作14

4.  ここまで来るともう下絵は要りません。下絵は削除しておきましょう。
図: 制作15

5.  周りに装飾 (点線、陰影) などをして出来上がりです。 元の絵と比べてみて下さい。線や陰影がハッキリしているでしょう? 出来上ったら背景ともに画像を結合し、PNG保存して終了。 イメージレディなどでキロ数の調整をして完成!
図: 制作16 図: 制作17

作品例

このようにして制作したドット絵の例を下記に示します。練習すれば貴方もこのような絵が描けるようになるはずです。がんばってみてください。

図: 作品例1 図: 作品例2 図: 作品例3 図: 作品例4 図: 作品例5
図: 作品例6 図: 作品例7            

このページの先頭へ




Designing The Future KDDI
au 電話・インターネット 法人サービス 会社情報
  ここから当ウェブサイトの情報についてのメニューです。
免責事項 リンクについて 推奨環境 プライバシーポリシー Copyright © KDDI CORPORATION. All Rights Reserved.