テクニック

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

ランダム記事5件

• ウェブサイトの読み込み速度を速くする7つの方法  10年05月18日
• Photoshopで大きなポップアートの円を作る方法  10年03月12日
• 3列リキッドレイアウト  07年07月10日
• イラストレーターで笹を作る  06年06月02日
• 検索エンジンの最適化、ページランキングを上げるコツ  06年06月06日

コメント

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

投稿者 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

＞＞ たけしけた 様

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

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

グラデーションをつけた後、そのレイヤーのすぐ上に新規レイヤーを作成し、白色に塗りつぶします。
塗りつぶしたレイヤーにオーバーレイをかけますと鮮やかな色になります。
（レイヤーパレットの「通常」となっている部分を「オーバーレイ」に変更してください。）

＞逆光を適用したいのですが

http://www.webdesignlibrary.jp/2008/03/the-star-desktop-wallpaper.php
上記ページの「Step9 ： 逆光の設定 」を参考にしてみてください。

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

投稿者 ウェブデザインライブラリー : 2008年08月04日 10:21

１か月たってしまいましたが以前の問題の結果がドキュメントサイズがでかすぎてぼかしが目視できてないだけでした(T_T)

最終的には一応同じような形のものが仕上がりましたｗ
フォトショップで１から作るのは難しいですね〜。
以前の仕事ではおもに切り抜きや画像修正などをしてたのでこのように自分で考えてそれを形にしていくのはとても奥が深いと感じました。

コメントありがとうございました

投稿者 J : 2008年08月11日 14:57

＞＞ J 様

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

問題が解決して完成したことを、私も嬉しく思います。

1から何かを作るという事は難しい事ではありますが、完成した時の嬉しさはそれ以上ですよね。

今後なお、ウェブデザインライブラリーがJ様のお役にたてるように運営していきたいと思います。

投稿者 ウェブデザインライブラリー : 2008年08月11日 17:38

チャレンジ３回目にして初めて完成しました♪
ver.によっては使えない機能もありますので
私の手持ちのﾌｫﾄｼｮでは作れないと思ってました。
とても分かり易いご説明、ありがとうございました♪

投稿者 ルﾙ : 2008年11月07日 15:37

＞＞ ルﾙ 様

完成おめでとうございます。私も嬉しく思います。
確かにバージョンよっては使えない機能もありますが、出来る限りどのバージョンでも作成できるよう説明できればと思っております。

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

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

やっとできました〜（前回は　蝶の形を描くだけで精一杯でした）
何だか、見本とイメージ違うけど・・・・
いかがですか？評価していただければありがたいです。
よろしくお願いします。ペコリ(o_ _)ｏ))

投稿者 みゅ〜と♪ : 2009年05月14日 10:52

＞みゅ〜と♪様
完成おめでとうございます。私も嬉しく思います。

評価といたしましてはグラデーションの強弱や配色に気を配れば更によいものになると思います！
がんばってください！

お話は変わりますが、当サイトはコンテンツ元サイト
http://www.newtutorials.com/
の許可を得て掲載しております。

作成手順をHPに掲載いただいているようですが、
http://www.newtutorials.com/
の許可を得ていらっしゃいますか？

クレジット等記載がありませんでしたので、
コメントさせていただきました。

もし、まだのようであれば問題に発展する恐れがありますので、許可を得た後にご掲載いただければと思います。

よろしくお願いいたします。

投稿者 ウェブデザインライブラリー : 2009年05月29日 15:20

2010年6月の人気記事ランキング

第1位：Photoshopでクールな効果をつける方法 

第2位：Photoshopで洗練したデザインを加える5つの小技 

第3位：Photoshopで写真に幻想的な霧のかかった効果をつける方法 

第4位：Photoshopでプロフェッショナルなメニューボタンを作る方法 

第5位：Photoshopで目に風景を映り込ませる方法 

トラックバック

このエントリーのトラックバックURL：