WEBデザイン

WEBデザイナーが仕事でよく使うフォトショテクを4つご紹介♪

こんにちは!WEBデザイナーのシズです。

WEBデザイナーになるには、フォトショのスキルが必要になってきます。

でもフォトショって機能が多すぎて何から勉強したらいいのか迷いません?

そんなあなたに、今回は現役WEBデザイナーの私が仕事でよく使用するフォトショの機能を4つご紹介します!

このテクを知っていればいろいろと便利なので、是非参考にしてくださいね。

スポンサーリンク

フォトショテク①画像の背景を伸ばす

1つ目のフォトショテクは、画像の背景を伸ばす方法

まずはじめにこちらの写真をご覧ください。

人物の位置を真ん中にしたいなと思ったとき、左に寄せると右側の背景が足りなくなってしまいます。

こんなときは、画像の右側の背景部分を足りない分だけ伸ばすことができちゃいます。

では早速説明していきますね!

まずは長方形選択ツールで右側の背景部分を選択します。

次に画像のレイヤーが選択されている状態で移動ツールに切り替えます。

すると、選択範囲が下記のように変わります。

この状態で選択範囲を伸ばしたい分だけ引っ張ると、背景をその分伸ばすことができます。

上記の状態から引っ張ると…

背景を綺麗に伸ばすことが出来ました!

ちなみに背景を伸ばすことができるのは、ビットマップ画像と呼ばれる画像だけとなります。

もし背景が伸ばせない場合は、画像のレイヤーで右クリックし、「レイヤーをラスタライズ」をクリックしてラスタライズすれば、背景を伸ばせるようになります。

ただ、このテクはあくまでも背景の一部分を横に伸ばしているだけなので、上記のようなシンプルな背景の場合にしか使えません。

こんなときにこのテクを使っています

WEBサイトを更新したり制作するときに画像って絶対使いますよね。

そして画像を並べて配置するような場合、画像の対象物の大きさや位置はなるべく揃えます。

例えばスタッフ紹介などで人物の画像を並べて配置する場合、顔の大きさや位置は揃っていた方が統一感があって綺麗に見えますよね。

なのでこの場合、使用する画像は人物の顔の大きさや位置が揃うようにフォトショで加工します。

このとき人物が写っている位置が端の方だった場合、真ん中に寄せると背景が足りなくなっちゃいますよね。

そんなときにこの背景を伸ばすテクをよく使います。

フォトショテク②不要なものを削除する

次にご紹介するのは、画像の中の不要なものを削除する方法

例えばこんな写真。

女の子の指の上にあるライトのイラストを消したいとします。

そんなときに便利なのが、「スポット修復ブラシツール」。

スポット修復ブラシツールを選択すると、ポインタが○に変わります。

ポインタの大きさは左括弧「を押せば小さく、右括弧」を押せば大きくすることが出来ます。

そしてこの丸で消したい対象物を囲んでクリック!

一瞬で不要物を消すことが出来ちゃいました~!

フォトショテク③画像を明るくする

画像を明るくする方法はいろいろありますが、今回ご紹介する方法は直接画像を加工することなく明るくする方法

まずはこの写真をご覧ください。

ちょっと暗いので明るくして使用したいですよね。

では早速やっていきましょう!

まずは画像をスマートオブジェクトに変換します。

スマートオブジェクトに変換するには、レイヤーの上で右クリックをすれば、「スマートオブジェクトに変換」というメニューが出てきます。

その後上部のメニューからイメージ→色調補正→レベル補正と選びます。

そうすると下記のようなレベル補正画面が出てきます。

三角のアイコンをいじると、明るさを調整することが出来ます。

右側のレイヤーを見ていただくと、「スマートフィルター」というフィルタが自動的に付けられ、そこに加工内容が入っています。

名前の通り、元の画像にフィルターを一枚かけてその上で加工しているという感じですね。

ちなみにこのフィルター効果は複数枚画像のレイヤーがある場合、Altボタンを押しながらドラッグすることで別のレイヤーにもそのままコピーすることができます。

一枚一枚明るさを加工するのは面倒なので、一つのレイヤーに対して効果をつけておくと後はドラッグでコピペするだけなので楽ちんです。

フォトショテク④クリッピングマスク

画像を特定の形に切り抜きたいときによく使うのが「クリッピングマスク」。

私はデザインカンプを作成するときによく使用しています。

では早速説明していきますね。

まずはこんなレイアウトのページにしたい場合。

画像とテキストが交互になったレイアウト、よく見かけますよね。

この丸い形に画像を切り抜きたい場合、まずは丸のレイヤーの上に切り抜きたい画像を配置します。

右側のレイヤーのように、必ず丸のすぐ上の位置に画像をセットしてくださいね。

画像がセットできたら、Altボタンを押しながら右側のレイヤーの画像と丸の境界のあたりにポインタ(指のマーク)を持っていきます。

すると、□と矢印のマークにポインタが変わります。

このマークに変わったらクリック!

丸の中にすっぽりと画像が収まりました!

画像の大きさや位置は、クリッピングマスクをした後でも調整出来ます。

クリッピングマスクを解除したいときは、クリッピングマスクをしたときと同じようにAltボタンを押しながら2つのレイヤーの境界線にポインタを持っていき、ポインタの形が変わったらクリックすれば解除されます。

仕事で使うフォトショテクって意外と限られている

フォトショって本当にものすごくたくさんの機能がついていますが、実際に使う機能って実は結構限られています。

業務内容によっても使う機能って変わってくるとは思いますが、私が仕事でよく使うのはこの4つのテクです。

正直、フォトショはまだまだ使いこなせているとは思いませんが、それでもページデザインをする上では特に問題ないかな。

今回紹介した機能はとっても簡単ですぐに覚えられるテクなので、是非使ってみてくださいね!

また新しいテクを覚えたら随時更新していきます!