アイカカがWebデザイナーになるまでの記録

Webデザイナーになるための職業訓練に通ってます。将来はフリーランスになりたいどす。

【毎日模写No.2】よくわからんスマホバナー / 1時間8分 / 200x200 / Photoshop only

今日は職業訓練もおやすみなので、朝からもしゃもしゃしました。
昨日画像揃えで少し大変な思いをしたので、シンプルめなバナーのトレースをしました。

どどーん!

f:id:ai_takakura:20180908091824p:plain

無駄にデコレーションしてみました、周りを。笑

チェックがびみょうな形だなぁと今すごく思いましたが、まぁ少しはうまくいってるのでは?笑
チェック横の文字はもうちょっと太くてよかったかなぁ。なんか存在感がないですよね、薄い、細いというか。

あと、点線ってどう書くんだろうと思って調べたら、ブラシのサイズを変えたり、間隔を変えたりしたら簡単にできました。
私はその後、面倒だったのでブラシ+Shiftボタンで横にぴーっと引きました笑

では、今日も作業工程、作業の中でしたことを振り返ります!

作業工程

まずはカラーをスウォッチに登録

f:id:ai_takakura:20180908092240p:plain

ガイドを引きます

f:id:ai_takakura:20180908092252p:plain

文字をどんどん追加していきます

f:id:ai_takakura:20180908092335p:plain

ある程度できあがった画面

f:id:ai_takakura:20180908092338p:plain

画像で使われているフォントをAdobe Typekitで調べてみた

今日は、昨日Twitterでフォローしているきちん。さんに、フォントを画像から探せる方法を聞いたので、早速試してみました。

AdobeのTypekitのサイトへ

f:id:ai_takakura:20180908092302p:plain

画像をとりこんで、検索したい文字に選択範囲をしぼる

f:id:ai_takakura:20180908092306p:plain

結果が出た、、、あああ????

f:id:ai_takakura:20180908092310p:plain

・・・文字ばけしてるじゃないっすか。
もしかしてというか、日本語は対応してないのかな。。。。

よしじゃあ、英語で調べてやろう!!

f:id:ai_takakura:20180908092314p:plain

おお!出た!!!

とりあえず、それっぽいのを選んで、ダウンロード(同期した)

f:id:ai_takakura:20180908092318p:plain

こんな感じで、フォントを検索してみました。
日本語バージョンってどこかに落ちてないのかな、というわけで調べてみました。

日本語のフォントを検索できるサイト調べてみた...

なくないか。日本語のフォントを画像で検索できるサイト。

とりあえずぱーっと調べて、たくさんのフォントを見れるといった意味で良いと思ったのは「フォント専門サイト fontnavi」でした。

こちらは画像検索はありませんが、豊富にフォントを扱っているという印象でした。
ダウンロード、購入もすぐできそうなので、今後見ていこうと思います。

ついでに欧文フォントの面白そうなページ発見しました

f:id:ai_takakura:20180908094545j:plain

Font Map by Kevin Ho | Experiments with Google」というサイトなのですが、
似たようなフォントが近くにちりばめられているフォントを検索、見れるサイトみたいです。

私は試しに、太い文字を見て見ましたが、これを使えばたくさんの系統が一度に見れるのでわかりやすいですよね。

自分でデザインを本格的にするようになったら見て参考にしたいなぁと思いました。

今回の良かった点

  • 朝から模写を頑張ったこと
  • 模写の比較を少しデコったこと笑
  • なんだか楽しかったこと笑

今回の難しかったところ・失敗などまとめ

  • チェックの形がよくみるとやっぱり微妙だった
  • 文字の太さが、細すぎた
  • もっと女性の肌を赤っぽくみせればよかった。非健康的に見える気がする
  • 日本語のフォントを画像検索で見つけられるサイトをなかなか見つけられなかった

ですかね。