ネットサービスの開発に役立ちそうな話題を中心にお届けします。
F.Ko-Jiの「一秒後は未来」 > 豆知識 > 意外と簡単だった「スポットライトが当たったような画像を作る方法」
2007年06月01日 02:09
1712日前に投稿

意外と簡単だった「スポットライトが当たったような画像を作る方法」

  • ... PV
  • このエントリーをはてなブックマークに追加

スポンサード リンク

スポットライトが当たったような画像を作る方法 | P O P * P O P」より。

今回の諦めている不便利はfkojiさんからの投稿です。

投稿したあとで自分なりに同様の効果を出す苦し紛れの方法を見つけたのですが、それよりもはるかに簡単でした。ポイントは「選択範囲の反転」。

P O P * P O Pの記事(Photoshopの例)を参考にしたらFireworksでも同様の効果を出せたので、ここではFireworksでのスポットライト効果の出し方を説明します。

fireworks-spotlight-1.gif

↑ 1. 「マーキーツール」を選択

fireworks-spotlight-2.gif

↑ 2. 「エッジをぼかす」を選択、値は5くらいで。

fireworks-spotlight-3.gif

↑ 3. 効果を出したい部分を選択。(点線部分)

fireworks-spotlight-4.gif

↑ 4. 「選択」 - 「選択範囲の反転」を選択。(もしくはCtrl+Shift+Iでショートカット)

fireworks-spotlight-7.gif

↑ 5. 「フィルタ」 - 「カラー調整」 - 「明るさ・コントラスト」を選択。

fireworks-spotlight-5.gif

↑ 6. たとえば明るさを -55 に設定。

fireworks-spotlight-6.gif

↑ 7. 完成。関連エントリーリストジェネレータに改行タグオプションをつけました。

デザインツールはテクニックを知らないと使い物にならないので、この手のちょっとしたテクニックはとても役立ちます。ずっと知りたかったので、投稿しててよかったです。ありがとうございました。

スポンサード リンク

Written by
Meity.jp - 「DM送りたいのでフォローしてください」とかめんどくさくないですか?


トラックバック

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

この一覧は、次のエントリーを参照しています: 意外と簡単だった「スポットライトが当たったような画像を作る方法」:

» チュートリアルの見つけ方 from icon Labo(アイコンラボ) -FirewoksでWeb素材-
Photoshopと比べるとFireworksのチュートリアルは多くありませんが、PhotoshopのチュートリアルをFireworksでもとても参考にな... [詳しくはこちら]

コメント

このチュートリアルを参考に、pixlrでスポットライトが当たったような画像表現を簡単に実施するtipsをまとめさせてもらいました。

http://knowledgefields.blogspot.com/2010/05/pixlrtips.html

コメントありがとうございます。
オンラインツールでこの効果を再現できるツールは
なかなか見つからなかったので、
pixlrすごいですね。

豆知識

English version

前のエントリー: « COOLPIX S50c モニタープログラム 完 (5月28日)
次のエントリー: 松木里菜 6月1日発売「週刊ファミ通」表紙に! »

コピペにご利用ください。

タイトル:

URL:

リンク用HTMLタグ: