编按:
圆角矩形在UI中使用非常广。但如何快速地从圆角矩形做出标准的圆角矩形环(你也可以叫做中空圆角矩形)呢?简单的缩放可不成!!本文作者从认识圆角矩形开始,与大家一起绘制各种圆角矩形图案,包括圆角矩形环、圆头矩形、不同半径圆角矩形。
一、认识圆角矩形
大家好,很高兴今天又来跟大家聊聊了!今天我们的话题是圆角矩形,这个话题是一个朋友留言的,我觉得值得一提,于是乎就有了本文。
说到圆角矩形,大家都不陌生,尤其是一些ICON设计师和UI设计师,那简直是比女朋友还亲,属于异常亲密的关系,长时间的亲密接触。
圆角矩形与矩形相比,只有一个差别,它的角是圆的,而矩形是尖锐的。(其实也无绝对,当圆角为0时,圆角矩形所呈现的状态就是矩形)
而对于圆角矩形来说,圆角半径的差别,是造成圆角矩形不同形态呈现的原因。
那么,圆角矩形的圆角半径是什么意思呢?从我们的形状属性面板里可以看到,我们的圆角设置为100像素。(这个是CC的截图,可以调整圆角的功能是从CC开始的,CC以下版本都没这个功能,不由得仰天长叹,有时新版本的新功能就是好)
那么,圆角是什么东西?大小如何确定?我画了一个圆角为100像素大小的圆角矩形(白色),同时画了一个200像素大小的圆(红色)。看到这个图,大家觉得圆角大小是什么意思?