如何在Photoshop中制作3D文件夹图标

Trevin是WebFX的业务发展高级总监。他参与了450多个营销活动,并建立了20多年的网站。他的作品曾被《搜索引擎》、《今日美国》、《快公司》和《Inc.》刊登。

预览

这就是我们在这个图标设计教程中要做的。

预览

步骤1:设置画布

我们需要一个足够大小的画布来开始制作文件夹图标。256x256px是一个流行的图标标准尺寸,所以这就是我们将使用的画布大小。

首先使用file > new (Ctrl/Cmd + N)创建一个新文件。

设置画布

设置画布

步骤2:创建文件夹的前襟翼

在背景图层上方创建一个新图层(图层>新建>图层或按Ctrl/Cmd + Shift + N),用于我们文件夹的前面。

创建前皮瓣的文件夹

创建文件夹的正面形状及其选项卡。请注意,形状在某些角落不锋利(用红色圈出)。

创建前皮瓣的文件夹

让我们对绘制的形状进行样式化。在图层面板中双击图层的缩略图,打开图层样式对话框。

首先,在混合选项中,将不透明度降低到95%。

创建前皮瓣的文件夹

接下来,我们添加三个图层样式:内阴影,渐变叠加和描边。

内阴影

创建前皮瓣的文件夹

中风

填充类型的颜色为深金色(#a8924d)

创建前皮瓣的文件夹

渐变叠加

渐变叠加

下面是上面所有图层样式的文件夹。

渐变叠加

步骤3:给前襟翼添加细节

创建一个新图层,然后使用矩形选框工具(M)创建一系列形状。然后使用变换螺丝(编辑>变换>倾斜)来匹配文件夹前挡板的视角。

为前襟翼添加细节

在图层面板中双击图层的缩略图,进入图层样式对话框。

为矩形添加渐变叠加和内阴影。

渐变叠加

使用杏仁色(#836c1e)作为左边的色圈,使用米白色(#f0cf75)作为右边的色圈。

渐变叠加

内阴影

使用橄榄色(#7a5f03)作为内阴影的颜色。

内阴影

内阴影

第四步:给皮瓣一个放射状辉光

我们将使文件夹的颜色更有趣的径向辉光对其上边缘。创建一个新图层,用椭圆选框工具(M)创建一个圆形选区。如果你想让圆圈完美,按住Shift键选择。

然后编辑>,用白色(#ffffff)填充选区(Shift + F5)。

给皮瓣放射辉光

一旦你创建了圆圈,使用滤镜>模糊>高斯模糊应用高斯模糊。设置半径为13px。

给皮瓣放射辉光

给皮瓣放射辉光

将放射状发光图层的不透明度降低到30%,这样可以减少它的区别,更好地与前挡板混合。

给皮瓣放射辉光

现在我们需要移除文件夹外部的放射状发光部分。点击工具面板中的多边形套索工具(L)来激活它。

使用多边形套索工具在文件夹的前褶边周围做一个距离边缘1px的选区。

给皮瓣放射辉光

接下来,在选区内右键单击,在出现的菜单中选择“选择反转”(Shift + Ctrl/Cmd + I)来反转选区,然后点击“删除”来删除反转选区内的区域。

给皮瓣放射辉光

让我们通过将图层的混合模式设置为叠加,进一步将径向发光混合到文件夹中。

给皮瓣放射辉光

给皮瓣放射辉光

第五步:制作上边缘

让我们通过创建文件夹的上边缘来给我们的作品一些深度和厚度。创建一个新图层,然后绘制薄的白色形状,沿着文件夹的顶部边缘;你可以用你喜欢的工具,但我用钢笔工具(P)。

给皮瓣放射辉光

如果你用钢笔工具创建上边缘,你最终会得到两个形状层,因为这两个形状不会相互接触。

只需在图层面板中选择两个图层合并相应的图层,然后右键单击并选择合并图层。

给皮瓣放射辉光

让我们将形状混合到文件夹中,将它们的混合模式更改为叠加。

给皮瓣放射辉光

给皮瓣放射辉光

通过在图层面板中右键单击并选择复制图层来复制该图层(你可以将其命名为“front-top- extra”以保持工作的组织性)。

点击图层面板底部的添加图层蒙版按钮,为复制的图层添加一个图层蒙版。

给皮瓣放射辉光

在工具面板中设置前景色为白色(#ffffff),背景色为黑色(#000000)。然后选择渐变工具(G)并设置它的选项。

在渐变编辑器中设置渐变为前景,背景渐变预设(应该是白色和黑色-这就是为什么你必须先设置你的前景和背景颜色)。同样,选择反射渐变选项。

给皮瓣放射辉光

在图层蒙版上应用渐变,从中间开始点击并拖动,向文件夹瓣的右边缘移动,遵循其自然视角(用黑色箭头表示)。

给皮瓣放射辉光

第六步:添加阴阳点缀

使用自定义形状工具(U)在文件夹的右侧添加盈阳自定义形状(默认情况下是Photoshop自带的)。请随意使用您喜欢的形状或文本。

给皮瓣放射辉光

接下来,我们需要沿着文件夹的透视图对齐徽标。

点击编辑>变换>倾斜。

给皮瓣放射辉光

拖动左上角和右下角的变换控件以匹配我们的文件夹翻页的透视图。

给皮瓣放射辉光

让我们设计我们的阴阳符号来配合我们的工作。

我们将使用投影图层样式和颜色叠加图层样式。

阴影

设置投影的颜色为off-white (#f9f4e4)。

给皮瓣放射辉光

颜色叠加

设置叠加的颜色为深棕色(#bd8a3b)。

给皮瓣放射辉光

给皮瓣放射辉光

步骤7:创建右边缘

好的,现在我们还需要从侧面显示文件夹的厚度和深度。创建一个新图层,在文件夹褶边(黑色部分)的右侧垂直边缘绘制形状,使用与创建上边缘类似的方法。

给皮瓣放射辉光

完成后,设置图层的混合模式为叠加,不透明度为59%。

给皮瓣放射辉光

给皮瓣放射辉光

步骤8:添加顶部反射

让我们创建一个反射,使我们的工作看起来更详细。创建一个新图层,使用多边形套索工具(L)在文件夹顶部做一个选区。

给皮瓣放射辉光

设置你的前景色为白色(#ffffff),然后使用渐变工具(G) -设置在前景,透明渐变预设-在选区内创建一个白色到透明的渐变;顶部是白色,底部是透明的。

为了强调我们的反射并给它一个更自然的外观,用多边形套索工具放置另一个选区。

给皮瓣放射辉光

点击删除键删除选区下面的区域。

添加顶部反射

设置反射层的混合模式为叠加,不透明度为28%,以减少其突出性,并改善其与我们工作的混合。

让我们停下来整理一下图层。选择所有图层-除了背景图层-然后点击图层>组图层(Ctrl/Cmd + G);将组重命名为“Front”,以保持我们的工作标记良好。

步骤9:创建后襟翼形状

再次点击背景图层,按Ctrl/Cmd + Shift + N在它上面创建一个新图层(确保新图层在Front图层组的下面)。

用多边形套索工具(L)为后挡板创建一个形状,并填充黑色(#000000)。

创建后襟翼形状

降低图层的不透明度为95%。

创建后襟翼形状

我们将给它类似的图层样式的前皮瓣的文件夹:内阴影,渐变叠加,和描边。

内阴影

设置内阴影的颜色为黑色(#000000)。

创建后襟翼形状

渐变叠加

让渐变从深绿色(#685618)变为黄色(#ebc358)。

渐变叠加

中风

描边颜色应为棕黄色(#b8a360)。

创建后襟翼形状

这是图层样式的结果。

创建后襟翼形状

第十步:给后襟翼增加一些深度

为了增加这个后挡板的厚度,创建一个新图层,并在顶部边缘做白色的形状,类似于我们为前挡板做的形状。

创建后襟翼形状

接下来,设置这个图层的混合模式为叠加。

给后襟翼一些深度

创建厚度的右边缘的背面皮瓣使用黑色形状。

创建后襟翼形状

设置图层的混合模式为叠加,不透明度为58%。

现在我们的3D文件夹完成了!接下来,我们需要在里面添加一些纸张。

但在继续之前,让我们把后面的图层分组在一个新的图层组“back”。

步骤11:制作一张纸

在Front和Back图层组之间新建一个图层(Ctrl/Cmd + Shift + N)。

在新图层中,创建一个矩形纸形状,确保它的角度与我们图标的视角相匹配。

创建一张纸

在纸形状上应用颜色叠加和描边图层样式。

颜色叠加

设置叠加的颜色为白色(#ffffff)。

创建一张纸

中风

设置描边颜色为灰色(#a7a6a6)。

创建一张纸

这是我们图层样式的结果。

创建一张纸

第十二步:给这张纸一个阴影

我们可以给我们的纸一些深度使用投影。在纸张后面创建一个新图层。在新图层中画一个黑色的形状。

给这张纸一个阴影

设置黑色形状的混合模式为叠加,并将不透明度降低到39%左右。

给这张纸一个阴影

步骤13:制作更多的纸

用上面的方法做更多的纸。然而,对于新的纸张,我们应该使用混合模式设置为正常而不是叠加的阴影,否则它会看起来不正确,因为它后面的纸张是白色的。然而,我们可以做的是将不透明度降低到7%左右,以产生类似的效果。

更多的纸

步骤14:提高上划

你不觉得这些纸的上边缘太夸张了吗?让我们稍微改进一下。

首先,用你最喜欢的选择工具在所有纸张的上方创建一个新图层的白线。

提高上划

将这一层的不透明度降低到40%。

提高上划

这张纸就写完了。在继续之前,将所有这些文件分组到一个名为files的新图层组中。

步骤15:创建绑定形状

现在我们需要创建可以在许多真实文件夹中找到的塑料装订(它们可以增强文件夹的耐用性,也可以将纸张固定在适当的位置)。

注意:值得注意的是,这是一个额外的繁文缛节。你可以选择不添加绑定,你仍然会有一个漂亮的文件夹图标。

在Front图层组上方创建一个新图层(Ctrl/Cmd + Shift + N)。

在文件夹底部的新图层上画一个黑色的形状,代表绑定的形状。

创建绑定形状

给这个图层添加投影、渐变叠加和描边图层样式。

阴影

投影的颜色为黑色(#000000)。

创建绑定形状

渐变叠加

让渐变从非常暗,几乎是黑色,灰色(#0f0f0f)到深灰色(#535151)。

创建绑定形状

中风

设置描边的填充类型为渐变,然后描边的渐变从深灰色(#0b0b0b)变为深灰色(#292929)。

创建绑定形状

下面是我们应用的图层样式后的绑定效果。

创建绑定形状

我们需要给我们的绑定一些厚度,以匹配我们的图标的三维外观。

创建一个新图层,然后在绑定的右端画一个黑色的形状。

创建绑定形状

步骤16:给绑定一些细节

为了与文件夹图标的3D外观保持一致,我们的绑定需要添加阴影。创建一个新图层,并创建一个白色的形状穿过绑定。

创建绑定形状

将不透明度降低到40-45%左右,以便更好地混合。

创建绑定形状

现在,让我们为绑定创建一个分隔符;这个小细节很难辨认,但细节决定了图标设计的不同。创建一个新图层,创建一个白色的形状,然后将不透明度降低到40-45%左右。

创建绑定形状

步骤17:添加文件夹的阴影

作为本教程的最后一步,在背景图层上方创建一个新图层。使用多边形套索工具(L)在文件夹后面做一个选区。

创建绑定形状

让你的选择保持活跃。

在工具面板中设置前景色为黑色(#000000)。切换到渐变工具(G),使用前景,透明渐变预设从底部到顶部进行颜色渐变。

将阴影图层的不透明度降低到25-30%左右,以减少阴影的过度突出。

创建绑定形状

教程汇总

本教程介绍了一个3D文件夹图标的创建,其中包含了一些文件。我们使用了一些图层样式和基本的绘图技术来达到最终的效果。请随意在评论中提出任何问题,我期待着你的想法。

预览

下载源文件

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识并成长为个人。

我们招聘! 视图30 +职位空缺!