無料アイコン素材-フリーで使えるドット絵アイコンのソザイガロー

ソザイガロー ~ Life is Pixel Art ~
Pixel Art Editor icon sumple
  • TOP >
  • ドット絵アイコンエディタ"icon Canvas"

ドット絵アイコンエディタ"icon Canvas"

ドット絵 アイコン pixel art 16px ドット絵 アイコン pixel art 16px
どなた様もこの様なドット絵アイコンをこの無料ツールで作る事が出来ます。(^^♪)
iconCanvas使用方法
 Web上でドット絵のアイコンが作れる簡易型ドット絵アイコンエディタ"iconCanvas"。
 まずは作りたいアイコンのサイズを選択しましょう。
画像サイズのボタン
サイズのボタンをクリックすると、右図のようにアイコンを制作するキャンバスが開かれます。

 キャンバスには以下の2つのボタンがあります。
画像の処理
ドット絵アイコンを描く
 まずはパレットで色を選択。
 あとはキャンバスでクリックしてドットを着色して下さい。

 着色したドットを消したい時は、マウスを充ててダブルクリックすることで消す事が出来ます。
 描画中の絵はプレビューに表示されます。
しかし、このままでは保存出来ません。

「PNG画像に変換」をクリックしてPNG画像に変換。

 すると右図のようにPNG画像に変換されたアイコンが表示されます。

 あとはアイコンを保存するだけ。背景が透明化処理されたPNG画像が保存されます。
使用上の注意
 描画中にキャンバスを閉じても描画中のアイコンは消えません。再びキャンバスを開けば描画中の画像がそのまま表示されます。但し、以下の行為が行われた場合は描画中のデータは完全に消去されます。

[1] 「画像を消去する」ボタンのクリック。(PNG変換済みのアイコンは残りますが、続きを描く事は出来ません。)
[2] このページをリロードした時。(PNG変換済みのアイコンも消えます。)
[3] このヘージから離れて、別のページへアクセスした時。

くれぐれもご注意下さいませ。
iconCanvasについて
 icon Canvasはウェブ上で使える簡易型ドット絵アイコンエディタです。
動作環境 (2012年1月29日現在)
[対応端末]PC及びタッチパネル搭載端末(スマートフォン等)に対応。
[対応ブラウザ]html5対応のブラウザ。
[javascript]ONに設定。
iconCanvasの機能
[消しゴム機能]PCの場合はマウスをダブルクリック。タッチパネル搭載端末は指で触れて軽く動かすことでドットを消去します。
[画像を消去]描いている絵を全て消去します。
[PNG画像に変換]描いている絵をPNG画像に変換します。
PC仕様とタッチパネル搭載端末仕様との違い
[16×16pixel]縦横16マス/PC版のみ
[32×32pixel]縦横32マス/PC版のみ
[スマホ版(320×320pixel)]縦横16マス
[タブレット版(768×768pixel)]縦横32マス
Thanks
jsdo.it:JavaScript,HTML5,CSSを書いて共有するサイト。
ポンクソフト:PHPやjqueryなどのサンプルを掲載しているサイト。
HTML5.jp:html5情報サイト。
YouTube
Pixel Art Editor"iconCanvas"動画集:iconCanvasで制作したソザイガローのPixel Artを紹介。
主な作例
pixel art 歴史人物ミニ顔アイコンpixel art 自動車ミニアイコン←まだほんの一部です。もっと見たい方は左記の画像をクリック。
  • iconCanvas
    使用方法
  • iconCanvas
    について
  • canvas
    16×16pixel
  • canvas
    32×32pixel
ドット絵 pixel art icon サル
PAGE TOP