App 图标设计 - 圆角透明效果（0 基础使用 PS）

╰半夏微凉° 2022-04-12 03:57 558阅读 0赞

### App 图标设计 - 圆角透明效果（0 基础使用 PS） ###

**方法：** 如果你有些基础，就不必看图文教程了：  
1.使用圆角矩形工具选中，设置圆角尺寸【例如：1024\*1024 px（圆角:160 px）】  
2.Ctrl + Enter 键，路径变成选区  
3.删除圆角矩形所在的图层，使选区在背景相邻的上方，这样才可以选区  
4.Ctrl + J 键，拷贝到新图层  
5.【注意】最后要隐藏背景

**效果：**

![20181130191524526.png][]

**素材：（不必要是方形的）**

原图免费下载地址：[/images/20220412/ed8735e2096b4d698f6421db4881136f.png][https_img-blog.csdnimg.cn_20181130182807224.jpg]  
![https_img-blog.csdnimg.cn_20181130182807224.jpg][]

**操作步骤：**

*  1.打开 PS
 *  2.【文件】>【新建】>【尺寸：1024\*1024】【背景：透明】>【确定】

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70]

*  3.得到一个透明图：  
    **【提示】：按住 Alt 键 + 鼠标滚动可以调整视图的大小，不会修改图片的像素尺寸**  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1][]
 *  4.将素材拖到 PS 中，【Alt + Shift 键 + 拖动：等比例调整图片大小】，使图片填满整个背景，图片可以大于背景，但只会保留背景上面的部分（最后图标的样式），所以说，图片原本也可以不是正方形

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2]

*  5.PS的工具栏 > 【矩形工具】上，右键选择【圆角矩形工具】  
    ![在这里插入图片描述][20181130184619699.png]
 *  6.上面设置圆角矩形工具的参数  
    **熟悉 UI 设计规范【1024\*1024 px 的图标】>【圆角设置为：160 px】**

![在这里插入图片描述][20181130185124561.png]

*  7.在工作区里，单击一下，手动输入信息如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3]
 *  8.变换成【移动工具】>让矩形贴在图片正上方，会自动贴边，很好对齐  
    ![在这里插入图片描述][20181130185817646.png]
 *  9.Ctrl + Enter 键，路径变成选区：  
    ![20181130185801217.png][]
 *  10.删除【圆角矩形】所在的图层：  
    ![20181130191203205.png][]
 *  11.Ctrl + J 键，拷贝到新图层  
    **【注意】最后要隐藏背景**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4]
 *  12.效果：

![20181130191524526.png][]

[20181130191524526.png]: /images/20220412/1893eb56bd644c2dbf203159a1778db8.png
[https_img-blog.csdnimg.cn_20181130182807224.jpg]: /images/20220412/ed8735e2096b4d698f6421db4881136f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70]: /images/20220412/24171c2c113749e19ba3b2f5682a101e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1]: /images/20220412/aff5cd24dc294f03be39aa8c58ccdeb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2]: /images/20220412/43e1985232c94c84a24ff3817524eef0.png
[20181130184619699.png]: /images/20220412/6bd94294b37f48098f2efb340e93f027.png
[20181130185124561.png]: /images/20220412/0bd40d645d694d9b819a193f21c80910.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3]: /images/20220412/357b6e4f78b241b6b5c12b0c4e361c47.png
[20181130185817646.png]: /images/20220412/367c2d3176964eaeacea32e3d224de90.png
[20181130185801217.png]: /images/20220412/29ad973330f84207817bac3dae79a6a1.png
[20181130191203205.png]: /images/20220412/4ef348bef7254b279b208fe86b84a3dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4]: /images/20220412/27486f94ddfa40e4b20b67ccfec7c1ef.png