Photoshop网页设计教程:图层叠加混合模式


很多读者常会询问我类似于上图中的按钮的光效是怎么做出来的?其实非常简单,新建图层,笔刷或椭圆画出白色,高斯模糊,再将图层混合模式更改为图层叠加就可以了。但是这篇文章里我们不讨论具体的技术,而来看看如同上面的按钮通过白色的叠加创建出按钮的高光,我们来了解一下图层叠加模式在网页设计中的应用,再通过不同的实例来深层次的了解图层叠加混合模式的基本效果,将其更自由的应用于我们的设计中。

案例一 图标设计中增加色彩的饱和度和明暗对比度

之所以会引出要讨论图层叠加混合模式的问题,是由于我个人按照网上的教程在做图标设计练习的时候,发现设计师有意识的使用了图层叠加来增加明暗的对比度,创建出了非常好的色彩效果,而如果不了解叠加混合模式的原理的话,很难想到用这样的方式来完成设计。下面就是我在练习中要完成的设计,一个复古的圆形金色座椅:

在创建座椅的椅背过程中,设计师首先使用了角度方式的渐变叠加来创建椅背的金属质感。

接下来,他将此图层复制了一层,放置于原图层的上方,并将图层混合模式更改为叠加,这里正是值得我们注意的地方,由于这一步,我们可以看到,椅背增加了整体色彩的饱和度,拉开了高光部分和阴影部分的亮度,从而让金色的质感更为凸显。当然你完全可以通过细微的调整渐变叠加而直接实现下图的效果,略过图层叠加这一步骤,但是在初步调整色彩不太满意的情况下,要知道通过图层叠加的方式也能够实现的方法。

在创建座椅周围一圈的高光效果上,同样使用了我在前面提到的白色图层叠加的方法,这里使用了柔软的笔刷来完成设计效果。

[1] [2] [3]  下一页

时间: 2024-12-05 05:45:26

Photoshop网页设计教程:图层叠加混合模式的相关文章

Webjx收集整理最新20个Photoshop网页设计教程

在你打开一个网站的时候,首先注意到的当然是它的设计,第一印象至关重要,网站的设计将帮助访问者决定是否继续浏览该网站.今天,本文收集了最新20个 Photoshop 网页设计教程,帮助你设计出更精美的网页. How to create a colorful business web layout Create a consulting web layout Create a movie video streaming website Create a gritty portfolio layout

最新20个很棒的 Photoshop 网页设计教程

在你打开一个网站的时候,首先注意到的当然是它的设计,第一印象至关重要,网站的设计将帮助访问者决定是否继续浏览该网站.今天,本文收集了最新20个 Photoshop 网页设计教程,帮助你设计出更精美的网页. How to create a colorful business web layout Create a consulting web layout Create a movie video streaming website Create a gritty portfolio layout

非常棒的 Photoshop 网页设计教程

曾经和大分享过几篇优秀的 Photoshop 网页设计教程,喜欢的人非常多.今天,本文继续向大家分享最新25个实用的 Photoshop 网页设计教程.其实,网页设计并没有你想的那么难,相信看完这些教程,你也可以设计出漂亮的网页. 1. Clean Style Portfolio Layout 2. Create an Elegant Photography Web Layout in Photoshop 3. Create a Portfolio Web Layout in Photoshop

PS网页设计教程XIX——在Photoshop中创建一个优雅的作品集的网页布局

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

PS网页设计教程VI——在Photoshop中创建一个食物博客布局

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

PS网页设计教程XXI——在Photoshop中创建一个光质感网页设计

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

PS网页设计教程IV——如何在Photoshop中创建一个专业博客网站布局

向Talk-Mania网站致敬.一年前,在该网站上看过许多不错的网页设计教程.一年后,再回头想看看有没有什么新的教程的时候,蓦然发现该网站已经打不开了.也许是关闭了,也许是改了网站名了.幸好,去年本人还是下载保存了几个教程,本教程就是其中之一.也希望能看到更多的PS网页设计教程的网站,以及更多优秀的设计.   约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一

PS网页设计教程XVI——在PS中创建一个摩登实验室风格的网页设计

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

网页设计教程(3):设计步骤及思考

上一篇教程:网页设计教程(2):论摹仿和抄袭    与之前的步骤不同,这是实际操作的步骤.本文包括了大局的步骤和栏目,图片,小到一个图标的选取等等等等,可能会漏掉很多的东西.欢迎补充.我只是引导你去思考,本章绝对不是网页的标准制作步骤,我相信也没有什么标准的制作步骤.      本章的设计步骤是建立在网页设计进阶之一 (步骤和大局观)之上的.可能会涉及一些平面相关的知识.和网页与平面的比较.网页与平面的区别我会在以后在写.      本章所讲的基于PHOTOSHOP软件制作.      本章印证