单选按钮和复选框设计

在众多表单控件中，单选按钮和复选框是出现频率较高的表单控件，二者均用于和用户进行选择性的问答交互。通常单选按钮的标志是圆形，表示单一选项；复选框的标志是方形，表示多个选项。

1.单选按钮未选中状态

step 1

打开Photoshop软件，按ctrl +N新建画布，宽64，高64像素 分辨率72像素，背景内容为浅灰色(RGB：238,239,241)

step 2

按Ctrl+R组合键调出标尺，建立4条参考线

step 3

按alt+ctrl+c组合键，打开画布大小对话框，设置宽高均为100像素，为画布做出留白

step 4

运用椭圆工具，绘制一个宽高64像素的正圆形，填充白色

step 5

为椭圆1图层添加内阴影样式，具体参数如图

step 6

复制椭圆1图层，得到 椭圆1拷贝，将填充颜色变为中灰色（RGB:193,201,204）

step 7

将椭圆1和椭圆1拷贝两个图层进行编组，并命名为单选按钮未选中状态

2.单选按钮选中状态

step 1

复制上一个图层组，并命名为单选按钮选中状态

step 2

在单选按钮选中状态图层组中绘制一个宽高均为32像素的正圆形，得到椭圆2，并填充绿色（RGB:0,221,104）

step 3

并为椭圆2添加 斜面浮雕图层样式，具体参数如图，

step 4

将图层进行编组，并命名为单选按钮选中状态

1.复选框为被选中状态和选择状态

step 1

隐藏上面绘制的单选按钮图层组。运用圆角矩形工具，绘制宽高均为64，圆角12像素的圆角矩形，得到圆角矩形1图层

step 2

复制椭圆1图层样式，粘贴到圆角矩形1图层上

step 3

再次运用圆角矩形工具，绘制一个宽高均为36，圆角半径为5像素的圆角矩形，得到圆角矩形2,。为其填充灰色（RGB：243,243,243）

step 4

复制椭圆1拷贝图层样式，粘贴到圆角矩形2图层

step 5

将图层进行编组，并命名为复选框未选中状态

step 6

复制复选框未选中状态图层组，将得到的图层命名为复选框选中状态

step 7

在图层中运用圆角矩形工具，拼合一个对勾，填充绿色（RGB:0,221,104）

step 8

复制单选按钮选中状态图层组中椭圆2图层样式，复制到对勾上

image.png

做完收工ctrl +s保存