webデザイン

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

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

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

ピックアップ記事

  1. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…

関連記事

  1. webデザイン

    フォトショップで金色(ゴールド)の文字を表現してクオリティの高いロゴを作る方法

    金色(ゴールド)ってどーやって描けばいいんだろう?そう思うひとは少なく…

  2. webデザイン

    Photoshopで文字に影を付ける”3つの方法”を知っておくだけで表現の幅…

    Photoshopで文字に影を付けるには、レイヤースタイルのドロップシ…

  3. webデザイン

    「コレがやりたかった!」GIFアニメ(動く画像)のPCモックアップ画像の作り方【Photoshop編…

    JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合に…

  4. webデザイン

    photoshopで結露のしたたる曇りガラスに指で文字を書いたような表現をするチュートリアル

    雨上がり、車の窓から外を眺めているような表現をするために、photos…

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

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  5. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
PAGE TOP