在众多表单控件中,单选按钮和复选框是出现频率较高的表单控件,二者均用于和用户进行选择性的问答交互。通常单选按钮的标志是圆形,表示单一选项;复选框的标志是方形,表示多个选项。
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保存