第2回 | WEB・デザイン業界の良記事まとめ12選

こんにちは。

しゅん(@shunmatsuo)です。

 

今日も一日中雨でした。郵送の用事があったので郵便局に行きたかったのですが断念しました。明日行きます。

 

どこかカフェで作業というわけにもいかなかったので、またまたいろんな記事を読んで過ごしていました。

その中でも、すごくいい記事がたくさんあったので紹介いたします。

続きを読む

第7回 | デザイントレース修行(Photoshop編)

 こんにちは。

しゅん(@shunmatsuo)です。

 

 

今回はですねー、、「Photoshop編」です。

既存のWEBサイトをそっくりにトレースします。

 

VENUS BEDのTOPページ

トレースさせてもらったのは、「VENUS BED」さん。

白を基調としたシンプルなデザインで、すごく綺麗です。

 

Photoshopでトレースさせてもらいました。

 

完成したのがこちら▼

f:id:sm0510sm:20160712184958p:plain

シャドウや光彩、マージンやフォントまで、全部まるごと写しました。

 

今回の気づき・学び

①WEBサイトのトレースで学べるもの

今回のトレースで、実はWEBサイト3つ目になります。これまで3つのサイトを中事実に写してきて感じるのは、トレースは学べることが多いということです。 

・表現の引き出しが増える

コンテンツの並び方やマージンのかけ方、色の使い方などなど。トレースで実際に測ってみたり、マージンを調整してみたりという作業を経ているので、ただ単にWEBサイトを眺めて参考にする時よりも遥かに身につく感覚があります。

制作の中で「こういった雰囲気にしたい」だとか、「この部分どういう見せ方が一番いいだろう」となった時に、すぐに引き出しから引っ張ってこれます。

PhotoshopIllustratorなどのツールに効率的に慣れれる

デザインツールに最も効率的に慣れていくには、トレースが一番早い手段だと思います。自分が「このデザインのこの表現どうやってやるんだろう」と感じるものを積極的に選んでいき、知っている方法で作ってみる。さらに新しい方法を駆使して作れた時には、「なるほど、こういう表現はこうして作れるわけね」と自分の中でこちらも引き出しが増えていきます。

何かをデザインする時、自分でも知らない内に「自分の知っている、そして可能な方法でできる範囲の表現」しかできません。インプットできていないものをアウトプットできるはずがありません。

なので、引き出しを増やしていく作業、新しい表現を知っていく作業としてトレースは相当重要だと思いました。

 

②写真の重要性

「VENUS BED」さんのサイトを作っていく時に、写真の大切さを感じれた気がします。このサイト、特にTOPの写真が綺麗で、一瞬で惹きこまれてしまいます。すごく生活に寄り添った写真たちなので安心感もあり、自然に下にスクロールしてしまいます。

 

 

まとめ

今回はPhotoshopでの、トレースでした。

Photoshop自体の操作に関しては、もとも触ってたこともありそんなに苦はなくできますが、やっぱり写真の加工や、合成などはまだまだほとんど触ったこともないのでそちらの方もチャレンジしていきたいなと思います。

トレースでいろんな表現に触れれるのが楽しくてしょうがないです。はやく自分のサイト作りたいー。

 

また明日も頑張ります。

 

第6回 | デザイントレース修行(illustrator編)

こんにちは。

しゅん(@shunmatsuo)です。

 

昨日のキャンプから、今日は夕方まで仲間とドライブをしていました。ひさしぶりに自然を満喫した2日間になってリフレッシュも完璧です。

パソコンをやっと触れたのが夜の19時。

 

今日もなんとかトレースすることができました。

時間が少なかったのもありちょっと軽めにいきます。

 

田脇水産という会社?のロゴ

今回トレースさせていただく「田脇水産」のロゴは、Pnterestで見つけました。

岡本一宣デザイン事務所さんのデザインです。

 

こちらのロゴになります▼
(via Tawaki Suisan | Okamoto Issen Graphic Design Co.,Ltd. )

f:id:sm0510sm:20160711011821j:plain

曲線を多く使ったロゴになっていて、少し慣れておこうと思い選びました。

今回はシンボルマークの部分のみ作らせていただきました。

 

そして、ぼくがトレースしたロゴがこちら▼

f:id:sm0510sm:20160711012156p:plain

どうでしょうか。

独自の曲線が多いマークなので、ほぼ全てのパーツを自分で少しずつ調整しながら徐々に似せていきました。

 

今回の気づき・学び

①ペンツール・パス・アンカーについて

ペンツールでほとんどの曲線を描いているのですが、このウネウネだったりくるくるといった表現をするのには、パスの位置とアンカーの調整が難しかったです。まだ全く触れなかったため、微調整にかなりの時間を取られました。

ですがこれに関しては、もう本当に「慣れ」だと思うので、手足のように扱えるまでパスでの表現に挑戦していきたいと思います。

②2分の1、4分の1を作って「リフレクト・回転」

線対称・点対称のオブジェクトを作っていくときは、極力作業量を減らすために2分の1、または4分の1の部分を作ってからコピー → リフレクト or 回転などを使うとあっさり完成します。(たぶん常識で、誰でも使ってると思いますが)

 

 

まとめ

今日は、ロゴのトレース。

曲線を多用してあるデザインを主にペンツールで表現しました。

ペンツールには無限の可能性があると思うので、もっと慣れていきたいです。

 

明日は少しきつめな内容にしようかなと考え中です。

Pinterestで探してみます。

 

 

それでは、おやすみなさい。

第5回 | 淡々トレース修行(illustrator編)

こんにちは。

しゅん(@shunmatsuo)です。

 

私事ですが、今日は午後2時くらいから、福岡の糸島の方で仲間とキャンプです。わーい。

久しぶりにみんなでワイワイやるので楽しみで仕方ありません。のんびりした時間を過ごしてきたいと思います〜。

 

 

ですがその前に今日も、トレースです。

午前中になんとか時間が取れたのでよかった。

 

 

本日のトレース対象はこちら。

 

「Loading Vector Icons」の1Pまるごと

www.dreamstale.com

このダウンロードサイトのチュートリアル的なとこに載っているコレです▼

f:id:sm0510sm:20160709123518p:plain

かわいらしいLoading Iconたちを真似させていただきました。

 

それがこちら

f:id:sm0510sm:20160709123626p:plain

 

今回はいろんなアイコンを作ることで幾つも学びがありました。

 

今回の気づき・学び

①「Loading」の表現方法

純粋に数々の表現方法があるんだなと感じた。

②いろんな技を応用して作れた

パスファインダー、オブジェクトのグループ化、パスのアウトライン、破線の設定。

これまで触ってきた中で、1つずつ使ってきた技を組み合わせていろんな表現ができたり、効率も上がることが分かった。

「この図を作るにはどうすればいいだろう」から、これとこれをこう組み合わせて...といった感じで少しずつ慣れてきた感じがします。一歩前進した気分です。

③「文字詰め」を意識できた

昨日、この記事で「文字詰め」の大切さが分かったのもあって、今回は少し意識して文字間を調整しました。

見え方としてベストかはわかりませんが、まんまの文字間よりも整ったのではないかなと思います。

 

 

まとめ

今回は前回のようなロゴだけではなくて、あるページ上のレイアウトも一緒にトレースしました。少しずつ作業のスピードも上がってきたので、トレースする規模も大きくしていきたいと思います。

そしてもっと高度な表現も出来るようになりたいし、いろんなデザインに触れて自分の中にもっとバリエーションを増やしていきたい。

あーそれにしても、楽しい。

 

また明日も頑張りやす。

第4回 | 淡々トレース修行(illustrator編)

こんにちは。

しゅん(@shunmatsuo)です。

 

今日の佐賀は一日中大雨です。

日中外に出られないので籠って調べ物したり、うとうとしたりしてました。そしてトレースの方も。

 

続きを読む

第1回 | デザインについて学べた良記事8選

こんにちは。

今日は個人的にやることも終わってしまったので、デザインやクリエイター向けのサイトでだらだらネットサーフィンしながら学習できたらなーと思います。

基本的には読んだ記事を引用して、感じたことや学んだことをメモに取っていきます。

 

続きを読む

第3回 | 淡々トレース修行(illustrator編)

こんにちは。

しゅん(@shunmatsuo)です。

 

今日も何かに駆られたように、せっせとトレースしていました。

 

本日のトレース対象はこちら。

続きを読む