でんきかいでんのブログ

電子工作、ミシン、ペンタブレット、で使える、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。こだわり系テンキーレス有線キーボードの使用感レビューなど。

正当なCSSです! クリエイティブ・コモンズ・ライセンス表示

2013.02.21 [木]

Photoshopだけで画像の角を丸める

Photoshopだけで「画像の角を丸める」出来ますよ。

簡単です。

プラグインは不要です。


【用意した画像】
この画像の角をこれから丸めます。
フォトショップで角丸にする画像
この画像はClipStudioPaint(3Dキャラ)+あくあフォント+Photoshop+背景で作成


<超Photoshopわかってる人用の説明>
 シェイプツールのとこにある「角丸長方形ツール」を使用(塗りつぶした領域を作成モード)、丸み50px、クリッピングマスク、で作ります。

角丸長方形ツール


※この↑説明だけでわかった人は↓以下を読む必要なしwww


    <Photoshopにある程度精通してる人用の説明>
     角丸長方形ツールを使います。

  1. 画像をPhotoshopで開きます。(背景→レイヤーに変換しておきます)

  2. その下に新規レイヤーを作ります。(透明のままでOK)

  3. クリッピングマスクレイヤー


  4. 上の「用意した画像」レイヤーで「クリッピングマスクを作成」します。(Alt+Ctrl+G)

  5. グリッドを表示、スナップを有効にしておきます。

  6. 下の透明レイヤーでシェイプツールの「角丸長方形ツール」を「塗りつぶした領域を作成」モードで使います。

  7. 塗りつぶした領域を作成


  8. 丸み「50px」で試してみて!

  9. 角丸長方形ツール 丸み 50px

  10. あとは角丸長方形ツールで好きな大きさにするだけ!

  11. 角丸長方形ツールで選択


    ね、簡単でしょ?(^ー^)b

    フォトショップで角丸にした画像
    角丸長方形ツール、丸み50px

  12. 言うまでもありませんが「透過png形式」で保存しましょう。
    背景色がわかっているならJPG形式でも(・∀・)イイ!! よね。

  13. 透過PNG形式で保存


※忘れずにPSD形式でも保存しておきましょうヽ(=´▽`=)ノ

この説明だけじゃわからん!ヾ(*`Д´*)ノ"
って方用に画像付きでくわしく続きに用意してあります。

①まずは用意した画像をPhotoshopで開きます。
背景からレイヤーへ
「背景」になってるので→右クリックで「背景からレイヤーへ」変換します。

そのままOKを押します。
そのままOKを押すだけ

②次に新規レイヤーを1つ作ります。
メニューから新規レイヤーの作成

そのままOKを押す。
そのままOKを押す

メニューから作ってもいいですし、レイヤーの下のボタンから新規レイヤーを作ってもいいです。
同じ事です。
ボタンから新規レイヤーの作成

③今作った新規レイヤーをつかんで(ドラッグして)画像レイヤーの下へ持っていき(ドロップし)ます。
レイヤーをドラッグ&ドロップする

④画像レイヤーを右クリックして「クリッピングマスクを作成」します。
クリッピングマスクを作成
この瞬間に画像が透明(グレーの細かいチェック模様)になりますが、
大丈夫です。

下のレイヤーに色を塗ればその塗った部分の形に画像が表示されます。
作業が進むとちゃんと出て来ます。

⑤次にグリッドの設定をいじります。
グリッドの設定

「100pixel」分割数「2」に設定します。
グリッドの設定

⑥グリッドを表示させます。(Ctrl+@またはCtrl+H)
グリッドを表示

⑦スナップも使うのでチェックを入れます。
スナップの有効化

⑧さて、下のレイヤーを選択しておいて下さい。
作業レイヤーの選択

⑨画面左のメニューから「角丸長方形ツール」を選択します。
角丸長方形ツールの選択
(カスタムシェイプツールなどと同じ場所にあります。右クリックで出て来ます。)

「塗りつぶした領域を作成」にしておきます。
角丸長方形ツールの設定

とりあえず「丸み」50pxでやってみましょう。
角丸長方形ツールの設定 丸み

⑩画像の端っこへカーソルを持って行って好きな大きさにします。
角丸長方形ツールで描く

スナップを有効にしたので、画像の端にスナップする(きっちり合わせる)のも簡単に出来ます。
角丸長方形ツール スナップ有効

マウスから指先を放した途端、画像がパッと出て来ましたよねヽ(=´▽`=)ノ
角丸長方形ツール クリッピングマスク
角丸くなってますよねヾ(o ・∀・)ノ ヒャッホ-ゥ♪



※用意した画像が出て来ない場合、
「下のレイヤーを選択していなかった」
ということはありがちです。
私もこの作業中に何度もありました。
「やり直し」すると選択していたレイヤーまで変わるので、これでミスってしまうことがよくありますね。
(ノ∀`*)ペシッ


※グリッドが画面上では見えてますが、実際の保存画像には出ません。
フォトショップ上でだけ表示されるグリッドラインなのです。
Ctrl(コントロール)+@(アットマーク)押せば消したり出したりできますよ。



ここ重要です。透過PNGで保存して下さい。
透過PNG形式で保存


もちろんPSD形式でも保存しておいて下さい。


【完成画像】
フォトショップだけで角丸にした画像


実際に使うのはPNG形式で保存した画像ですが、PSD形式でも保存する癖をつけておくと便利です。



【ちょっとした気遣い&工夫】
※使用する場所の背景色がわかっている場合。

背景色を指定したJPG画像の方がデータサイズは小さい。
(画質80または60で保存)

(もちろんPSD形式でまず最初に保存して下さい!)
PNG形式画像をそのままサイトにUPするより、JPGの方が軽いので更に良しです。


「角丸長方形ツール」の設定。
 「中心から」にチェックを入れる方法もなかなか面白いですよ。
 あ、でも画像サイズによってはチェック入れないほうが使いやすいかなぁ。
 ま、この辺はやってみてお好みとその時の状況で使い分けて下さい。

角丸長方形ツールの設定

角丸長方形ツール 中心から
こんな感じで画像の中心辺りからモニョモニョとひっぱって選択出来ます。

角丸長方形ツール 中心から 使い方
こういう風にいくつも選択して塗りつぶした角丸長方形を描けます。


【丸みのサイズ】どう違うか?

角丸長方形ツール 丸み 100px
角丸長方形ツール、「丸み」100pxにした場合。

角丸長方形ツール 丸み 200px
角丸長方形ツール、「丸み」200pxにした場合。



【ありがとう】
 ぶっちゃけ、角を丸めるプラグインがうまく動かなかったので、調べまくってこのやり方をここ↓で見つけました。
 ありがとうございますヽ(*´□`*)ッ ありがとう!!

>>画像を加工する(画像の角を丸める) http://cg.xyamu.net/PhotoshopElements/entry84.html
 @cgxyamunetさんのサイトです。
 twitterされてますね。

 この↑サイトの下の方にある「もう少し手軽な方法」です。
 画像選択で選択範囲を滑らかにする方法は自分の好みではなかったので、こちらの方法を紹介させてもらいました。
 それプラス、「自分がこの方法を忘れないために」も自分のブログに自分なりにやってみた方法をUPしたというわけです。

 @cgxyamunetさんアリガ(o≧□≦)oトォォォ!!
関連記事

« NEW  | HOME |  OLD »

コメント

コメントの投稿


「コメント非表示」管理人しか閲覧できないコメントにする。

 | HOME | 

TOPへ