muneyasu.jp

CMS制作販売会社のWebデザイナーむねやすのブログ。Webの話とWebに関係ない話が入り交じります。たぶん

2013年6月28日

今さら…?Photoshopでの角丸オブジェクトについて。

良く言われるし、私もずっと思っていた、Photoshopでの角丸オブジェクトについて。
な、なんと…!CCからは普通に変更・再編集が出来るようになっているんですね。CSS書き出しもしてくれるようですが…、とりあえず、CCにアップグレードしない、していない方向けという事で。

ps_130628-01

こんなときはこのプラグイン。[Corner Editor]
角丸オブジェクトの編集・変更が簡単にできます。らくちん!
※今回 [mac/cs5]で確認しています。

◎ 導入の仕方

[Corner Editor]から[Corner Editor.zip]をダウンロード・解凍し、[Corner Editor.jsx]を
Photoshop > Presets > Scriptsフォルダへ投入!

ps_130628-02

Photoshopを起動し、ファイル > スクリプト > Corner Editor が出ていればインストール完了です!

ps_130628-03

 

◎ 使い方

角丸に変更したいオブジェクトを選択した状態で、先ほどのメニューから[Corner Editor]をクリックすると、パネルが表示されます。
[Radius Pattern]に角丸のサイズを入力し、その下の4つのアイコンからお好みの形状を選択すると、プレビューが表示されます。最後に[Close]を押すと完成です。※複数選択して操作すると、すべてが同様に適用されます。

ps_130628-04

 

 

ちなみに

数値をカンマで区切って入力すると、左上・右上・右下・左下の順でそれぞれの数値の角丸になります。

ps_130628-05

もちろん四角だけでなく多角形で使えます。

ps_130628-06

 

 

角丸オブジェクト作成後、そのオブジェクトのサイズを変更するとき。

ps_130628-07

ただ引き延ばしたらこんな角丸になっちゃう…けど!

ps_130628-08

そのオブジェクトを再☆形成!じゃーん!
角丸のサイズだけでなくオブジェクトそのもののサイズを気にせず変更できますね~ らくちん。

 

今更感がありますが、私の周りにも知らない人が多かったので書いてみました。
知らなかった方は是非使ってみてください。