ウェブサイトに使う画像を加工するのにFireworksを使う人も多いと思います。
Photoshopよりも手軽に使えるので、凝った編集をしなければFireworksでも十分に使えます。
それでも、もっと気軽に画像を編集したい！そんな時に便利なのが、オンライン画像編集ツール「
pixlr」です。
登録不要で無料で使えるのはもちろん、ブログで使う画像表現はFireworksに引けをとりません。
さらに、個人的にはFireworksよりも起動が早いのも好印象。インターフェイスも日本語化されていて（ただし、毎回変更しないといけないので、Englishで使っちゃった方が早い）、高価なソフトを買わなくても、クールな画像を実現することができます。
今回はpixlrを使って、ブログでよく使われる画像表現を実現する方法をご紹介します。
アプリケーションとして使う
まず、pixlrにアクセスして、「Pixlr Editor」をクリック
Chromeを使っているなら「
アプリケーションのショートカットを作成」して、クイック起動ツールバーに入れておくと便利です。
そうすることで、オンラインサービスでありながら、デスクトップアプリケーションのように使うことができます。
現在のところ、Google Gearsに対応しておらず、オフラインでは使えませんが、手軽に画像を編集したいならコチラのほうが便利かも。
Fireworksが初回起動に10秒以上かかるのに対して、pixlrは瞬時に立ち上がります。
ブログでよく使う画像表現
（1）スポットライトが当たったような表現
それでは実際に画像編集のTipsを紹介していきましょう。
ブログやチュートリアルで、強調したい部分にスポットライトを当てたような画像を見たことがあると思います。
以前、f-kojiさんのブログでFireworksを使ったチュートリアルが公開されていました。
「
意外と簡単だった「スポットライトが当たったような画像を作る方法」
それと同じ表現をpixlrで実現する方法を紹介します。
pixlrを立ち上げた画面。
「Open image from computer」を選択して、加工したい画像を選択します。
画像を開いたら、強調したい場所を選択します。
枠に丸みをもたせる場合、
Featherを調整します。
ここでは「5」にしています。
次に「
Edit」＞「
Invert Selection」をチョイス。選択箇所を反転します。
「
Adjustment」＞「
Brightness & Contrast」を選択。
Brightnessをマイナスにスライドすることで、背景が暗くなり、強調した部分が浮き出てくるようになります。-50くらいに設定するとくっきりと浮かび上がってきます。
（2）半透明の背景に文字をかぶせる
文字の背景に半透明の帯を入れて、タイトルを浮き立たせる方法です。
ToolsバーからDrawingを選択
カラーパレットを両方とも黒にする
Opacityを80%に設定
これで帯ができたので、次に文字をこの上にかぶせるだけです。
（3）文字をグロー効果を当ててみる
こんな感じで、文字の周辺にグロー効果を当てて、文字が浮き上がって強調される効果の演出です。
写真の中に文字を入力したら、Layerパレット（右側にあります）の文字レイヤーを選択して、Layer styleボタンをクリック。
エディターが立ち上がるので、Outer glowにチェックボックスを入れます。
Opacity、Hardness、Size、Colorを調整して完成です。
（4）強調したい部分を枠で囲む
右サイドの「Tools」からDrawing Toolを選択。
- Full shapeのチェックボックスを外します。
- 枠線の太さはBorder sizeで変更します。デフォルトは1ですが、3くらいが調度良い。
枠線の色の指定はToolsの一番下をクリック
カラーピッカーが立ち上がるので色を指定。
赤にする場合はff0000を入力して「OK」をクリックします。
日常使用する表現をこのように簡単に設定できるpixlrですが、デメリットもあります。
- ブラウザを閉じると、「閉じてもよろしいですか？」という警告なしで落ちてしまう。
- 一度画像を閉じてしまうと、レイヤーを再編集できない。（一枚の画像になってしまう）
- もちろんオフラインでは使用できない。
こうしたポイントをクリアできれば、かなり使い勝手は向上してきそうです。
