デザイン

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

アメリカのスマホアプリの円グラデーション背景ってオシャレだよなーを分析した

スマホサイトのデザインをいろいろ探していて、やっぱりアメリカのアプリとかおしゃれに見えるものがあるなーと思った。

んで、おしゃれに見える要素の1つとして円グラデーションに注目したい。

たとえばKindleのアプリ
写真1
中心が少し薄いグレーで、円形にグラデーションしてて、外側にいくにつれて濃いグレーになる。

リアルにあるものって、よーく見てみると、光の当たり方によって、こういうふうに円形グラデーションになっているケースって多いと思う。

この技を「さりげな円グラデ」と名づけたい。 


今年の夏は、花柄ワンピとさりげな円グラデで決まり!
30代女子のガーリーサマー作戦!cancan7月号


みたいなね。
すいません脱線した。


 
この「さり円グラ」を学ぼうと思って、Fireworksでトレースしてみた。



①グラデーションの距離

06192もっともきれいなのは、中央から始まって、角までめいっぱいグラデーションの距離を伸ばす、というもの。

これよりも短いと、あからさまに円グラデーションなのが目立って、「みえみえ円グラデ」になってしまい、この夏モテない。

 













②グラデーションの色 

結局この色の差をどれくらいにするのかというのが一番大事だろうなと思い、グラデーションのはじっこの色をそれぞれとってみた。

 06191















うすいところが「#2B2B2B」
濃いところが「#535353」

大体これくらいの差が良いということ。

もっとわかりやすくすると、#555と#333くらいの差。
ゾロ目色番号でいえば2つ分くらいの差、と覚えとくと良さそう。





Kindleの例はモノトーンだったので、もう一つ別のパターンを見てみよう。


先日見つけた、完全にオシャレな湿度計アプリ。

320x480-75


このシックな色使い。

完全にオシャレと言わざるをえない。


早速同様にトレースしてみた。


06195


今回は薄いところが#FBFBFBで、濃いところが#E1DACF

ほぼ白の中心から、ベージュ方面にグラデーションしていく。

色(色相?)が変わっていくので判断がしずらいと思って、カラーパレットで2つの色を見てみた。

1633
































右側にある縦棒の部分。

これは確か、明度を表していたと思う。

明度の差は1cmくらい(アバウトだな・・)

この差は、グレースケールでいうと、#EEEEEEと#DDDDDDくらいの差だった。

先程のKindleの時とうってかわって、ゾロ目の色番号で1つぶんの差だ。

暗い色にくらべて、明るい色のほうが差がはっきりするため、色番号的には差が少なくて良いということかもしれない、そうに違いない、絶対だ。


そして、色相は黄色の方面に2mmくらいちょびっと寄せている。
試してみたところ、黄色方面じゃなくても、青でも緑でもそれっぽくかっこよくなった。
ポイントは2mmくらい(超アバウトだな・・)動かすってこと。

彩度とかも見たほうがよいのかもしれないが、ちょっとよくわかんないので、

色番号ゾロ目で1つ分くらいの明度の差をつけて、色相は2mmくらい 動かせばOKと覚えよう。



【結論】

「さりげな円グラデ」の作り方!

◎中心から角までめいっぱいグラデーションの距離をとる!
◎色の差は、ゾロ目色番号にして1つ分、色相はカラーパレットで2mmくらいずらした色!
◎濃い色の時は、ゾロ目色番号で2つ分くらい明度の差をつけてOK!



 

デザインの肝の1つはテクスチャだな、と思った

僕はデザイナーじゃないが、最近少しだけWEBデザインもしている。

本職のデザイナーが作ったかっこいいものと、僕が作ったなんとなく垢抜けない物。

何が違うのかな、と観察していて、肝はこのへんかなと思ったのが、

・グラデーションの作り方
 →できるだけ色の変化が少ないほうがよい

・1pxのハイライト
 →いろんなところに使える。ぐっとおしゃれに。 

・テクスチャ
 →fireworksにもともと入っているテクスチャはださい。
 「fireworks テクスチャ」で検索して、どんどんイイヤツを取り込もう。


■テクスチャの取り込み方(mac)

①Finderのサイドメニューから「アプリケーション」を開く
② Fireworks > Configuration > Texturesにいく
③そこにダウンロードしてきたテクスチャ画像をぶちこむ
④Fireworksを再起動する


特に、背景でつかえるような布や紙っぽいテクスチャ 。

インパクトを出したい 文字画像等に使える岩っぽいテクスチャ。

ポップなWEBサービスで多用されている斜線のテクスチャ。
(もともとはいってる斜線テクスチャはまったく使えませんね)


がオススメ。

イラストレーターで名刺デザインを作る。

※この記事は書き途中です。


会社のデザイナーさんが主催する、デザイン講座で宿題が出た。

「おまいら、来週までに名刺のデザインを作ってこい。
 いっとくけど、トンボとかちゃんとしろよ」

課題はこれだけ。 

ようするに、いろいろググったりヤフったりしながら、自力で学んで
やってこいってことだーね。

なので、0から名刺のデザインを作る。
そのうえで勉強になったサイトを貼っていく。

まず、名刺のデザインを作る上で使うソフトはphotoshopかな?と思ったけど、
印刷会社のサイトとか見ると、どうやらイラストレーターらしい。

-------------------------------
まずはイラストレーターでトンボをつくれるようになるべ
http://www.youtube.com/watch?v=yBiwjivLw-Y


かっこいい名刺のデザインをいっぱいみるべ
http://coliss.com/articles/build-websites/operation/design/735.html


つづく
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ