Toyo Kibun*

新米Web屋の雑記帳(只今デザイン調整中につき、お見苦しくて申し訳ありません)

バナートレース#001 「楽天デリバリー」

投稿日:2020/01/19 |  カテゴリー:Web  |  コメント:0  | トラックバック:0
バナートレース#001 「楽天デリバリー」

デザインのスキルアップの為に、バナーのトレースに挑戦することにしました
最初は情報量が少なくてシンプルなバナーから始めて、徐々に複雑なデザインのものにも挑戦していこうと思います。

今回トレースしたバナー


今回は数ある楽天のバナーの中でも特にシンプルなこちらのバナーを選びました。

楽天デリバリー

リンク先  楽天デリバリー:会員ランク毎にポイントアップ!
サイズ 174×174
#163955   #ffffff


写真素材を探せ!


まず、バナーのトレースに必要な写真素材を探すことに。
今回はお寿司の写真が必要です。
このバナーで使われている写真が撮りおろされたものという可能性もありますが、もしフリー素材だったりしたら、同じ写真を使うのがベストです。
まずは同じ写真が無いか探してみて、見つからなかったり有料だった場合は似ているフリー素材を探すことにります。

【1】検索用の画像を用意



バナーのキャッチコピーなど余計な情報が無い方が探しやすいと思うので、このように写真の部分だけをトリミングした画像を用意しました。

【2】Google画像検索で写真の出所を探す



Google画像検索にアクセスします。
今回は【1】で作成した画像をもとに検索するので、カメラのアイコンをクリックします。


こんな感じのモーダルが出てくるので、【1】で作成した画像をドラッグします。


同じ写真が使われているサイトがたくさん引っ掛かったので、検索結果を巡回した結果、PIXTAの有料素材ということが分かりました。

【3】有料素材だった場合、代わりのフリー素材を探す


見つかった素材は660円払えば手に入りますが、今回は極力お金をかけずに作りたいので、似たフリー素材を使うことに。
使ったのはこちらの素材です。
角度も似ていて、お寿司の並び方も手前が握りで奥が軍艦なので、これなら雰囲気を似せられそうです。

トレース開始


Photoshopを立ち上げて1番最初にすることは…




まず、バナーと同じサイズのファイルを新規作成し、オリジナルのバナーをコピーしたレイヤーを追加します。
このレイヤー(以下、答え合わせ用のレイヤー)は不透明度を50%ぐらいにしておいて、常に一番上に配置しておきます。
答え合わせ用のレイヤーは基本的には非表示にしておきますが、時々表示させて文字や写真の位置がずれていないか確認するのに使います。
注意事項は手を動かして作業をしているときは答え合わせ用のレイヤーは非表示にしておくことです。
文字や写真の大きさ、余白などが何pxかは自分で計測した方が色々な発見があると思います。

トレースするときのポイント


フォントは極力似ているものを使う


一件ありきたりな明朝体やゴシック体も種類は色々とあり、どのフォントを選ぶかで印象が変わってきます。
ドンピシャなフォントが見つかるまで血眼になって探したり、お高い有料フォントを購入したりはしないまでも、手持ちのフォントの中で極力近いものを使います。


色をトレースするときは色相・明度・彩度を意識する


カラーピッカー

色をトレースするときは単純にカラーコードをコピペするだけではなく、色相・明度・彩度がどの辺りかをカラーピッカーで確認すると発見があります。


バナーを拡大してみる


手の込んだバナーは一件無地のように見えても良く見るとグラデーションだったりノイズが掛かっていたりすることがあります。
そういった些細なニュアンスを見落とさないためにも500%ぐらいに拡大して見ると良いと思います。

手を動かしているときは答え合わせ用のレイヤーは非表示


前述したように、答え合わせ用のレイヤーは時々確認するとき以外は非表示にします。
写し絵のようなやり方でトレースをするとフォントのサイズや要素同士の間隔などが何pxかということに注意を払いにくくなってしまいます。

トレースしたバナーはこちら




こんな感じに仕上がりました。
並べると偽物感はありますが、雰囲気は出ていると思います。


気付いたこと


フォントのウェイトは全て同じ


文字の強弱を表現する場合、フォントのサイズだけでは無くの太さを変える場合もあると思うのですが、このバナーは全て同じウェイトでした。
ウェイトを変えなくてもサイズのバリエーションだけでここまで強弱が付けられると言うことでもあると思います。


数字を全角で表現するのもアリ


私が普段数字を強調したいデザインを作る場合、数字は半角と言う前提で、欧文フォントで数字が美しいものを探してその部分だけフォントを変えることが多いです。
それに対してこのバナーは和文フォントの全角を使っているみたいです。
1桁の数字だったら、全角もアリかもしれないと思いました。


お勧めアイテム


テーマ:資格・スキルアップ・仕事 in ジャンル:ビジネス

「効果的なデザインレビューとは?」クラウドワークス・トライブ・ちょっとデザイン勉強会

投稿日:2020/01/03 |  カテゴリー:Web  |  コメント:0  | トラックバック:0
「効果的なデザインレビューとは?」クラウドワークス・トライブ・ちょっとデザイン勉強会

以前参加したちょっと株式会社様のイベントが楽しかったので、「効果的なデザインレビューとは?」クラウドワークス・トライブ・ちょっとデザイン勉強会というイベントにも参加して来ました。

私のように“デザイナーとしてはまだ新米のなので、レビューはする側ではなくされる側一択!”という立場の人にも参考になる内容でした。
レビューする側の人達の頭の中を少しでも覗くことができれば、仕事の効率が上がるかも知れないと思って参加してみたのですが、それだけではなくレビューされる側目線の話も網羅されていて、お値段以上の時間が過ごせました。

お勧めサイト


 「効果的なデザインレビューとは?」クラウドワークス・トライブ・ちょっとデザイン勉強会 - connpass 
 chot.design - 毎日ちょっとずつデザインを学ぼう 
テーマ:資格・スキルアップ・仕事 in ジャンル:ビジネス

謹賀新年

投稿日:2020/01/01 |  カテゴリー:Private  |  コメント:0  | トラックバック:0

続きを読む »

テーマ:年末年始、お正月 in ジャンル:ライフ

駆け出しデザイナーミートアップ!Design & Collaboration #1

投稿日:2019/12/08 |  カテゴリー:Web  |  コメント:0  | トラックバック:0
駆け出しデザイナーミートアップ!Design & Collaboration #1

Webデザイナーにキャリアチェンジして最初に入った会社の研修を受けるまで、Webデザインとコーディングの勉強は独学でした。

ここ最近、独学で勉強したことによる知識の偏りを減らすために、chot.designというデザインに特化した学習サイトを利用しています。
このサイトのすごいところは、IllustratorやPhotoshopなどのアプリの操作方法などの技術的なことだけに留まらず、デザインの考え方やバナーや名刺の作り方なども網羅されているところです。
しかも無料!

そんな素晴らしいサイトを運営しているちょっと株式会社様主催の駆け出しデザイナーミートアップ!Design & Collaboration #1に参加して来ました。

LT中心のイベントで、AzitFiNANCiE、BUILD株式会社の3社から4名の方々が登壇されていました。
目先の業務に忙殺されるとつい忘れてしまいがちな大切なことを再確認させられたり、そもそも私が考えたこともないような視点での話を聞くことが出来たり、非常に充実したひと時でした。

お勧めサイト


 ハッシュタグ #デザコラ 
 駆け出しデザイナーミートアップ!Design & Collaboration #1 - connpass 
 chot.design - 毎日ちょっとずつデザインを学ぼう 
テーマ:資格・スキルアップ・仕事 in ジャンル:ビジネス

パリ世紀末 ベル・エポックに咲いた華 サラ・ベルナールの世界展

投稿日:2019/10/06 |  カテゴリー:Private  |  コメント:0  | トラックバック:0
sarah.jpg

横須賀美術館で開催中のサラ・ベルナールの世界展を見てきました。

19世紀~20世紀に活躍したフランスの大女優です。
異性にもかなりモテたらしく、交友関係が展示されているコーナーでは友人や女優仲間として紹介されている人数よりも恋人として紹介されている人数が圧倒的に多かったので、思わず野次馬的な好奇心が掻き立てられました。

女優としての功績だけでなく、興行で使うポスターやアクセサリーを手がけたミュシャやラリックのネームバリューアップに貢献したことも大きな功績だと思います。
美しいポスター、衣装、アクセサリー、写真などがいっぺんに鑑賞できる贅沢な展覧会でした。
展覧会はアーティスト毎に開催されることが多いのですが、複数の人が描いた同じ人の絵を一度に観ることができるのも面白かったです。


お勧めサイト


 横須賀美術館 
 サラ・ベルナール - Wikipedia 
 脊髄反射の愛され大怪物、女優サラ・ベルナール【悪姫5】 - Peachy - ライブドアニュース 

お勧めアイテム



続きを読む »

テーマ:美術館・博物館 展示めぐり。 in ジャンル:学問・文化・芸術

MJ’s FES みうらじゅんフェス!マイブームの全貌展 SINCE 1958

投稿日:2018/02/12 |  カテゴリー:Private  |  コメント:0  | トラックバック:0
MJ’s FES みうらじゅんフェス!マイブームの全貌展 SINCE 1958

断捨離という概念が目新しい流行ではなく定番と化した昨今、私自身も「持ち物は少ないほうがかっこいい」という思いが日に日に強まっています。
テレビや雑誌に登場するミニマリストの人達の部屋は、ホテルの一室のように何一つ無駄が無いところがかっこよすぎて痺れます。
ミニマリストは無理にしても、せめて過不足無いモノに囲まれた生活がしたいので、日々捨てられそうなモノを探して目を皿にしています。

自分が少しでも出た新聞や雑誌は隈なく保管したり、無数のゴム蛇や水道屋さんのマグネットを収集するのは、今風の生き方とは言い難いのかもしれません。
だけど、みうらじゅんを始めとしたコレクターやマキシマリスト呼ばれる人達も、ミニマリストと同じぐらい持ち物に生き様が現れていて興味深いです。
1個だとごみ同然に思えるものも大量にあると楽しくなってくるから不思議です。
私が「モノは少ない方が良い」と考える理由の1つに片付けが苦手だからというのがあるのですが、展示品はどれもコンディション良く、大切に保管されているであろうことは想像に難くありません。
モノが多くても整理が出来て1つ1つを大切に出来る人は羨まし過ぎます。

お勧めサイト


 MJ’s FES みうらじゅんフェス!マイブームの全貌展 SINCE 1958 | 川崎市市民ミュージアム 

お勧めアイテム


テーマ:展示会、イベントの情報 in ジャンル:学問・文化・芸術

謹賀新年

投稿日:2018/01/01 |  カテゴリー:Private  |  コメント:0  | トラックバック:0
謹賀新年

明けましておめでとうございます!
かつおと昆布の出汁+薄口醤油というお雑煮を作ることが多いのですが、今年はアメ横で海老を沢山買ったので海老の殻で取った出汁+味噌で作ってみました。
海老の甘味がお餅に染みて絶品でした。
年末年始に値上がりする三つ葉を先に購入して冷凍しておいたにも関わらず、乗せ忘れたことに悔いが残ります。

まだ駆け出しブログですが、少し残っているデザインの微調整も終わらせて、記事も充実させて行きたいと思いますので、今年もよろしくお願いいたします。

お勧めアイテム



テーマ:お正月 in ジャンル:ライフ

一足先に……

投稿日:2017/12/28 |  カテゴリー:Private  |  コメント:0  | トラックバック:0
一足先に……

一般的に明日からお休みという方が多いかと思いますが、私は有給を頂いて本日からお休みです。
3日まで休みなので、計7連休です!

今までは30日から休むというパターンが多かったので、例年より2日多く休めるというだけでテンションが上がりまくってます
テーマ:今日の出来事 in ジャンル:日記

{FC2バトン}公式バトン第291回「冬」バトン

投稿日:2017/12/23 |  カテゴリー:Private  |  コメント:0  | トラックバック:0
DSC01634.jpg

「冬」バトン

Q1 冬は好きですか?
A1 寒いのは法律で禁止して欲しいぐらい苦手です。
Q2 冬といえば?
A2 寒さと、寒さと、あと寒さ!
Q3 冬の楽しみは何ですか?
A3 クリスマスやバレンタインを口実に欲しいものを買うこと。
Q4 好きな冬の味覚は?
A4 旬の魚や野菜を答えるべきかもしれないですが、寒くなると夏場は溶けそうで敬遠しがちなチョコに手が伸びます。
Q5 今回の冬の目標は?
A5 寒さを理由にだらだらしないこと!
テーマ:季節を感じる in ジャンル:ライフ

「没後30年 銅版画家 清原啓子」展@八王子市夢美術館

投稿日:2017/12/10 |  カテゴリー:Private  |  コメント:0  | トラックバック:0
「没後30年 銅版画家 清原啓子」展

八王子市夢美術館で開催中の「没後30年 銅版画家 清原啓子」という作品展を見てきました。
31歳という若さで亡くなった方なので銅版画家としての活動期間は約10年なのですが、その間に約30点の作品を遺しています。
平均して1年に3点というペースが速いのか遅いのかは分かりませんが、作品の1つ1つにかなりの時間、手間、想いが込められているであろうことは、作品を観れば想像に難くありません。

貸出用のルーペで作品を見ると、緻密な点と線で奥行きや色の濃淡が表現されていることが分かります。
「描くのも大変そうな図案なのに、本当にこれ彫ったの?」と疑わずには居られませんでした。
本人のノートも展示されていたのですが、こちらも行頭が揃った綺麗な字で書かれていたので、作品以外でも几帳面な方だったのではないかと思います。

また、一部の作品は下絵や試刷が完成品と並べて展示されているので、私のように銅版画に馴染みが無い人に取っては製作工程も楽しめて良かったです。

お勧めサイト


 八王子市夢美術館 
 「没後30年 銅版画家 清原啓子」展 

お勧めアイテム



テーマ:美術館・博物館 展示めぐり。 in ジャンル:学問・文化・芸術
Profile
310
Author:310

横浜在住の新米Web屋。
30代未経験でWeb業界に足を踏み入れた為、日々勉強中。
横浜&京浜東北線沿線に良く出没しています。

GROUP SITES
趣味兼勉強の為、色々とサイトを作っています。
RANKING
あなたの体験を、次のトレンドに womedia会員募集中! ブログランキング・にほんブログ村へ ブログランキング参加中! サンプル・モニターの口コミ広告ならブロカン