Design Caption

Design Caption http://www.designcaption.com/ 脳がSE向きのデザイナーの考えるデザイン情報ブログ ja Nucleus CMS v3.3 ©Design Caption Weblog http://backend.userland.com/rss http://www.designcaption.com/skins/images/logo.jpg Design Caption http://www.designcaption.com/ 実際にPhotoshopで作るアクア風アイコン http://www.designcaption.com/Photoshop_gradation_Aqua.html
前回の記事では、誤字脱字等沢山あり、見難い記事を書いてしまいすみませんでした。
実は、バイト先の社員さんに突っ込まれて気付いたんですよね、お恥ずかしい限りです(´▽｀ ;)

修正してもまだ分かりにくい部分が多々あると思いますので、今回の記事理解して頂ければと思います。
まだまだブログ初心者なので、これからもご迷惑をおかけすると思いますが、よろしくお願いします。

それでは、前回の記事の最後紹介した画像を実際にPhotoshopを使って作ってみましょう。

基本的なグラデーションを作ってみよう

前回の記事で紹介したのと同じアクア風アイコンの作り方をご紹介します。
前回紹介したように、グラデーションのかかったレイヤー２つを使って行います。

１，「グラデーション」レイヤーを作成

グラデーションレイヤーの作り方はもしかしたら、知らない方も居るかもしれないので、簡単にですが、作り方を説明します。分かる方は「２，２つのグラデーションを描く」まで飛ばして下さい。

I,「角丸長方形ツール」等のツールでパスを書ける状態にします(図1-1)。パスを描く前に、画面上部のオプションメニューでパスを選択します(図1−2)。

そして、適当な大きさのパスを描きます。

II,グラデーションレイヤーを作成します(図1−3)。その後グラデーションの編集画面が現れるので「OK」を押します。

これで、グラデーションレイヤーが完成します。
グラデーションレイヤーの特徴はベクトルマスクや、レイヤーマスクで、グラデーションをかける範囲を決めるグラデーションのみのレイヤーです。これはもう好みの問題ですが、ベタ塗りのシェイプレイヤーを作ってレイヤースタイルでグラデーションを付けたり等をするよりも、正しいやり方といえるでしょう。

更に、グラデーションレイヤーの場合は、各レイヤーの左端にある四角い「レイヤープレビュー」をダブルクリックすることで、すぐにグラデーション定義の変更が出来るのでとても便利です。それらの理由から、私はこのつくり方をお勧めしますので、この方法を使った作り方をご説明します。

２，２つのグラデーションを描く

では、グラデーションを描いてみましょう。グラデーションレイヤーを適当な大きさの角丸長方形ツールを使って作ります。

「グラデーションエディタ」画面を表示し、画像(図2−1)と同じ設定にし「OK」を押して、次もまた「OK」を押してグラデーションを保存して下さい。

その後今作ったグラデーションレイヤーをコピーし、コピーしたレイヤーの「グラデーションエディタ」画面を表示します。
そして、今回はグラデーショングラフの上にある「不透明度の分岐点」を使って、白い色の透過グラデーションを作成します(図2−2)。

その後、「OK」を押してグラデーションを保存すれば、完成です。

さらに、少しいじってみるとイメージも変わります。例えば一番上の白のグラデーションレイヤーにレイヤースタイルで「境界線」をＯＮにし、
サイズを「1px」に設定、
位置を「内側」に設定、
あとはグラデーションの一番暗い所より少し暗めの色を設定すればこんな感じになります(図2−3)。

一応今回は使用したファイルを添付しておきます。何か分からない所等がありましたら参考にしてみて下さい。

最後に、透過グラデーションの作り難いillustratorで透過グラデーションを使わずに、アクア風のアイコンを作っている記事があったので、紹介します。
（少し前回の記事に内容が似ている気がする…）
■今更だけどAqua風デザイン分解

「ひとこと」

先日色々とシステムの簡単な変更を行いました。主にシステムなコアな部分（URLとか）と、Ajaxを使って、画像をポップアップ表示するようにしました。JavaScriptをONにして見て頂けると、記事が見やすいと思います。
さらに、あとカテゴリもJavaを使ってます。あ！Java OFFの方のカテゴリメニューも作らないと…忘れていました。]]> Design http://www.designcaption.com/?itemid=20 Sat, 11 Aug 2007 03:44:54 +0900 感覚で作るWeb2.0的アクア風アイコン http://www.designcaption.com/Concept_of_aqua_icon.html
Web2.0的といわれるサイトで多く使われているアクア風のアイコン。
みなさんはどうやって作っていますか？感覚的に作れますか？思い道理の色が作れますか？

今バイト先の先輩が「Web2.0的デザインが２週間で身に付く！！」なんて題して、メールで課題を社内の人に出しているんですが、そこにも出てきたアクア風のグラデーション。

元々はAppleがMacOSXでボタン等に使い出した事が始まりだとは思うんですが、最初自分もPhotoshopで作ろうと色々試行錯誤したんです。ベベルをかけて、サテンをかけて…なんてやってたのですが上手くいかなかったんですよね。

その頃私は高校生の始め頃だったと思うのです。当時も解説サイトは沢山あったんですが、どれもいまいち。今はサンプルも沢山あって、グラデーションだけでいいのか！とかすぐそういうヒントがあるのですよね。本当に良い時代になった物だ…。

では、今回はアクア風のアイコンの色付けの原理（？）を覚え、好きな色で色々なアクア風アイコンを作れるようになりましょう！

アクア風アイコンって何だ？

まず、アクアアイコンを作る際に皆さんは何を考えて作っていますか？グラデーションのパターンで覚えていますか？サンプルを元に作ってはいませんか？

私は画像のような潰れた筒状の物だと考えています。それを元に考えて行くとグラデーションをイメージしやすくなるはずです！

では3Dソフトを使って画像を作ってみたので解説して行きましょう。

立体的に考えるアクア風アイコン

では、まず青色のアクア風アイコンを3Dソフトで作って行きましょう。

色の付いているのは潰れた筒状の半分だけなので、半分に割って、色をつけてみました。普通の青の板です。
（少しグラデーションがかかっていますが、光の加減です）

次に、最も重要な照明を加えます。証明は真上から真っ白な蛍光板を当てているようなイメージです。

黒から、青、白へのグラデーションがかかりました。
ここで、よく見て頂きたいのは、上から光が当たっている為、半分にした筒の上の方は暗くなっているという事です。

次に、割って使ってなかったもう半分の筒を透明にして合わせてみました。

このように、潰れた筒状の物の手前が半透明になっていて、上から光を受けている状況がアクア風と言われる画像のイメージに近いと思いませんか？

まだよく分からないかもしれませんが、後ろ半分が上から下へ明るくなるグラデーション、手前半分が上の真ん中あたりまで明るく、下に行くにつれて、薄れて行く白いグラデーションで出来ていますよね。

じゃあ、これを前から見てみましょう

すると、普段見ているアクアのアイコンのイメージにかなり近い物になったと思います。
これが私の考えるアクア風アイコンのリアルなイメージです。

簡単にいうと、
「手前は上部に光が当たり、奥は下部に光が当たったグラデーションのイメージ。」

イメージを元にPhotoshopで作ってみよう！

それでは、Photoshopを使ってアクア画像を作ってみましょう。

まずは先ほどの筒でいう後ろの部分のグラデーションは上から、黒、青、明るい青というグラデーションでした（１）。

そして、手前の部分は真ん中までが明るく、その後はかすかなグラデーション（２）。
このグラデーションを作る際は、色は白のみで、透明度のみでこのグラデーションを表現して下さい。

あとはこれを重ね合わせればOK!!

どうですか？イメージはしやすくなったでしょうか。
ではこの概念を応用したPhotoshopでのグラデーションの作り方をに次回の記事で行いたいと思います。

お楽しみに！

訂正　2007/08/08
寝ぼけて記事を書いていた為、意味が分からない記事になっていたので、元を崩さずになるべく分かりやすくなるように全体を訂正致しました。]]> Design http://www.designcaption.com/?itemid=12 Tue, 7 Aug 2007 10:23:25 +0900