始めてのティラノビルダー、クリック待ち、作ってみた。

皆さん、こんにちは。

始めてのティラノビルダー、今回は、自分でクリック待ちグリフを作ってみようと思います。前回の記事を書く際に、調べていると、このクリック待ちティラノだよね!と判ると書いていた方が有りました。

そう思ってみると、確かにそれぞれに特徴が有るのだなと思います。

フォント(文字の種類)を選ぶ事も楽しいですが、自分だけのクリック待ちが有ると良いな!と考えました。

いくつか、やって見ますので、皆さんの参考になれば、幸いです。

先ず、一つ目は此方です。

4枚の画像を使って、次に行って下さいね!と言うイメージが出来る感じにしてみました。基本の画像を作っておけば、作品の感じに合わせて色替えも簡単にできますので、良ければチャレンジして見て下さい。

此方のサイトを参考に致しました。大変ありがとうございます。

PhotopeaでWebPアニメーションを簡単に作成
WebツールのPhotopeaで現状はPhotoshopでも作成できないWebPアニメーションを簡単に作成することが出来ます。作成の流れは昔Illustratorで_flash アニメを作成出来たときのような感じです。 Photopea (...

自分でやって見た際に、こうしたら良いなと思った事が有りますので、最初にご案内します。

クリック待ちグリフは小さい物です。多分50Px以上の大きさは無いと思います。前回ご案内した購入アイテムは、16Pxでした。ただ、最初からその大きさで作ろうとすると、どうしても全体の雰囲気が分かり難いのと操作もし難いです。

最終保存の段階で、簡単にサイズ調整出来ますので、作り始めは大きめが良いと思います。

私は200Pxの正方形で作り始めました。

もう一つが、PhotopeaでGif形式に保存する際に、レイヤーをアニメーションとして認識させる為に、必ず、各レイヤーの名前の前に_a_を付けて下さい。

これが無いとGif形式の保存の際に1枚の画像としてしか保存できません。

因みにこの操作は、Photoshopではつかいません。Photoshopですと画像1枚づつの表示時間変更や画像をつなぐ際の効果(フェード等)も入れる事が出来ます。

Photopeaを立ち上げたら、①新規プロジェクトで200×200PX、DPIは72PXで良いと思います。

最背面は、必ず透明を選んで下さい。出来ましたら、②作成をクリックしますと画面が切り替わります。

背景は中心に有りますが、少し小さくて作業がし難い様でしたら、から、マークで大きく出来ます。

最初に三角形を作ります。左のシェイプツールの中からパラメトリック図形を選択します。

上段の②サイドが画数、最初は5角形になっていますので、3に変更します。コーナーラディウスは数字が大きくなりますと、角が丸くなります。お好みで変更して下さい。

④上段のピクセィルは色です。カラーの枠をクリックしますと、カラーピッカーが出ますので、⑤で選択して、問題が無ければOKボタンで確定します。

これで、⑥が出来上がっています。

シェイプで出来上がった△は、均等になっていますので、二等辺△にする為に、①上段の鎖マークを外しておきます。これで、比率を自由に変更する事が出来る様になります。

③そうしましたら、この時点でレイヤーの名前の前に_a_を付けて置きます。先に付けて置くと、後でレイヤーを複製した際に、全部の名前を変更しなくて良いです。

あと、_a_の名前が付いたレイヤーのアニメーションですが、下から順番に変化して行きます。

名前の変更が出来ましたら、レイヤーを右クリック、④別窓が出ますので、ブレンドオプションで、今回は、⑤斜角と浮き彫りにしました。数字をお好みにしてOKです。

レイヤースタイルの別窓右上の新しい定義の下に変化のサンプルも出ていますから、参考にして下さい。

この状態で、もう一度、レイヤーを右クリックして、別窓を出したら、⑥複製するで、合計4回の同じレイヤーを作ります。

次は、色替えと配置をやって見ます。

①上段のレイヤーから、②新しい調整レイヤー、③色相/彩度を選択しますと、④が出来ます、別窓も開いていますので、色相を調整して、お好みの色に変更して下さい。作業中の画像色も変化するので、分かり易いと思います。

⑤出来ましたら、4枚のレイヤーを動かして移動の形を作ります。レイヤーパレットの下から順番に表示されて行きます。

良ければ、⑥上段のファイルから、⑦別名で保存、GIFと進みます。

別窓が出ますので、大きさ、速さを決めて、⑨保存しますとファイルがダウンロードされます。

点滅タイプも作ってみました。

これは、先程より簡単で同じ位置のファイルの交互に不透明度0%を入れるだけです。(のファイル)

先程のファイルを流用しましたので、4枚で作っていますが、2枚でも大丈夫です。

本当は、もっとフワッとした感じにしたかったのですが、私には無理でした><。

最後に、実際に入れてみたサイズ感の画像をご覧下さい。

フォントは、全て35ポイントで、クリック待ちの大きさを変えています。文字の大きさに合わせて、クリック待ちの大きさが変わる訳では無いので、最初に、文字の大きさを決めてから、作ったら良いと思います。

今度は、クリック待ち大きさはそのままで、文字の大きさを変えてみました。

お好みに合わせて、使ってみて下さい。

補足ですが、文字の方は、1ptは約0.35mm。35ptだと約12,5mmになります。

クリック待ちが72dpiX72dpi(今回は、それで作っています)で、30pxなら、10,5mmです。

次は、背景とBGMをやって見ます。

おつかれさまでした。

コメント

タイトルとURLをコピーしました