ブログ練習帳

Photoshop

おいしそうな湯気を書きたい

食べ物って、ほかほか湯気が出てるとおいしそう。

てことで、PhotoShopで湯気をかいてみました。(CS5.1)

これが元画像です。

元の画像

新規レイヤーを作成

まず、新規レイヤーをクリックし、新しいレイヤーを作成します。

このレイヤーに湯気をかきます。

選択範囲を作る

新規レイヤーがアクティブになっている状態で、湯気を書きたい場所に選択範囲を作ります。

ここでは楕円ツールを使って円形のパスをかきました。

パスパネルで、先ほどかいたパスの「作業用パス」を右クリックして、「選択範囲を作成」を選びます。

「選択範囲を作成」ダイアログでぼかしの半径を設定します。ぼけた感じにしたいので、ここでは50pxにしています。

湯気模様をかく

選択範囲ができた状態で、「フィルター」→「描画」→「雲模様1」を選択します。

湯気のぼけた感じがかけました。でも、下のピザの絵が見えなくなってしまいました。

レイヤー1の描画モードを「スクリーン」にします。

湯気の下にピザが見えて、湯気らしくなってきました。でも、まだ湯気が濃すぎるので、ちょっとうそっぽいです。

レイヤー1の塗りを減らして自然なところを探します。ここでは36%にしました。

こんな感じです。

もうちょっと湯気を複雑な感じに。

レイヤー1を右クリックして、「レイヤーを複製」します。

コピーしたレイヤー「レイヤー1のコピー」を選択した状態で、レイヤーの位置を移動させたり、塗りを変更します。

ここでは、少し右に移動させ、塗りを16%にしています。

塗りが36%の湯気と、塗りが16%の湯気が、ちょっとずれて配置されたので、複雑な感じになりました。

完成

じゃじゃーん。完成です。なんか、湯気っぽい？とうれしくなる見習です。

2012年2月14日7:22 PM| カテゴリー： Photoshop,画像処理,見習い奮闘記| コメント (0)

Photo Shopで角丸バナーに枠をつけたい

このまえ、やっとのことでPhoto Shopで角丸四角のバナーを作りましたが、そのとき、まだワクがついていませんでした。でも、角丸のバナーって、サイトのイメージカラーとか、薄いグレーとかで、1pxくらいの細いフチがついていることが多いです。

前回のPhoto Shopで角丸四角のバナーは、こちら。

Fire Worksでは、内部にペーストで線を残すとか、塗りのない角丸四角を上からもう1つ乗せるとかで対応できました。

Photo Shopのほうは、そのままでした…。Fire WorksやIllustratorとかではある、「塗りなし」という選択がが、Photo Shopでは見当たらない！
「うへー」となりましたが、見習、なんとかできました。

ということで、この前作った角丸四角のバナーに角丸のフチをつけます。Photo Shopで。ちなみに使ったのはPhoto Shop CS5です。

今回準備してあるのは、この左側の画像です。サイズが200×138です。このサイズぴったりに収まるようにしてフチをつけます。

画像を開く

まず、Photo Shopで画像を開きます。(ってあたりまえか…)

角丸長方形ツール

角丸長方形ツールをクリックします。

角丸長方形の設定

ここで、「シェイプレイヤー」「丸み5px」を選択します。そして「丸み」の横にある下向き▼のオプションをクリックすると、

角丸長方形オプション

角丸長方形オプションが出るので、ここで「固定」をチェックし、指定のサイズ（ここではW200px　H138px）を入力します。

画面をクリックで、指定サイズの角丸長方形

この状態で画面をクリックすると、指定のサイズのシェイプレイヤーができます。ぴっちりと、元の画像とかどをあわせます。ここでは、塗りに指定された色で塗りつぶされているので、元の画像が見えなくなっています。

塗りを0%

レイヤーパネルで、いま作ったシェイプレイヤーを選択して、塗りを0%にします。

「境界線」をクリック

そしてこのレイヤーパネルの下にある[fx]をクリックするとレイヤースタイルが設定できるので、「境界線」を選択します。

レイヤースタイルダイアログ

レイヤースタイルの設定ダイアログボックスが出るので、ここで「サイズ」を1px（ここは任意の値、線の太さ）、位置を「内側」、カラーで、フチの色を指定します。

ここで位置を「内側」にすることで、先ほど作ったシェイプレイヤーのサイズの内側に線が引かれるので、指定のサイズぴったりのバナーが作れます。内側意外にすると、先ほどつくったシェイプレイヤーのサイズより大きくなってしまうので、注意です。

OKをクリックすると…。

でけた！でけた！でけた！

みょーにうれしくなっている見習です。よーし、もっとがんばるぞー。

2012年1月20日1:27 AM| カテゴリー： Photoshop,画像処理,見習い奮闘記| コメント (0)

Photo Shopで角丸四角のバナーを作る

この前は、Fire Worksで角丸バナーを作りましたが、Photoshopで作るには…。

バナーの場合（って、どんな場合でもですけど）、きっちり指定のサイズで作らなければならないです。1pxでも大きかったり小さかったりすると、ありゃありゃ、ちょっと見苦しいですぅ、ではなく、レイアウトがぐちゃぐちゃに…。ということも。「見習さんが作ったバナーを入れたら、サイズが間違ってたので、サイトの段組が壊れた～」という事態は避けたいものです。とほほ。