フリーランスデザイナーが自由なライフスタイルを実現するための新しいブログの活用法や個性的がほとばしるブログにするためのPhotoshopを使ったデザインのチュートリアルなどを公開中~。

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

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

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

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

WEBデザイン用画像を角丸にする撮影した写真を角丸にする
corners-l corners-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

角丸以外のチュートリアルもどうぞ↓↓↓

photoshop日本語チュートリアル

スリームデザイン無料の公式メールマガジン スリームデザインのメールマガジン

関連記事

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル
ブログラ

スリームデザインの出版書籍情報

photoshopの本

fotoliaデザインコンテスト大賞受賞作品の解説

tenコレクションデザインコンテスト

スリームデザインおすすめの書籍

本 本本 本

スリームデザインとソーシャルで繋がろう!

 
 
 

カテゴリー