2018/09/14

繰り返しパターン画像のインポート (Tiny Art Wallpaper)

Tiny Art Wallpaper の機能のひとつ、「繰り返しパターン画像のインポート」の手順をご紹介します。

(インポート処理自体はとてもカンタンですので、いくつかの注意点をふまえつつ画像を用意するところがメインの記事になります)

執筆時のバージョン: 1.8.0 alpha(開発中)


画像はスマホやタブレット端末で描いてもよいですし、ペンタブレットがある方はPCで作業してUSB転送、またはGoogleDriveなどクラウドのストレージサービス経由という方法もあります。

今回はスクリーンショットの見やすさなどを考慮し、PC上で作業します。

ちなみに、使用しているのはFireAlpacaというソフトです。必要十分な機能に加え、立ち上がりがとても速いのでお気に入りです。アプリ組み込みのスタンプはほとんどこれで描きました。



アプリでインポート可能な画像サイズは以下の3種類ですので、幅、高さに適切な値を設定し、背景色が透明であることを確認して編集を開始します。

128 x 128
256 x 256
512 x 512



描画の前にちょっとだけ下準備をおこないます。

パターンは「白色で描く」という決まりですので、ベースのレイヤーを赤で塗りつぶします。見やすさのためだけの用途ですので、必要なければ手順をとばしてもかまいません。



レイヤーをダブルクリック、または歯車アイコンをクリックで属性の設定ダイアログが開きますので、下書きレイヤーにしておきます。

これで、書き出し時にこのレイヤーは無視されます。



下書きレイヤーはもう触りませんのでロックしておき、上にパターン描画用のレイヤーを追加します。



上下左右どこにもデザインがはみ出していない、繰り返しパターンとしては、いちばんシンプルなスタイルです。



アプリ組み込みのパターンと同じ動作にするためには「パターン部分は白」、「その他は透明」という決まりがありますので、必ず「透過PNG」として保存してください。


実際には、24-bitのアルファチャンネルなし(透明度の情報を省いたもの)というオプションで保存した画像もインポート可能ですが、アプリの「背景色」設定は完全に無視されることになります。

逆にそれを利用して24-bitでインポートし、アプリでパターン色の設定を「白」にしておくことで、常に画像本来の色を表現することもできます。

(「白」はアプリ内で何にも影響を与えない色という扱いになっています)


フルカラーの写真のようなものを繰り返し表示したい場合もあるでしょうから、ちょっと頭のスミに置いておくとよいかもしれません。



端末のアプリでインポートし、デザインに組み込むとこんな感じになります。

ちょっとひと手間加えてステンシルレイヤー用の画像を生成し、そちらに適用してみました。

微調整などもせずただ描きなぐっただけの模様ですが、繰り返すとなんとなくそれっぽい見た目になると思いませんか?:)


ちなみに、模様が互い違いに並んだり、もっと複雑に絡み合うようなデザインの場合には、ひとつひとつのオブジェクトを座標指定で配置した方が楽なため、ベクター編集系のソフトも同時に使用しています。

たとえば、左の画像にある矢絣柄は手描きの要素は必要ありませんので、完全にベクター編集ソフトのみで作りました。今回は割愛しますが、その辺はまたの機会にご紹介したいと思います。


以上、
繰り返しパターン画像のインポート、でした:)