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. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…

関連記事

  1. webデザイン

    ヘッダーデザインの配色がチグハグになってしまうなら色彩を統一しよう。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の3番目、ここでは③ …

  2. webデザイン

    Photoshopで自由に点線(直線・曲線・図形を囲む)を書きたいときの1番簡単な方法

    Photoshopで点線を書く方法はいくつかありますが、直線や曲線、図…

  3. webデザイン

    【保存版】Photoshopの技術を一気に飛躍させるための日本語で学べる実践テクニック7連発

    Photoshopの基本的な使い方の解説はたくさんありますが、デザイン…

  4. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画のまとめ

    Photoshopには写真を補正するだけではなく、デザインに必要とされ…

  5. 3分の話

    3分でわかる想像力(創造力)を鍛える方法

    想像力はクリエイティブ(創造的)な仕事をする上でとても重要な要素です、…

  6. webデザイン

    えっ!?この画像動いてるし…妙に不思議なシネマグラフをPhotoshopで作ってみよう。

    一見何気ない画像かと思いきや、画像の一部分をループして動かすことで不思…

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

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

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 新規のWordPressブログをSSL化(http⇒http…
  3. 画像スライダーだけじゃない!WordPressのブログ記事が…

思考系のおもろい記事

ブログラ
  1. 3分の話

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

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

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  4. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. フォトショップ

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