タグを絞り込む : バナートレース

#6
いろんな柄を作ってみたくてこれにしました
(見本が小さくて少々画質が悪い)



 

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

  • ターゲットは20代後半くらいからの女性?
  • ポップなカラー配色で夏らしい
  • SHIPS KIDSはSHIPSカラーの紺
  • 走り書き感のあるフォント
  • 色々な模様で楽しげな雰囲気、視線が左上から右下にいく配置(な気がする。。

 

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

  • 左下の波なみは、直線→効果:パスの変形→ジグザグ(3px,6,滑らかに)で入れました!(簡単かわいい!)
  • ドットは12pxの正方形に8pxの正円をのせて、パターンを作成。61pxの正方形の塗りに作成したパターンを適用し、回転ツールでパターンのみ45°回転、移動ツールでパターンのみちょこちょこ移動でできました。
  • 破線は1本作って、量産しましたが、もっとスマートなやり方がありそう。
  • フォントの検索で、Adobe Fontsが画像検索できることを初めて知って、めちゃめちゃ便利やないかと感動しました。(しかもおそらく全く同じと思われるものがあって使えた!)

 

フォントの検索について

こちらで知りました!ありがとうございます。
いつもみてる画面なのに全然気づいてなかった!
https://dtptransit.design/photoshop/what-the-font.html

こちらは知っていたのですが、
検索結果に出てきたものを自分が持っていないとまた探しに行って、、と時間がかかっていたのでAdobe Fontsであるのめちゃ楽。
https://www.myfonts.com/WhatTheFont

そんなこんなで調べた今回のフォントは「Cortado」というものでした。
マーカー走り書き感がいいですね!今回は11°回転し、シアーを2°だけいじり、さらに躍動感が出ています。(こういう、フォントにあったデザインできるようになりたい。。。)


使用ツール illustrator
所要時間 60分
フォント Cortado
デザイン特徴
文字中心
いろいろ模様

バナータイプ ファッション

#5
今回のトレースはこちら。
光と影を意識したバナーもやってみたかったので選びました。



 

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

  • ターゲットは20代後半くらいからの女性?
  • ピンクをメインにした春らしい配色
  • 2分割と下帯のレイアウト
  • 2分割のそれぞれにピンク系の異なるグラデーションを配置(かわいい
  • 細い欧文フォントでおしゃれに+影でアクセント
  • 4つくらい違うフォント使っていると思われる、でもシンプルなのでごちゃつかない
  • 口紅そのもののペースト画像は、化粧品のバナーやサイトでよく最近見るようになった
  • した帯の文字色だけ、他とトーンが違う気がするけど、目立つためにあえてだと思われる

 

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

  • 左上から光が当たっている想定で、口紅の光と影を表現するのにいろいろな加工がされていると感じた

 

光と影と間の色味について

口紅2本の引き立てのために、光と影を入れました。

影の付け方はこちらを参考にさせていただきました。
ありがとうございます。
https://techacademy.jp/magazine/2924

レイヤーパネル(一部抜粋)はこんな感じです。



2本の口紅それぞれに光を影を入れました。
光は白で、影は黒だとベース色とマッチしないので濃い赤で入れました。
描画モードを乗算・不透明度をそれぞれに合うよう設定しました。
さらに口紅と口紅の間が干渉によってピンクが濃くなっている印象を受けたので、円形グラデーションを追加しました。

ベタっと貼っただけの写真がふわっと浮き上がり、より印象的に魅せるのによい加工だなと思いました。
化粧品類にはよく見られる手法なので、汎用性も高そうだなと思いました。


 


使用ツール photoshop
所要時間 60分
フォント 游ゴシック
デザイン特徴
2分割+下帯
切り抜き写真
バナータイプ 化粧品

#4
今回のトレースはこちら。
少しずつツール技術がいるものに手を出していこうと思い選びました。



 

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

  • ターゲットは、お部屋づくりを考える家族世帯向け?男女問わないデザイン。
  • 背景色青に対比色の黄色文字。青のバナーは白地のページにあるととても目立つ。
  • 家の型で写真切り抜き。かわいらしいあしらい。手書き感。
  • 文字の一部はチョークアート風。
  • イラストはなぜこれなんだろう。。?家で仕事している人かな?相談受ける側かな? → 掲載元みたら、「zoomでも受付中」だった。その文字ないと謎なイラストになるな。

 

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

  • 写真の切り抜きの手書き感は、パスにラフ効果(2px, 20/inch, 丸く)を追加
  • 「インテリア相談会」の文字は、塗りでかすれパターンを追加(→詳細は後述)
  • 旗はペンツールで書いたあと上記と同じ効果を追加

 

塗りでかすれパターンを追加(一番時間かかった、、、

「インテリア相談会」の文字に時間がかかったので備忘録として記載しようと思います。

こちらを参考に&かすれパターンをダウンロードさせていただきました。
ありがとうございます。
https://suzukimemo.com/post-75

アピアランスはこんな感じです。



1. テキスト自体にラフ効果(0.5%, 70/inchi, 丸く)を追加
2. 塗りを二つ追加
3. ひとつは文字のベース色となる黄色を設定
4. もう一つはダウンロードしたかすれパターンを微調整して適用
(ダウンロードしたままだと今回はかすれ部分が多かったので減らし、色を背景の青に変更)
5. 4. にパスのオフセット(-1, ラウンド)とラフ効果(1px, 5/inchi, 丸く)を追加
6. かすれが濃かったので、不透明度80%に設定

これである程度ちかづいた。。。はず。。。

この辺の微調整はなかなか難しいので、一度作ったらストックして他に適用できればと思いました!普段のWebデザインでなかなか使っていなかったので、練習できてよかったです。


 


使用ツール illustrator
所要時間 60分
フォント 游ゴシック
デザイン特徴 手書き風アレンジ
写真型抜き

バナータイプ インテリア

#3
今回のトレースはこちら。
ぽっぷ!!



 

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

  • ターゲットは、文字通り24歳以下の若者。ユニセックスな感じ。
  • ポップな配色。パステルカラーだけど黄色と黄緑で可愛くなりすぎない、中性的。
  • 上下のツートーンカラー
  • 細い線の四角形囲みで、スタイリッシュ感
  • 英語で縁飾り。こちらも細字でスタイリッシュ感
  • 中央文字は目立つデザイン書体
  • 三角あしらいで楽しげ

 

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

  • U24のフォントは似たものも見つからず、文字をシェイプ化しての変形を実施(でも遠い…
  • アンダーニジュウヨンワリの文字も、ナイショ文字から縦80%、横110%に変更

やはりフォント探しに時間がかかりがち。適度にすまそう。

 


使用ツール photoshop
所要時間 40分
フォント ナイショ文字,Forma DJR Micro
デザイン特徴 ツートーン
細い線囲み
文字オンリー
バナータイプ ファッション

#2
今回のトレースはこちら。
まだ優しめなもので。。。



 

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

  • ターゲットは、女性30代後半あたり〜?
  • 配色:秋をイメージさせる配色、対比色、かつ着ている洋服が目立つカラー
  • 配置中央で安定感
  • 細い線の四角形囲みで、スタイリッシュ感

 

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

  • 正方形に見える囲みは微妙に正方形ではなく、その方が余白が等間隔に見えるのかなと思った
  • 正方形内の文字は、大きさは色々だが、どこかしら揃っているのでまとまって見える
  • フォントはAthelasを使用したが、肝心のBが結構違う(Bだけ違うフォントかな。正解わからん
  • 背景は縦グラデーションにプラス質感があったので、紙のテクスチャを薄く入れてみた

紙のテクスチャはこちらを使用しました

 


使用ツール photoshop
所要時間 20分
フォント Athelas
デザイン特徴 ツートーン
細い線囲み
切り抜き写真
バナータイプ ファッション