WEBサイトについて WEB制作の現場でよく使うフォトショップの小技

縦長写真を横長に

WEBサイトで用いられる画像の多くは、横長い長方形であることが多いです。そしてさらに細分化すると、16:9または4:3のアスペクト比率で使われるケースがほとんどでしょう。

この横長い長方形のことを、専門用語では「ランドスケープ」といいます。
対して、縦長の長方形のことを「ポートレート」といいます。

ここの見出しにあるように、縦長写真は時々、横長写真に変更しなければいけない事があります。

上手くトリミングできれば良いのですが、できなかった場合は左右に隙間ができてしまいます。

たとえば、こんな画像があったとします。

これをそのまま横長い長方形に入れようとしたら、がんばってトリミングしても左右に白枠が出来てしまいます。

そこで、左右の白枠を長方形選択ツールなどで選びます。

次に[編集]-[塗りつぶし]を選びます。

塗りつぶし内容は[コンテンツに応じる]です。

すると左右の空いていた空間が埋まりました！

このコンテンツに応じて塗りつぶす機能は、写真のなかの不要なもの(よく電線など)をきれいに消してくれるのですが、こんな使い方もできるんです！

水平反転の意外な使い方

しかし、現実的には上のリンゴ写真のように、きれいな背景はあまりありません。たとえば下記イメージのように、背景が木のボードをコンテンツに応じて塗りつぶしをしたら、途中で塗りつぶしの参照先がおかしな事になってしまいます。実はこんな時、私はレイヤーを複製して「水平方向に反転」しています。

操作方法は簡単で、自由変形(キーボードでCtrl+Tをすると早いです！)をしているときに右クリックをして「水平方向に反転」をしてみてください。継ぎ目とぴったり合わせると、ぱっと見では増やしてつないだことがわかりません。

白抜き背景なら、わざわざ切リ抜かなくてイイことも！

次は、白抜きをした画像2枚を一つにする作業です。試しに2つの提灯を用意しました。

これを1枚の画像の中に収めようとすると、こんな風に画像の白い部分が重なってしまいます。

ここで、上にあるほうのレイヤーのモードを[乗算]にしてください。

すると、白い部分が見えなくなり、提灯同士を近づけて1枚の画像に収めることができました！

しんどい思いをすることばかりが正義じゃない

今回は画像加工をするPhotoshopに関する話をしましたが、仕事にしても家事にしても、ちょっと知っていれば工数をカットできることって、まだまだ沢山あるんです。

こういったテクニックは「もっと良い方法はないの？」と探して見つけてきたものです。同じことの繰り返しを何度もするから、近道をたくさん見つけようと途中から私は考え方が変わりました。

人間は新しいことを取り入れたり変化することを無意識に嫌う生き物です。
ところが、そこの思考ブロックを外して「いや自分はただ食わず嫌いをしてるだけだ」という風に考え方を変えると、物事の見え方はまるで変わってきます。

生産性を上げてこそのツールですから、私はこういった場でアウトプットしつつもまた新たな技術を日々探しています。皆さまへお見せするWEBページにもこういった技術をのせてお届けするので明日以降も楽しみにしていてください！