Zooper勉強中:Zooper Widgetで吹き出しを作るよ

キャラクターものの壁紙を使ったホーム画面では、吹き出しを使ってその中に情報を書き込むようにするとキャラがしゃべっているようなホーム画面になっていい感じです。
そんなよくあるのを作るために、フキダシを作る方法はいくつかあるのですが、今回はZooper Widgetを使って吹き出しを作ってみます。

大きい部分を作る

140419-1
矩形モジュールを使います。
矩形(くけい)です。短形じゃないです。
すいません、この間知りました。

140419-2
幅・高さは適当に調整し、Cornersを増やすと角丸になるので、そこも適当に。
ちょっと角度を付けるといい感じですね。

飛び出てるツノ部分を作る

140419-3
続いてもう1つ矩形モジュールを作ります。(わかりやすいように色を変えています。)
今度はちょっと細長い感じにして、Curvingをいじります。

140419-4
値を増やすとどんどん丸まっていきます。

140419-5
これを幅を狭くして高さをちょっと伸ばすと扇形になります。
ちょこちょこ値を弄ってみてください。

完成

140419-6

140419-7
扇形を回転させて、位置を調整して、色を合わせれば吹き出しの完成です。

140419-8 140419-9

できました。

…背景が明るくて白の吹き出しだとちょっと目立たないですね。
ここは縁取りが欲しいところ。

吹き出しを縁取りする

140419-10
まず先ほど作った矩形モジュールを両方とも複製します。
で、縁取りという項目を適当に10くらいにしてください。
色は黒などで。
これで縁取りだけの矩形ができます。

140419-11
そのままだと矩形の重なった部分がおかしくなるので、縁取りしたモジュールを塗りつぶしの矩形モジュールの下(リストの上の方)に置きます。これで塗りつぶしのほうで縁取りが重なった部分は覆われます。

完成

140419-12
これで完成です。

形が限られる(頑張れば別のもできそうだけど)のと、モジュール数が増えてしまうのが難点ですね。
あとは吹き出し型のフォントを使うという方法もありますが、それはまた別のお話。

この記事が気に入ったら
いいね!しよう
 シェアする  ツイートする
PREVIOUS POST
NEXT POST
ANDROID
GIVES YOU
MORE