理系ジン

しばらくPythonに力を入れる予定です。

素材データとツール

素材

概要

理系ジンは、HTML5アプリを作ってみようと思っています。まだ何も作っていないですが、調べて良さそうに思った素材データや開発ツールの紹介をします。

素材

素材とは、Webサイトやアプリで利用する、画像やフォントやアイコン等を指します。

次のようなキーワードで検索すれば情報が得られると思います。

  • 素材、フリー
  • フォント、画像、写真、アイコン、ピクセルアート、ドット絵、音楽、ゲーム
  • ジェネレーター、ツール、ツール名
  • PNG/GIF/JPG/SVG
  • AI/EPS/PSD
  • WEB FONT/TTF/EOT/WOFF
  • OBJ/MQO/PMD/MMD
  • ICON/ICNS/ICO
  • HTM/HTML/JS/CSS

次のWebサイトでは、素材が頻繁に紹介されます。チュートリアルの情報も多いです。検索も可能です。直接利用しなくても参考になると思います。

特に気が付いた、素材提供サイト等です。

ツール

SVG作成ツール

次のサイトに詳細に分類されてまとめられています。

次のものを使ってみました。

使用感は大体同じでした。細かい使い方がよく分かりませんでした。

Macでは標準添付のqlmanageコマンドでSVGをPNGに変換できるそうです。

GIFアニメ

GIFアニメーションにより画像を動かすことができます。

次のサイトで、基礎知識や作成方法が説明されています。

主な、GIFアニメ作成ツール・Webサービスです。

GIFアニメ化JavaScriptライブラリがあります。

GIFアニメをCanvasで再生するJavaScriptライブラリがあります（上のjsgifとは別物です）。

アニメーションPNG

アニメーションpng（APNG）は、Firefox/Opera/iOS 8のSafari 8で対応しています。

次の解説をご覧ください。

ドット絵（ピクセルアート）

ドット絵はピクセルアートや8-bitアートとも言うようです。

以下に、ツールを紹介します。それぞれ少し使ってみましたが、特にEDGEやGraphics Galeは完成度が高そうです。iOSやAndroidには、他にも多数のツールがあるようです。

アイコン作成ツール・Webサービス

Androidのアイコンの情報は、Iconography | Android Developersを参考にして下さい。

理系ジンの意見

素材は、フリーで使えるものが多くあります。直接使わなくても参考になると思います。

ツールは少し使ってみましたが特に微調整が難しいです。汎用的なツールより特化したツールの方が使い易いと思います。

理系ジンは素材が必要になった場合、先ずは、フリー素材を参考にして、ツールを使わずCanvas等のプログラミングでの作成を検討すると思います。

予定

HTML5やJavaScript用の開発環境についての記事を予定しています。