#12
GIFで少し動くものに挑戦しました。

---

---

　

---

バナー考察：インプットの気づき

• ターゲットは30代くらいの女性向け？
• 文字のみのどシンプルなデザイン
• SUMMERとあるが、配色は春っぽい気がする
• 色が移り変わっているだけの動きだけど少し動きがあるだけで目を引く

　

トレースメモ：アウトプットの気づき（学び）

• 文字色が左から右へ移っていく全パターンの画像を用意し、それをアニメーションGIFにする

　

アニメーションGIF化について

こちらを参考にさせていただきました。
https://helpx.adobe.com/jp/photoshop/how-to/make-animated-gif.html

まず、色が左から右へ移っていく全パターン（今回は4枚）の画像を用意し、書き出します。
↓こんな感じです

---

• ファイル→スクリプト→ファイルをレイヤーとして読み込みで書き出した4枚の画像ファイルを読み込み
• タイムラインウィンドウから、フレームアニメーションを作成
• レイヤーからフレームを作成
• そのままだと移り変わり速度が速すぎたのでディレイを0.3秒に設定
• ループは「無限」になっていることを確認
• GIF形式で書き出し
• 完成です！

---

---

こんなに簡単に動くバナーが作れるのだなと新発見でした！

---

　

---

---

#11
踊る文字・グラデ文字を作りたかったのでこれにしました。

---

---

　

バナー考察：インプットの気づき

• ターゲットは万人受け？
• ふんわり食感の文字を踊らせることで柔らかい雰囲気を表現
• 背景のグラデーション・ぼわーっとした光の当たり具合から柔らかさを表現
• ドーナツも切り抜き＋光があたることでふわっと浮き上がっている印象
• Newのあしらいでリニューアルを強調

　

トレースメモ：アウトプットの気づき（学び）

• 背景の光は、円形グラデーション（クリーム色から中心に向かって白）とブラシツールで円を不透明度を変えながらスタンプのようにポンポンと載せた
• ドーナツの画像には、光彩（外側）を加えた
• ふんわり食感の文字には一文字ずつ、グラデーション・光彩（外側）・境界線を加えた
• フォントは、A1ゴシックだと思うが持っていなかったので見出ゴMB31で代用

　

ふんわり食感の文字加工について

↓こういう設定にしました

---

ふんわり感が色々なところに表現されていて、お腹が空くデザインでしたw

　

---

---

#10
6月なのでこれにしました。
今日は背景画像を自分でセレクトしてみましたー

---

---

　

バナー考察：インプットの気づき

• ターゲットは20代くらい？
• 父の日なのでお髭のアイコン（これ使ってるバナーがめっちゃあった）
• 中抜き文字でオシャレ感・抜け感
• かすれでヴィンテージ感
• 画像でいろいろ選択肢が提示されている

　

トレースメモ：アウトプットの気づき（学び）

• 回転ツールで直線を円形に配置
• 透明パネルのマスクを利用して装飾のかすれを表現

　

回転ツールで直線を円形に配置

こちらを参考にさせていただきました！ありがとうございます。
https://coonelnel.net/circle-alignment/

今回は、36本線があるので、10°ずつ回転で配置しました。
「command + D」で同じ操作の繰り返し、楽しかったです。

　

---

透明パネルのマスクを利用してかすれを表現

---

こちらを参考にさせていただきました！ありがとうございます。
https://adlive.co/article.php?code=118

・線でできた円形をグループ化して、マスクを作成
・白の長方形を配置
・黒のブラシで消したい箇所を描いていく
（参考では「アート_木炭・鉛筆」のブラシを使用されていましたが、今回は結構はっきりとした途切れ感だったので、普通の丸筆で描いてみました）
・残りの文字もグループ化して、同様の作業を実施

---

シンプルだけど、可愛らしさのあるデザインでした。
だんだん、これ使えそうという引き出しが増えてきた感触。

　

---

---

#9
ネオン文字をやってみたくて、これにしました。

---

---

　

バナー考察：インプットの気づき

• ターゲットは10代〜20代前半の若者向け？
• ネオンの文字は直線・円・少しのカーブだけでつくられたかわいさ溢れるデザイン
• 文字からそのままラインにして装飾を兼ねている
• まわりの装飾もネオンのあしらい（細かくて多すぎないのがいいと思う）
• 必要最低限の情報でスッキリとまとまっている

　

トレースメモ：アウトプットの気づき（学び）

• ネオン文字と背景の装飾は、ペンツールで描いたものに効果をつけた（詳細は後述）
• グラデは３色

　

ネオン文字について

こちらを参考にさせていただきました！ありがとうございます。
https://helpx.adobe.com/jp/photoshop/how-to/neon-effect.html
https://shelfull.com/photoshop/neon-effect/

２つの記事をミックスした感じで、以下の効果をつけました。
・光彩（内側）
・光彩（外側）
・境界線←これは文字にだけつけました

↓文字は全てグループ化してそれに効果を適用

---

---

↓各効果の詳細

---

---

---

---

シャドウとかもうっすら入っているのかなーと思いつつ、今回はこんな感じでできました！（ネオンかわいい）

---

　

---

---

#8
全然季節が違うけど、和風なものをしてみたくてこれにしました。

---

---

　

バナー考察：インプットの気づき

• ターゲットは30代くらいからの女性？
• グレーに金（グレーめの）でお祝い感。このシンプルな色使いがnano universeらしい。
• 年賀状などにはよくみられる雲の模様（エ霞文（えがすみもん）というみたいです）
• その他にも様々な模様で新年感を演出（色がなくてもお祝い感が伝わる）
• 全て左右対称で安定感がある

　

トレースメモ：アウトプットの気づき（学び）

雲の模様は四角形の合体で作成（詳細は後述）
波なみは直線→効果→パスの変形→ジグザグ（5px,15,滑らかに）
下段にある雲ではないクネクネしたもの（何の模様？）は、ペンでカクカク図形を描いたのちに、効果→スタイライズ→角を丸くするで作成
あとは地道にコツコツと

　

雲の模様（エ霞文（えがすみもん）というみたいです）

こちらを参考にさせていただきました！ありがとうございます。
https://note.com/fm7743/n/n1d2367acdfe5

・7の倍数の長方形を作成（今回は、147×84にしました）
・オブジェクト→パス→グリッドに分割

↓こんな感じ

---

---

・グリッド内の不要な四角を削除
・パスファインダー→合体
・効果→スタイライズ→角を丸くする
・ダイレクト選択ツールで微調整

---

---

どんどん近づいているのが楽しかったです。（もはやかわいいw）

個人的にモノクロデザインが好きなので、好みのバナーでした。
飾りは色々とあってにぎやかなのに落ち着いているところが素敵です。
こういうのにしようという発想力がすごいなああああ

---

　

---

---