おひさしぶりの更新となります、丸山です。こんにちは。 一昔前に比べてプログラマーに求められる守備範囲って広がってきていると思いませんか？
■ プログラマーの画像編集
システムで使用する画像素材は、クライアントやデザイナーから提供されることが多いと思います。 プログラマーのお仕事はプログラムを書くことです。 しかしながら、素材を渡されて「いい感じに調整をしておいてよ」といわれてしまうこと。ありませんか？ 普段画像編集に関わっていないとちょっとした加工にも困ることがあると思います。 切り抜きやサイズ変更くらいはプログラマーであってもさっと対応できたらステキですよね。
画像編集といえばPhotoshopが有名です。でも、操作がよく分からないし価格もネック…と感じる方も多いのが現状です。 今回は、ブラウザーでインターネットに接続できる環境さえあれば誰でも無料で使うことができる「Pixlr」をご紹介したいと思います。 実際の現場でも必要に迫られることが多い「切り抜き」と「サイズ変更」の操作方法を説明します。
■ Pixlr Editor と Pixlr Express の違い
Photoshopに慣れている方は「Pixlr Editor」が断然おすすめです。 操作可能なことが似ているのはもちろん、Photoshopと同様のショートカットもかなり使うことができます。 数あるオンライン画像編集ツールの中でも「Pixlr」をご贔屓にしたくなる一番の理由がショートカットだったりします。 英語メニューでもあまり不自由は感じませんが、メニューを日本語化することもできます。 出力できるファイル形式はJPEG,PNG,BMP,PXD(Pixlr Editor 独自形式)の4つです。
簡単な写真の加工のみをしたい場合は「Pixlr Express」がおすすめです。 できることは限られてしまいますが、とてもわかりやすいインターフェースになっています。 メニューは英語になりますが、加工後のイメージがわかりやすいアイコンになっているので戸惑いは少ないと思います。 出力できるファイル形式はJPEGのみです。 今回は簡単な「Pixlr Express」で加工をする方法をご紹介いたします。
■ 「Pixlr Express」へアクセス！
http://www.pixlr.com/ をブラウザーで開いてください。 画面上部にあるメニューのうち「Pixlr Express」をクリックするだけで利用することができます。
■ 編集する画像を選びます
編集する画像はローカルのファイル、またはURLで指定をします。 「Pixlr Express」で開くことができるファイルの拡張子は jpg,jpeg,gif,png,psd です。 PSDファイルはレイヤー情報のない状態にはなりますが開くことができます。 ベクターファイルはさすがに開けませんがPSDファイルが開くだけでもありがたいですよね。
画像読み込み後の画面イメージはこのようになります。
■ 画像の一部を切り抜きする(トリミング)
左の操作パネル「Basic」を開きます。 「Basic」パネル内一番上の「Crop」が「切り抜き」をするメニューです。
Width(横幅)とHeight(高さ)は元画像の数値が入っています。
この数値を変更することで切り抜きをするサイズを指定できます。 Width(横幅)=300px、Height(高さ)=100pxを入力してみました。
画像の上にある白い枠が小さくなりました。 この白い枠はドラッグをして移動したり、大きさを変更したりすることができます。
切り抜きをする場所、大きさを決定したら
ボタンをクリックすると確定できます。
失敗をしたら
ボタンをクリックすれば元に戻すこともできます。
■ 画像を拡大・縮小する(リサイズ)
操作パネル「Basic」から「Resize」を選びます。言葉の通り「リサイズ」をするメニューです。
実際の現場では拡大よりも縮小をすることか多いと思います。 作りたい画像のサイズをWidth(横幅)とHeight(高さ)に入力します。
Width(横幅)とHeight(高さ)の下にあるチェックボクスは縦横のアスペクト比(縦と横の比率)を維持するかどうかの選択になります。 チェックをつけていればアスペクト比は維持されます。チェックの付いた状態で、Width(横幅)を入力するとHeight(高さ)は自動的に変更されます。もちろん逆にHeight(高さ)を入力すればWidth(横幅)が自動的に変更されます。
今回はWidth(横幅)=250pxとして入力してみました。
大きさを決定したらボタンをクリックすると確定できます。
■ 回転や反転もできます
操作パネル「Basic」の3つめは回転や反転をするメニューです。
アイコンを見れば操作方法はわかりますよね。 ボタンを押すだけで簡単に90度回転をしたり左右反転させることができます。
■ 写真の加工も簡単です
ここまで操作パネル「Basic」の説明をしました。他にも2つのメニューが用意されています。 ボタンをポンポン押すだけで写真のイメージを簡単にがらっと変えることもできます。
レトロカメラっぽく加工をしてみました。
■ 保存をしましょう
画像は加工できても保存できなければ意味がありません。
最後に
ボタンをクリックすると保存ダイアログが表示されます。
「SAVE」をクリックすればローカルにファイルが保存できます。 Pixlr Expressは保存形式はJPEGのみになります。 いかがですか？慣れてしまえば切り抜きやサイズ変更が数分で思い通りにできるようになります。 PixlrはFirefoxのアドオンもあり、画像キャプチャ → 加工をよくする方にはあわせてお試しいただくとより便利に感じると思います。
オンライン画像編集ツールはPixlr以外にもいろいろあるのでしっくりくるものを探してみてください。 個人的には「Sumo Paint」が気になっていますが、やっぱりPhotoshopって便利だなあ。という結論になりそうな予感です。
