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 の基本的な使い方でした:)