[PR] 不動産担保ローン 角を丸くカットする方法 | 素人ときどき玄人
<< 写真を使ってジェネレート | main | おされなQRコード作りませう >>
スポンサーサイト

一定期間更新がないため広告を表示しています

カテゴリ:- | | - | - | -
角を丸くカットする方法
JUGEMテーマ:ウェブデザイナー


写真や画像等の角を丸くしてみたい!

そんな野望からいろいろ調べてみました。
Photoshopを使う方法から始まりプラグイン、ジェネレーター、CSS、javascript、、、
三人寄れば文殊の知恵を超え、万人の知恵はとどまる所を知らず?
ってな状態で・・・
ひとまずまとめてみました。


丸の形も良く見ると美しさが違います。

角丸画像その1


 角丸矩形ツールを使ったもの。


角丸画像その2


 矩形選択ツールを使ったもの。
きのこグリーン Photoshop CS2編
よつばのクローバー 角丸矩形ツールを使って角丸

1. 角を丸くしたい画像、または写真を開きます。
角丸その1(ステップ1)

2. レイヤーパレットの「背景」をダブルクリックして、レイヤーに変更。
角丸その1(ステップ2)

3. 角丸長方形ツールを選択し、オプションを「パス」、丸みに適当な数字を入れます。
角丸その1(ステップ3)

4. 角丸長方形オプション(下向き▼ボタン)をクリックし、固定のサイズに(1)の画像サイズを入力します。
角丸その1(ステップ4)

5. 画像の上でクリック(場所がずれていても後で変更できるので気にしない事)
角丸その1(ステップ5)

6. レイヤーパレットの「パス」タグの「パスを選択範囲として読み込む」をクリック。
角丸その1(ステップ6)

7. 矢印キーで選択範囲を移動し位置の調整をした後、メニューの「選択範囲」から「選択範囲を反転」をクリック。
角丸その1(ステップ7)

8. 「Delete」ボタンを押し、角を切り落とした後、メニューの「ヘルプ」から「透明画像の書き出し」をクリック。

9. 「透明にする範囲を選択中」を選択し、「次へ」ボタンを押し、後はウィザードの指示に従います。
角丸その1(ステップ8)


よつばのクローバー 矩形選択ツールを使って角丸

1. 角を丸くしたい画像、または写真を開きます。
角丸その1(ステップ1)

2. メニューの「選択範囲」から「すべてを選択」をクリック。
角丸その2(ステップ1)

3. メニューの「選択範囲」→「選択範囲を変更」→「境界線」をクリック。縁取りの幅は適当に。
角丸その2(ステップ2)

4. メニューの「選択範囲」→「選択範囲を変更」→「滑らかに」をクリック。半径も適当な数字を入れます。
角丸その2(ステップ3)

5. 「Delete」ボタンを押し、角を切り落とした後、メニューの「ヘルプ」から「透明画像の書き出し」をクリック。
角丸その2(ステップ4)

9. 「透明にする範囲を選択中」を選択し、「次へ」ボタンを押し、後はウィザードの指示に従います。
角丸その1(ステップ8)


右斜め下 参考サイトは以下
next WEBディレクターたるもの
http://d.hatena.ne.jp/fr034/20080321/1206120129


きのこグリーン プラグイン編

next Pentacom
http://www.pentacom.jp/pentacom/products.html


きのこグリーン ジェネレーター編

next RoundPic
http://www.roundpic.com/

next 角を丸くしてモテる
http://kadomaru.himote.jp/


きのこグリーン CSS編

next Spiffy Corners
http://www.spiffycorners.com/sc.php

next Spiffy Box
http://spiffybox.com/

next RoundedCornr
http://www.roundedcornr.com/

next CSSROUND
http://cssround.com/


きのこグリーン Javascript編

next coliss
(角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas)
http://coliss.com/articles/build-websites/operation/javascript/884.html

next Nifty Corners Cube
http://www.html.it/articoli/niftycube/

next curvyCorners
http://www.curvycorners.net/
虫眼鏡 SAMPLE1 SAMPLE2

next Editsite.net
http://www.editsite.net/blog/rounded_corners.html

next corner.js
http://www.netzgesta.de/corner/

next 456 BEREA ST
http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/

虫眼鏡 SAMPLE
カテゴリ:Webデザイン | 10:52 | comments(2) | trackbacks(0) | -
スポンサーサイト
カテゴリ:- | 10:52 | - | - | -
コメント
ゆうさん
ずいぶん古い記事ですが、お役に立てたようでなによりです。
| 素人ときどき玄人 | 2014/03/12 1:50 PM |
角丸のやりかたを探してました!
とても分かりやすく、簡単に出来ました。
今後も参考にさせて頂きます(^^*)
| ゆう | 2014/03/12 12:02 PM |
コメントする









この記事のトラックバックURL
http://befine.jugem.jp/trackback/51