角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法

角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。

[skel]

イラレのver9以降のアピアランス機能でお手軽に角丸ができるようになってからこの辺の基本が蔑ろになっている事例がすごく増えたように感じる

[oitch01]

こういうディティールの積み重ねなのでしっかりやりましょう。デザイナーはもちろん、実装する人もね。

[Kuichi]

何だかしっくりこないことが多かったんだけど、今度から使ってみよう。

[karasunekoneko]

デザイン：いつも感覚で調整してたけど、中心点という発想はなかった！/ デザインTips: 角丸パネルに角丸パネルを重ねた時、それぞれの角丸をバランスよくデザインする方法 @colisscomさんから

[bleu-bleut]

内と外は同心円で、内と外のborder-radiusの差が内と外のマージン。

[KumamotoLab]

デザインTips: 角丸パネルに角丸パネルを重ねた時、それぞれの角丸をバランスよくデザインする方法 @colisscomさんから

[yamadar]

外側の border-radius は、内側の border-radius に距離を足す。

[nibushibu]

考えてみれば当然のことだけど以外と適当にやっちゃうから覚えておこう。

[ebisu3htn]

角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません

[QsF]

paddingの差…なるなる

[norip44]

ふたつ角丸を重ねるときに、両方の半径をどの数字にすればいいのか、の話。くっ、こんなシンプルな話だったとは！！！

[kiti-net]

]

[ElizaAcolyte]

あぁなるほど、そういえば角丸って半径指定でしたねアレ。なんとなくもっと複雑な計算が必要だと思ってしまった。

[Kureduki_Maari]

デザインTips: 角丸パネルに角丸パネルを重ねた時、それぞれの角丸をバランスよくデザインする方法 via @colisscom

[seikenn]

2重の円の図を見て、なるほどと思った

[Journey]

親と子のマージンがそのまま差の値

[nffsjj]

細かいことだけど大事だな。

[habuakihiro]

なるほど。

[masapon49]

非常に分かりやすい

[kasumani]

デザインTips: 角丸パネルに角丸パネルを重ねた時、それぞれの角丸をバランスよくデザインする方法 Tags: feedly, ifttt, recently read, saved for later from Pocket January 08, 2015 at 10:53AM via IFTTT

[kjx130]

via コリス - http://coliss.com

[kussun]

内側の角丸を中心とした二重円みたいな感じか。

[hedeyoshi]

言われてみるとそうだよなあ。うん。