Design Caption

前回の記事では、誤字脱字等沢山あり、見難い記事を書いてしまいすみませんでした。
実は、バイト先の社員さんに突っ込まれて気付いたんですよね、お恥ずかしい限りです(´▽｀ ;)

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

それでは、前回の記事の最後紹介した画像を実際に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の方のカテゴリメニューも作らないと…忘れていました。