このチュートリアルでは、Photoshopでクールな効果をつける方法を紹介します。

• Step1 ： はじめに
• Step2 ： 背景にもう少し色を加える
• Step3 ： 背景に要素を加える
• Step4 ： モザイクを適用する
• Step5 ： テキストを加える
• Step6 ： 全体を明るくする
• Step7 ： 完成

1000ピクセル×700ピクセルで新規ドキュメントを作成します。
適切な色を選択しますが、ここでは「#6b4c00」と「#190900」を選択して線形グラデーションでドラッグします。

背景にもう少し色を加えます。
ここでは新規レイヤーを作成して、直径400ピクセルのソフトブラシで色を加えます。
ここでは「#fff000」、「#e7340a」、「#20f00a」、「#0a7dcd」を使いました。

それから「フィルタ」−「ぼかし」−「ぼかし(ガウス)」で次のように設定します。

レイヤーモードをオーバーレイに変更します。

背景に要素を加えます。
Photoshopのスタンダードブラシからブラシを1つ選びます。

新規レイヤーに白い色で模様を加えます。

「フィルタ」−「ピクセレート」−「モザイク」から次のように設定します。

さらに効果をつけるには次のようにします。

次に、テキストを加えたいと思いますが、文字ツールを使わないことにします。
このブラシをダウンロードし、ブラシツールを選びます。
それから新規レイヤーを作成して「#ffc088」の色でそれぞれの文字を追加します。

「Ctrl」＋「J」キーを押してレイヤーを複製し、作業中のレイヤーに「光彩(外側)」を次のように設定します。

それから下側のレイヤーで「Ctrl」＋「F」キーを押してから
「フィルタ」−「ピクセレート」−「モザイク」で前のステップと同じ設定を適用します。
レイヤーモードと不透明度をハードライトで60％にします。

これで完成です。
クールな効果をお試しください！

引用:Web Design Library　著者:photoshopstar　翻訳：菊池

このチュートリアルでは、Photoshopでくもった窓に文字を書く方法を紹介します。

• Step1 ： はじめに
• Step2 ： 画像の明度を下げる
• Step3 ： 画像を縮小する
• Step4 ： ぼかし（ガウス）を適用する
• Step5 ： ブラシで文字を書く
• Step6 ： テキストを強調する
• Step7 ： 完成

水滴が付いた窓の画像を用意してください。 私の画像を使用しても構いません。
画像を開いて、「イメージ」−「色調補正」−「彩度を下げる」を適用し、モノクロにしてください。

そして、「イメージ」−「色調補正」−「レベル補正」に行き、次のような設定で明度を下げてください。

このようになっているはずです。

それでは、もう1枚画像を加えます。

例えば、ガラスの向こうの街として、夜の街の画像を加えます。
私の画像を使用しても構いません。

加える画像をキャンバスに持って行き、「編集」−「自由変形」を使って、下の画像のように縮小してください。

リアルに見せるために、「フィルタ」−「ほかし」−「ぼかし（ガウス）」を次のような設定で適用してください。

レイヤーモードをオーバーレイに変更し、不透明度を80%にセットしてください。
今、このような状態です。

チュートリアルのメインステップへと進みましょう。
ブラシツールを選択して、Photoshopブラシギャラリーからブラシを選択してください。

選択したら、30ピクセルまでブラシのサイズを小さくし、新しいレイヤーに黒で文字を書いてください。

ブラシのサイズを8ピクセルまで小さくし、所々に小さな水の滴りを加えてください。

テキストを強調するために、新しいレイヤーを作成し、白で塗りつぶしてください。
そして、レイヤーモードと不透明度または塗りを調整します。
私は、ソフトライト、塗りを67％にしました。

これで完成です

引用:Web Design Library　著者:photoshopstar　翻訳：日下部

このチュートリアルでは、Photoshopでポートレートをレタッチする方法を紹介します。

• Step1 ： はじめに
• Step2 ： 修復ブラシツールを適用する
• Step3 ： 光彩拡散を適用する
• Step4 ： ぼかしツールを適用する
• Step5 ： 焼き込みツールを適用する
• Step6 ： 瞳の色を変える
• Step7 ： アイシャドウを加える
• Step8 ： 唇の色を変える
• Step9 ： 完成

まず最初に、レタッチしたい画像を開いてください。
私はこの画像を使いました。

画像を拡大し、スポット修復ブラシツール(J)を選択してください。

Altを押しながら、なめらかな肌の部分をクリックしてください。
それから、彼女のほくろをクリックしてください。

なめらかな肌の部分をクリックする

ほくろをクリックする

ほくろをクリックした後

そして、「フィルタ」−「変形」−「光彩拡散」に行き、次の設定を適用してください。

ぼかしツール(R)を選択し、下に示すようにプロパティをセットしてください。
（半径40、モード：輝度）

ぼかしツールで目と唇以外の顔をドラッグしてください。

焼き込みツール(O)を選択し、眉とまつげの上をドラッグしてください。

黒目の部分を選択し、「Ctrl+B」を押して、カラーバランスを開き、このように設定してください。

そして、柔らかいブラシを選択し、描画色を#7A2747にセットしてください。
不透明度を5%にセットして、ブラシでまぶたをドラッグしてください。

焼き込みツール(O)を選択し、唇の上ををドラッグしてください。

そして、完成です。

引用:Web Design Library　著者:photoshop8x　翻訳：日下部

このチュートリアルでは、Photoshopでスケッチ風の画像を作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： 彩度を下げる
• Step3 ： 階調の反転
• Step4 ： ぼかし（ガウス）を適用
• Step5 ： 完成

画像を開き、「ctrl + j」を押して複製してください。

「ctrl + shift + u」を押して、2つのレイヤーの彩度を下げてください。

次に、トップのレイヤーを選択し、「ctrl +i」を押して反転してください。

そして、「フィルタ」−「ぼかし」−「ぼかし（ガウス）」に行き、
あなたの画像に一番合うように半径をセットしてください。私は、1.5にしました。

最後に、トップのレイヤーの描画モードを「覆い焼きカラー」にしてください。
下のように仕上がっているはずです。

引用:Web Design Library　著者:protowhale.net　翻訳：日下部

このチュートリアルでは、Flashでムービクリップシンボルを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： グラフィックシンボルに変換
• Step3 ： ピボットポイントを編集する
• Step4 ： フレーム15にキーフレーム作成
• Step5 ： フレーム30にキーフレーム作成
• Step6 ： メインステージで編集する
• Step7 ： 完成

ムービーシンボルはメインタイムラインの変更をせずにアニメーションを制作するメソッドを提供します。
独自のタイムライン上で勝手に実行されるシンプルなものです。
混乱を低減し、アクセシビリティに役立ちます。
このチュートリアルではムービーシンボルでアニメーションを制作する方法を学習します。

まずはじめに、ドキュメントを作成し、楕円を描いてください。
F8を押して、それをムービークリップシンボルに変換してください。

そして、この楕円をダブルクリックしてください。

あなたは今、シンボルステージにいます。
このステージでは　メインステージ上のどんなものにも影響を与えることなく、
オブジェクトのタイムラインを変更することができます。

2つのレイヤーを作り、それぞれのレイヤーに1つの羽を描いて、鳥に仕上げてください。
F8を押して、グラフィックシンボルに変換してください。

フレーム1で羽を選択し、ピボットポイントを下の角に移動します。
もし、それが左の羽なら、ピボットポイントを右下に移動してください。
もし、それが右の羽なら、ピボットポイントを左下に移動してください。
ピボットポイントが白い円になります。

画像を確認してください。

両方の羽のフレーム15にキーフレームを作成してください。
体のフレーム30にもキーフレームを作成してください。
そうすることによって、羽を編集している間にも体を見ることが出来ます。
フレーム15で羽を選択し、それを下に傾けてください。
両方の羽で同じことをしてください。
フレーム1〜15の間の両方の羽にモーショントゥイーンを適用してください。

両方の羽のフレーム30に、別のキーフレームを作成してください。
このフレームで、羽を元の位置に戻してください。
両方の羽が正確にフレーム1と同じように見えるかどうか確かめてください。
フレーム15〜30の間の両方の羽にモーショントゥイーンを適用してください。

「シーン1」をクリックして、メインステージに戻ってください。
そして、フレーム30（ムービーアニメーションの最後）にキーフレームを作成してください。

Ctrl+Enterを押して、最終結果を見てください。

引用:Web Design Library　著者:amoebic tutorials　翻訳：日下部

このチュートリアルでは、PhotoshopとImageReadyでスピーカーのGIFアニメーションを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： スピーカーに効果を加える
• Step3 ： ImageReadyで編集する
• Step4 ： 完成

Photshopを起動して、アニメーションさせたい画像を開いてください。

クリックして拡大

ペンツールもしくはあなたが使いたい切り抜くためのツールを選択し、
スピーカーの周囲を切り抜いてください。私はペンツールを使うのがベストだと思います。

クリックして拡大

スピーカーを新しいレイヤーに2回コピーしてください。
それぞれに、「スピーカー1」「スピーカー2」と名前をつけてください。

スピーカー1レイヤーを選択し、「フィルター」−「ぼかし」−「ぼかし（移動）」へ行ってください。
10ピクセル以上ぼかさないでください。

OKをクリックして、ぼかしを適用してください。
このステップをスピーカー2レイヤーに対しても適用して下さい。ただし、ぼかし（移動）の角度は変えてください。
ぼかしを適用したら、目のアイコンをクリックして、2つのスピーカーのレイヤーを非表示にしてください。

次に「ファイル」−「ImageReadyで編集」に行ってください。
初めてImageReadyを使う場合、アニメーションウィンドウが開かないかもしれません。
その時は「ウィンドウ」に行き、「アニメーション」にチェックを入れてください。

あなたのレイアウトはこのようになっているはずです。
私たちが要するものは、私が動かした3つのボックスのみです。

これから使うアイコンにラベルを付けました。下の画像を参考にしてください。

クリックして拡大

すでにアニメーションウィンドウには1つのフレームがあります。私たちはこれを4回複製する必要があります。
レイヤーをクリックして、複製するフレームボタンを4回クリックしてください。

これでフレームが5つになったはずです。

クリックして拡大

フレーム2を選択し、スピーカー1レイヤーを表示してください。

クリックして拡大

レイヤー4をクリックして、スピーカー2レイヤーを表示してください。

クリックして拡大

「0秒」となっているレイヤー2とレイヤー4の小さい黒の矢印を
クリックし、レイヤー2とレイヤー4のディレイを2.0秒にセットしてください。

クリックして拡大

アニメーションウィンドウの下にあるプレイをクリックして、どのように表示されるか見ることができます。

私のはこのように表示されています。

クリックして拡大

ディレイを変更したり、もっとフレームを追加することで、バスのリズムを調節することができます。

バナーに作り替えることもできるでしょう。

クリックして拡大

引用:Web Design Library　著者:hv-designs.co.uk　翻訳：日下部

このチュートリアルでは、Photoshopでエレガントなロゴを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： テキストを加える
• Step3 ： 完成

今回はロゴを作成します。
622×288で新規フォトショップファイルを作成し、円形グラデーション（(#ececec-#b2b1b1）で背景を塗りつぶします。

テキストを追加しましょう。ここではCalibri（カリブリ）の72ptを使用しています。
横書き文字ツールを選択して「LOREM」（フォントスタイルはBold）と入力します。
次に、新規レイヤーに「IPSUM」（フォントスタイルはregular）と入力します。

「LOREM」レイヤーを選択して、「レイヤー」−「レイヤースタイル」−「ドロップシャドウ」を選んで
次のように設定します。不透明度 26％、距離 1px、サイズ 6px。

グラデーションオーバーレイに移り、スタイルの設定を「線形」にして、グラデーションの色を#cd0000-#ee1800 にします。

今度は「IPSUM」レイヤーを選択して同様の設定をしますが、グラデーションではなく#303030の色で塗りつぶします。

これらのテキストの右下に別のテキストを追加してください。フォントはCalibri（カリブリ）でサイズ：18pt、
フォントスタイル：Boldを使用しています。

最後に、ロゴがちょうど真ん中に来ていることを確認してください。下の画像のとおりです。

これで完成です。

引用:Web Design Library　著者:verbaska.com　翻訳：幕澤

このチュートリアルでは、Photoshopでリボンを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： 影を加える
• Step3 ： えんぴつツールで線を引く
• Step4 ： リボンを作る
• Step5 ： リボンに輝きを加える
• Step6 ： さらに輝きを良くする
• Step7 ： 完成

まずはじめに、リボンなどを配置するのに適した背景と環境を作りましょう。
ここでは背景に「#83b70b」を使い、次のようにグラデーションレイヤースタイルを設定します。

続いて、背景に手を加えます。
長方形選択ツールで画面の上から50ピクセルほどドラッグし、程よい暗さ（#349005）の長方形を描きます。

それから消しゴムツールで、新しく作った長方形の下からスムーズに消していきます。
すると感じの良いシャドウ効果が残ります。

えんぴつツールを、1ピクセルの「#FFFFFF」に設定します。
シャドウの真上に線を引きます。

それから、レイヤー設定でブレンドオプションをオーバーレイにします。
ブレンドオプションの設定は次の通りに行います。

これから本題のリボンを作ります。
ペンツールでリボンのシェイプを作りますが、うまく作れない場合は、私の作ったリボンをトレースしてもかまいません。
シェイプを作ったら、背景色を「#e84200」にします。

リボンはできましたが、ご覧のように見た目が地味なので手を加えます。
ここではレイヤースタイルのリストをご紹介します。

「レイヤー」−「レイヤースタイル」−「ブレンドオプション」を選択すると操作できます。
次のように設定します。

すると次のようになります。

続いて、リボンに輝きを入れます。
最初に作ったリボンのシェイプを複製し、全てのレイヤースタイルを削除します。
背景を白くし、レイヤーを3-4ピクセルほど上に移動させます。

それから長方形選択ツールで両端を最低2ピクセル切り取ります。
切り取ったら少し小さくなったリボンができあがります。
消しゴムツールのサイズを100にして、レイヤーの上から徐々にブラシをかけます。
すると次のようになります。

レイヤースタイルを次のように設定します。

すると次のようになります。

最初に作ったリボンを複製して、背景を再び白くします。
長方形選択ツールで半分に切って片方を白くし、もう片方を消去します。

続いて、消しゴムツールを前に作業したのと同じ設定にして、
リボン（新しいレイヤー）の右側の上から下にかけて徐々にブラシをかけます。

輝きの見た目が少し良くなります。
ブレンドオプションを次のように設定します。

すると次のようになります。

これでリボンの完成ですが、さらに手を加えることもできます。
ここではこのリボンを使ってApple LED Cinema Displayのディスカウントバナーに使ってみましたが、
他の用途に使うこともできます。

いろいろ手を加えたら次のようになります。

クリックして拡大

引用:Web Design Library　著者:pstut.info　翻訳：菊池

このチュートリアルでは、Photoshopでウェブサイトをデザインする方法を紹介します。

• Step1 ： はじめに
• Step2 ： タブ型のボタンを作る
• Step3 ： ロゴ、スローガンを配置する
• Step4 ： 6つのボックスを作る
• Step5 ： テキスト・画像を配置する
• Step6 ： 完成

新規ドキュメントを1000ピクセル×1355ピクセルで作成し、
「#2493b0」と「#23454c」の色を選択してグラデーションツールのリニアグラデーションを使って背景を塗ります。
最も明るい色を画面の上にします。

長方形選択ツールで、横がキャンバス幅、縦が50-150ピクセルの長方形を描いたら、
「#222223」の色で塗ります。すると次のようになります。

長方形に幾らかのウェルカムテキストと角丸長方形ツールで作ったタブ型のボタン2個を追加します。
その際、角丸長方形の下側の端を切り取ります。

次のレイヤースタイルを設定すれば効果がつきます。

次のようになります。

ウェブサイトのタイトル、ロゴ、スローガンを最適な位置に追加し、テキストに「光彩(外側)」の効果を加えます。

ここで雲ブラシ（PSDダウンロードファイルに含んでいます）を使って、画面上部の長方形とタイトルの下に雲を追加します。

雲をキャンバスの右側へかかるほどには作り過ぎないようにしてください。
できるだけ中央部に配置します。

角丸長方形ツールで長方形を2つ描いて、一つを白で、もう一つを「#212121」で塗りつぶします。
すると次のようになります。

長方形選択ツールで「#ebebeb」の色を選択し、白い角丸長方形の上部に長方形を描きます。
「Ctrl」キーを押したままで白い長方形のレイヤーをクリックし、選択範囲を作成します。
グレーの長方形をクリックして、「選択範囲」−「選択範囲を反転」してから「Delete」キーを押すと、次のようになります。

同じように操作し、角に三角形を作ります。

同じ操作を繰り返して、合計6つのボックスを作ります。

それぞれのボックスに内容を加えます。

一番下の二つのボックスの下に少し雲を加えます。
私はここでは2セットの雲のブラシを加え、不透明度を下げてよりリアルに仕上げます。

最後に、ページ上部と同じ方法でフッターを加えます。
これで完成です。

引用:Web Design Library　著者:hv-designs.co.uk　翻訳：菊池

このチュートリアルでは、Photoshopで幻想的に輝く効果をつける方法を紹介します。

• Step1 ： はじめに
• Step2 ： 画像の色調を変更する
• Step3 ： 画像に光沢を加える
• Step4 ： 完成

まず最初に、使用する画像を決めてください。どんなものでも構いません。
私はかっこいいので、こんな画像を選びました。

次に、「Ctrl」+「J」を押して画像を複製してください。
複製した画像に、「フィルター」−「ぼかし」−「ぼかし（ガウス）」を、
半径3.0もしくはあなたの画像に一番合う数値に設定して適用します。
それから、レイヤーの描画モードを「ソフトライト」か「オーバーレイ」に設定します。

トップメニューから「イメージ」−「色調補正」−「レベル補正」をクリックし、下記のように設定してください。
下記の設定は私の画像に最もよく合う設定なので、あなたの画像に合うように数値を変えて色々と試してみてください。

次に、新しいレイヤーを作成し、チャンネルタブに切り替えます。
「Ctrl」ボタンを押したまま、RGBサムネイルのどれかひとつをクリックしてハイライトします。
あなたの画像をハイライトした後、RGBサムネイルが選択された状態であることを確認して、レイヤータブに切り替えてください。
先ほど作成した新しいレイヤーを白で塗りつぶして、不透明度を50%〜100%の間で設定します。

（クリックして拡大）

これで完成です。
下記はこの効果の適用前と適用後の写真です。

引用:Web Design Library　著者:protowhale.net　翻訳：幕澤

• Step1 ： キーワード分析
• Step2 ： タイトルタグ
• Step3 ： デスクリプションタグ
• Step4 ： サイトのコンテンツ
• Step5 ： シンプルなナビゲーション構造
• Step6 ： シンプルなデザイン
• Step7 ： アンカーテキスト
• Step8 ： ヘッダータグ
• Step9 ： オルトタグ
• Step10 ： リンクポピュラリティ（外部対策）

引用:Web Design Library 　著者:goarticles.com　翻訳:幕澤

このチュートリアルでは、Photoshopでウェブレイアウトを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： タイトル・キャッチコピーを入力する
• Step3 ： ボタンを作成する
• Step4 ： 必要な情報を入力する
• Step5 ： コンテンツボックスを作成する
• Step6 ： コンテンツボックスを複製する
• Step7 ： 完成

900x900の新規ドキュメントを作成し、階調の異なる2種類の濃いグレーを背景色／描画色に設定します。
次に、長方形選択ツールでカンバスの一番上に長方形を描き、線型グラデーションで上から下にドラッグして塗ります。
さらに、次のようなレイヤースタイルをその長方形に追加してください。

今のところこんな感じです。

横書き文字ツールでウェブサイトのタイトルとキャッチコピーを入力します。

タイトルに次のようなレイヤースタイルを追加します。

【クリックして拡大】

角丸長方形ツールを選択しヘッダーの下に小さな長方形を描きます。

その小さな長方形に、下記のようなレイヤースタイルを追加してください。

小さな長方形はきれいなボタンみたいになったはずです。

このボタンをウェブサイトに必要な数だけ複製して、ヘッダーの一番下に合わせて並べ、メニュー名を書き入れてください。

【クリックして拡大】

ヘッダーを複製し、「編集」−「変形」−「垂直方向に反転」を適用し、
複製したレイヤーをカンバスの一番下に移動します。これがフッターになります。

横書き文字ツールでフッターに必要な情報を入力してください。

【クリックして拡大】

それでは、コンテンツボックスを作成しましょう。
長方形選択ツールで次のような2つのボックスを描いてください。

次のようなレイヤースタイルを両方のボックスに適用します。

2つのボックスを上下に並ぶように配置してください。

こんな感じになっているはずです。

両方のボックスを複製して、それぞれ独立したコンテンツボックスを作成してください。

【クリックして拡大】

全てのコンテンツボックスに見出しを付けてください。

【クリックして拡大】

これで出来上がりです。 コンテンツを加えれば下記のような感じになります。

【クリックして拡大】

引用:Web Design Library　著者:hv-designs.co.uk　翻訳：幕澤

このチュートリアルでは、Photoshopで世界の終わりを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： 画像を配置する
• Step3 ： レイヤーを統合・複製する
• Step4 ： ブラシツールで塗る
• Step5 ： リアルな火を作る
• Step6 ： ブラシをセットする
• Step7 ： 隕石を作る
• Step8 ： 完成

まず、背景色#000000で新規ドキュメントを作成します。
地球の写真を開いて、作成したドキュメント上にドラッグします。

ペンツールを使って、次のような範囲を選択してください。

選択したものを右クリックして「選択範囲を作成」を選んで、「Delete」キーを押します。

地球のレイヤーの下に新規レイヤーを作成します。

次の写真を開いてください。

ペンツールを使ってタバコの灰の部分を選択します。

右クリックして選択範囲を作成し、移動ツールで選択部分を次のように配置します。

このレイヤーを3、4回複製し次のように配置してください（変形したり、サイズを変えたりして端まで埋めます）。

タバコの灰のレイヤーを全て選択します。

「Ctrl」+「E」でレイヤーを結合します。

このレイヤーを複製して、出来たレイヤーを一番上に移動します。

こんな風にサイズを変えてください。

さらにこのレイヤーを3、4回複製して、次のように配置します。

新しいレイヤーを作成し、地球のレイヤーの上に置きます。

ブラシツール（不透明度50％）で、次のようになるように塗ってください。

さらに新しいレイヤーを作成して一番上に移動し、同様に塗ってください。

次の写真を開いてください。

移動ツールを使って、このレイヤーをドキュメント上に移動します。

消しゴムツールを使って次のように火の周りを消します。

「Ctrl」+「T」でサイズを変更し、次の位置に移動します。

レイヤーの描画モードを「オーバーレイ」に変更してください。

この火のレイヤーを複製します。

下の画像のように赤い部分が増えるように、レイヤーの複製を続けます。

消しゴムツールを選んで、次のブラシをセットします。

次に、下記の部分がはっきり見えるように消していきます。

この時点では次のようになっているはずです。

さて、ここで隕石を作ります。

タバコの灰のレイヤーをここに配置してください。

そのタバコの灰の上に火のレイヤーを次のように置きます。

レイヤーの描画モードを「オーバーレイ」に変えます。

この火のレイヤーを複製してください。

新しいレイヤーを作成してください。
ソフトブラシ（不透明度100％、白色）を使用して、隕石に次のように適用します。

指先ツールを選択します。

白い点を下記の画像のようになるようにドラッグしてください。

色を調整してください。

別の場所に隕石を増やしたり、好きなようにオブジェクトを追加したりして、さらに作品の見栄えを良くしてください。

背景は、ギャラクシーブラシを使って簡単に仕上げることができます。

これが私の仕上がり作品です。

【クリックして拡大】

引用:Web Design Library　著者:photoshop-garden.com　翻訳：幕澤

このチュートリアルでは、Photoshopでカレンダーアイコンを作る方法を紹介します。

• Step1 ： アイコンの基礎を作る
• Step2 ： 見出しバーを作る
• Step3 ： 月と年を書く
• Step4 ： 日付のボックスを作る
• Step5 ： 完成

シンプルなステップでアイコンの基礎を作ります。
ドロップシャドウや基礎の設定については次の通りです。

次に、月と年を入れるバーを作ります。
ここでは次のように「#ff5400」を使いました。
同じようにしたい場合は、使ってみてください。

レイヤーを複製して上に重ね、色を「#ffc000」にします。

65ピクセル程度の消しゴムツールで、上にあるレイヤー画像のバーの下半分を消します。
2,3ピクセルほどレイヤーを下に移動させると、次のようになります。

新規レイヤーを作成したら、上にあるレイヤーの一番上へ、1ピクセルの鉛筆ツールで線を引きます。

レイヤースタイルでブレンドオプションを次のように設定します。

テキストツールで表示させたい月と年を書きます。
ここでは「Arial Narrow」のフォントを12ポイントで使いました。
次のようになりました。

テキストにレイヤースタイルを設定します。
ブレンドオプションとドロップシャドウの設定を変更します。

日付を入れるエリアが地味なので、深みを加えます。
「#e3e3e3」で背景色を入れると次のようになります。

185ピクセル程度の消しゴムツールを使って、日付のエリアの上側を消します。

日付のボックスを作りますが、まだ正確な数にする必要はなく、見た目をオフィシャルな感じにして、あとから数を合わせます。
カレンダー内に1ピクセルの境界線でカラムを作ります。
カラムの色を「#e8e8e8」に、境界線の色を「#c0bbbb」にします。

長方形選択ツールを使って長方形から小さい四角形の箱を切り出します。

背景を白にしてレイヤーを4回複製します。
最初に作ったものと合わせて、6カラムになります。

もう少し見た目を良くするために、箱の一つにオレンジ色のカバーを入れて、外の線を赤っぽいオレンジ色にします。
ここでは背景色に「#ffab6c」、境界線に「#ff6200」を使ってみました。

基本的にはこれで完了です。
サイズを小さくして、見た目がどのくらい変わるかを試してもよいでしょう。
私の場合は、次のようになりました。

引用:Web Design Library　著者:www.pstut.info/　翻訳：菊池

このチュートリアルでは、Fireworksで徐々に消える画像を作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： お好みの画像を開く
• Step3 ： 長方形で画像を覆う
• Step4 ： グラデーションをかける
• Step5 ： マスクとしてグループ化する
• Step6 ： 完成

このシンプルな記事は、あなたが徐々に消えていくエフェクトを画像に加える手助けになります。
私たちは、徐々に消えていくエフェクトをマスキングと呼んでいます。
普段あなたがWebページをデザインする時、このようなエフェクトを使った画像を加えたくなるかもしれません。
Webページに画像を加えたいとき、そのページの背景色を使ってうまく修正したら、うまくいくでしょう。
背景色を使った修正は、ページにプロフェッショナルな見た目を与えます。
このチュートリアルを読んで練習するだけで、イメージマスキングと呼ばれるエフェクトを手に入れることができるでしょう。

お好みの画像を開いてください。
私の場合では190×142ピクセルのJPEG画像です。
私のWebページの背景は白です。
「修正」-「キャンバス」-「キャンバスカラー」で、白に変えてください。

これはエフェクトを使っていない画像です。

矩形ツールを使って、画像の上に長方形を描いて、長方形で画像を覆ってください。
私は白で長方形を描きました。

長方形を作って、画像の上に移動させました。

こんな感じです。

長方形を選択し、プロパティを開いて、塗りの種類を線形にしてください。
ドロップダウンメニューから設定できます。

をクリックして、プリセットを白、黒にしてください。
これは、画像の右側に徐々に消えていくエフェクトを与えるために必要です。

徐々に消えていくエフェクトが欲しいので、次の画像のように長方形の上に線を引いてください。

ctrl + Aを押してすべてを選択し、「修正」-「マスク」-「マスクとしてグループ化」してください。

今、あなたはこのエフェクトをゲットしています。

プロパティで、グラデーションを調節することによって、エフェクトを変化させることができます。

私はDreamweaverでこの画像を使って、表の中にそれを付け加えています。
あなたにアイデアを与える画像がここにあります。

引用:Web Design Library　著者:www.macronimous.com/　翻訳：日下部