预览
步骤1:设置画布
打开Photoshop。创建一个新文档(Ctrl/Cmd + N或File > new)。我们将使用一个256x256px的正方形画布。
绘制面板的基础形状
创建一个新层(Ctrl/Cmd + Shift + N或图层>新层)。命名此图层为panel-base，这样我们的工作就会井然有序。使用钢笔工具(P)画一个有角度的矩形。
你也可以使用矩形选框工具(M)，然后使用自由变换(Ctrl/Cmd + T)来改变它的视角和角度-这取决于你。
正如你所看到的(如果你使用钢笔工具)，默认情况下，Photoshop会在你的形状周围画一个灰色的边框，这样你就可以看到边缘。虽然它不影响形状，只是一个视觉辅助，但它会分散注意力，让你很难看到你的形状到底是什么样子的。
你可以通过按Ctrl/Cmd + H(查看>附加项的快捷方式)来打开和关闭这个边界。
给基础形状一个图层样式
接下来，双击该图层，打开图层样式对话框。我们将给这个形状三层效果:渐变叠加，颜色叠加和描边。
渐变叠加
让渐变从灰色(#d3d1d1)到灰白色(#fefcfc)。
颜色叠加
这个低透明度的颜色叠加会让我们的形状更暗一些。颜色使用黑色(#000000)，不透明度降低到8%。
中风
给物体描边，颜色渐变从灰色(#9a9a9a)到浅灰色(#d5d4d4)。
图层样式将为平面形状添加所需的效果，如下所示。
步骤4:添加玻璃反射到面板
创建一个新图层(命名为panel-gloss)。在这个图层中创建一个白色的形状，如下所示。你可以使用钢笔工具(P)。
设置图层的不透明度为67%。
这将让一些渐变背景显示出来。
步骤5:在面板的顶部和底部画线
在工具面板选择直线工具(U)。在面板的顶部边缘创建一条1px的白线。你可以使用Ctrl/Cmd + H隐藏Photoshop在形状周围设置的灰色边框，这样你可以更好地看到结果。
重命名此形状图层为top-edge-shine。
同样，在面板底部画一条1px的白线(你可以将这个形状图层命名为bottom-edge-shine)。设置图层的不透明度为20%。
这种效果是微妙的，但在建立视觉吸引力方面起着重要作用。
步骤6:设置面板的深度
新建一个图层(命名为“panel-thickness”)。在这个新图层上，在面板的右边创建一个黑色的形状。
步骤7:设置面板左侧的样式
给面板的左侧(“面板厚度”)一个颜色叠加和一个渐变叠加。
渐变叠加
线性渐变应该从灰色(#d3d3d3)到浅灰色(#ebe8e8)。确保你的角度设置正确。
颜色叠加
设置叠加的颜色为黑色(#000000)，并降低不透明度为20%。
步骤8:在面板的左侧添加详细信息
现在创建一个新图层(命名为“shine-basic”)，在该图层下，沿面板左侧的左侧边缘创建一条白线。在创建线条后，将不透明度降低到40%。
用Ctrl/Cmd + J复制该图层，并设置复制图层的不透明度为100%。
为这个复制的图层添加一个图层蒙版添加图层蒙板图层面板底部的图标。选择渐变工具(G)。确保你的渐变从白色变为黑色，并且反射渐变选项被启用(在渐变工具的选项栏中这样做)。
拖动渐变工具到图层蒙版上，从中间开始，一直到面板的顶部边缘。
组织面板图层组
创建一个新组(命名为panel)，将除背景层以外的所有图层拖拽到其中。点击图层组左边的三角形折叠它。
步骤10:创建屏幕基础形状
创建一个新图层(你可以命名为screen-main)，就在新创建的panel图层组的上面。在面板的顶部画一个矩形，使用钢笔工具或矩形工具(U)，使用自由变换调整视角。
在屏幕基础形状上添加渐变叠加
给形状图层一个渐变叠加，从浅蓝色(#3b6c9e)到深蓝色(#0ad2d9)。
步骤12:创建底部屏幕辉光
现在创建一个新图层(bottom-screen-glow)，用椭圆工具(U)在面板底部创建一个白色椭圆。
应用滤镜>模糊>高斯模糊软化椭圆白色形状。
我们需要删除溢出屏幕的发光部分。
选择多边形套索工具，然后在屏幕的底部边缘做一个选区，但要留出一个屏幕的像素，这样会创建一个很好的现实效果。
切换辉光图层的混合模式为叠加，并将其不透明度降低到56%。
创建内阴影
创建一个新图层(命名为inside-edge-shadow)，用直线工具(U)在屏幕的顶部和左侧描边。
给这个形状一个深蓝色的叠加。
复制inner -edge-shadow图层(命名为inner -edge-shine)。
用移动工具(V)将该图层移动到内阴影上方1px的位置。给它一个1px的颜色叠加(#ffffff)，为内部阴影创建一个漂亮的嵌入效果。
步骤14:创建屏幕纹理
创建一个新图层。用椭圆选框工具在显示器的下半部分做一个选区。
使用渐变工具(G)应用一个白色到透明的线性渐变，从选区的顶部到中间。
复制图层(Ctrl/Cmd + J)。选择编辑>自由变换(Ctrl/Cmd + T)，将复制的图层旋转大约-30o．
再次复制刚才旋转的图层。
再次使用自由变换将复制的图层旋转45o．同时，使用移动工具(V)来排列这3个图层，使它们看起来像一个羽毛的扇子。
在图层面板中选择合并最新的3个图层，右键单击其中一个图层，然后选择合并图层．
将合并层命名为“waves”，表示组织。现在点击图层面板中的screen-main图层选择它。使用魔术棒工具(W)选择屏幕周围的基础形状。
反转选择(选择>逆)。按下箭头键移动选区一点，切换回“波浪”层，并按删除键删除多余的区域。然后把“waves”图层的不透明度降低到15-20%，这样它就不那么突出了。
右键单击waves图层，然后选择转换为智能对象．为了完成这个设计，切换混合模式为叠加。
步骤15:在屏幕上添加一个符号
让我们在显示器屏幕上添加另一个细节。创建或导入你最喜欢的形状/logo，在wave图层的上面新建一个图层。我使用了Windows的logo，并将它的图层命名为“Windows”。
你可以搜索Photoshop的预设自定义形状-去编辑>预设管理器，然后选择自定义形状在预设类型下拉菜单-为您的LCD显示器找到合适的符号。
将符号图层的不透明度降低到81%左右，然后给它一个渐变叠加，从淡蓝色(#cfedfc)到米白色(#f1f9fd)。
复制图层，执行编辑>变换>垂直翻转。
使用移动工具(V)移动复制的原始符号的右下角。稍微旋转一下(大约15-20次o)使用自由变换(Ctrl/Cmd + T)。再次使用移动工具(V)调整它，直到它看起来像它的反射版本。
给这个复制的图层添加一个图层蒙版，然后对蒙版从底部到顶部应用一个黑到白的线性渐变，这样它就会随着你往下看屏幕逐渐消失。
步骤16:在屏幕上创建侧边栏
在Windows Vista和Windows 7中，有一些被称为小部件的东西，你可以(默认地)将它们放置在桌面背景的右侧。这个区域用半透明的垂直矩形表示。为了给我们的显示器添加更多的细节，我们将创建半透明的矩形。
首先，创建一个新图层(命名为sidebar)，在它上面，在屏幕的右边创建一个白色的形状(你可以使用钢笔工具，矩形工具，或者任何你喜欢的工具)。将白色矩形的不透明度降低到10%左右。
我们将在侧边栏的左侧设置1px的边框(就像在Windows Vista/7中一样)。
新建一个图层(命名为sidebar-stroke)，在侧边栏的左边画一条白线。然后将图层的不透明度降低到10%。
步骤17:创建屏幕光泽
我们真的花了很多时间在屏幕上，给它很多细节。这是因为这个区域是我们工作中最突出的部分，也因为小细节构成了很大的差异。这一次，我们将在屏幕左上角进行修饰。
创建一个新图层(命名为screen-gloss)。使用多边形套索工具(L)创建一个选区，留出每边1px的距离。使用渐变工具(G)在选区上添加一个白色到透明的线性渐变，渐变从左到右。
设置混合模式为叠加，不透明度为60%。复制“屏幕光泽”层，改变混合模式为普通，不透明度为62%左右。
创建一个新图层组(图层> new > group)，名为“screen”，并将“panel”图层组上面与监视器屏幕相关联的所有图层拖到这个新组中。
你可以把这个小组拆了，这样我们的工作更容易处理。
步骤18:创建按钮
在screen图层组上创建一个新图层。在新图层中做一个小的黑色椭圆，代表液晶显示器的中央控制。
给这个按钮描边和渐变叠加。
中风
将描边置于内部，颜色为灰色(#9c9b9b)。
渐变叠加
让线性渐变从灰色(#959494)到较浅的灰色(#e8e7e7)。
复制该图层两次，用移动工具(V)将两个新按钮放置在第一个按钮的两侧。
合并这三个图层(Ctrl/Cmd + E)，并命名合并后的图层为buttons。
第十九步:给纽扣涂上光泽
现在创建一个名为buttongloss的新图层。在这一层做小的白色圆圈，就在三个按钮的上面。然后，将图层的不透明度降低到40%左右。
创建一个新组Buttons(按钮)，并将所有与按钮相关的图层拖到这个组中。
步骤20:创建茎形状
现在让我们移动到我们的LCD显示器的底部部分，从它的干/颈开始。在图层面板中，点击背景图层，然后按Ctrl/Cmd + Shift + N在它的上面创建一个新图层(你可以把这个新图层命名为stem)。用钢笔工具(P)，做一个黑色的形状，代表茎。
第21步:修剪茎秆
接下来，我们将使它看起来像茎是褪色的，因为我们走向画布的底部，以保持我们的工作的照明一致。给图层添加渐变叠加，顶部为深灰色(#6e6d6d)，底部为灰白色(#f3f2f2)。
步骤22:给茎涂上光泽
创建一个新图层(你可以命名为“茎-光泽”)，用钢笔工具(P)在茎上画一个对角线的白色形状。然后，设置该图层的不透明度为20-25%左右。
步骤23:赋予茎部一定的深度
与面板类似，我们还需要给我们的茎一些深度和厚度。新建一个图层(“茎厚”)，在茎的右侧创建一个形状(如图红色所示)。给这个形状一个灰色(#999898)颜色叠加。
创建一个干阴影
我们将使它看起来像是面板在茎上投下了一个微妙的阴影(同样，我们正在注意细节)。创建一个新层(“茎-阴影”)，在茎和面板相遇的地方做一个黑色的形状。
为该图层添加图层蒙版添加图层蒙板图层面板底部的图标。
使用渐变工具(U)在图层蒙版上拖动一个从顶部到底部的黑色到白色的渐变。这应该使它看起来好像阴影是褪色的，因为它走向画布的底部。将阴影图层的不透明度降低到16%。
创建一个名为“stem”的新图层组，并将所有与茎相关的图层移到其中。
创建基础形状
接下来，我们将创建LCD显示器的基础。点击背景图层，使用Ctrl/Cmd + Shift + N在它的上面创建一个新图层(应该在干的下面)。画一个黑色的椭圆。
给基础形状一个投影，一个内阴影，和一个渐变叠加。
阴影
使用浅灰色(#d8d8d8)作为投影的颜色。
内阴影
使用米白色(#fdfbfb)作为内阴影的颜色。
渐变叠加
渐变应该从灰色(#d0cece)到米白色(# f0ded)。
26 .涂上光泽度
创建一个新层，使用多边形套索工具(L)在基本形状的前面创建白色的形状。将该层的不透明度降低到50%。
步骤27:绘制底座内槽
创建一个新图层，在基础形状里面做一个椭圆(你可以复制基础形状，然后用自由变换缩小它)。
给图层一个颜色叠加，一个投影和一个内阴影。
颜色叠加
颜色应该是中间色调的灰色(#c0bebe)。
阴影
投影颜色应该是白色(#ffffff)。
内阴影
内阴影颜色应该是黑色(#000000)。
上面的样式会使它看起来像:
步骤28:给基础一些深度
再次复制基础形状。确保副本放在原件下面。往下一点。
给图层一个投影和渐变叠加。
阴影
投影颜色应该是黑色(#000000)。
渐变叠加
梯度将有4个停止。从左到右分别是#aeaeae， #dbd8d8， #e5e2e2和#d3cece。
你现在会有这样的东西:
步骤29:在基础上创造光泽
新建一个图层(命名为base-shine，并把它放在base-engrave图层的上面)，用多边形套索工具(L)画一个白色的形状。
步骤30:在面板后面投下阴影
为了保持照明的一致性，我们需要在面板后面加一个阴影。在背景上方新建一个阴影层。选择一个与面板方向相匹配的矩形区域(可以使用多边形套索工具)。
在选定的区域内使用渐变工具(G)应用黑色到透明的渐变。一旦完成，使用滤镜>模糊>高斯模糊，半径在1-1.5像素之间，软化阴影形状的边缘。然后，将图层的不透明度降低到15%左右。
第31步:在基础下方投射阴影
接下来，我们将处理基地的阴影。创建一个新的图层，用椭圆选框工具创建一个黑色的椭圆，就在基础的下面。同样，就像面板后面的阴影一样，选择滤镜>模糊>高斯模糊，半径约为1px。
减少图层的不透明度为30%。
在我们之前创建的base-shine图层上面创建一个图层。做一个黑色的形状，覆盖我们的LCD显示器底部的部分背面。
然后，使用半径为1.3px的高斯模糊滤镜软化边缘。一旦应用了滤镜，将图层的不透明度降低到5%。
第32步:光在茎的底部反射
在我们之前创建的“茎-阴影”层的上面创建一个新层。在这个新图层上，使用多边形套索工具绘制一个光线反射的形状，位于茎的底部。之后将图层的不透明度降低到20%左右。
步骤33:改善按钮周围的照明
但是灯光看起来还是有点不一致。啊，按钮位于一个苍白的背景上。打开panel图层组，在bottom-edge-shine图层的上面创建一个新图层，在它上面画一条穿过屏幕的细白线。
再新建一层。用椭圆选框工具创建一个白色的半椭圆，它位于三个按钮的后面。使用滤镜>模糊>高斯模糊，半径设置为4-5px，柔化光线;这是你必须做的最后一件事。
教程汇总
关于我们所创建的很棒的事情是，我们可以改变图层样式来获得不同的屏幕颜色。例如，下面是一些我通过修改“screen-main”图层的图层样式创建的。我希望你学会了很多使用Photoshop从零开始绘制图标的技巧。
请在评论中留下你的想法和问题
下载源文件
- 3 d_lcd_monitor(ZIP, 0.21 MB)
