この記事を読むのに必要な時間は約 3 分です。

先週のWizcoではいよいよバナー制作課題の発表を行いました。
同じお題でも全く違う作品ができるんですね~
自分が悩んだところが上手く解消されていたり、似ている作品でも違う考え方から作られていたり、思いつきもしなかった写真の使い方をされていたり。
デザインの意図を聞くのは面白いしとってお勉強になりました!
私もそのやり方使いたい!っていうのが沢山あって制作意欲も湧いてきます。
こういう取り組みができるのはスクールならではじゃないでしょうか。
発表にも慣れたいですし、ぜひまた発表会をしたいです!

Webデザインで使えるカラーツール

さて、皆さんはバナー制作をするとき何を参考にしてどんなツールを使ったんでしょうか。
今回はザインをするときに使えるカラーツールやGoogle chromeの拡張機能を教えてもらいました。

 

自然な色選び

HUE/360
こちらは調和のとれたカラーパレットを作成できるサイトです。
PC画面などで色を選ぶときどうやら彩度の高すぎて人の目には不自然にうつる色を選んでしまいがちだそう。
こちらのサイトでは彩度を程よく抑えた人の知覚に合う色だけを選択することができるそうです。

使い方はとっても簡単。
トップページにある色相環から好きな色を一色選ぶと自動で
選択した色と調和のとれる色だけを表示してくれるので
あとは好きな色をポチポチ押していくだけでいい感じのカラーパレットができます。
画面一番下にある”Print user color”をクリックすればカラーコードを表示してくれます。

 

Webサイトの色を知りたいとき

今回のバナー制作で使用した色は全て移動先のページか使用した画像から抽出しました。
私は色を抽出してくれるWebサイトを利用していたのですが、、
なんと今回教えてもらったGoogle chromeの拡張機能を使えば
見ているwebサイト上でカラーコードを表示することができるんです!
ColorPick Eyedropper』という拡張機能をChromeに追加すれば
カーソルを合わせた部分のカラーコードを表示してくれます。べんり〜〜

 

Google chromeの拡張機能を他にも調べてみたのですが
HTMLコードのミスを発見してくれるものやブラウザ上の動きを録画してくれるものだったり、
なんでもあるんですね!
これからWeb制作をしていく上で使えそうなものも沢山あったので随時追加していきたいです。

The following two tabs change content below.
takahashi

takahashi

カナダをこよなく愛するニート。社会経験なし、Web制作の知識ゼロからWEBデザイナーになるべくWizco+独学でお勉強中。ぼちぼちカナダ移住目指してます。

3 thoughts on “カラーツール

  1. kassy kassy より:

    takahashiさん…確かに、発表する場には慣れたいですよね( ´・_ゝ・)
    私も、共感です☆ミ

  2. これから積極的にプレゼンテーションやディスカッションの機会を増やしていこうと思いますので、ぜひお楽しみに−!

  3. TAKEHRA より:

    スクールだからこそ刺激があって『私も頑張らないと!!』って思えるから
    本当にWizcoに入ってよかったなーって思ってます。
    これからもお互い切磋琢磨していきましょう(・∀・)

コメントを残す

メールアドレスが公開されることはありません。