hugo sasaki's Portfolio

都内某所でウェブに関わるお仕事をしながら、ウェブ制作者レベル3を目指している管理人の学習記録用のブログです。

Photoshopでトレース 第13話 ~25度の壁~

未分類

北国出身なので、25度を超える最高気温は一括りに「夏」だと思っています。35度も夏。25度も夏。秋を感じるのは25度を切ったころからです。

なので、まだ夏だと思っています。

今年の夏も全く夏らしいことをしていないので、まだ夏のうちに海でも見に行きたいものですが、こんな状況なのでやっぱり気が引けてしまうところもあります。

きっとこうやって、考えているうちに気温は25度を切って「もう秋か…」と言う流れが目に見えています。悩むくらいなら行ってしまえば良いものを…

 

さて、そんな禅問答をいったんやめて、トレースに入ります。

散々夏と秋について書いておきながら、飛び越して冬を感じる物を選んでみました。

 

今回の気が付きや困ったポイントを3つ挙げていきます。

1.トレースするために元画像を回転させると、回転させた文字をさらに傾けていることが発覚

上は作業中の画面です。

ふんわりと「回転かな~」と考えて、とりあえず回してみたところ、そもそも文字自体も斜体で角度が付いていました。

ペンツールでおおよその傾きを図って、自由変形で丁度よさそうな角度まで回転させました。イラレならすんなり角度を測るために線を引いてガイドにしたりできたのですが、Photoshopだと「だいたいこのくらい」で線をガイド化せずにやらざるを得ない感じです。もっといいやり方を後で見つける必要がありますね…

 

2.寒色の背景に、伝えたい単語は「暖色(膨張色)」で目立たせている

「SALE」と「冬物がどっとお買得に!」は赤系の暖色になっています。また、その背景は寒色の塗りつぶしで、後退色でした。

暖色は暖かみを感じさせる点で冬に向いた色ではありますが、同時に膨張色(実際よりも大きく見える色)でもあります。となると、背景をただベターっと塗りつぶしただけに見えていましたが、視覚的には膨張色がより目立つように後退色を全体に施した配色になっています。

この「暖色・膨張色」と「寒色・後退色」の二つが今まではばらばらに理解していたのですが、暖色を選ぶということは膨張色だから、目立たせたいテキストに使うと良い。そして、より目立たせるために背景には寒色を選択することで、より目立たせたいテキストが暖色の効果によって強調される。

…あれ、なんだかわかったような気がしてうまく呑み込めていない感じになってきてしまいました…でも理屈はおおよそ合っているはず。

 

3.シャドウを3つ重ね掛けで立体感がちょっと出てくる。

上と下の文字にはシャドウが3つかかっていましたが、3つも必要かと思って試してみると思ったよりも見た目が違いました。

黒いシャドウを消すと、もはやなくてもいいようなシャドウに…

真ん中のシャドウを消すと、存在感があり過ぎてちょっとしつこい感じに…

3つが並んでいることで、立体感とコントラストが生じて、より目線が向きやすくなっているように思います。

 

そんなこんなで、完成品は以下のようになりました。

 

30分くらいで終わるかと思いきや、1時間ほど記事も含めて時間がかかってしまいました。

もっと早く、もっと的確な考察を書けるようになりたいです…

 

明日の自分に少しの期待をしつつ、今日のところはここまで。

また今度!

レイアウトコンセプト
使用ツール
制作時間