IT相談などをしていると「画像の加工ソフトは何がいいですか？」と聞かれることが多いです。私は長いことFireWorksを使っているのですが一般の方に有料ソフトをお勧めするのもコストパフォーマンスを考えると簡単には勧められません。ということで無料のソフトなどを探していましたが、今回ブラウザで画像加工ができる「Fotor」というサービスを利用してみて、今度からはこれをお勧めしたいなと思いました。Fotorでどんな画像加工ができるかをご紹介します。
ブラウザで様々な画像加工ができるサイト「Fotor」
こちらが「Fotor」のWEBサイトです。トップページにあるように、編集、コラージュ、デザインなど様々な用途に使える画像加工ができるようになっています。
基本的に無料のサービスですが、無料のサインアップをしておくとダウンロードできる画像の種類が増えるので、サインアップをしておくことをお勧めします。
サインアップは
ページ右上にあるログインをクリックし
このポップアップから登録します。手続きが簡単そうだったのでConnect with Facebookから登録してみます。クリックすると
ポップアップが表示されるので、○○としてログインをクリック
すぐにこのようにログイン済みの状態になり、サインアップが完了したようです。簡単でした(^^)/
ホームページでよく使う「画像の上に文字を入れる」加工をしてみる
IT相談などでお客さんが画像加工ソフトを使わないといけなくなる場面はだいたいこんな感じです。
お客さん「この画像をホームページに入れたい。画像の上にはキャッチフレーズも入れたい」
この場合は画像加工ソフトで以下の作業が必要になります。
・画像はフリー素材やカメラで撮影したもので、サイズが大きめなので適切なサイズにする
・画像の一部を切り取ってホームページにフィットする大きさにする
・画像の上に文字を入れて、文字がちゃんと見えるように加工する
という感じです。これらを行う適切なお勧めソフトの決定版を見つけられずにいたのですが、Fotorではこれらのすべてが簡単にできました。
例として、unsplash.comからダウンロードした画像を使って、ブログのトップ画像を文字を入れて作るということをしてみたいと思います。
大きめの画像を適切なサイズにしたい
unsplash.comから、
https://unsplash.com/photos/WLDtOWLuSgA
この画像をダウンロードして使いたいと思います。この画像のサイズは6000×4004ピクセルとかなり大きなものです。
Fotorトップページから
編集をクリック
画面上部の開くをクリック
コンピュータをクリック
ダウンロードしてあった画像を選びます。
画像が読み込まれました（この時点で6000×4004ピクセルの画像は3000×2002ピクセルになっていました。おそらく大きすぎるため縮小されたのではと思います）。
ヘッダ画像は幅800ピクセルぐらいにしたいと思いますので、
基本的な調整＞リサイズ をクリック
現在の大きさが出るので、
左側の幅の方の入力欄に800と入力します。自動的に縦の長さが比率で変更されます。ここでロック画像をクリックすれば縦の長さも指定できますが、そうすると写真の縦横比が変わってしまいおかしなことになるので、ここでは横幅のみ希望の大きさに変更します。
変更するをクリック
このように画像の大きさが縮小できました。この場合表示している大きさが27%と小さいので
27%をクリックして100%にしておきます。
画像の一部を切り取る
横幅は800ピクセルになりました。ブログのヘッダー画像にする場合、もう少し画像の縦を短くしたいと思います。
基本的な調整＞切り取り をクリックすると、このように画像の上に切り取り範囲を指定できる枠が表示されます。
切り取り範囲を指定する枠を動かしてこのぐらいの切り取り範囲を決めました（横幅いっぱいに指定するときに表示しきれなかったので、表示の大きさを92%にしました(^_^;)）。
左側には変更後のピクセルも表示されていますので、これでよければ変更するをクリックします。
（余談）切り取り のすご技：Facebook
先ほどはFreeformで自由な範囲の切り取りを行いましたが、ここをクリックすると
このように何かのサイズに合わせて切り取ってくれる機能がありました。いくつか試してみると
Square
2×3(iPhone)
Facebook Cover Photo
などの様々なサイズで切り取りをしてくれる！というとても便利なすご技がありました。
画像の上に文字を入れる
縦と横の大きさを修正した画像の上に文字を載せてみたいと思います。
テキストをクリック
Add heading
Add subheading
Add a little bit of body text
という3種類の文字を追加できるエリアが表示されます。
使いたい大きさのAdd headingをクリックすると、画像の上に文字のエリアが表示されます。
文字をクリックして表示させたい文字を入力します
フォントをクリックして好きなフォントに変更します。
フォントサイズをクリックして好きなサイズに変更します。
1行に変更したいので、文字エリアの幅を広げて
1行にします。
このままだと文字が見えにくいので
文字色を変更することもできますが、今回は背景に半透明の色を敷こうと思います。
ステッカーをクリック
BASIC SHAPESの四角をクリック
四角が表示されます。重ね順を変えたいので
レイヤーをクリックし、
1つ下にをクリック
文字の下に四角が移動しました。四角の色を白にしたいので
この色をクリックして
白をクリック。大きさを変更して
文字の大きさに合わせます。
透明度をクリックして
文字が見えやすい程度のパーセンテージに調整します。
これで思った通りの加工が終わりました。
作成した画像をダウンロードする
作成した画像をダウンロードしたいと思います。
保存をクリック
保存したいファイル形式を選んで（サインインしていないとpngではダウンロードできません）、ダウンロードをクリックして、、PCの任意の場所にファイルをダウンロードします。
今回作ったファイルは
こちらになります！
コラージュ、デザインならクラウドに保存して再度加工し直すことが可能
編集でここまで作成して、作った画像を利用するのは全く問題なくできることがわかりました。しかしその後に「後でこの画像の文字を変えたりしたいときはどうすればいいんだろう？」という疑問がわいてきました。
トップページを見ると「クラウドに保存できる」ということなのですが、ログイン後のアカウントを調べてみても先ほど編集で作った画像がどこかに保存された形跡はありませんでした。
色々試してみたところ「編集」の他の加工方法である「コラージュ」と「デザイン」ならば
名前（１）をつけて同期（２）というボタンをクリックすればクラウドに保存されることがわかりました。
あとから加工し直すにはコラージュ、デザインの画面の右上にある
自分の名前をクリックして「私の作品」をクリックすると
このように作った画像が保存されていますので、クリックして
編集し直すことができます。
ということで、1度の編集でかまわない場合は編集を使い、途中の状態を取っておきたい場合はコラージュ、デザインにしておいたほうが良さそうです。加工も編集から先ほどの手順で行うよりも、イメージに合った加工方法があればコラージュ、デザインで行った方がずっと簡単にできそうです！
無料バージョンと有料バージョンの違い
このように無料で様々な加工ができるのですが、有料バージョンもあります。価格は
https://www.fotor.com/pricing.html
年一括払いで、約4,554円/年、月払いで約1,023円/月 となります。
機能の違いは一覧がありました。
こんな感じです。無料でもたくさんの機能が使えるのですが、有料になるとさらに多くの機能が使えるようです。また、広告も表示されないようになるので使い勝手がさらに良くなりますね。
おまけ：美顔すごい！マジすごい！
Fotorの編集には美顔という加工方法がありました。ちょっと試したところ
美顔すごい！マジすごい！
と大声で言いたいほどの、驚きの効果がありました。
この画面でダイヤモンドのマークがついているものは有料版でないと使えない機能なのですが、無料版の機能だけでも
加工前
加工後
と、このぐらい偽れる＜語弊がある ことができます。大きな写真ですともっとすごいのがわかりますが思わずサイズを小さくしてしまいました。
こういう加工はほぼしたことがなかったので、素人でも簡単にこのように美肌加工できるFotor、すごいと思いました。
コメント