【3分でできる】画像の図形で切り抜き

Photoshopを使って
WEBデザインができるようになりたいあなた！

Photoshopをインストールしたけれど
何から始めたらいいんだろう？と
途方に暮れていませんか？

この記事を見ながら一緒に手を動かせば

WEBデザインの実務で必須の機能だけを覚えながら
オリジナルのバナーが作成ができます。

今日は
実務で頻出表現方法
画像を図形で切り抜く方法を
マスターしましょう！

下図について、やり方を解説します

“アス子”

アス子は全くの初心者にデザインを教えてきた経験があります。
美術畑出身の直感的なあなたが
遠回りすることなく
実務で必須の機能だけを学びながら
Photoshopでデザインができるように教えます！
アス子のプロフィールはこちらから。

是非最後まで読んでくださいね。

Contents

画像を図形（シェイプ）で切り抜く方法
- ①クリッピングマスクで図形（シェイプ）で画像を切り抜く
  - それぞれのレイヤーは移動、変形可能
- ② レイヤーマスクで画像を切り抜く
  - リンクマークを外して修正する
まとめ
ちょっと一休み

画像を図形（シェイプ）で切り抜く方法

下の画像のように、楕円形などの図形（シェイプ）で写真を切り抜く方法を解説します。

やり方は２種類あります。

“アス子”

両方を理解しておくと、今後何かと応用が効きますので是非この機会にマスターしてください！

①クリッピングマスクで図形（シェイプ）で画像を切り抜く

Photoshopを立ち上げます。
１　メニューバーのファイルをクリックします
２　開くをクリックします　　PCの中の加工したい画像を選択し開くをクリックします　加工したい画像を取り込むことができました
３　レイヤーパネルのレイヤーの何も書かれていない部分をダブルクリックして鍵マークを外します

４　長方ツールを長押しすると他のツールが現れるので、楕円形ツールをクリックします
５　画像の上でドラッグしながら、切り抜きたい大きさや形を描きます（Shiftを押しながらドラッグすると、縦横が同じ長さの正円が描けます）
６　レイヤーパネルのレイヤーの順番を、画像が上、図形が下になるようにドラッグして変更します

7 レイヤーパネルの画像レイヤーをクリックして選択した状態で　　８　レイヤーパネル右上の三本線をクリックします
９　クリッピングマスクを作成をクリックします
１０　レイヤーパネルを見ると画像のレイヤーに下向きの矢印が追加されています
画像が描画した図形の形で切り抜かれました！

同じようにクリッピングマスクを作成することで、図形だけではなく、文字で画像を切り抜く事も可能です。

文字の形に写真が切り抜かれました！

それぞれのレイヤーは移動、変形可能

因みにそれぞれのレイヤーは、上のレイヤーをクリックした状態で８〜９を参照してクリッピングマスクを解除すれば最初の状態に戻ります。

また、クリッピングマスクが作成された状態で、それぞれのレイヤーごとに移動や変形も可能です。
画像を切り抜く最適な大きさや位置をいつでも調整できるので便利です。

② レイヤーマスクで画像を切り抜く

次にレイヤーマスクで画像を切り抜く方法を解説します。

前回、DAY４では選択範囲を詳細に指定して、レイヤーマスクで画像を切り抜く方法を解説しました。

初めてのphotoshop超簡単な使い方

DAY4【入門編】Photoshopで画像を切り抜く方法｜レイヤーマスク
・クイック選択ツール
・境界線選択ツール
・ブラシツール
こちらを作成、解説していきます。

今回は図形で選択範囲を指定して画像を切り抜いていきます。

「①クリッピングマスクで画像を切り抜く」の１〜３を参照して画像を取り込み、鍵を外します。
１１　長方形選択ツールを長押しします　　楕円形選択ツールをクリックします
１２　画像の上で切り抜きたい形にドラッグします（Shiftを押しながらドラッグすると、縦横比が同じ正円が描けます）
１３　レイヤーパネルの下にあるレイヤーマスクのアイコンをクリックします
１４　レイヤーパネルのレイヤーにリンクマークとマスクが現表示され、画像が切り抜かれました！

リンクマークを外して修正する

因みに一度適用したレイヤーマスクは、何度で修正することが可能です。
今回はリンクマークを外して修正をする方法を解説します。

１５　レイヤーの真ん中にあるリンクマークをクリックするとマスクと画像のリンクが外れてどちらも自由に変形や移動などが可能です
今回はマスクの方を変形や移動してみます。
１６　マスクをクリックして選択します
１７　選択ツールをクリックすると、画像の上にバウンデイングボックス（青いガイド線）が現れますので、移動や変形ができます
切り抜く位置や大きさが決定したら、忘れずにリンクマーク部分をクリックします　　再度リンクマークが表示されます　（マスクと画像はリンクされた状態で拡大、移動されます）

今回解説した「図形で画像を切り抜く」方法を使ってこちらを作成してみました。

上下の点線やト音記号や音符の素材はこちらの素材集からダウンロードして使用しています。

NATURAL&BASIC 大人ナチュラルな手描き装飾素材集 (デジタル素材BOOK)

余談ですがこの書籍、アス子一番のオススメ素材集です！！！
書籍についてくるDVDは全てPCの中にインストールしてあり、いつでもどこでもさっと出して使えるようにしてある程です＾＾
かわいい系やナチュラル系、女子向けデザインにはめちゃくちゃ使えます！！！
そっち系の案件にはこの素材を多用しているので、
本当は秘密にしておきたいのですが、あなたにだけこっそり教えちゃいます♡

“アス子”

素材のダウンロードや使用方法についてはまた他の投稿で解説しているのでご覧になってくださいね。

初めてのphotoshop超簡単な使い方

DAY8PhotoshopでWEBデザイン｜素材挿入方法
・WEBデザインで使用する素材について・おすすめの素材サイト
・素材別、デザインに使う方法
・カラーオーバーレイ

まとめ

この記事を参考にあなたも
WEBデザインの現場で頻出の
画像を図形で切り抜く方法をマスターできましたか？

【超初心者用】Photoshop使い方１日１０分８日でマスターでは
一日たったの１０分、8日間で
Photoshopの実務で頻出の機能について
マスターできるプログラムになっています。
是非DAY1から順番にご覧になってみてくださいね。

初めてのphotoshop超簡単な使い方

DAY１【10分で完成】フォトショの使い方｜初心者必須ツール３選。
・新規ドキュメントの作成
・フォトショ操作画面の解説
・レイヤーとは
・長方形ツール、文字ツール、移動ツール
・簡単なデザインtips（文字詰め・余白を揃える）
・画像の書き出し方
こちらを作成していきます。