SNSやWebサイトで写真を取り扱う機会が多い昨今ですが、出来るだけクオリティを高く表現したいと思うのはデザイナーやカメラマンに限らずで御座います。
クオリティの高い写真と聞くと高額なカメラや機材が必要と思われるかもしれませんが、実はそうでもありません。
お手持ちのスマホカメラでもちょっとポイントを気をつければ素敵な写真表現が出来ます。
撮影時に用途を意識して撮影できれば最良ですが、ストックの写真でも編集を上手く用いればクオリティをアップさせる事は充分可能です。
そんな訳で今回はBiNDupに付属されているSiGNでの編集を前提に、水平線、トリミング、フィルターの3つのポイントを意識して解説したいと思います。
SiGNで新たに追加されたグリッド線を用いて簡単に調整する方法などすぐに取り入れられるテクニックばかりです。
画像編集と云うとオブジェクトやテキストを加えてレイアウトする様なイメージがあるかもしれませんが、素材そのものを整える意味でも有用なのでチェックしてみて下さい。
外部画像編集ツールを使っている方にもおすすめのSiGN
PhotoShopなどの外部画像編集ツールを利用している場合、Webサイトに反映した後で再度編集しようと思ったら、
- ツールの起動
- 編集データ読み込み
- 再編集
- 書き出し
- BiNDで読み込み
と云った流れを都度繰り返すことになる訳ですが、SiGNで編集するとその流れを省略して直接BiNDから編集する事が出来ます。
よくある『元のPhotoShopデータどこいった問題』や『別環境にPhotoShopやフォントがインストールされていない問題』などを回避出来ます。
SiGNを使う事により効率的なサイト編集が可能になりますので覚えておきましょう。
さてここから具体的なテクニックを解説します。
サンプルとして3月のセミナーで訪れた広島の厳島神社の写真を使用します。
水平線を維持した安定感ある構図
他人が撮影した写真でも自分が撮影した写真でも普段私が一番最初に気にするのがこのポイントです。
個人的にですが、クオリティに難を感じる写真は大概水平線に添っていないものが多いでしょうか。
もちろん意図的に斜めに撮る手法もあるのですが、意図していないのであれば水平線は最初に意識しましょう。
まずはサンプルで編集前と編集後をご覧ください。
如何でしょうか。
写真に安定感が出てきますね。
それではSiGNでの具体的な編集方法を解説します。
画像をSiGNで開く
まずブロックエディタに画像を取り込みましょう。
取り込んだ画像のメニューから「編集」をクリックするとSiGNが開きます。
最近のデジタルカメラやスマホで撮影された画像は解像度が大きいので、先ずはサイズを調整します。
「アートボードサイズ」ウィンドウを開きます。
通常Webサイトで使用する場合は1,280pxあれば充分なので、「サイズ W」に1280と入力します。
その際、アートボードサイズと一緒に画像も縮小される様に「オブジェクトも拡大・縮小」にチェックを入れるのを忘れずに。
最後に「OK」を押します。
グリッド線を利用して角度を調整
画像が適正サイズになったら、「グリッドを表示」にチェックを入れてグリッド線を表示させます。
デフォルト値は10pxですが、少し細かいので20pxにすると調整し易いかと思います。
ここの大きさはお好みで変更してみて下さい。
水平線とグリッド線が重なる様に角度を調整します。
画像をダブルクリック後に表示されるハンドルを調整するか、「基本設定」にある「回転」に数字を入れて調整しましょう。
この写真には幸い海が写っているので文字通り水平線に合わせます。
角度調整をすると隙間が出来てしまうので、アートボードより大きくなる様に画像の拡大と位置調整を行います。
shiftを押しながらハンドルをドラッグするか、「基本設定」の「サイズ」に数字を入れて調整しましょう。
これをプレビューで見てみましょう。
これで角度調整は完了です。
構図の意図を明確にする為のトリミング
続いてトリミングを行います。
何気なく写真を撮っていると被写体が判りにくかったり、余計なものが写ったりしますが、トリミングをする事でより明確な表現が出来ます。
先ずはサンプルで編集前と編集後をご覧ください。
神社側から撮影した写真ですが、灯篭が半端に入ってしまい邪魔しています。
神社の床板も何となく邪魔ですね。
鳥居が左に寄っているのも気になります。
ここでは鳥居を主役に邪魔な要素を取り除いてみます。
アートボード枠を基準にトリミング
1,280px × 960pxのアートボード枠内に書き出したい範囲を拡大縮小しながら調整します。
ここでもshiftボタンを押しながら調整するのをお忘れなく。
灯篭や床が入らない辺りまで拡大しつつ、鳥居を中央に配置します。
iPhoneで撮影した写真もそうですが、元の解像度が大きい写真であれば、ある程度大胆に拡大しても大丈夫です。
これでトリミングが完成です。
実際のところ角度調整とトリミングをするだけでかなりクオリティは変わってきます。
この2点は必ずチェックしましょう。
フィルターを活用して一味加えた演出を
SiGNのフィルター機能によりワンクリックで写真の雰囲気を変える事が出来ます。
画面右の「エフェクト」から「フィルター」内のサムネイルをクリックしてください。
写真の雰囲気が次々変わって行くのが分かると思います。
Webサイトで写真を複数使う場合などは、撮ったタイミングや環境、機材などによって写真のテイストがバラバラになり易いのですが、全ての写真に同じフィルターをかける事で、ある程度世界観を統一させる事も可能です。
テクニックとして覚えておきましょう。
更に「エフェクト詳細設定」のスライダーで細かく調整する事が出来ます。
例えば暗い写真などは「明るさ」のスライダーをプラス側にスライドさせる事で明るくする事が出来ます。
こちらも覚えておくと便利です。
写真の容量を抑えて読み込みスピードを適正に
よくあるパターンとして、iPhoneなどで撮った写真をそのままWebサイトに貼り付けて公開する事があります。例えばiPhone7のカメラで撮影すると4032px × 3024pxの大きさになりますが、先ほどの必要サイズ（1,280px × 960px）で考えると3倍以上の大きさである事がわかります。
当然容量も大きくなりますし、使う写真が多ければ何倍もの重さに繋がり読み込みスピードに弊害が出ますが、BiNDupでは画像を適正な解像度に自動で縮小する機能が加わりました。
それ以外にできる対策として、画像を圧縮する方法もあります。
『高圧縮でWeb画像をキレイに軽くするための厳選ツール』でもご紹介しました画像圧縮サービス『Tiny PNG』を使う事で更に画像を軽くする事も出来ます。
Webサイトは容量が軽ければ軽いほどユーザビリティもSEO評価もアップしますのでこちらもお忘れなく。
如何でしたか？
ちょっとした作業ではあるのですが、これを経るのと経ないのとでは結構な差が生じます。
チェックポイントとして是非取り入れてみて下さい。
POINT
- SiGNを使う事で煩わしい外部アプリ起動やファイル管理が省略されシームレスな画像編集が可能
- 水平線、トリミング、フィルターを調整する事で写真のクオリティが向上する
- 画像編集の際に便利なグリッド線や自動で画像の解像度を最小化する機能が新たに追加