search
LoginSignup
3
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

Piskelでドット絵を描く! 〜応用編〜

Piskelとは?

サイト:Piskel
概要:簡単にドット絵を描ける環境
推奨ブラウザ:Google Crome / Microsoft Edge

アプリやゲームを作る際の オリジナルのキャラクターアイコン を作る時におすすめです。

Piskelを初めて使う方は、「Piskelでドット絵を描く!〜基本編〜」を参照してみてください。

・2色を同時に使いわける技

色を選択する際、四角が二つあります。
Color.png

これらの四角の内、
手前の四角(Primary)は、左クリックでドットを描くことができ、
奥側の四角(Secondary)は、右クリックでドットを描くができます。

使いたい色の四角 コマンド
手前の四角 左クリック
奥の四角 右クリック

・ドットの明るさを変える(Lighten)

すでに描いたドットの明るさを調整するには次のツールを使います。(画面左下)
Lighten.png

やり方は、このアイコンをクリックしてから、ドットをクリックするだけです。
この時、次のコマンドが成り立ちます。

目的 コマンド
明るくしたい クリック(左右どちらでも可)
暗くしたい Command + クリック

このツールを使うと、光沢などを表現することができます。
例えば、りんごに光沢をつけると次のようになります。
ChangeApple.png

・画像に含まれる色を読み込む

何かしらの画像の色をまとめて抽出し、一つのパレットにセットとして読み込むことができます。
主な手順は次の通りです。

  1. "Palettes" のプラスボタン(+)をクリックします。
    Palettes.png

  2. "Import from file"をクリックします。
    NewPalettes.png

  3. 色の抽出をしたい画像を選択します。
    選択すると、その画像に含まれる色が全てリストアップされます。
    AfterImport.png

  4. "Save"をクリックし、パレットの作成が完了です。
    AfterPalettes.png

今回の例では、以下のロケットの画像の色を読み込みました。
Rocket.png

・GIFアニメーションの作成

GIF:"Graphics Interchange Format"の略で、画像が何枚も入った画像データ。
GIFアニメーション:パラパラ漫画のように画像を早く切り替えることを用いたアニメーション。

主な手順は次の通りです。

  1. "Add new frame" か "複製ボタン"を用いて、複数の画像を用意します。
    AddnewFrame.png

  2. パラパラ漫画をイメージしながら、動きのある絵を描いてみます。
    gifMaterial.png

  3. 画面の右上に連続的に、画像が切り替わり、アニメーションが再生されます。

Afterwrotegif.png

今回のGIFアニメーションは次のようになりました。
RocketBig.gif

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3
Help us understand the problem. What are the problem?