無料の画像編集ツールで印象的なメインビジュアルを!

無料の画像編集ツールで印象的なメインビジュアルを!
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

魅力的なWEBページには、やはり素敵なメインビジュアルがあることが重要ですよね。

メインビジュアルを加工するには専用のソフトが必要ですが、画像編集ソフトに代表される Photoshop などは高機能なのでそれだけに高価なソフトですし、個人で使う分には敷居が高いという難点もあります。

そこで、今日は WEB ブラウザがあれば画像編集が出来てしまう、便利でお手軽な無料ツールを紹介いたします!

Pixlr Editor(ピクセルエディタ)
http://apps.pixlr.com/editor/

こちらは現在、デスクトップ版・WEB版・アプリ版と色々な形で提供されていますが、今回は一番手軽な WEB版を使用して、Smart4me サイトのメインビジュアルを制作していきたいと思います。
無料の画像編集ソフトと言えば GIMP が一番有名で多機能なのですが、あまり凝ったことをしない前提なら機能が限られている Pixlr Editor でも十分ですし、わざわざインストールしなくても使えるところが優れています。
ちなみに、一番相性の良い推奨ブラウザは『Google Chlome』だそうなので、お持ちの方はそちらで使ってみてくださいね。

今回は smart4me で作成された既存サイトのメインビジュアルを改善し、より魅力的なHPにしてみましょう!

【現状のサイト】
smart4me

これが smart4me で制作した現状の旅行記サイトです。使用している写真はきれいなものですが、ごく普通のサイトですよね。
写真にもう一工夫すればもっと魅力的なビジュアルになる可能性を秘めています。

今回は、のんびりした風景写真はそのままに、自由の象徴である野良猫の写真を合成してみることにしました。
それでは、さっそく制作してゆきますね!

1.まず、メインビジュアルに使用する写真を用意します
今回は、2枚の写真を重ねて合成しますので、用意する画像は

・風景の写真
・黒猫の写真

以上の2枚です。ベースになる写真の大きさは、最低でも横600px 程度は欲しいところです。

Photos

※今回の写真はこの無料写真サイトからダウンロードさせていただきました!

写真AC(※無料登録会員制)
http://www.photo-ac.com/

こちらのサイトだけでなく、WEB上には様々な目的に沿った無料写真サイトがありますので、お気に入りのサイトを見つけてみてくださいね。
ただし、無料サイトでも著作権があり、必ず利用規約がありますので、違反しないように注意して使用しましょう。

2.次に、Pixlr Editor にアクセスします。

Pixlr Editor(ピクセルエディタ)
http://apps.pixlr.com/editor/

上記サイトにアクセスします。
会員となってのログインも可能ですが、会員登録しなくても使用することができます。

まずは画面の説明です。
今回の作業には、主に『上部メニューバー』『ツールバー』を使用して画像を加工してゆきます。
ツールバーのおおまかな機能を下にまとめましたので、参考にしてください(半分くらいは今回は使わないツールです)。

toolbar

 

toolbar_2

3.使用する画像を開く

3.1 Pixlr Editorのスタート画面のダイアログ、または上部メニュー『ファイル』『画像を開く』(Ctrl+N)を実行し、使用する画像を2枚開きます。

※Siftキーを押しながら選択すると、複数枚の画像を一気に開くことが可能です。

4.合成させる画像を1枚のキャンバスにまとめる
今回は合成のため、開いた2つの画像を1つのファイルのキャンバスにまとめる必要があります。
そこで、猫の写真を、風景の写真のキャンバスに移動させることにします。

4.1 猫の写真のキャンバスをアクティブ状態にし、上部メニュー『編集』『全て選択』(Ctrl+A)を実行します。

4.2 全体が点線で囲われているのを確認し、再び上部メニューの『編集』『コピー』(Ctrl+C)を実行します。

photo4

これで黒猫の写真を他の場所にコピーする準備ができました。

4.3 ここでもう一つの『風景の写真』のキャンバスをクリックしてアクティブにし、上部メニュー『編集』『ペースト』(Ctrl+V)を実行します。

猫の写真がコピーされ、新しいレイヤーが増えました。元の風景の写真は下にある状態です。
※コピーされたのを確認した時点で、最初に開いた『黒猫の写真』のキャンバスは閉じてしまって大丈夫です。

photo4-2

5.黒猫の写真の背景を消す
合成するにあたり、黒猫の写真の背景が不要なので、消してしまいましょう。
今回の写真は敢えて背景がないものを選んでいるので、比較的簡単です。(複雑な背景のものを選択すると、とても大変なので写真の選択には気を使いましょう)

5.1 ツールバー内『自動選択ツール』を選択し、いらない部分(この場合背景の白い部分)をクリックすると、自動的に範囲選択されます。
ツールバーの『公差』の数値は小さくなるほど厳密に、大きくなるほど大雑把に選択されるようになります。初期設定の20がちょうど良いくらいですが、今回はごく薄いグレーの部分も選択されるようにしたいので、25に調整しています。

自動選択ツールを使用したところ、下のようにかなり複雑な選択範囲となってしまいましたので、細かい穴(=選択されていない場所)を丁寧に選択範囲に追加していきます。

5.2 Shiftキーを押しながら、『一列選択ツール』『自動選択ツール』で穴をクリックすると、現在選択されているところにプラスして、クリックした場所を追加選択できます。
この作業は、下の図拡大すると見やすいので、『ルーペ』ツールで拡大して作業することをおすすめします。(拡大しすぎてしまった場合は、Shiftキーを押すと縮小モードに変化します)キャンバス上をクリックすると拡大されますので、その状態で消すとよく見えて、作業が丁寧にできます。根気のいる作業ですが、丁寧にがんばりましょう。

photo5

5.3 選択作業が終わったら、上部メニュー『編集』『消去』(delete)を実行し、背景を消去します。

photo5-2

大まかにごみを消すと、なかなか良い感じになりました!
※この時点で消し残しが目立つようだったら、『消しゴムツール』でブラシサイズを1~5程度にし、丁寧に消しましょう。

6.黒猫を小さくする
今のままだと黒猫が巨大な怪獣並の大きさなので、黒猫を小さくします。

6.1 黒猫の写真のレイヤーを選択していることを確認し、上部メニュー『編集』『自由変形』(Ctrl+T)を選択すると、画像のそばにバウンティングボックス(四角い線の箱)が出現します。
黒猫の画像とバウンティングボックスの位置表示がズレているのが気になりますが、処理には問題ないので気にせず続けます。
縦横比率を崩さないように、Shiftキーを押しながら右下の四角を動かすことで画像の拡大や縮小が可能です。

6.2 任意の大きさになった時点で『Enter(Return)』キーを押すと、変形が確定されます。
この時、一度小さくしてしまった画像をもう一度拡大しようとすると画像が粗くなってしまうので、気を付けましょう!

6.3 さらに、ツールバー内の『移動ツール』を使って、黒猫の位置を調整します。

photo6

これで写真の合成が完成しました。
この段階で、一度保存しておくと安心です。

保存する場合、上部メニュー『ファイル』『画像を保存』(Ctrl+S)で現れるダイアログ画面で保存します。フォーマットを『PXD』にすると、レイヤー構造を保持したまま保存できるので、後から編集も出来、便利です。
※他のファイル形式を選ぶとレイヤーが統合されてしまい、個別のレイヤーを編集することが難しくなってしまいますので、ご注意ください。

7.メインビジュアルにふさわしいトリミングを
このままではメインビジュアルにするには少々弱いので、トリミングします。

7.1 ツールバー内『切り抜きツール』を選択し、黒猫にフォーカスさせて切り取ります。
この時、右にサイトのタイトルを配置することを意識します。
メインビジュアルは出来るだけ1つのものにフォーカスさせたほうが印象に残り、ごちゃごちゃしません。思い切ってトリミングしましょう!

※トリミングは縦長になるとスマホで見るときに画像が大きすぎてしまいますので、出来るだけ横長にしましょう。

photo7

7.2 『Enter(return)』キーを押すとトリミングが確定されます。

8.サイト名を入れ、アクセントをつける
メインビジュアルはほぼ完成しましたが、最後の仕上げです。
まず、写真を引き締めるために最上部に線をひいてみようと思います。

8.1 上部メニュー『レイヤー』『新しいレイヤー』を実行し新しいレイヤーを増やした上で『描画ツール』を選択し、上部のメニューバー、右のパレットで色を選びます。
ここでは、海の藍色をスポイトで選んだ上で、横長の細い線になるようにマウスを左上の角からドラッグしながら四角を描画します。

これで写真にアクセントがつきました。

photo8

続いて、画像にサイト名を入れます。

8.2 ツールバー内『タイプツール』を選択し、文字を入れたいだいたいの場所でキャンバス上をクリックし、現れたダイアログに文字を入力します。
英語の場合、デフォルトでも素敵なフォントがあると思いますので、色々なフォントを試してみましょう。
下の画像で使用したものは、『Century Gothic』というフォントで、シンプルですが可愛さのあるフォントです。
入力後、やサイズ色も自由に変えてることができます。今回は紺色に映える白を使い、28ptにしています。

photo8_2

これで、メインビジュアルが完成しました!
上部メニュー『編集』『保存』(Ctrl+S)で現れるダイアログで、JPEGを選んで保存します。

Photo8_3

Photo8_4

※WEB用に保存する際は、JPEG形式か PNG形式にする必要がありますが、普通の写真ならば JPEG形式 で構いません。ですが、JPEG形式 は単色で塗りつぶされているようなベタ塗りが入っている写真には向きませんので、そのような場合には PNG形式 を使用することをおすすめします。

※この時、このまま閉じてしまうと後から編集できませんので、元ファイルが必要な場合はJPEGで保存を選んだ後に再度『PXD』形式でも保存するのを忘れないようにしてください。

9.smart4me のサイトに埋め込んでみよう!

それでは、さっそく保存した画像を smart4me のサイトに反映してみましょう。
メインビジュアルを変更する前と比べると、垢抜けた印象となっているのではないでしょうか?

Photo9

いかがでしたか?
全体を通して注意すべきこととして気を付けたいのが、Pixlr Editorは smart4me と同じようにブラウザ上で動いているツールのため、うっかりブラウザを閉じてしまうとデータがあっさり消えてしまうという点です。どのソフトを使用するときにも気を付けるべきことですが、こまめに保存をすることが大切です。

メインビジュアルが素敵に作ることができれば、smart4me のピックアップサイトに選ばれる可能性もグッと上がります!
是非、チャレンジしてみてくださいね!

今回は Pixlr Editor の基本的な機能しか使用していませんので、もっと色々なことをしたい場合はインターネットで使い方を検索してみてくださいね。