首页 > 知识•资讯 > 网站设计-图层样式的设计技巧 > 正文

网站设计-图层样式的设计技巧

2011/8/15 0:00:00 · 稿源:传诚信

图层样式是什么新鲜事。他们已经一而再,再利用和滥用。尽管他们无处不在,也许是因为它,很多设计师还没有实现这个方便的菜单中充分发挥潜力。它的美在于我们有能力创建一个效果,然后将其复制,修改,出口,隐藏或垃圾箱,而不会降低该层的内容,。

下面,我们目前,分步实施,一些实用技术,以帮助您优化您的设计,提高生产率和降低层杂波 。我们钦点的选择,你会发现更多有用的Photoshop技术和教程Photoshop的最佳碎杂志上。

下载源文件(ZIP,1.6 MB)。

FX -完全掌握的Photoshop技巧:图层样式

凹凸效果图

“等一下,什么?”你惊呼,“还有的没有凹凸映射效果的图层样式菜单!”这是事实,但图案叠加和斜面和浮雕相结合,我们可以实现一个可控光源一个纹理,凹凸,映射表面。

这种方法需要两个图像:一个纹理和色彩,和其他作为深度图。深度图不需要有任何的色调,因为它决定了一个复合值的基础上深度,黑色是最低的,白的最高。在某些情况下,您可能能够使用两个相同的图像,但在我们的例子中,我们将使用完全不同的。

步步

  1. 我们将开始创建我们的凹凸贴图模式打开钻石 plate.psd文件 。
  2. 在里面你会发现一个黑色的背景上的白色形状,从这个文件创建一个模式:全选(CMD / Ctrl + A键),然后“编辑”→“定义图案“将它命名为”钻石板凹凸贴图“ ,点击确定。

    凹凸步- 02在掌握的Photoshop技巧:图层样式
    创建花纹板模式。

  3. 现在,打开start.psd文件 。
  4. 重复步骤2,创建一个从“灰斑片状层”的模式 。这将用于后向我们的背景添加纹理。

    凹凸步- 04在掌握的Photoshop技巧:图层样式
    定义纹理图案。

  5. 创建模式后,删除“修修补补的灰色”层它不再需要。
  6. 使用矩形工具,创建一个约20像素的画布比高出20个像素的形状图层。这一层的颜色以深色,褐色,彩色的灰色。

    凹凸步- 06在掌握的Photoshop技巧:图层样式
    创建我们的背景形状层。

  7. 确保形状层没有任何图层样式已经应用到它(通常适用于Photoshop将自动最新的图层样式) 。然后,开始新的图层样式,添加图案 叠加。

    凹凸步- 07在掌握的Photoshop技巧:图层样式
    添加图案叠加效果。

  8. 选择“修修补补的灰色”的模式选择器模式,并改变混合模式为柔光 。这将增加我们的背景层的纹理 。

    凹凸步- 08B在掌握的Photoshop技巧:图层样式
    凹凸步- 08在掌握的Photoshop技巧:图层样式
    添加图案叠加效果。

  9. 接下来,添加斜面和浮雕,以及与肌理效果这一次,变化的肌理效果的“钻石板凹凸贴图”的格局在第2步中创建的模式。我们现在有一个蹩脚的花纹板背景。

    凹凸步- 09B在掌握的Photoshop技巧:图层样式
    凹凸步- 09在掌握的Photoshop技巧:图层样式
    应用斜面和浮雕肌理效果。

  10. 与大多数图层样式效果,默认值是很少的理想选择。通过调整锥类型和大小,光泽等高线,亮点,阴影和灯光设定,可以实现一些戏剧性的结果 。

    凹凸步- 10B在掌握的Photoshop技巧:图层样式
    凹凸掌握Photoshop的技术步骤10:图层样式
    调整斜面和浮雕设置。

  11. 随着一些额外的效果,你可以塑造背景层甚至更多。例如有一个渐变叠加来模拟反射光线变暗图像的某些区域。

    凹凸步- 11B在掌握的Photoshop技巧:图层样式
    凹凸掌握Photoshop的技术步骤11:图层样式
    使用渐变叠加变暗一些地区。

  12. 您可能会注意到,从突出的斜面和浮雕过滤似乎都具有相同的值。这是因为斜面和浮雕效果图层样式的堆叠顺序是非常高的 。变暗的亮点,在于我们的主要光源外,只需绘制一个图层蒙板,使用画笔 工具。

    凹凸掌握Photoshop的技术步骤12:图层样式
    画一个口罩,以增加在背景光的外观。

我们现在有一个纹理,凹凸映射是完全动态的背景下,关于它的一切都可以从“图层样式”菜单,容易修改。合并到一个这样的动态层的复杂的图像,可以显着降低层杂波,并允许你(和谁否则可能会使用该文件),轻松地找到并修改的东西。现在,让我们创造我们的图标。

3 - D建模

通过结合一些内部的影响,我们可以使用“图层样式”菜单中创建模拟的3 - D物体:伟大的图标,按钮和其他界面对象。现在,我们将模型的圆形图标的例子使用一个单层的形象的基础。

步步

  1. 首先,创建一个具有丰富的红色填充圆形层 。

    在掌握Photoshop的技术3D步- 01:图层样式
    创建形状图层图标的基础。

  2. 由于通常情况下,一个3 - D形状建模时,让我们开始加入到我们的“图层样式”渐变叠加。最适合我们的实现的一个白色到黑色的径向风格的渐变,设置为线性加深。请务必在原点的白色区域的梯度。

    3D步- 02在掌握的Photoshop技巧:图层样式
    添加渐变叠加设置为线性加深。

  3. 我们现在有一个显着阴影的领域,与头的光源。通过减少渐变的透明度,我们可以扁平化的形状更凹 按钮。

    3D步- 03在掌握的Photoshop技巧:图层样式
    减少了微妙的效果透明度。

  4. 让我们也光线的方向移动到左上角。虽然离开“图层样式”菜单中打开,鼠标移到图像本身(“移动工具”图标应该出现)。只需点击并拖动左上角的形状图层的渐变的震中 。

    3D步- 04在掌握的Photoshop技巧:图层样式
    重新定位渐变图层样式菜单内。

  5. ,虽然斜面和浮雕看起来可能更符合逻辑的工具,你经常可以得到一个更清洁,更可定制的斜面看,结合其他影响使用。首先,添加一个黑色的内发光,设置为正片 。调整电抗器,大小,透明度和轮廓,直到你有一个内部的形状软化边缘 。

    3D步- 05B掌握的Photoshop技巧:图层样式
    3D步- 05在掌握的Photoshop技巧:图层样式
    添加辉光变暗基地边缘。

  6. 对任何渲染的球面一样,我们添加一些在我们的阴影区域的反射光。这是很容易实现与内阴影效果更改颜色为白色,混合模式为线性减淡。调整角度,以便它出现在我们的形状右下。调整的轮廓线,距离,大小和不透明度,以创建一个微妙的 效果。

    3D步- 06B掌握的Photoshop技巧:图层样式
    3D步- 06在掌握的Photoshop技巧:图层样式
    添加微妙的反射光,使用内阴影。

  7. 为了加强形状的感觉,是文件的一部分“环境,”我们可以添加一些效果,以互动的背景。阴影通常是最简单的工具来使用这个的 。按摩的设置,直到一切都感觉不错。

    3D步- 07B掌握的Photoshop技巧:图层样式
    3D步- 07在掌握的Photoshop技巧:图层样式
    一个简单的阴影,进入一个很长的路要走。

  8. 使用外发光效果,我们可以模拟反射红色的光,我们的背景图像会吸收,如果这是实际设置。一个暗红色的辉光的颜色变化,并改变混合模式为变暗。同样,大小和不透明度设置工作,以创建所需的的效果。这是这些影响,正确使用时,没有人应注意,因为它只是看起来自然。

    3D步- 08B掌握的Photoshop技巧:图层样式
    3D步- 08在掌握的Photoshop技巧:图层样式
    一个红色的辉光,添加更多的“环境”。

请注意,图层样式梯度不能抖动,这可以使他们降低质量(-马克爱德华兹,比他们的梯度层和渐变工具同行。

漫反射与镜面光

现在,我们的标志,反映了一个模拟的漫射光,这使得它完成了磨砂表面外观。如果你喜欢一个更有光泽的外观,你可以轻松地创建一个镜面高光(还有什么?)图层样式。

步步

  1. 复制目前的形状图层(CMD / CTRL + J) ,
  2. 清除新图层的图层样式:右键单击在图层调板的层,并选择“清除图层样式” 。
  3. 我们还需要修改层的形状,使反射光的边缘更清晰 。使用直接选择工具(A),选择在形状图层的矢量蒙版路径。复制(CMD /按Ctrl + C)粘贴(CMD / Ctrl + V键)以上的电流路径。改变这条 ​​道路的模式,从形状区域减去( - )然后将形状和创建一个月牙形状的权利。您可能还需要作出较大的负面形状,以创建一个更自然的曲线:简单自由变换(CMD / Ctrl + T键,然后规模的形状。

    规格步- 03在掌握的Photoshop技巧:图层样式
    修改的镜面高光的形状。

  4. 因为我们只需要为它的图层样式这一层,我们可以设置其填充不透明度为0% 。

    规格步- 04在掌握的Photoshop技巧:图层样式
    删除图层的填充为0%。

  5. 我们也希望这层继承底层图层样式,以便创建一个新的层上的剪贴蒙版(CMD / CTRL +股权+ G) 。

    规格步- 05在掌握的Photoshop技巧:图层样式
    创建剪贴蒙版继承的影响。

  6. 现在,开始与一个渐变叠加图层样式使用默认的黑色到白色渐变,并设置混合模式为滤色。敲不透明度到50%左右,并改变角度约115 ° 。您可能需要改变渐变的定位,你可以通过点击和拖动文档窗口内,就像你在3 - D建模部分。

    在掌握Photoshop的技术规格步- 06B:图层样式
    规格步- 06在掌握的Photoshop技巧:图层样式
    设置渐变叠加到屏幕。

  7. 这是一个良好的开端为突出,但它仍然看起来有点不自然 。使用一个透明的内中风,我们可以缩小周边的内饰效果。中风的效果,添加层和放弃其不透明度为 0 %。到内,改变位置和大小滑块的工作,直到突出较深的内发光的底层(例如图像使用5个像素)结束 开始。

    在掌握Photoshop的技术规格步- 07B:图层样式
    规格步- 07在掌握的Photoshop技巧:图层样式
    使用内中风的0%至收缩室内效果的周长。

  8. 为了一个更有活力的外观添加到您的突出,你可以添加一个白色的内阴影,设置一个自定义的轮廓屏幕。调整的距离和大小设置来完成的效果。

    在掌握Photoshop的技术规格步- 08B:图层样式
    规格步- 08在掌握的Photoshop技巧:图层样式
    内阴影创建一个更加动态的镜面反射。

X -射线视觉

步步

要建立在我们的图标模切的类型,我们可以变成一个形状图层的文字层,并使用路径来掩盖远离根据地。然而,这将导致堕落的内容,我们将不再能够修改的类型。相反,我们将模拟使用的淘汰赛混合选项口罩这也将让我们应用自定义的效果切出区 。

  1. 创建一个新文本“FX”型层,并在圆形底座的位置 。该示例使用120点加拉蒙粗体斜体。
  2. 掉落的填充不透明度为100%。
  3. 开始添加内阴影图层样式增加大小,并增加不透明度为90%左右。您可能还需要根据自己的喜好修改的距离和轮廓。

    X射线步- 03在掌握的Photoshop技巧:图层样式
    模切效果的开端。

  4. 我们现在有一个模切效果的开端,除了文本仍显示它下面的基础 。为了解决这个问题,请在“图层样式”菜单中的混合选项部分。从“无”浅层变化淘汰赛(从一层直接下当前层的组此设置样本像素)。因为我们的文字层不属于一个层组,它的样本,而不是从背景层。(使用深度淘汰赛将始终从背景层样品,无论层的组。)

    X射线的步骤- 04B掌握的Photoshop技巧:图层样式
    X射线步- 04在掌握的Photoshop技巧:图层样式
    浅水层直接从当前层的下方组淘汰赛样本像素。

  5. 为了得到文字层,从我们的钻石板层样品,按一下启动“好”关闭“图层样式”菜单中。正如你可以看到,现在的“FX”形状从直接低于新层的纹理层像素选择基地的按钮,使文字层和,和组(CMD / Ctrl + G键 。 组。

    X射线步- 05在掌握的Photoshop技巧:图层样式
    分组的图标,因此,从钻石板层基因敲除样本。

  6. 基因敲除的效果是非常有说服力的的,但仍然觉得从基础上脱落。让我们添加一个斜角的效果,模拟的表面质量的基础。开始加入一个大小为2的外行程,然后一滴不透明度为 0 %,这并不能达到什么,但下一步是必要的。
  7. 现在添加斜面和浮雕效果。转变作风中风浮雕和技术努力凿,这将适用于在上述步骤中创建的中风面积内斜角的照明效果 。修改设置,以达到一个微妙的和光滑的边缘。

    X射线的步骤- 07B掌握的Photoshop技巧:图层样式
    X射线步- 07在掌握的Photoshop技巧:图层样式
    添加中风的浮雕。

  8. 让我们的考虑形状的右下边缘添加一个薄镜面突出的斜面之一一步。我们可以使用一个白色的掉落暗影效果,设置为屏幕,将一个明亮的突出,便斜角的边缘 。您将要修改的距离和大小给予突出尖锐的边缘。

    X射线的步骤- 08B掌握的Photoshop技巧:图层样式
    X射线步- 08在掌握的Photoshop技巧:图层样式
    添加薄镜面高光,阴影。

  9. 完成内模切字母与更多的阴影图层样式,添加一个简单的黑色到白色的渐变叠加,设置为 正片。

    X射线步- 09在掌握的Photoshop技巧:图层样式
    整理过的模切。

快速提示

尽管频繁滥用,“图层样式”菜单,确实是一个强大的工具,每一个设计师要学会工作。它不仅提供了一个不容易通过其他途径发现的速度和控制的水平,但它提供了宝贵的的灵活性。我们的例子显示了一个多维的图标和一个完全动态的背景如何,可在4个简单的形状图层合并,使他们能够方便地进行修改,重用,而且整个设计重新利用。下面是一些额外的提示,你的下一个项目上工作时,要记住。

堆叠顺序的影响

您可能已经注意到,有时正在使用的另一种效果时,效果是不可见的。例如,颜色叠加,似乎覆盖渐变叠加。这是因为堆叠顺序的图层样式。正如层的调色板,一层将覆盖另一个就是降低堆叠顺序向下。不幸的是,“图层样式”菜单中不允许您重新排列顺序的影响。一个办法解决这个问题(即使你牺牲能够编辑)使用创建层,变成实际的层,您可以移动所有的图层样式效果。

室内装饰效果堆叠顺序:

  • 中风
  • 斜面和浮雕
  • 内阴影
  • Innger辉光
  • 颜色叠加
  • 渐变叠加
  • 图案叠加

外观效果堆叠顺序:

  • 中风
  • 外发光
  • 阴影

非彩色的特定样式

虽然并不总是可能的,你可能要使用黑色,白色和灰色为你的效果。使用单色的颜色配合适当的混合模式,允许你创建非特定颜色的样式,这意味着你可以修改的实际层的颜色,图层样式将适当更新。

缩放效果

有可能是当你创建一个图层样式,在原来的大小看起来很棒,但增加或减少的形状时,你的美丽风格被破坏。幸运的是,Photoshop提供了一种方法来调整失衡的样式。只需选择图层→图层样式→规模效应,然后输入你需要的百分比。

不起眼的菜单选项

您可以使用图层样式菜单内的一些隐藏命令 。根据效果,你将有机会获得的手工具,或通过简单的鼠标在文档窗口的移动工具。手工具,让你左右移动文件,就像你会以外的图层样式“菜单上,和移动工具的重新定位目前的效果和自动更新设置。使用移动工具时,您仍然可以访问通过按住空格键的手工具 。虽然使用的工具,可以放大和缩小控股空间+ CMD空间+选项不要忘记,其他大多数在Photoshop菜单,“选项”将改变“取消”按钮,一个“复位”按钮,让你取消任何更改 。

感谢他们在协助编辑的文章,马克爱德华兹和里卡多吉梅内斯


选择北京网站建设公司-传诚信,优质服务,绝对不容错过 !

1. 优秀的网络资源,稳定的网站和速度保证

 (配送双线独立ip空间,国际A级BGP机房,99.5% 的主机在线时间)

2. 7年北京网站建设经验,优秀的技术和设计水平,更放心

3. 全程省心服务,不必担心自己不懂网络,更省心。

-----------------------------------------------------------------------------------------------------

我们的与众不同之处:

 

      免费网络营销顾问:我们为您提供免费的网络营销顾问服务,您需要了解关于如何开展网络营销,电子商务网站设计等的事宜,欢迎随时联系我们。

      seo友好的网站管理系统:除了优质的网站空间,网站管理系统,和网站设计外,我们的网站管理系统更是seo友好的,包括:自定义栏目名,Google Sitemap自动生成,静态页面生成等等,让您的网站。

      免费网络营销培训:如何更好的投放网络广告,如何提高网络广告的投资回报,如何发帖子,

      如何优化网站,我们有丰富的经验开放给您!祝君成功!

联系我们:010-62199213   62122723-808   贾先生

传诚信北京网站建设网站:www.ccxcn.com 点击查看经典网站案例

  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354