フォトショップで蝶の羽を作る / ウェブデザインライブラリー

スポンサー

1点から購入できる素材販売サイト
Photooo（フォトー）
写真・イラスト・ベクター 380円～
今欲しい素材を、今すぐにどうぞ！

ウェブデザイン基礎講座

フォトショップ講座

HTML&CSS講座

HTML&CSS ( 41 )

グラフィック講座

AdobeIllustrator ( 34 )
Fireworks ( 1 )

Flash講座

Flash ( 31 )

3D講座

3D ( 1 )

ウェブプログラミング講座

PHP ( 18 )
ASP ( 0 )
JAVAスクリプト ( 9 )
MySQL ( 2 )

サイトメンテナンス講座

サイトメンテナンス ( 39 )

サイト紹介

サイト紹介 ( 8 )

スペシャルリンク

ニュース

ニュース一覧

サイト内検索

メールマガジン

デザイナー向けのメルマガ
毎週金曜日に発行しています

テクニック

Home ＞フォトショップ講座＞フォトショップで蝶の羽を作る

フォトショップで蝶の羽を作る

投稿日：2006年9月1日（更新日：2008年6月9日）　　　レベル：中級　　　　ソフトウェア：

では最初に、黒い背景のキャンバスを開いてください。そしてペンツールを使って、下のような“葉っぱの形”を作ってください。
葉っぱの形を作成する

パスレイヤーを右クリックして「選択範囲を作成」を選びます。ぼかしの半径は0にして、アンチエイリアスボックスにチェックをいれます。
選択範囲を作成する

そして新規レイヤーを作成し、塗りつぶしツールで選択範囲内を白色にしておきます。
まだ選択を解除しないでください。
選択範囲内を塗り潰す

次に「選択範囲＞境界をぼかす」をおこないます。ここでは、半径は5に設定しました。もちろんあなた自身の設定を試してもかまいません。
選択範囲内の色を「Deleteキー」で消去すれば、次のようになったはずです。
選択範囲をぼかす

ここで、“葉っぱの形”を複製していき、少し回転させたりすることで面白くなると思います。サイズやコントラストも変えていきましょう。
コントラストを変更

これ以降、手順を説明するために必要ないレイヤーは表示していません。

葉っぱのひとつを複製して、フィルタ＞ぼかし＞ぼかし(移動)を選択してください。あなたの作成した葉っぱの角度によってぼかしの角度を調節して、距離は50ぐらいにしてください。下のようになりましたか？
葉っぱのひとつを複製する

この過程を全ての形状に適用していきます、移動のぼかしは異なった角度で最低2回はそれぞれにおこないました。それぞれの明るさも微妙に変えていってください。そして、背景を除いたレイヤーを統合しましょう。
背景を除くレイヤーを統合

統合した後で、Ctrlキーを押しながら統合したレイヤーのサムネイルを選択します。画像内に選択範囲が表示されます。そして新しいレイヤーを作成し、グラデーションツールを選択し、好みの色を設定してください。

さらに、色をつけたレイヤーを複製してオーバーレイなどのブレンドモードを設定すれば、さらに見栄えがよくなると思います。

引用:Web Design Library著者:Shinta翻訳:atuk

スポンサードリンク

ランダム記事5件

フォトショップじゃなくてイラストレーターの間違いでは？
フォトショップではこのような画像を作成することはできません。

投稿者 Syber Internet : 2007年06月08日 21:52

Syber Internet 様

コメントありがとうございました。
大変申し訳ございませんでした。
ページの解説が不十分で分かりにくかったかとは思います。

本テクニックはイラストレーターではなくフォトショップで
制作されている画像で間違いございません。
手順どおりにしていただければ、フォトショップで
蝶の羽（妖精？）を描くことが可能でございます。

もし、手順どおり制作が進まない場合は
再度、修正版記事をアップさせていただきたいと思います。
大変お手数ですが、再度お試しいただけませんでしょうか？
よろしくお願いいたします。

投稿者ウェブデザインライブラリー : 2007年06月11日 15:45

この手順のとおり作成すると綺麗な羽が描けました！
大満足です。
完成画像の背景も描かれたのでしょうか？
羽の雰囲気に合っていてとても綺麗ですね～。
同じような雰囲気を出したく頑張っていますがなかなかうまくいきません。
日々精進というところでしょうか･･･。

投稿者みくり : 2007年09月10日 12:09

＞＞みくり様

綺麗な羽が描けたとのことで、ご意見ありがとうございます。
上記の画像のような雰囲気は確かに難しいですね。
私も日々技術を磨こうとは思っておりますが、
なかなか上達せず凹む毎日を送っております。

みくり様がフォトショップを使いこなせるよう
ささやかながら応援させていただきます。
今後も当サイトを利用していただければ幸いです。

今後とも何卒よろしくお願いいたします。

投稿者ウェブデザインライブラリー : 2007年09月13日 13:43

お世話になります。

>そしてペンツールを使って、下のような“葉っぱの形”を作ってください。

パスとして作成するのでしょうか？

＞選択範囲＞選択範囲をぼかす
境界をぼかすを実施いたしましても図のようにはなりません。

＞選択範囲を消去すれば、次のようになったはずです。
ダメです。

小生には敷居が高いようです。

完成図など添付は無理でしょうか？

投稿者あずき : 2007年10月17日 14:17

＞＞あずき様

いつもご利用ありがとうございます。
記事の説明不足で大変ご迷惑をお掛けいたしました。
申し訳ございませんでした。ご回答させていただきます。

＞パスとして作成するのでしょうか？
はい、さようでございます。
ペンツールとなりますので、パスとして制作いたします。
ただ、選択範囲を削除を行う場合は
当然、ラスタライズを行う必要がございます。
描写色を白に設定し、選択部分を作成を行います。
その後、選択範囲ぼかしを行った後、
レイヤーをラスタライズを行い削除します。
http://www.webdesignlibrary.jp/images/article/ps_9010_4.jpg

大変お手数をお掛けいたしますが、
上記の方法で、行っていただけませんでしょうか？
よろしくお願いいたします。

また、何かご質問等がございましたら、
お気軽にご連絡いただければ、ご回答させていただきますので、
何卒よろしくお願い申し上げます。

投稿者ウェブデザインライブラリー : 2007年10月19日 14:29

早速のご回答誠にありがとうございました。

試行錯誤も加わりましたが
「統合した後で、Ctrlキーを押しながら統合したレイヤーを選択します。そして新しいレイヤーを作成し、グラデーションツールを選択し、好みに色を設定してください。」
の手前までできました。

今度は（素人ゆえ）この文意を読み取り実行したいと思います。

ありがとうございました。

投稿者あずき : 2007年10月22日 21:21

＞あずき様

コメントありがとうございます！
無事ステップを進んだとのことで大変うれしく思っています。
また何かご不明な点がありましたら
ご質問ください。ご対応させていただきます。

今後ともウェブデザインライブラリーをよろしくお願いいたします。

投稿者ウェブデザインライブラリー : 2007年10月24日 18:46

背景を除いたレイヤーを統合しましょう。
統合した後で、Ctrlキーを押しながら統合したレイヤーを選択します。そして新しいレイヤーを作成し、グラデーションツールを選択し、好みに色を設定してください

この辺がいまいち分からないのですが、レイヤーを統合した時点で背景も統合されます。どうしたらいいのでしょうか？　

乱文失礼いたしました。

投稿者レキ : 2007年11月09日 16:48

＞＞レキ様

コメントありがとうございます。
レイヤーを統合した時点で背景もとありますが、
解説文では、背景を"除いた"レイヤーを統合
と書いてありますので、背景レイヤーを除いたレイヤーを
統合行い次の手順で制作を進めていただけないでしょうか？

また何か不明な点がございましたら
遠慮なくご連絡くださいませ！
よろしくお願いいたします。

投稿者ウェブデザインライブラリー : 2007年11月12日 17:47

この作品に非常に興味を持ちましてさっそく作らせていただいたのですが、レイヤーを統合するところでつまづいております。レイヤーを統合するにはどうしたらいいのでしょうか？ctrl+Eで下のレイヤーを統合としていけばいいのでしょうか？
また、その後新規のレイヤーをつくってグラデーションツールで色を塗るとのことでしたが、どうもキャンパス全体が塗られてしまいます。どうしたらいいでしょうか、わかりにくい説明で申し訳ありません。

投稿者 TKC : 2007年11月15日 17:38

大変申し訳ございません、
次に選択範囲＞選択範囲をぼかす、をおこないます。ここでは、半径は5に設定しました。もちろんあなた自身の設定を試してもかまいません。
選択範囲を消去すれば、次のようになったはずです。
選択範囲を消去できないのですが、どうすればできるでしょうか？それと、私のフォトショップにはhttp://www.webdesignlibrary.jp/images/article/ps_9010_4.jpg
絵の描いてある四角の隣に白いもうひとつの四角がないのですが、どうすればできるのでしょうか？
まだまだフォトショップを使い始めたばかりで、よくわからないもので；
すみません。

投稿者千秋 : 2007年11月17日 05:35

＞＞TKC 様

コメントありがとうございます。
グラデーションレイヤーの件ですが、
グラデーションレイヤーのレイヤーの位置を変更してみてください。
上記の方法でできるかとは思うのですが、
それでも出来ない場合は、初期のステップでつまづいてしまっている可能性もあります。
"中級レベル"ですので、私から見てもレイヤーの位置や細かい加工がかなり省かれています。
一度ご確認ください。

＞＞千秋様

コメントありがとうございます。
シェイプを利用しておりますでしょうか？
シェイプを使っていればカラーピッカーが表示されるとは思います。
それを白色に表示していただければそうなるとは思います。
今回中級レベルですので、多くの細かいレイヤーの設定などが省かれております。
一度ご確認のほうよろしくお願いしたします。

投稿者ウェブデザインライブラリー : 2007年11月22日 18:13

>>次に選択範囲＞選択範囲をぼかす、をおこないます。ここでは、半径は5に設定しました。もちろんあなた自身の設定を試してもかまいません。
選択範囲を消去すれば、次のようになったはずです。

あずきさんが同じような質問をしているのですが
ラスタライズしても写真のようにならないのですが。

すいませんが詳しくお願いします

投稿者ヒロ : 2008年01月23日 21:55

こんにちは
上から３つ目の
選択範囲消去する所なのですが、上手く出来ません
なにかコツがあるのですか？

投稿者 TR : 2008年01月25日 18:52

数ヶ月前に蝶の羽を拝見して、やってみたのですが、2番目の画像でつまづいてしまい、できませんでした。
フォトショップに大分慣れてきた今回、もう1回挑戦して、やっとできました。\(o⌒∇⌒o)/
選択範囲を縮小して、ぼかしをかけて切り取れば良かったのですね。
うれしいです～ぼかしの移動、難しかったですヾ(´ε｀;)ゝふぅ。。。イマイチの出来ですが。
今後ももっとお勉強して、後半の設定もできるようになりたいと思います。
続きができましたら、また投稿させていただきます。
ありがとうございました。

投稿者みゅ～と♪ : 2008年01月28日 19:36

全然出来ません。
最初のペンツールは背景レイヤーの上でやっていいのでしょうか？新規レイヤーの上？一番最初でつまづいてしまいます･･･。

投稿者葉二 : 2008年02月13日 14:35

非常に面白かったです！自分でできた時がすごくうれしいですねっ
今度は最後の完成例にある光の帯や粒子のつくり方も是非教えて頂きたいです

投稿者 beny : 2008年03月04日 17:28

統合した後で、Ctrlキーを押しながら統合したレイヤーを選択します。そして新しいレイヤーを作成し、グラデーションツールを選択し、好みに色を設定してください。

の部分が分からなかったのですが　グラデーションツールでレイヤーを塗った後　そのレイヤーをオーバーレイやソフトライトなどに変更することで　色の表現が変わるのですね＞＜ｖ

今回この作品で大きく成長することが出来ました。感謝　感謝！

投稿者 MF : 2008年03月18日 20:21

はじめましてm(__)m
最初の選択範囲を消去というところからすでに躓いてしまっております。
選択範囲をぼかして選択範囲は小さくなるのですが、黒くぼけてくれません。
そして、選択範囲の消去という項目が既に見当たりません。
編集の消去や、バックスペースやデリートなどもたくさん試しては見ましたが、いまいちで、全然無理です(>_<)
どうしたらよろしいでしょうか…？
やはり中級は難しいです。

投稿者 kazuki : 2008年03月25日 13:00

背景を黒に＞パスを作る＞選択範囲の作成＞選択範囲をぼかす

まではわかるのですが、その後は、
新しくレイヤーを作る＞ぼかした選択範囲を塗り潰す＞統合し「レイヤーの透明部分を選択」
でよいのですか？

もしそうなら、千秋様と同様に左側の四角が統合時に消えてしまうのですが。

「シェイプを使用していますか？」とありますが、どこで使用するのでしょうか？
千秋様にされた説明ではまだよくわからないのでお手数ですがご指導お願いします。

投稿者 C-PLAM : 2008年04月28日 22:22

いつも、拝見させていただいております。

>パスレイヤーを右クリックして、選択範囲を作成、を選びます。ぼかしの半径は0にして、アンチエイリアスボックスにチェックをいれます。まだ選択を解除しないでください。

という部分で、選択範囲を作成したのですが、2番目の画像のようになりません。
どのように、すれば良いのでしょうか?
Photoshopについては、初心者に近いもので・・・(^^;;

ご返答の程、よろしくお願いしますm(_ _)m

投稿者 PEL : 2008年06月08日 23:51

いつもご利用をありがとうございます。
よりわかりやすい表現とするため、説明文を本日一部更新いたしました。

新しいレイヤーを作成する箇所の変更など、一部説明文を書き換えております。
是非再度お試しくださいませ。

今後ともウェブデザインライブラリーを、宜しくお願いいたします。

投稿者ウェブデザインライブラリー : 2008年06月09日 15:46

とても丁寧に解説してありわかりやすいですね！
このような画像を作ってみたかったので、とても役に立ちました。

処理後の画像だけでなく、パレット部分やプロパティウィンドウ部分も
表示されていると初心者にはさらにわかりやすいかもしれません。

一番最後の画像だけ異様に飛躍しているのですが、
あの背景の解説は作られないのですか？？
http://gigazine.jp/img/2006/09/14/ipod_nano_colors/nano.jpg
のような画像や、背景画像にあるオーロラのような効果は
どうやっているのでしょうか？

投稿者 S : 2008年06月25日 18:29

＞＞ S様

コメントありがとうございました。
お役に立てた事を大変嬉しく思います。

今回は中級レベルですので、細かな説明は省かせていただいておりますが、ご意見を参考に、よりわかり易い解説をしていきたいと思います。

「一番最後の画像だけ異様に飛躍している」という件ですが、この画像をお手本に作成方法を説明しております。
解説が不十分で分かりにくく、申し訳ございませんでした。

背景のオーロラ部分につきましては、蝶の羽の作成方法の応用で作成できるかと思います。
是非お試し下さい。

今後ともウェブデザインライブラリーを、宜しくお願いいたします。

投稿者ウェブデザインライブラリー : 2008年06月26日 17:10

次に選択範囲＞境界をぼかす、をおこないます。ここでは、半径は5に設定しました。もちろんあなた自身の設定を試してもかまいません。
選択範囲内の色を消去すれば、次のようになったはずです。
＞http://www.webdesignlibrary.jp/images/article/ps_9010_4.jpg
を開いてもラスタライズがわかりません。
レイヤーの透明部分を選択しても白のままです。

投稿者 kana : 2008年07月06日 18:41

＞＞ kana 様

コメントありがとうございます。
記事の説明不足で大変申し訳ございませんでした。

新規レイヤー上で選択範囲を白く塗り潰し、「選択範囲＞境界をぼかす」の設定を行った後、「Deleteキー」を押してみてください。
画像のようになるはずです。

また何か不明な点がございましたら、遠慮なくご連絡くださいませ！
よろしくお願いいたします。

投稿者ウェブデザインライブラリー : 2008年07月07日 10:58

＞＞＞新規レイヤー上で選択範囲を白く塗り潰し、「選択範囲＞境界をぼかす」の設定を行った後、「Deleteキー」を押してみてください。
画像のようになるはずです。

の部分なんですが画像のようにならなく困っています。
手順は文章どおりにやっているのですがなにか、足りない作業があるのでしょうか？

いきなりの質問で申し訳ございません；；

投稿者 J : 2008年07月10日 15:57

＞＞ J 様

コメントありがとうございます。

選択範囲を作成後、選択範囲内の色を白に塗りつぶす作業からは新規レイヤー上で行っていますでしょうか？
最初にパスで作成した葉っぱのレイヤーではパスが残っている状態のためこの作業は行えません。
葉っぱのレイヤーを右クリックで「レイヤーのラスタライズ」を行うか、「新規レイヤー」を作成してそこで作業を行ってみてください。

不明な点がございましたら、遠慮なくご連絡くださいませ！
よろしくお願いいたします。

投稿者ウェブデザインライブラリー : 2008年07月11日 10:43

とても良い情報を有難う御座います。
此れで編集の幅が広がりそうです。

因みに、使用しているPhotoshopのバージョンを記載しておいた方が良いのでは？と思いました。
質問等を見ていると、恐らくバージョン違いで出来ない事なのかな？と思う事が書かれてあったので…。
あっても無くても良い情報かも知れませんが、1つの目安として、あった方が読み手に優しい記事になると思います。

偉そうな事を申しましたが、今後とも拝読させて頂きます。
運営頑張ってください、応援しています。

投稿者 setsuna : 2008年07月30日 18:07

＞＞ setsuna 様

コメントありがとうございます。

今後さらにお役に立てる情報を更新できるようにしていきたいと思います。

Photoshopのバージョンにつきましては、確かに記載できれば、今まで以上に皆様のお役にたてる記事になると思います。
しかし現在、引用元サイトにバージョンの記載が無いものがほとんどです。誠に申し訳ございません。
バージョンの分かる記事につきましては、今後記事に掲載するようにいたします。ご意見ありがとうございました。

また、この記事は2008年06月09日に記事内容を修正しているのですが、その際にはCS2で確認いたしました。

他、何か良いご意見がありましたら遠慮なくご連絡くださいませ！
参考にさせていただきます。

今後ともウェブデザインライブラリーを、宜しくお願いいたします。

投稿者ウェブデザインライブラリー : 2008年07月31日 17:03

こんにちは。
このような光っているようなものを作りたいとおもっていたので、挑戦させていただきました。

しかし、グラデーションの部分でつまずいております。説明画像にありますように奇麗に光らせることができません。どうもくすんだ色になってしまいます。方法を教えていただけませんでしょうか？

また完成画像のひとつ前のように逆光を適用したいのですが、できません。どうすればいいのでしょうか？

重ねて質問してしまって申し訳ありません。よろしくお願いします。

投稿者たけしけた : 2008年08月02日 01:11

＞＞たけしけた様

コメントありがとうございます。
説明が分かりにくく誠に申し訳ございません。

＞どうもくすんだ色になってしまいます。