ブログ練習帳

Photo Shopの練習　あちゃー

ちょっと、かなしい…、日常。

2012年3月30日1:35 AM| カテゴリー： Photoshop,ギャラリー,画像処理,見習い奮闘記,閑話休題| コメント (0)

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

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

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

これが元画像です。

新規レイヤーを作成

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

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

選択範囲を作る

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

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

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

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

湯気模様をかく

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

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

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

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

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

こんな感じです。

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

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

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

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

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

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

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

カラーピッカーを使う　IE8の開発者ツール

いまさらIE8？といわれちゃいそうですが、なんだかんだとIE8を使っている見習。

キレイなサイトとか見つけたら、お勉強のためにじろじろ見るようにしています。で、この色、どんな色？って思ったとき、16進数で知りたいです。それに、自分の作ったサイトで使っている色を16進数で知りたい！ってことも、あるし･･･。

CSSで指定してあるなら、ファイルを見ればいいけど、画像ファイルだと、そうもいかない。CSSだとしても、どこかなーと探すの、慣れてない見習だと結構時間とります。そんなとき、いままで、画面のスクリーンショットを撮って、それをFire Worksとかに貼り付けて、そこからスポイトツールで拾って…。と延々やってました。

そんなとき、IE8の開発者ツールにあるカラーピッカーを使えばいいとは。

Fire FoxとかはFirebugなんかを別にインストールしなければいけないけど、IE8の開発者ツールはIE8がインストールされてれば、それでOK。

まず、色のチェックをしたいページをIE8で開きます。その状態でF12を押します。すると開発者ツールが起動します。

開発者ツールで「ツール」→「カラーピッカーを表示する」と選択していきます。

カラーピッカーが出てきます。マウスのポインタがスポイトに変化します。するとマウスのある場所の色が、カラーピッカーのところに表示されます。RGB(255.255.255)と#16進で表示されます。データがほしいところでクリックすると、その場所の色のデータが抜き取れます。この数字が必要なだけなら、ここを見てDream WeaverとかでタイプしてもOKです。でも、タイプミスも怖いし･･･という場合は、「コピーして閉じる」をクリックすると、この16進のデータがクリップボードに張り付きます。メモ帳などで「貼り付け」を実行すると、このデータがはり付きます。

スポイトから一時的に戻す

ところで、マウスがスポイトの形になると、クリックしたり、スクロールしたりできません。マウスがブラウザより外にでれば、マウスは通常の形に戻りますが。ブラウザの中でもうちょっと下の部分の色を採りたいというときは、一時的にスポイトを元の形状に戻します。

元に戻すには、カラーピッカーの色の表示部分の下にあるスポイトのボタンをクリックして押下状態から戻します。押されていない状態だと、通常のマウスにもどるので、スクロールして目的の場所に移動したら、再び、スポイトのボタンをクリックして押下状態にすると、マウスがスポイトになります。

Fire Worksで塗りの色などに使いたい場合

カラーピッカーで「コピーして閉じる」で得た値は、あくまで16進表記なので、ここでクリップボードへコピーした状態で、Fire Worksで貼り付けを実行してもテキストとして#ffffffのように貼り付けられます。

たとえば抜き取った色で、長方形ツールで作成したオブジェクトの塗りを設定（変更）したい場合、プロパティインスペクタのカラー選択画面で、上部の#ffffffと書かれているところへマウスを持ってゆき、BackSpaceで消去してからCtrl+Vで貼り付けEnterで決定します。これで、カラーピッカーで抜きとった色で塗りつぶしたりできます。

ちょっと力技っぽいけど、なんとか、でけた。

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