1165581650 この画像の作り方を教えてもらえませんか?


Fireworksもしくは、Photoshopで作る方法をお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/12/08 21:40:53
  • 終了:2006/12/09 01:27:28

回答(2件)

id:honkaku No.1

ほんかく回答回数201ベストアンサー獲得回数12006/12/09 01:21:30

ポイント100pt

Fireworksの場合

1.下に敷く画像を用意する(この場合高速道路の風景写真)

 画像が大きい場合は「修正→キャンバス→イメージサイズ」で適当な大きさに修正。

2.写真に対して下から白いグラデーションマスクをかける。

 「ツール→矩形ツール(塗り・白色)」で矩形を作り「塗りオプション」で、塗りをグラデーションに設定。グラデーションのモードを「線形」にし、一方の色を白に、もう一方を透明度0にしてセット。

2-1.ビットマップ・マーキーツールの矩形で白く塗りつぶしたい範囲(この場合下方)を囲み、大き目の直径のブラシで下をさっと塗っても似たような効果が得られます。

この場合、写真に対して直接塗ってしまうと、後でやり直しが出来ないので、別レイヤーを新規作成して、そのレイヤーに白い色を塗ると良い。

3.四角い囲みプレートを作る

 適当な大きさの矩形を作り、青色に塗っておく。この画像を見ると、若干のグラデーションが付いているようなので、適当に。

4.プレートに立体感をつける

 プロパティパネルの中にある「フィルタ」のプラスマークを押すと、メニューが出てくるので、「ベベルとエンボス→ベベル(内側)」を選択し、適当な隆起を表現する。この場合はあまり隆起させない方が良いので『フラット、隆起の幅:3、コントラスト:75、柔らかさ:3、角度:135、隆起」と設定。

5.プレートに影をつける

 よく見るとプレートには影がついているので、プレートを選択した後、もう一度「フィルタ」のプラスボタンを押して、今度は「シャドウとグロー→グロー」を選択。

グロー設定は

『幅:2、色:黒、透明度:100%、柔らかさ:6、オフセット:0』に設定。

6.プレートに模様を入れる

 よく見るとプレートには斜線の模様が入っている。今度はプレートの塗りの設定を「対角線」にして、透明度を30%くらいにしておく。

7.文字を入れる

 文字はツールパレットの「T」という文字アイコンを使う。

 先ほど作成したプレートの上で、文字ツールをクリックすると、プロパティで文字に関する設定が出てくるので、雰囲気に合ったフォントを選択する。

文字色は白、アンチエイリアス(文字のふちの処理)は「スムーズ」にしておくと良い。

8.文字に影をつける

 文字にも影がついている。

 先ほどのプレートで処理したように、文字を選択してから「フィルタ」でドロップシャドウを選択して、適当な数値を入れて影をつけると、立体感が簡単に出るようになる。

以上です。

http://www.adobe.com/jp/products/fireworks/

 

id:honkaku No.2

ほんかく回答回数201ベストアンサー獲得回数12006/12/09 01:24:19

Fireworksの場合

1.下に敷く画像を用意する(この場合高速道路の風景写真)

 画像が大きい場合は「修正→キャンバス→イメージサイズ」で適当な大きさに修正。

2.写真に対して下から白いグラデーションマスクをかける。

 「ツール→矩形ツール(塗り・白色)」で矩形を作り「塗りオプション」で、塗りをグラデーションに設定。グラデーションのモードを「線形」にし、一方の色を白に、もう一方を透明度0にしてセット。

2-1.ビットマップ・マーキーツールの矩形で白く塗りつぶしたい範囲(この場合下方)を囲み、大き目の直径のブラシで下をさっと塗っても似たような効果が得られます。

この場合、写真に対して直接塗ってしまうと、後でやり直しが出来ないので、別レイヤーを新規作成して、そのレイヤーに白い色を塗ると良い。

3.四角い囲みプレートを作る

 適当な大きさの矩形を作り、青色に塗っておく。この画像を見ると、若干のグラデーションが付いているようなので、適当に。

4.プレートに立体感をつける

 プロパティパネルの中にある「フィルタ」のプラスマークを押すと、メニューが出てくるので、「ベベルとエンボス→ベベル(内側)」を選択し、適当な隆起を表現する。この場合はあまり隆起させない方が良いので『フラット、隆起の幅:3、コントラスト:75、柔らかさ:3、角度:135、隆起」と設定。

5.プレートに影をつける

 よく見るとプレートには影がついているので、プレートを選択した後、もう一度「フィルタ」のプラスボタンを押して、今度は「シャドウとグロー→グロー」を選択。

グロー設定は

『幅:2、色:黒、透明度:100%、柔らかさ:6、オフセット:0』に設定。

6.プレートに模様を入れる

 よく見るとプレートには斜線の模様が入っている。今度はプレートの塗りの設定を「対角線」にして、透明度を30%くらいにしておく。

7.文字を入れる

 文字はツールパレットの「T」という文字アイコンを使う。

 先ほど作成したプレートの上で、文字ツールをクリックすると、プロパティで文字に関する設定が出てくるので、雰囲気に合ったフォントを選択する。

文字色は白、アンチエイリアス(文字のふちの処理)は「スムーズ」にしておくと良い。

8.文字に影をつける

 文字にも影がついている。

 先ほどのプレートで処理したように、文字を選択してから「フィルタ」でドロップシャドウを選択して、適当な数値を入れて影をつけると、立体感が簡単に出るようになる。

以上です。

http://www.adobe.com/jp/products/fireworks/

 

id:fm315

どちらも、丁寧な回答有り難うございます!

2006/12/09 01:25:53
  • id:honkaku
    すいません、回答が二重になってしまいました。
    テスト画像を作りながら答えてたら、こんな事に・・・申し訳ありませんっ!
    サンプル画像を載せましたので、よろしければ参考になさって下さい。
    f:id:honkaku:20061209012839j:image
  • id:usa02
    ■こんばんは。

    ※各動作の前に、色はスポイトツールで確認し、選択しておきます。
    あるいは「自分の処理したい任意色」を「描画色」として選択してください。

    Photoshopで、みたまま、地味につくってみます。趣味で独学に過ぎません、ご理解ください(^_^)
    私はMacUserなのでWindowsと少し画面が違うかも知れません。

    ※写真画像は
    http://blog63.fc2.com/l/littlesheep/file/w_rose.jpg
    自BLOGのバラ画像を使用。
    ※出来た画像は(バラが隠れちゃったけど(^_^;)
    http://blog63.fc2.com/l/littlesheep/file/roses_mihon.jpg
    これです。
     

    手順です。長文ですが、よかったら、どうぞ。

    ■作業順
    (1)写真
    (2)プレート
    (3)文字
    (4)バランスを見ながら、プレートの加工と微調整
    (5)元は.psd保存、「Web用に保存」jpegに。



    ■写真、下部分がグラデーションです。
     白(指定色)から透明へ。

    1)「スポイトツール」色を確認(#FFFFFF)
    2)あたらしく「レイヤー1」作成。
    3)「線形グレデーションツール」 
     ツールボックスで「描画色から透明に」選択します。
     「描画色」#FFFFFF、チェックボックスは「透明部分」チェック。
     下の背景になる写真を見ながら、
     (Shift押しながら。垂直に上へマウスを動かします。)
     グラデーション完成。


    ■プレート部分。(文字入力前に、少し作業)

    1)バックグラウンドの「プレート部分」を作ります。
     「レイヤー2」作成
     「矩形選択ツール」、選択した範囲に指定色(#23499E)を「塗りつぶしツール」で流し込み。

    2)下方がさりげなく「グラデーション」です。
     「スポイトツール」で確認(#6983BE)。
     この色を「描画色に指定したまま」にしてください。
    3)「レイヤー3」作成(レイヤー2の矩形は「選択されたまま」。)
     「線形グレデーションツール」
     「描画色」#6983BE(明るい色)に指定、チェックボックスは「透明部分」チェック。
     下の背景になる写真を見ながら、
     (Shift押しながら。垂直に上へマウスを動かします。)
     より明るい色をフェードアウトするグラデーション、完成。

     (レイヤー3と2を分けたのは、何度でも気軽に上書きしたいからです。)
      一気にやるなら、透明なレイヤをフェードして重ねずに混色する方法がありますが、
      重ねる方が修正がラクです。

      あとで、複数のレイヤを「結合」させます。
      (「統合」するとニュアンスが変るみたいですので、ご注意ください。)
      やり直しは・・・ヒストリーで戻れますけど・・・。


    ■文字部分。

    4)文字ツール
     クリックで、自動で「レイヤー(T)」が出来ると思います。
     文字色は#FFFFFFにしてください。

     プレート部分は先に作ってあるのでそれを見当にし
     文字をレイアウトをします。
     (私の見本はLucida Blachletterを選びました。)
     
    文字のレイアウト終了。
    (私の場合は)このへんで、一旦セーブします。

    5)「文字の加工」です。

     どのような加工をすればいいか、みておきます。
     見本になる画像を拡大します(200%くらい)
     首都高の文字の周囲は黒くにじんだ影がついています。

     「光彩」の外側処理で出来ると思います。

     「スポイトツール」で「首都高」の文字際の色を抽出します。
     「描画色」は#1B3266にします。


    6)ファイル 編集 イメージ レイヤー の「プルダウンメニュー」
     「レイヤー」の「効果」選択
     「光彩(外側)」選択。
     
     「効果」という小窓の画面 が開きます。

     「光彩(外側)」適用にチェック、 
     「描画モード」「焼込みカラー」選択、
     「色の窓」をクリックで →カラーピッカー画面起動、「光彩のカラーを選択してください」
      先ほど調べた、「描画色」を選択するか、1B3266と入力 
      →カラーピッカー画面 「OK」→ 閉じる。

     (私の入れた数値、ご参考用。好みで。)
     「不透明度」70 %
     「ぼかし」 10 pixels
     「適用度」 150 %

     「プレビュー」チェック 文字のにじみ具合をみてください。
    目視で良ければ 「OK」 
     

    7)文字が出来ましたので、再び、
     「プレート」を再加工します。
     レイヤーをみてください。

     レイヤー2とレイヤー3のみ表示する画面にしてください
     (目のアイコンをクリックでレイヤー2.3以外は消す)
     そのままレイヤーのメニュー「表示部分を結合」します。

     レイヤーの名前を紛らわしいので「プレート」に変更します。


    ■よく見ると斜めにパターン。
    8)斜めのパターン模様。
     「フィルタ」→「penta.com」→「Jeans」を選ぶと、「プラグイン」で斜めの線の加工が出来ちゃいます。
     penta.comさんのサイトで入手をお薦めです。
     ただ、このくらいのサイズで使うなら、ここまで細かく加工しないでも「問題ない」気もします。

     http://www.pentacom.jp/pentacom/
     penta.comさまの「Pproducts」にPhotoShopのプラグインなど
     あり。(Mac、Win)Jeansです。(斜めにパターン)


    ■光ったり。

     レイヤーの「背景」写真をチェックして「表示」させます。(非表示にしていた)

    9)見本の、プレートは逆光のように淡く、光っています。

     レイヤー「プレート」を選択(今度は内側を光らせます)

     ファイル 編集 イメージ レイヤー の「プルダウンメニュー」
     「レイヤー」の「効果」選択「光彩(内側)」選択。
     
     「効果」という小窓の画面

     「光彩(内側)」適用にチェック、 
     「描画モード」「ハードライト」選択、
     「色の窓」をクリックで →カラーピッカー画面起動、「光彩のカラーを選択してください」
     ・描画色を選択 か、 FFFFFFと入力 →カラーピッカー画面 「OK」→ 閉じる。

     (私の入れた数値、ご参考用。好みで。)
     「不透明度」95 %
     「ぼかし」 7 pixels
     「適用度」 20 %
    下のラジオボタンは 「中央」 と 「エッジ」では、「エッジ」選択します。

     「プレビュー」チェック 「プレート」のエッジが光っていますか。
    目視で良ければ 「OK」 
     

    10)レイヤー4(加工した文字)表示してバランスをみます。
     かなり近くなりました。

    11)「プレート」外への光彩処理です。
      「プレート」選択
    ファイル 編集 イメージ レイヤー の「プルダウンメニュー」
     「レイヤー」の「効果」選択「光彩(外側)」選択。
     
     「効果」という小窓の画面 が開きます。

     「光彩(外側)」適用にチェック、 
     「描画モード」「焼込みカラー」選択、
     「色の窓」をクリックで →カラーピッカー画面起動、「光彩のカラーを選択してください」
     ・描画色を選択 か、3B413Fと入力 →カラーピッカー画面 「OK」→ 閉じる。

     (私の入れた数値、ご参考用。好みで。)
     「不透明度」70 %
     「ぼかし」 10 pixels
     「適用度」 100 %

     「プレビュー」チェック 文字のにじみ具合をみてください。
    目視で良ければ 「OK」 
     
     プレートの外側が、ほんのりグレーに、にじみました。



    12)最初に作った「レイヤー1(白いグラデーション)」を、マウスで「掴んで」、
     「背景(画像)」レイヤーの上になっていることを確認。
    ★「レイヤー1(白いグラデーション)」と「背景(画像)」を「結合」させないのは、
     「他の背景画像」に、「差替える」可能性を考慮しての判断です。

    後「背景(画像)」→「レイヤー1(白いグラデーション)」→「プレート(光彩処理)」→「文字レイヤー(光彩処理)」前
    案外シンプルな構造です。

    ★できあがり(^_^;

    ★Web用の用途ならば、
    「ファイル」→「Web用に加工」で、グラデーション多用なのでjpeg保存(若しくはping)。
    .psd保存。文字違いVerなどが作れます。

    ★PhotoShopの5.5。ちまちまっとやってます。

    「終了」後のコメントは承知ですので、お気遣いはなしでお願いしますね☆

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません