Online Photo Editor | Pixlr Editor | Autodesk Pixlr

⑰で画像加工に便利な、ブラウザ上（ネット上）で使える、画像加工ソフトCanvaをご紹介させていただきました

⑰ヘッダー画像(スライド)を作って入れよう

Canvaは、素材が、そろっていて、直ぐ作れる利点があって便利なサイトです。

他にも、何か、加工に使える、便利なサイトがないかなと探していたら、見つけました。

それが、冒頭で、御紹介している「Pixlr」です。

これ、何が良いかと言いますと、みなさんも、お聞きになったことが有るかもしれませんが画像加工で有名な、Adobeさんのソフト「Photoshop」これと、同じことが、ほぼできます。

このソフトの便利なのが、やはり、「レイヤー」という機能で、イメージで言うと、アニメのセル画が重なっていく感覚。要は、写真を3枚重ねたら、3枚、それぞれ、独立して加工ができる。

例えば、背景の画像があって、その上に、人物の写真を重ねると、その背景の場所に、あたかも、その人が、居るような、感じで、画像を合成出来たりと、まあ、とにかく、何かと、便利なんです^^

そんな感じの、機能を、備えた、ソフトが、web上で、しかも、無料で使えてしまいます^^;

今回は、そのサイトの紹介とともに、ヘッダー画像を作る時に、便利な、異なる写真を、自然な感じで、横にならべる、工程を、説明しながら、実際の操作も説明していきますね。

合成用の写真を選ぶ

これは、御自身でお持ちのものでも良いですし、freeの素材を使ってみても良いですし。

今回は、例のごとくPEXELSさんのお世話になりたいと思います。

今回、イメージは、子供とか、家族向けのサイト用の、ヘッダーを想定してみたいと思うので、検索窓に「child」と打ち込んで、写真を選んでみたいと思います。

検索して、出てきたのが、こんな写真の数々。

背景の色等、写真の色の雰囲気が、似た、写真の方が、合成しやすいので、白っぽい写真で、なんとなく、良さげな写真を３枚えらんで、ダウンロードします。

こんな感じの写真を

大きさは、あとで、縮小することになるので、そんな大きくないサイズ。

今回、スライドを、1900×500でつくるので、高さの500が収まれば基本大丈夫です。

このサイト、基本、Licenseが、CCOなので、著作権フリーです。

一応、CC０である事を、確認する事を、お勧めします。

Pixlrを開いて画像を加工する

PIXLR　こちらのサイトに行きます。

一番上の、新しい画像を作成を選んでください。

出てきた、画面に、以下の入力をしてください。

入力し終えましたら、これは、画面の大きさにも、よりますが、作業しやすいように画面の配置を、調整します。

上の、白い部分が、キャンパス。画像を加工する、土台みたいなものです。これが全部写る感じだと、作業がしやすいと思います。

画像を開いていく

メニューから、①レイヤー　→　②レイヤーとして画像を開くを選んで、先ほど、保存した、画像を３枚とも、同じ手順で、レイヤーとして、開いてください。

写真が、大きいと、こんな感じで、画面いっぱいになってしまいますが、これから、調整していきます。

写真をお手頃サイズに縮小する。

上の、写真で、画面真ん中、下の”レイヤー”と書かれてる、作業boxの一番上。レイヤー3の部分が、青くなっているのが、解りますね？これは、今、レイヤー１、レイヤー２、レイヤー３の写真が、３枚重なっていて、そのうちの、”レイヤー3”を「選択している」この”選択している”という概念が、何気に大切で、要は、「レイヤー３の加工準備が、出来ていますよ！」という状態です。

まずは、保存。

ここから、作業に入りますが、作業をする前に、まずは、この初期状態を保存しておきましょう。

保存する場合は、ほんの少し、特殊と言うか、この、レイヤーが保持された状態で保存をする必要があります。そうでない、方式で保存すると、何のことは無い、３つの写真が、重なっただけの状態で、一番上の写真の情報だけが、みえる形で、保存されてしまいます^^;

こちらの感じで、フォーマットにPXDという、形式を選んでいただき、保存していただければ大丈夫です。

これで、初期準備完了。　ここから、画像の調整にはいります。

画像の自由変形

動画を見ながらが、一番わかりやすいかと思います、ここから、画像を、適当なサイズに変形していきます。

まず、変形したい、画像のレイヤーが「選択されている」ことを確認します。

先に説明した、青掛かりになっている状態ですね。確認したら、メニューから　編集→　自由変形を選びます。

すると、写真の原型のサイズが表示されて、四隅プラス、中央に、青い四角がでてきているのが確認できると思います。（例:下の写真の青い四角です。）

ここを、掴む感覚。青い四角の上で、クリックしてクリックしながら移動する事で、自由に変形が出来ます。

このとき、shiftキーを押しながら、変形すると、画像の縦横の比率が、維持されて便利です^^　

これを、全てのレイヤーに対して行います。

別のレイヤーの上で、クリックすると、レイヤーの選択が変わるので、選択が変わった事を、確認したうえで、作業を進めてください。

今回は、こんな感じで、変形して並べてみました。

状態としては、レイヤーが1→２→３と上から重なっている状態で、真ん中の写真が、レイヤー1で一番下、レイヤー２が、2番目で左、レイヤー３が、一番上で右という状態です。

これも、選択ツールを選んでいる状態で、レイヤー２をクリックして、押したまま下や、上に、カーソルを移動すれば、順番を変える事ができます。

こんな感じですね。

消しゴムツールで、境界線をぼやかす。

Photoshop含め、こういった、画像加工ツールは、色々、面白い処理ができます。

今回は、「消しゴムツール」というツールを使って、画像の境界線をぼやかして見たいと思います。

今回使うのは、この、消しゴムツール。ツールをクリックしたら、上の、ブラシという部分の右の数字をクリックしてみてください。

イメージは、使う消しゴムを、ブラシの形にしていると、イメージしてください。

筆の形みたいなもんですね。　上から、適当な形をえらんでも良いですし、下で、アナログ的に設定もできます。直径は、筆の直径、大きさですね。　空間は筆の密度。流量って言ったりもします。要は、一回のクリックで、沢山消えるかどうかの指標みたいなものです。ここは、あんまりいじらなくても、直径を決めれば、適当なサイズに、自動的に、変更されるので、大丈夫です。硬さは、数値が大きい（MAX100）だと、一回押すと全部消えます。小さいと（Min0）スプレーを吹きかけるイメージですかね？あいまいに消えてくれます。

この辺は、お好みなので、色々試してみると面白いですが、今回は、プレセットの上から2段目、右から３番目の100の直径でやってみます。

イメージ、各写真の、周りを、曖昧に消して行って、なんとなく、光が出てる感じの画像にしてみます。

微調整、かけて、こんな感じでしょうか？

硬さが50でちょっと硬すぎたかもしれないですね^^;

もう少し、硬さをさげて、直径を大きくしても良かったかもしれないですね^^;

一度、画像のサイズが決まったら、保存して、色々試してみるのが、良いと思います。

出来上がった画像を、最初の、保存と同じ方法で、今度は、保存形式は、好きなのを選んでみてください。

色々な、ツールを覚えて行くと、本当、色々な加工ができるので、Canva以上に、画像加工の幅が広がると思います。サイトでも、今後、色々な加工方法紹介できればと思っています^^