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

ヘルプ | サイトマップ

EZfactoryサイト内検索

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

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

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

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

ダウンロードCGI

GIFアニメーション

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

サウンド付きページ

ドット絵

モノクロ

カラー

スクリーンセーバー



ドット絵 (モノクロ)


ドットで絵を描こうVol 1 「初級編」


昨今携帯電話でよくみられるカラーやモノクロのイラスト、壁紙、アニメーション。 そのほとんどが「ドット」というもので描かれています。
耳慣れない方もあると思いますが昔でいうファミコン、ゲームウォッチetcに使われていた絵を思い浮かべてみて下さい。
あの、カクカクした四角いマスで描かれている絵の事です。 今回は自分でこの「ドット絵」に挑戦してみましょう。

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

写真: タブレット 先ほども申し上げたとおり、ドット絵とは四角いマスで描かれているような絵です。手順を分かりやすく説明すると碁盤のマス目を塗りつぶしていく、というような作業です。
アプリケーションソフトはここではAdobe Photoshopを使用しますが、お持ちでない方は、同様の機能を持つ、Macromedia FireworksやPaintshop Pro等を利用しても良いでしょう。
使用するツールはマウス、あればタブレットなどが便利です。

1. モノクロで線を描いてみる

まずはフォトショップの鉛筆ツールを使って黒い線を書いてみましょう。
初めに携帯電話に合ったサイズの画面を新規につくります。 鉛筆ツールを選び鉛筆の太さ (ピクセル) を決めます、黒色を選択し まっすぐな線を引くときにはシフトキーを押しながらマウス (タブレット) で線を引きます 様々な太さ (ピクセル) の線を色々書いてみましょう。 まっすぐな線や斜め線はラインツールを使って描きます。

図: モノクロで線を描いてみる1

図: モノクロで線を描いてみる2

2. 点線を書く

陰影やグレーの感じ、模様などの効果に良く使うのが点線。モノクロの場合、どうしてもカラーの様にカラフルな画像や陰影、立体感がつけにくいという問題があります。そこで白と黒の分量 を調節したり格子模様にすることで陰影の効果を出す事ができるのです。
書き方は鉛筆ツールを選び、太さ (ピクセル) を選びます。このときにボックスをダブルクリックし、ブラシオプションというボックスを出します。「ペイントの間隔」のパーセンテージを200〜に設定すると等分された点線に。また数値を上げていくことによって間隔の異なった点線を書くことができます。

図: 点線を書く

3. 丸や四角を描く

ツールボックスの選択ツール (丸・四角) で好きな大きさの円や四角を決めます。
メニューバー (編集) >境界線を描く>を選びピクセル数 (太さ) と境界線の始まり (内側・中央・外側) を決定。これで丸や四角もツールで簡単に描くことができます。

図: 丸や四角を描く1

図: 丸や四角を描く2

図: 丸や四角を描く3 おなじように選択範囲をバケツでツールで塗りつぶしてみましょう

実際に絵を描いてみよう!

ドット絵の基礎はわかりましたでしょうか?
では、実際にこれらを使って右記のようなクマのイラストを描いてみましょう。
実際に絵を描いてみよう!

1.  まず携帯電話に合ったサイズの画像を開きます。
(60ピクセル×60ピクセル)
2.  鉛筆ツール&シフトキーでまっすぐな線と点線をかきます。
図: 制作1

3.  選択範囲で好きな大きさの円をかきメニューバー (編集) >境界線を描く>を選びピクセル数 (太さ) と境界線の始まり (内側・中央・外側) を決定。大きな輪郭を作ります。その後、バケツツールで黒に塗りつぶし。
図: 制作2

4.  3と同じ手順で輪郭の中に白丸を描いてみましょう。選択ツール>バケツで白く塗りつぶしです。
図: 制作3

5.  3、4と同じ手順で耳、目の輪郭、鼻をそれぞれ円で書きます。
図: 制作4

6.  鉛筆ツールで好きな大きさの目を入れてみましょう。
図: 制作5

7.  イラストの下部にも点線や線を書き込んで、鼻の下にも点線を加えて完成です!
EZwebの場合、モノクロ画像の保存方式は1BitのBMPです。
できあがりましたか??
図: 制作6

練習用素材

右図のイラスト (色つき) を下絵にしてレイヤー (透明) を重ね、様々な点、面、線を用いてまずは写 して練習してみて下さい。 (画像を右クリックし、「名前を付けて画像を保存」を選択すれば、ハードディスクに保存することができます。)

図: 練習用素材1

→

図: 練習用素材2
図: 練習用素材3

→

図: 練習用素材4

作品例

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

図: 作品例1 図: 作品例2 図: 作品例3 図: 作品例4

このページの先頭へ




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