前回はテキストのみのバナーをトレースしましたが…
今回のバナートレースはこちら
こちらのサイトから頂きました！
いつもありがとうございます
今までと違うところは画像があるとことです
全く同じ画像を見つけるのは難しいのですができる限り近い画像を見つけようと思います！
似ている画像を探す
こちらのサイトから探しました
素材の準備
作成する順番は
素材集め→加工→テキスト入力 です
準備ができたら作成開始
今回は画像の加工などあるためphotoshopを使用しました
作ってみて気づいた事は
イメージカラーの上に白地の文字というデザインがよく使われるんだな～と思いました
それと毎回フォントを一致させるのが難しい…
でもちょっと自信作だったりして
どんどん勉強していきたいと思います！
前回の「テキストだけのデザイン」を
少しレベルアップさせてみます
こちらのサイトからいただきました
前回のバナーのデザインの違うところは
・文字に効果を適用している（ドロップシャドウ等）
・背景画像を使っている
ところです
それと星やギザギザの吹き出しのアイコン作成が
レベルアップしていますね
今回もillustrationを使用
いつもと同じ工程で進めていきます
テキストはドロップシャドウを適用
文字に効果を使うのは初めてです
初めて使ってみてドロップシャドウの「不透明度」と「ぼかし」の違いがわかりました
トレース3回目でテキストを作るのに慣れてきた
テキストのみのデザインをトレースするのは3回目ということで
文字入力に慣れてきた実感があります
これはこのフォントだな、カーニングを変えよう、文字は太字で。
文字を入力→設定を変える という一連の流れというものをつかんできました
フォントをマッチングさせるのが難しい
やはり時間がかかって上手くいかないのは「フォントを一致させること」
検索したり試行錯誤しましたが
全く一緒にすることができません
線幅ツールなどで編集したほうがいいのでしょうか？
簡潔にフォントを一致させる方法をどなたか教えてください
次回はもう少しレベルアップさせます！
前回初めてバナーをトレースしてみました
今回もテキストだけのデザインのバナーを
トレースして勉強したいと思います！！
こちらのサイトからいただきました
今回はillustratorを使って作成してみます
今回はillustratorを使ってトレースします
テキストを入力していく
前回は「マッチフォント」を使用していました。
今回文字をトレースしてみて、検索しなくてもなんとなく
「このフォントを使ってるかな」と気づくことができました！
検索時間が無くなったので作成にかかる時間が短くなりました
気づいた事
前回は文字色は4色、今回は2色のみ使用
文字色は少ないが背景色と縦文字と横文字を利用して強調するところのグルーブ分けができていると思った
共通しているとことは、文字と数字のフォントを変えているところ
テキストは太字に変更しているところ
次回は少しレベルアップします
Webデザイン初心者向けの「トレース」
そのトレースを初めてする方にオススメ！
テキストのみのデザイン
こちらのサイトからいただきました
テキストのみのバナートレースはデザイン初心者にオススメです
photoshop又はillustratorに画像貼り付け
トレースする画像をダウンロードし、photoshopまたはillustratorに貼り付けをします
photoshop→画像編集が得意
illustrator→イラスト制作が得意
というイメージがあったので使い分けて練習をしますが
ヒヨ子はphotoshopが苦手なので、苦手克服という意味でphotoshopを使用しました。
アートボードを複製し2枚用意します
左が見本として使用し
左がトレース作業のアートボードとして画像を半透明の30～50％にします
ざっくりとテキストをトレースしていきます
テキストのフォントを検索します
「書式」の「マッチフォント」というものを使ってフォントを検索しますが
やってみて1番大変な作業でした
検索結果が複数でてきて、順番にマッチするものをあててみるのですが
いまいち合わなかったりするものがありました。
今回は細かくフォントを全く一致することは諦めましたが
できるだけサイズと行間は一緒にするように頑張りました！
背景や吹き出しを作る
背景の四角形も吹き出しもphotoshopで作りました
作業したこと、思ったことはその時にメモを取る
こちらも少し手間ですが使ったフォント名や作業したことをメモしながら行いました
後で作品を見返したときに「どうやってこれ作ったんだっけ？」とならないように
メモをしておくといいと思いました
左が見本 右が作成したものです
初めてトレースしてみて
テキストだけのデザインですぐ作ることができました
今回トレースしてみて気づいたことは
文字と数字のフォントが違うと見やすい
数字を目立たせるために大きくしたが、少数点以下や「名」や「％」は小さくすること
などありました
次回デザインするときの参考になると思います
まとめてみて、作成時間もみておけばよかったなと思いました
昨日の続きです
昨日トレースの勉強方法をまとめましたが
注意点もあります。
①トレースして作った作品はあくまでも真似して作ったもの
明日からはトレースをやってみようと思います
