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. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  4. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. フォトショップ

    photoshopで肌の赤みをとる方法ならこれだっ!

    顔や肌の赤みを修正したい場合、1ヶ所1ヶ所修正していくと非常に時間がか…

  2. ブログ

    WordPressのTCDテーマはデザインだけではなくサポートも素晴らしすぎる件について

    Macに搭載されている高解像度のRetinaディスプレイで表示した際、…

  3. キュレーション

    インスピレーションを掻き乱されるほどのPhotoshop超絶テクニック!Youtube動画12選。

    デザイナーやクリエイターなら誰しも、自分の想像を超えるような作品を生み…

  4. webデザイン

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

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

  5. 3D

    Photoshopで立体的なGOLD(金色)の文字を作る方法【スキルアップ動画解説付】

    Photoshopで立体的なGOLD(金色)の文字を作る方法はいくつか…

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

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

最近の記事

  1. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  2. Photoshop CCのメニュー文字やツールバーが異常に小…
  3. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…

思考系のおもろい記事

ブログラ
  1. SEO

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

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  5. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
PAGE TOP