何も考えずにタイトルの文字色を決める方法

何も考えずにタイトルの文字色を決める方法

今日は写真などに入れるタイトルなどの文字色を決める方法について。

何だかすごく上から目線のタイトルになってしまいました。

 

文字色を決める基本

今回は写真などの中に入れる文字の色についてです。

これも絶対では無いのですが、

一般的に無難なのが、写真やイラストがあればその中の色を文字色に使えば馴染むという事です。

今回はそれだけです。分かり易いです。

 

ちょっと例を作ってみます。

sunrise

sunrise

Photoshopで写真から文字を拾えるので、(スポイトツール)

今回は太陽のところから文字の色を決めました。(sun rise 2012 07 31)

 

サクっといい感じのを作るつもりが、

いざ実際やると文字の場所をどこにするとか、

フォントを何にするとか考え出しそうになってしまって、こだわるとキリがないです。

今回は文字の色の話なので、こうやればハマルのにー、と思う方我慢してください。

とりあえずは文字の色はそれなりにハマっているかと思います。

 

ほぼ出来レース的な例の次は、もう一つ例を作りました。

 

underground

underground

 

左下の「under ground」がタイトルです。

写真をフワーっと見て頂くと、エメラルドに近い水色が印象に残る写真だったので、

水色にしました。

 

一応一枚目よりは色が複雑そうなのを選んだつもりですが、

楽しくなってきてしまって文字にドロップシャドウまで入れてしまいました。

逆に文字が写真に馴染んでしまって分かりづらくなってしまったかもしれませんので、

目立たせたい場合は、一部文字をでかくするとか色を変えたりなど工夫をして目立たせます。

 

あとがき

ちなみに写真によっては全体的にキツイ色がたくさんある写真に、文字を入れなくてはいけない場合はとりあえず白を入れてみるのがおすすめです。

どんな色を試しても、文字が埋もれてしまう場合は逆に真っ白にするとそこの部分が抜けて、一番目立つようになる場合があります。

 

今回は文字の色についてでしたが、

やはりここでも色以外に文字の位置であったり、フォントの種類など様々な要素が合わさって、意図したイメージに合っているかが重要になります。

 

このエントリーをはてなブックマークに追加
TAGS:

WEBデザインでの配色方法

WEBデザインでの配色方法

WEBサイトを作る最初の方の段階でコンセプトやテーマを考えると共に、配色も大事な要素の一つです。

ここではあるサイトを作っていてメインカラーが青に決定した場合の例を使って見ていきます。

 

色の三属性

まず色の基本について。学校の勉強みたいですが、

下図はそれぞれ一番左側の青を基本色として考えた場合の、

彩度(鮮やかさ)、明度(明るさ)、色相(色の種類、赤、黄、緑など)

の違いを表しています。

 

これら3つの要素で色は成り立っていて、

これを色の三属性といいます。

色の三属性

色の三属性

 

Photoshopで色の三属性を操作する際は、下図の部分を操作するとその属性のみを調整ができます。

Photoshopパネル

Photoshopパネル

基本の色はありつつ彩度だけ調整したいとか、明度だけ調整したいなど。

 

配色

配色をする際は、基本的には、類似色や1つの色を明度差違いなどで2つ3つに抑えて組み合わせれば、無難に配色はできると思います。(色をゴチャゴチャ使いすぎなければ)

 

Media Loot

Media Loot

Media Loot

 

Bohemia Design

Bohemia Design

Bohemia Design

 

The Destination

The Destination

The Destination

 

その上でリンクや目立たせたい部分に使う色(補色など)を入れるなど、そのサイトの配色が決まってくると思います。

(補色:WEBデザインでもバッチリ使える補色について)

 

たくさん色相を使うと楽しいイメージになりやすく、使う色を押さえると落ち着いたシンプルなイメージになり易いです。

全てサイトのコンセプトやイメージに合っていれば成功です。

 

上記の配色については他の有名なサイトさんでも、ご説明されています。

WEBクリエイターボックス | 配色パターンからWebデザインを考える

 

あとがき

上記は配色についての学術的よりの内容でした。

基本を知った上で、色々なモノをみて配色の参考にしていくのが一番いいんじゃないかと思います。

上記のようにコンセプトからメインカラーが決まる→彩度・明度など変える→…。

これらをもちろん礎にしつつも、その先はひたすら配色パターンを他のサイトさんから盗んだりw はたまた道を歩いててたまたま見つけた自然やモノの配色だとかから参考にしてみたり。

デザインとは一見関係ないようなところからも何か引き出せたらいいなと思います。

ひっかかったら参考にしていく。

と、自分に言い聞かせています。

下記のように世の中には楽しいデザインがいっぱいあります。

刺激されますホント

 

「nine inch nails | with teeth」(CD)

「FRAME Art of The interior」(建築雑誌)

 

 

このエントリーをはてなブックマークに追加

Metallicaに学ぶロゴデザインについて

Metallicaに学ぶロゴデザインについて

今日は私の好きな洋楽ロック(古典派?)の中のバンドの一つ、

Metallicaのロゴデザインのこれまでの歴史について見ていきたいと思います。

 

まず、このMetallicaというバンドについて自分なりの見解で少し説明をさせていただきますと、

1981年に結成され、スレイヤーといったバンドらと共にスラッシュメタルというジャンルを確立したバンドの一つ。

音楽的特徴としては歌というよりもギターの重くてキレキレのリフが主役のような音楽で、このリフにやられた男子学生が多いはずです笑

これまで数々のアルバムを世に出していて、昔はアンダーグラウンドだった激しいスラッシュメタルをメインストリームまで押し上げたのがこのMetallicaではないかと思います。

(何年か前にアメリカのNBAのハーフタイムにMetallicaのEnter Sandmanが流れた時はスゲー!と思いました。)

 

では今回のメインのMetallicaのロゴについて、

初期の方のロゴをまず見てみましょう。

『kill ‘em all』

kill em all

kill em all


Kill Em All

どうでしょう?

時代を感じますね笑 キレのある音と激しさが体言されたロゴですね。

色も写真の血らしき色の赤をロゴの色に使っていて、基本どおりのデザインではないかと思います。

 

次は、

『master of puppets』

master of puppets

master of puppets


Master of Puppets

少し経つと今度はアートワークがリアルな絵になったと共に、

ロゴも奥行きのある3Dになっています。

master of puppetsという事で上から糸で操作しているので上から見下ろしたような3Dのロゴになっているかと思います。

 

ちなみに全てのアルバムの紹介ではなく、

飛ばし飛ばしになります。

そして次は泣く子も黙る(w)、

『metallica』

metallica

metallica


メタリカ

見てください。ロゴ全然見えないですよね笑

カッコイイです。このアルバムスゴイ有名ですし、売れたみたいですよ。

1曲目のenter sandmanを初めて聞いたとき、リフが重くてテンションが上がったのを覚えてます。

左上にロゴがあるんです。ほとんど真っ黒でかすれた感じでうっすら見える。

デザインとしてはバンドのロゴが見えないって普通ならどうなの?って感じですが、

これが地の底からくるように重いこのアルバムには正解なのかもしれません。

見えないというデザイン。あるんですかね。

 

そして次は、

『load』

load

load metallica


Load

ここでロゴが明らかに変わりましたね。

前より激しさを押さえてマイルドになったように思います。

そうなんです、ここからスラッシュメタルMetallicaは少しメロディアスになったんです。

until it sleepsって曲をラジオで聞いたときは唄モノになったのかなって思いました。

ロゴデザインがバンド自体を体言していると思います。

ロゴデザインをどういう人が作ってバンドと話し合ったりするのかどうかは全くわかりませんが、本当にその時にあったロゴデザインだと思います。

 

その後少しこのロゴが続いた後に、

また昔のようなメロディよりもギターを主体に戻し始めた時のロゴが

こちら、

『death magnetic』

death magnetic

death magnetic


Death Magnetic (Dig)

そうなんです、まさに初期のロゴに戻したんです。

メロディアスなアルバムが続くとファンもやっぱり昔のMetallicaに戻って欲しいという意見もあり、バンド自体も同じように思ったんでしょうか。

ロゴも音楽も昔のようになりました。

 

そして今も続いてこのロゴでしょうか。

また次のアルバムが楽しみですし、ロゴも楽しみです。

 

自分自身、今回Metallicaというバンドを例に出させていただき、ロゴデザインを見てみましたが、

このMetallicaというバンドに出会ったのは中学生でしたが、Metallicaの良さをある程度わかったのは社会人になってからだと思います。

すいません、今でも聞いてますが、マニアックに詳しくはないんです笑。

でもロゴデザインが音楽を体言しているとずっと感じていたので今回記事にさせていただきました。

 

linkinparkのボーカルのチェスターも何年か前に、

怒りの時はMetallicaを聞くと言っていました。

テンション上げたいときは是非。

 

CDのアートワークがいつもその音楽にまさにピッタリで、

デザインをしている人はすごいなーと思っていたので、

その中で今回はロゴデザインをピックアップしてみました。

 

皆さんも持っている好きなCDのアートワークを今一度見てみるのもいいかもしれません。

 

このエントリーをはてなブックマークに追加

知っていると使える文字のジャンプ率について

screen_typo

今日は文字のジャンプ率についてです。

ジャンプ率とは例えばタイトルと本文の文字サイズの比率の事です。

 

この比率が大きいとタイトルと本文の役割分担が一目でハッキリと分かり易く、

さらに比率が大きくなればなるほど元気な印象を与えます。

 

また今回もずさんな例ですが図でご紹介していきます。

まずは比率がほぼ無い例です。

 

ここでは「WEBdesign」タイトル

「WEBデザインのあれこれについてあれこれの文章」本文としています。

ジャンプ率01

ジャンプ率01

今回も大げさな例ですが、見て分かるとおり、

タイトルと本文の見分けがつきません。

これは大きさもほとんど同じですし、文字の書体などもほぼ一緒(ゴシック体)だからです。

 

ではここからジャンプ率を上げて見ましょう。

ジャンプ率02

ジャンプ率02

ガツンと大きさ広げれば、もうタイトルと本文でそれぞれが違う役割をしているのだろうという事は分かります。

 

ここまで文字だけでの説明で、どういう時に使うかのイメージがわかないかもしれないので、

例えば下記のように使われることがあるのかもしれません。

ジャンプ率02-2

ジャンプ率02-2

これだとタイトルとサブタイトルという役割になるのですかね。

 

ジャンプ率が文字の大きさの比率の意味だけで使われるのかもしれないのですが、

自分は文字の大きさ以外の要素でもジャンプ率と、かってに使っちゃってます。

その例をここからいくつか思いついたモノをご紹介します。

ジャンプ率03

これは文字の大きさはほとんど変わってないですが、文字の太さが変わってます。

ちょい離してもいるのでタイトルと本文かなっていうのは分かるかと思います。

ジャンプ率は最初の例みたいに大きさを思いっきり変えればできるのですが、

躍動的になりすぎて、落ち着いたイメージの時には合わなくなってしまう時があると思います。そういう時は上の例のように大きさは変えず、太さやスペースを空けたりすることで解決するかもしれません。

 

ジャンプ率04

ジャンプ率04

タイトルを中抜きにしてみたり、

 

ジャンプ率05

ジャンプ率05

フォントを変えてみたりしてみます。フォントもまったく違うモノにすることで、

ジャンプ率が大きい、というのかもしれません。

 

ジャンプ率06

ジャンプ率06

ぼかしてみたり。

ここまで来ると遊んじゃってます。今初めて試しました笑

 

デザインて考えると可能性がいっぱいあるようで自分なりに応用していったりしてくると楽しくなってきますね。

 

Photoshopでタイトル部分をゴリゴリに着飾ったりしなくとも、

ちょっとした工夫で上手く見せられたりもするという事が言いたいんだと思います。ジャンプ率。

 

 

このエントリーをはてなブックマークに追加
TAGS:

WEBデザインでもバッチリ使える補色について

WEBデザインでもバッチリ使える補色について

今回はデザインでも重要な要素の一つ色について、勉強したいと思います。

今回は色彩学の中の「補色」について。

 

自分の場合は補色とは反対色という意味で考えてしまってます。

マンセルの色相環を見ながらが分かり易いですが、

http://bit.ly/ihRTbI (wikipedia)

例えば赤なら色相環のちょうど正反対の位置にあるのが、

緑なので、

赤にとっての補色とは、といったら緑です。

青ならオレンジ色。(色の呼び名などは大体ですいませんが)

 

一緒に使うと一番反発しあうというか、見る人にインパクトを与えるような配色です。なので補色同士を両方とも思いっきり使ったデザインはかなりグロテスクかもしれません(笑)

一般的にはどちらかを基本色に使っていて、

ここは目立たせたいという時に候補として補色の色があがってくるのだと思います。

WEBデザインでいうと、読んでもらいたいテキストだとか、購入ボタンを目立たせたいだとか、資料請求ボタンを押してもらいたいだとかの場合でも使えそうです。

なんかずさんな画像ですが、例えば下記画像です。

 

カラー 例01

配色例01

 

単純に緑ベースのサイトに押してもらいたいボタンを補色に近い色。

こんだけ分かり易くしたらそりゃあ目立ちますが、一応例として。

 

でも最近実際は補色同士よりも少しずらした色の方がいいなと思う時があります。

それが下の修正版の画像の例です。

 

カラー 例02

配色例02

 

青の場合だったら黄色の方が映えるかもしれないなーとか。

補色ほど反発させなくてもこれくらいが馴染んでるしある程度目立つしという事でしょうか。

色彩学というのは基本にあって、その後は人の感覚が重要だと思いますし、

デザインは色だけでなく形とか大きさとかいろんな要素が組み合わさってできると思うので、

その時々で使いこなせるようになりたいですね。

 

このエントリーをはてなブックマークに追加
TAGS:

ブログはじめました

test01

はじめまして。ブログを始めました。

ただまだ何を書いていくのか決められていません。

 

デザインについて少しずつでも、勉強の為に書いていけたらと思っています。

 

よろしくお願いします。

このエントリーをはてなブックマークに追加