初心者でも60秒でマスターできるPhotoshopで角丸の画像を作る方法

webデザイン

WEBデザインなどをしていると画像の角を丸くしたいケースはよくあります

また、自分で撮影した写真をブログなどに載せるときにも「角を丸くしたいな~」なんてこともありますが、その際にはほんの少し工程が変わるので、ここではPhotoshopで角丸の画像を作る2通りの工程を解説します。

初心者でも60秒くらいでマスターできるので、覚えておくと便利です。

WEBデザイン用画像を角丸にする撮影した写真を角丸にする
corners-lcorners-r1

WEBデザイン用の角丸画像の作り方

Photoshopを立ち上げたら、ファイル 》新規 でウィンドウを開きます。

corners0001

任意のカンバスサイズを入力してOKをクリック(ここでは幅1200px・高さ800px・解像度72pixel/inch)

corners0002

長方形ツールを右クリックするとさまざまな形のツールが出てくるので、角丸長方形ツールを選択。

corners001

オプションバーでシェイプを選び、丸みを任意の数値(ここでは20px)に変更します。

corners0021

ドキュメントウィンドウ上にカーソルを持っていき、ドラッグしながらシェイプを作成します。

corners003

続いて角丸にしたい画像を新規で開き、シェイプを作成したドキュメントウィンドウにドラッグ&ドロップします(これでドロップ元の画像は不要なので×マークで閉じてOK)

corners004

作成したシェイプをカンバスの中央ドンピシャに配置したい場合には ⇒ こちら

角丸のシェイプの上にドロップした画像レイヤーを右クリック(サムネイル上で右クリックしないように)してクリッピングマスクを作成します。

corners005

すると、角丸シェイプの形と同じように画像の角が丸くなりました

corners006

背景をベタ塗りすることも可能です。

corners0071

WEBデザイン用の角丸画像完成

corners01

ブログなどに載せる角丸写真の作り方

自分で撮影した画像などをPhotoshopで開いた時点では、色調補正などをすることはできますが、切り抜いたり、角を丸くするための加工はできません

そのため、まずは背景となっている画像を↓のようにドラッグして複製レイヤーを作成します。

corners0081

複製したレイヤーは目のマークを外して一旦非表示にしておき、新規で角丸のシェイプを作成します。

corners009

複製レイヤーを右クリックしてクリッピングマスクを作成し、今度は背景を非表示にすれば角丸写真が完成します。

corners010

ブログなどに掲載するために、ファイル 》WEB用に保存 をします。

corners011

基本的にはJPEGでOKなので、保存をクリック。

corners012

撮影した角丸写真完成

corners03

スリームデザイン

2,991,062 views

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインとマーケティングと玄米ご飯。 フリーランス時代に独学で身に...

プロフィール

ピックアップ記事

関連記事一覧

小笠原広記

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインと玄米ご飯。

 

フリーランス時代に独学で身に付けた技術を活かし、世界規模のデザインコンテストで日本人初の大賞を受賞&Photoshopの専門書を出版。

 

ブログ集客のエキスパートとして企業や個人のコンサルティングをしながら、コンテンツマーケティングやコピーライティングを手掛けるブログマーケターである。