• ベストアンサー

photoshopで波形グラデーションの作りかた

初歩的な質問失礼します。 現在webデザインを勉強中の者です。 photoshop(CS4)にて、http://www.inahodental.com/ 左記のサイトのヘッダー、フッター部分の背景のような、抽象的な波形グラデーションを作りたいのですが、方法がわかりません。 どなたかご教授いただけないでしょうか?? 応用できるように、ポイントを押さえて教えて頂けるとすごく嬉しいです! どうかよろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
noname#204205
noname#204205
回答No.2

【前置き】 CSも所有していますが今回はPsE10で作例をつくりました。 PsE10はコマンドの配置などCSと若干異なりますがCSで問題なく作成できます。 【波型グラデーションの作り方:PsE10使用】 1) 新規ファイルを開きます。カンバスカラー:白 900X600ピクセル。 2) 描画色と背景色を指定します。見やすくするために色相と明度は差をつけます。 3) ツールボックス>グラデーションツール。オプションバー:「線形グラデーション」を選択。 他の項目はデフォルトで可。 ドキュメントウインドウの上辺から下辺に向けてドラグして画面いっぱいにグラデーションを描きます。 4) メニュー>イメージ>変形>自由変形。ウインドウ上辺に表示されているコントロールポイントを 下方へドラグしてグラデーションの高さを圧縮します。 定規を表示していれば200ピクセルのあたりがグラデーションの上端になります。 5) メニュー>フィルター>変形>波型 で設定ウインドウが開いたら以下のように指定します。 波数:2、 波長:最小200 最大500、 振幅:最小1 最大500、 比率:水平1% 垂直20% 種類:正弦波 「OK」↲ 波型グラデーションができます。 6) 出来たレイヤーを複製してレイヤーを移動してからグラデーションの色を変更します。 レイヤーの描画モードを「ハードライト」にします。 7)もう1つレイヤーを複製して加え 5)と同様に処理しますが描画モードは「乗算」にしてください。 以上の操作で3ヶの色違いのグラデーションが三相交流のカーブのように重なって見えるはずです。 尚、各レイヤーの描画モードは指示したもの以外でも一向に構いません。 8) レイヤーパレットの一番下に色ベタのレイヤーを追加します。色は白でも何でも好きなものにしてください。 9) 続けて見栄えするように少し処理を加えますと添付画像のようなのが出来上がります。 説明をポイントだけに絞りましたので不明な箇所があれば補足してください。

lovesms
質問者

お礼

非常に丁寧でわかりやすいご回答ありがとうございます! また機会がありましたらよろしくお願いいたします!

その他の回答 (1)

  • yellows
  • ベストアンサー率42% (188/441)
回答No.1

前の波、奥の波 2枚レイヤー分けして上のレイヤーの不透明度・塗りの%を見ながら調整しては?

lovesms
質問者

お礼

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

関連するQ&A

  • Photoshopでグラデーションの色をピンクからイエローに変換

    Photoshop CS4 Extend です。 今、デザインされた文字を持ったピンクのグラデーションのレイヤーがあります。 このピンクをイエローに変換したいのですが、イエローのグラデーションをカブスだけでは、ピンクのグラデーションが残ります。 残ったピンクをイエローにしたいからと、濃いイエローをかぶせると、やたらに強いイエローのグラデーションになってしまいます。 単純に、ピンクをイエローに変換する方法を教えてください。 よろしくお願いします。

  • photoshopでのwebパーツ制作がうまくできません。

    現在、webデザインについて勉強中です。 HTML&CSSでのコーディングは独学ですが何とか分かるようになりました。 でも、肝心なデザインの方がイマイチできません。というか、photoshopの使い方が分からず、イメージしたものを形にでないのです。。。 photoshopでwebデザインするときに参考になるようなサイト、又は参考書などを紹介していただけないでしょうか。 photoshopでやりたいことは以下のとおりです。 ・ナビ(ボタン)を作りたい。 ・素材集等を編集してイメージ画像が作りたい。 ・ヘッダ、フッタを作りこみたい。 ・webデザインのレイアウトがやりたい。 不躾な質問で申し訳ありませんが、なにとぞよろしくお願いします。

  • PhotoShop CS3でスライスツールを使用するとテーブルレイアウトになってしまう

     PhotoShop CS3とDreamweaver CS3でwebデザインの勉強をしています。PhotoShop CS3でスライスツールを使用し、ボタンや背景を切り分けてリンクを設定してweb用に保存します。保存でできたhtmlファイルを開くとテーブルレイアウトになっているのですが、これをcssレイアウトにするにはどうしたらいいのでしょうか?  スライスツールで切り分けたのをDreamweaverで組み立てるのでしょうか?アドバイス宜しくお願いします。

  • Photoshopの勉強をしています。

    今WEBデザインの勉強をしています。 恥ずかしながら、結構の年齢ですが、WEBデザインの勉強をしています。一応教室には通っていますが、年齢が年齢だけに人一倍努力が必要だと思っています。 毎日Illustratorの練習もしています。平行してPhotoshopの勉強もしなければならないと思っています。 それで、下記の本を参考にしたいと思っているのですが、いかがなものでしょうか?WEB系の写真加工や素材作りを目標にしています。 他に良い本があればお教えください。 魅せる写真の加工・デザイン技 ~Photoshopでオシャレ写真を作るアイデア Photoshop 10年使える逆引き手帖【CS6/CS5/CS4/CS3 対応】 作業を10倍加速する Photoshop「超」仕事術 -最少の労力で最高の写真に仕上げる効率化テクニックの極意 なお、使用しているのはCS6(Windows)です。 よろしくお願いします。

  • Illustratorで文字にグラデーション

    ちょっとバージョン古いですが、Illustrator CSを使って、自分のWEBサイトのロゴを作ろうと思っています。 以下のWEBサイトのタイトル部分のような、反射した文字をロゴにしたいです。 http://www.html5-memo.com/ そこで質問なのですが、上記WEBサイトのロゴのように、反射した部分の文字が徐々に透明になるグラデーションはどのようにしたらできるのでしょうか? 反射文字の作成は、 1. リフレクトで文字を反転 2. 文字にアウトラインをつける 3. グラデーションをつけた長方形を文字の上に重ねる 4. パスファインダで形状エリアを交差 の手順で作っています。3のグラデーションを作成する時に、始まりが白で終わりを透明にしたいです。 タイトル部分の背景が赤のグラデーションになっているので、背景色に合わせて徐々に色が薄くなっているように見せるのが難しいので透明で作りたいです。 つたない文章で申し訳ありませんが、よろしくお願いいたします。

  • Photoshop Webサイトの背景

    Photoshop cs6で、今作成中のWebサイトの背景にしようとしている画像が完成しました。 それをWebサイトの背景として設定するにはどうすればいいですか? HTML5です。

    • ベストアンサー
    • HTML
  • グラデーションデザインのHP

    最近は普通になってしまいましたが、グラデーションデザインのHPが主流になってますね。例えばGOOやYAHOOのトップページもよくよく見ると背景にグラデがかかってる。 このグラデデザインはどこからきた流行なんですか? WEB2.0と関係はありますか? ここのところ3Dロゴも普通に見かけるようになりました。特にRSSボタン等々。 これからはグラデ&3Dロゴなんかも取り入れたデザインがスタンダードになるんでしょうか? お詳しい方ご教授願います。

  • fireworksで制作したデザインをphotoshopで書き出すため

    fireworksで制作したデザインをphotoshopで書き出すために fireworksで制作したデザインデータを、photoshopで書き出すことになりました。 その場合PSD形式で保存をすれば、photoshopで問題なくできるのでしょうか。 初歩的な質問で申し訳ありません。 宜しくお願い致します。 fireworksはCS3、photoshopは6.0を使用しています。

  • HPデザイン制作は「Photoshop CS3」か「Fireworks CS3」か?

    個人でWEB制作の仕事をしております。 WEB制作は大きく分けると、 「デザイン制作」と「HTMLコーティング」 に分かれる思いますが、 私は、Photoshop CS3、Fireworks CS3も持っておりますが、 「HTMLコーティング」はDreamweaver CS3で制作しますが、 ★「デザイン制作」に関しては、 Photoshop CS3か、Fireworks CS3の、 どちらを勉強した方が宜しいでしょうか? 以前までは、古いIllustratorと古いPhotoshopで作ってましたが、 現代のデザイン制作の主流は、Photoshopか、Fireworksと聞き、 ソフトの買い替えを機会に、 どちらかを本格的に勉強しようと思ってます。 WEB制作のお仕事をされている方、 どうかご教授アドバイスよろしくお願い致します。

  • 写真のグラデーション(?)について

    よろしくお願いいたします。 Photoshop7.0を使ってます。写真のグラデーションていうのかどうかわかりませんが、よくWebページなんかで使われている写真がだんだん薄くなって白(背景色)くなるという加工はどのようにするのですか?参考URLのような感じなんですが。 http://www.fujita-hu.ac.jp/ 以前何かで見たのですが、「レイヤーマスクを使って・・・」と書いてありましたが、そのページが探せずに困っています。現在は写真に選択範囲を指定→選択範囲をぼかす→選択範囲を反転→削除という作業をしてますが何か違うような気がします。ご存知の方お見えでしたらよろしくお願いいたします。

専門家に質問してみよう