Photoshop制作一个简洁的复古播放器图标

显示全部楼层 · 2023-3-10 03:15:22

　作者制作图标的方法非常不错。思路：先构思，最好能画出稿图;然后由图标的底部开始制作，用矢量工具或钢笔勾出轮廓，填色后用图层样式增加颜色和质感，局部区域用纹理素材或滤镜等增加纹理即可。
　　最终效果

200G3CB-0.jpg (33.56 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G3CB-0.jpg
　　1、新建一个1000*800的文档，添加一个渐变调整层，做一个#b4b097到#4e473a的90度的径向渐变，设置缩放为150%，勾选仿色，防止出现色块。

200G32934-1.jpg (37.96 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G32934-1.jpg
　　我想大家一定很好奇，我的截图径向渐变中的浅色为何不居中，而是位于中部居上，看我们的GIF演示。
　　在渐变填充的状态下，我们把鼠标指针放置到屏幕上，出现那个移动工具的图标时，我们拖动，渐变的位置也跟着动，这一个操作方法，在图层样式中一样可用。

200G31V6-2.gif (116.52 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G31V6-2.gif
　　2、使用圆角矩形工具画一个600*600像素的圆角矩形，设置圆角为140像素，设置水平居中，垂直居中。

200G3I16-3.jpg (33.75 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G3I16-3.jpg
　　3、我将这个圆角矩形命名为“主体”，并为其添加了一个图层样式。

200G32238-4.jpg (65.91 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G32238-4.jpg

200G31963-5.jpg (56.46 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G31963-5.jpg

200G330E-6.jpg (59 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G330E-6.jpg

200G3FQ-7.jpg (29.44 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G3FQ-7.jpg

200G34G6-8.jpg (26.61 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G34G6-8.jpg
　　4、复制一层“主体”图层，更改图层名为“投影”，将“投影”图层置于“主体”图层下层，将图层填充设置为0，再添加一个图层样式，我们来增强一下投影效果。

200G31645-9.jpg (57.99 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G31645-9.jpg

200G35U6-10.jpg (36.31 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G35U6-10.jpg
　　5、原图画的是一个类似椭圆的形状，我这里偷懒一下，还是画的圆角矩形，大小为500X360像素，圆角半径为130像素，添加一个图层样式。

200G32R3-11.jpg (61.57 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G32R3-11.jpg

200G32139-12.jpg (57.52 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G32139-12.jpg

200G32M2-13.jpg (34.55 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G32M2-13.jpg
　　6、下面，我们创建屏幕，设置前景色为#b4b097，使用圆角矩形工具，画一个大小为420*280像素，圆角半径为100像素的圆角矩形。

200G31N9-14.jpg (37.5 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G31N9-14.jpg
　　7、为这个“屏幕”图层添加一个图层样式。

200G3H38-15.jpg (57.18 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G3H38-15.jpg

200G35O1-16.jpg (60.67 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G35O1-16.jpg

200G33c3-17.jpg (53.96 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G33c3-17.jpg

200G31A0-18.jpg (60.1 KB, 下载次数: 0, 售价: 4 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G31A0-18.jpg

200G32V8-19.jpg (32.27 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G32V8-19.jpg

　　8、复制一层“屏幕”图层，转智能对象，添加一个杂色，并将图层混合模式更改为“柔光”。

200G33592-20.jpg (58.54 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G33592-20.jpg
　　9、用两个屏幕的那个圆角矩形相减，得到我们需要的屏幕下部的高光形状，将这个形状的颜色设置为#eaead2，在属性面板中设置一个1像素的羽化，并将图层混合模式更改为“柔光”，不透明度34%。

200G31W7-21.jpg (54.25 KB, 下载次数: 0, 售价: 1 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G31W7-21.jpg
　　10、设置前景色为#eaead2，用屏幕的那个圆角矩形和一个椭圆相交，得到我们需要的屏幕顶部的高光形状，同样的将图层混合模式更改为“柔光”，不透明度34%，并添加一个图层蒙版，适当的擦拭左右两侧。

200G345X-22.jpg (46.92 KB, 下载次数: 0, 售价: 6 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G345X-22.jpg
　　11、下面，我们来制作按纽，设置前景色为#b4b097，画一个正圆，并添加一个图层样式。

200G35555-23.jpg (58.15 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G35555-23.jpg

200G34Y2-24.jpg (36.63 KB, 下载次数: 0, 售价: 2 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G34Y2-24.jpg
　　12、设置前景色为#d9d0ca，画一个小一点的圆，并添加一个图层样式。

200G3F41-25.jpg (65.98 KB, 下载次数: 0, 售价: 3 金钱)

2023-3-10 03:15 上传

点击文件名下载附件
200G3F41-25.jpg

200G32920-26.jpg (59.65 KB, 下载次数: 0, 售价: 4 金钱)

[ps] Photoshop制作一个简洁的复古播放器图标