预览
这就是我们在这个图标设计教程中要做的。
步骤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文件夹图标的创建,其中包含了一些文件。我们使用了一些图层样式和基本的绘图技术来达到最终的效果。请随意在评论中提出任何问题,我期待着你的想法。
下载源文件
- 3 d_folder_icon(zip, 0.26 mb)