タグを絞り込む : デザイン

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



 

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

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

 

トレースメモ:アウトプットの気づき(学び)

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

 

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

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


グラデーションオーバーレイ

光彩(外側)

境界線

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

 


使用ツール photoshop
所要時間 60分
フォント 見出ゴMB31
デザイン特徴 画像切り抜き
文字加工
バナータイプ 飲食

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



 

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

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

 

トレースメモ:アウトプットの気づき(学び)

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

 

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

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

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

 


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


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

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


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

 


使用ツール illustrator
所要時間 60分
フォント Avenir Next Condensed
デザイン特徴
文字のみ
中央配置
円形装飾
バナータイプ ファッション

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



 

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

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

 

トレースメモ:アウトプットの気づき(学び)

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

 

ネオン文字について

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

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

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



↓各効果の詳細


光彩(内側)


光彩(外側)


境界線


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


 


使用ツール photoshop
所要時間 60分
フォント 游ゴシック体,Avenir Next(ネオンは作字)
デザイン特徴 グラデーション
ネオン文字
文字のみ
バナータイプ 商業施設

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



 

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

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

 

トレースメモ:アウトプットの気づき(学び)

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

 

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

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

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

↓こんな感じ



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



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

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


 


使用ツール illustrator
所要時間 90分
フォント Montserrat,白舟隷書教漢
デザイン特徴
文字中心
紙吹雪
下帯
バナータイプ ファッション

#7
背景紙吹雪風が可愛くてこれにしました



 

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

  • ターゲットは20代くらいからの女性?
  • ポップなカラー配色で、紙吹雪のグラデーションで春を感じさせる
  • 背景色の水色に、トライアドカラーの黄色、黄色と類似色のオレンジで素敵な配色
  • 字間をあける欧文フォントに「Montserrat」が使われること多い気がした
  • 中央揃えで安定感
  • 水色一色の背景だとシンプルなのが、紙吹雪で一気に華やぐ

 

トレースメモ:アウトプットの気づき

オレンジの吹き出しに、光彩(外側)をうすーく入れた
背景の紙吹雪風な模様は、ランダム配置で作成
紙吹雪模様全体をグループ化して、ドロップシャドウをうすーく入れた(ふわっと感)

 

ランダム配置について

こちらを参考にさせていただきました!ありがとうございます。
https://sokoage.com/magazine/ai_random/#i-8

・正方形をいろんなカラーで作成
・効果→ワープ→アーチで、今回は水平方向のカープを25%にしました(見本はアーチというより、平行四辺形みたいな形の方が多いか。)
・オブジェクト→アピアランスを分割して、オブジェクト→変形→個別に変形で適当な値になるようイジイジしました。(オプションにランダムにチェックは必須)

正方形一つ一つをグラデーションにする余力はなかった、、、
形も棒状のものや四角が伸びたものなど様々あったけど、これら一つ一つやるしかないのかな。。。
今回は少々未完成感が。

 


使用ツール illustrator
所要時間 60分
フォント Montserrat,見出ゴMB31
デザイン特徴
文字中心
紙吹雪
下帯
バナータイプ ファッション