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でインポートし、アプリでパターン色の設定を「白」にしておくことで、常に画像本来の色を表現することもできます。

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


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



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

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

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


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

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


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

2018/09/07

ステンシルレイヤーの特性を利用した画像を作ってみる (Tiny Art Wallpaper)

ステンシルレイヤーを使用すると、でき上がり画像の中に2つのデザインを混在させることができます。

パターンや色使いなどが大きく異なるデザインも対比が出て楽しいですが、微妙に変化をつけただけのものもちょっと面白い効果がでます。

執筆時のバージョン: 1.6.0


でき上がり画像がこちら。
円の部分がステンシルレイヤーです。

半透明のような感じですがそうではなく、2つの同じデザインに対し、色だけを変更しています。

半透明を利用した場合には色の変化に制限がありますが、この方法だと色相が全く違う色使いも可能です。


まずは、色(背景、パターン、スタンプ)をそれぞれ設定し、スタンプを適当に選んで全体に散らします。


ちょっと渋めな色使いとシンプルな縦のストライプで。

イメージは純和風です:)
次に、現在の状態をステンシル用の画像素材としてアプリに登録し、追加されたアイテムを選択します。

1.ステンシルビューを開く
2.画像素材のタブに移動
3.歯車のアイコンで設定モードに移動
4.「+New」ボタンで画像素材として保存
5.選択モードに戻り、追加されたアイテムを選択

ステンシル形状のタブに移動し、形状アイテムを選択します。


ちなみに、ここで使用している画像はこの記事用に描いてインポートしたものです。アプリの組み込みアイテムには含まれません。
全く同じデザインが重なっているのでうっすら影が見えるだけですが、この時点で2つのレイヤーが有効になっています。


<ちょっと注意点です>

今回の方法は、ステンシルレイヤーと通常領域に同じデザインが適用されていることを前提にしていますので、この先は画面タップなどでスタンプを追加してしまわないようにしてください。


背景、パターン、スタンプ色をそれぞれ少しだけ変更します。

ステンシルレイヤー(円の部分)に表示されているものは、常に画像素材として保存された時点のものになります。ここで変更しているのは、ステンシル形状の透明な部分を通して見えている通常のデザイン領域になります。

冒頭のものと同じ、でき上がり画像です。

ステンシル形状の境目で大きく色が変わっているスタンプがあるのがわかるでしょうか?

今回は同じ色相内に限定して色を変えただけなのでちょっと地味な変化ですが、ステンシルレイヤーを利用する際のアイデアのひとつとして取り上げてみました:)



以上、
ステンシルレイヤーの特性を利用した画像を作ってみる、でした:)

2018/08/31

壁紙作成アプリ Tiny Art Wallpaper の基本的な使い方

簡単に壁紙などの画像が作成できるオリジナルアプリ:Tiny Art Wallpaper の基本的な使い方をご紹介します。

執筆時のバージョン: 1.6.0 alpha(開発中)
(この記事で扱っている機能はリリース済みの1.5.2と全く同じですが、一部のレイアウトやアイコンなどがほんの少し異なります)


まずはでき上がりのイメージです。

端末の壁紙に設定したところのスナップショットですが、PNG画像として保存することも可能です。

1920 x 1200のタブレット端末を使用していますので、縦長のスマホだと横幅がもう少し削れた表示になります。
ここからが使い方の手順になります。後ほど説明しますが、まずは上位の「ステンシルレイヤー」に表示される画像素材を作成します。

今回はピンクベースで甘めな配色ですので、パレットを開いて背景色タブに移動し、濃いめのピンクを選択します。

さらに、下位レイヤーとのコントラストを強めるため、右側の明度のスライダーをほんの少しだけ下げておきます。

繰り返しパターンを選択し、スライダーで適度なサイズに調整します。

ちなみに、デザインしている端末の壁紙に使用する場合にはプレビューとまったく同じバランスになりますので、パターンの見切れ方などを気にしつつ調整するとよいでしょう。

不透明の白だと少しキツすぎるようですので、パレットを開いてアルファ値(透明度)のスライダーを下げ、背景になじませます。

背景色がカラーの場合には、パターン色に白または黒を選択してアルファ値を下げつつ調整するのが、違和感のない配色にする一番簡単な方法です。


初めにちょっと言及しましたが、ここまでは、通常デザインの上位に表示される「ステンシルレイヤー」に適用する「画像素材」を作るための手順です。

ステンシルビューを開いて画像素材のタブを選択したら、歯車のアイコンをタップし、設定モードに移動します。

右下の「+New」ボタンをタップし、プレビューされているデザインの内容を新しい画像素材としてアプリに保存します。

保存処理が終了すると選択肢のサムネイル画像(今回はピンクの水玉ですね)が追加されますので、設定モードから選択モードに戻って項目を選びます。

タブを移動し、ステンシルの形状を選択します。

アイコンの白い部分に先程作成した画像が表示され、それ以外の部分には通常のデザインが透過表示されます。

結果として、でき上がり画像に「アプリ内で作成した2種類のデザインを混在させることができる」という仕組みです。

ステンシル形状を選択した時点で、デザイン領域には完全に異なる2枚のレイヤーが表示されています。

縮小された画像ではちょっと見にくいかもしれませんが、ほんの少し影がついているのがわかるでしょうか?

上のレイヤーは今選択した画像素材、下のレイヤーは、まだ何も変更していない同じデザインが表示されています。

では、通常のデザイン領域(下位のレイヤー)を変更していきましょう。

まずは、繰り返しパターンを細めのストライプに変更します。

先程までの作業と同じパレットが使用されていますので、ちょっと重いですね。

背景色、パターン色をちょっと明るめに変更してみます。

多少見栄えがするようになったでしょうか。

シンプルな壁紙が好みの方は、このあたりの手順、もしくはピンクの水玉のみで完了としてもいいかもしれませんね。
さて、ここまでで2つのレイヤーの基本調整が終わりましたので、ちょっと飾り付けをします。

スタンプビューを開いて、いくつかスタンプを選択します。

スタンプは「画面タップで1つずつ」、または「自動生成で一気に画面全体に」、の2種類の方法で追加できます。

自動生成の場合には、スタンプビューの密度設定スライダーを適度な値に調整し、画面下アイコン群の右端にある再生成アイコンをタップします。

もちろんスタンプにも色を割り当て可能です。

白しか選択されていませんでしたので、少し暗めに調整したピンクを追加します。

ちなみに、明るい色と暗い色を混在させるため、スタンプは一つの色相につき2系統の明度調整が可能です。

お気づきになった方もいるかもしれませんが、ステンシルレイヤーに表示するための画像素材を作る際にも、事前にスタンプを散らしておくことができます。

それを利用した画像の作成方法は、またの機会にご紹介します。
(該当記事へのリンクです:ステンシルレイヤーの特性を利用した画像を作ってみる

とりあえず、今回は上のレイヤーはシンプルな水玉ということで。

最後に、ほんの少しだけ画像に味付けです。

質感(ステンシルレイヤー以外のデザインにかかるノイズ効果です)を選択し、下のレイヤーのみソフトな感じにしてみます。

縮小画像ではほぼ変化がわからないと思いますが、高解像度の端末ではちゃんと質感が表現されます。

下のレイヤーのみに適用しましたので、上のレイヤーはツルッとした感じ、下はさらっとソフトな感じの対比になっています。

画像が完成しましたので、使用方法を選択します。

PNG画像としてエクスポート、または端末の壁紙に直接設定することが可能です。

冒頭と同じ画像で、端末の壁紙として設定したものです。

プレビューされていた範囲以外の部分も画像に含まれますので、スワイプしてホーム画面を移動した際にもちゃんと追従します。

横表示はこちら。








(今回はずっと「ステンシルレイヤー」(ここではピンクの水玉です)を表示したままでしたが、実際には、下のレイヤーをデザインしているときには時々非表示にした方が作業が捗ります)


以上、
壁紙作成アプリ Tiny Art Wallpaper の基本的な使い方でした:)