DesignWalker » psd http://www.designwalker.com ロサンゼルスで働くウェブデザイナーの日記。 Wed, 29 Jun 2011 06:24:51 +0000 ja hourly 1 http://wordpress.org/?v=3.0 紙がやぶれた感じを表現するPhotoshopチュートリアル・解説編 http://www.designwalker.com/2007/12/newspaper_tutorial.html http://www.designwalker.com/2007/12/newspaper_tutorial.html#comments Thu, 27 Dec 2007 21:09:02 +0000 admin http://new.designwalker.com/2007/12/%e7%b4%99%e3%81%8c%e3%82%84%e3%81%b6%e3%82%8c%e3%81%9f%e6%84%9f%e3%81%98%e3%82%92%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8bphotoshop%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%e3%83%bb.html

以前に、ご紹介した『紙がやぶれた感じを表現するPhotoshopチュートリアルいろいろ』の中で、2番目に取り上げさせていただいた、『Torn Newspaper Effect | TUTORIALIZED』

デザインウォーカーをご愛読いただいている、ユーザーの方から、日本語で解説を！っというご要望をいただきました。。

ちょっぴり複雑なチュートリアルって、途中で見失ってしまうことが多いですよね。

せっかくなので、わたくしも挑戦してみたので日本語で解説しながら手順をご説明。（実は、わたくしも後半見失ったので、微妙に手順が変わっていますが・・・）

1. 新規作成

今回は、400px四方で新規作成しました。（お好きなサイズでどうぞ～）

2. 色を指定

新聞の紙の色になります。ちょっとピンクがかった色を指定してますね。

3. 塗りつぶし

新規のレイヤーを追加して、適当な新聞の大きさを指定して、先ほど指定した色で塗りつぶします。

4. レイアウト

適当に、新聞のコンテンツをレイアウトします。なんだか、既にそれっぽくなってきましたね。。

5. 裏側のレイアウト

先ほど、作ったコンテンツを一度、非表示にして、新聞の裏側のコンテンツを作ります。

6. 反転

こちらは、新聞の裏側で、透けて写っている部分なので、左右反転させます。

7. 透明度を変更

先ほど、反転させた部分のレイヤーの透明度を10%にして、透けている感じを出します。また、表側のコンテンツも表示させると・・・こんな感じ。

8. クイックマスクモード

クイックマスクモードをオンにして、黒で塗りつぶします。すると全体が半透明のピンク色になります。

9. クイックマスクを消す

消しゴムツールなどで、適当にエッジの部分をギザギザに消します。

10. 切り取り

クイックマスクモードをオフにすると、ピンク色の部分が選択された状態になっているので、最初に作った紙のレイヤーを削除します。

11. コンテンツのレイヤー統合

あらかじめ、コンテンツ部分のレイヤーを統合しておきます。↓では、表ページのコンテンツ、裏の写っているコンテンツ、紙の部分のレイヤーになっています。

12. クリッピングマスク

コンテンツ部分のレイヤーにクリッピングマスク（Alt+Ctrl+G）で、はみ出たコンテンツ部分を見えなくします。

13. 変形 > ワープ

作成したレイヤーを統合して、変形 > ワープを選択します。

14. 変形 > ワープ2

ワープを選択すると、↓こんな感じで変形できます。めくれた感じに変形しましょ～。

15. 影をつける

影をつけたら出来上がりです！↓こんな感じ。

っというわけで、今回も途中で見失ってしまった方に・・・

今回作ったPhotoshopファイルをアップして置きました。（なるべくレイヤーは残した感じで。）ご自由にどうぞ～。

]]> http://www.designwalker.com/2007/12/newspaper_tutorial.html/feed 0 PhotoshopでWeb 2.0風 ウェブデザイン チュートリアルを実際に試してみた http://www.designwalker.com/2007/02/photoshop-tutorial.html http://www.designwalker.com/2007/02/photoshop-tutorial.html#comments Thu, 22 Feb 2007 21:13:20 +0000 admin http://new.designwalker.com/2007/02/photoshop%e3%81%a7web-20%e9%a2%a8-%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3-%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%e3%82%92%e5%ae%9f%e9%9a%9b%e3%81%ab.html

先日、SiMPLE*SiMPLEさんで紹介されていた、「Web2.0風デザインのための秀逸チュートリアル68選」

これは、ものすごくいいですね！どれも参考になるチュートリアルばかりですね。。
見てるだけでちょっぴりPhotoshopが上達したような気がしますよね。。。

っと思って実際Photoshopを立ち上げて、チュートリアルを見ながら、手順通りすすめてみても・・・

英語で手順が書かれているので途中で見失う。。
実際のサンプル通りに仕上がらない。。。

という方々も多いのでは？

っちゅうわけで、実際にいくつかのチュートリアルを試してみました。。で、今回試してみたPhotoshopファイルをアップしてみたので、欲しい方はご自由にDLして参考にしてみてくださいな～。。

途中、面倒くさくなって細部をはしょっていたり、チュートリアルに書かれているやり方とは微妙に違う部分もありますが。。。すんません。。。

1. Three Girls
Web 2.0っぽい放射線状のグラデーションに人の影をつけるチュートリアル。色をピンクにしてみました。。。

実際のチュートリアルはこちらじゃ

で、実際にやってみたのが↓これ。

Three Girls

で、実際のPhotoshopファイルが↓これじゃ。。(Photoshop CS2で作成しました。。多分、他のバージョンでも開けるはず。。。)

2. Rainbow
Web 2.0っぽい波状のボーダーを背景に人の影をつけるチュートリアル。

実際のチュートリアルはこちらじゃ

で、実際にやってみたのが↓これ。

Rainbow

で、実際のPhotoshopファイルが↓これじゃ。。(Photoshop CS2で作成しました。。多分、他のバージョンでも開けるはず。。。)

3. Flower
Web 2.0っぽいグラデーションのチュートリアル。花の中心部は今回は、面倒なのでパス。。。

実際のチュートリアルはこちらじゃ

で、実際にやってみたのが↓これ。

Flower

で、実際のPhotoshopファイルが↓これじゃ。。(Photoshop CS2で作成しました。。多分、他のバージョンでも開けるはず。。。)

いやぁ、しかしPhotoshopって奥が深いですね。。。


]]> http://www.designwalker.com/2007/02/photoshop-tutorial.html/feed 0