绿维网络绿维网络
 
建站资讯

建站资讯最新消息,企业数字化营销知识分享

提升网页设计质量的7个重点

人气:  作者:  发表时间:2021-01-14 11:37:26
质感、光与色、阴影、透明这些元素不管广告设计中,还是在网页页面设计中都是很重要的应用技巧。下面,给大家分享提升设计质量的7个重要知识点。

一、创造材质
在网页设计中,创建背景材质是设计师按照既定的设计方向展示网页设计的第一步,也是确定设计基调的重要环节。由于背景的视觉面积较大,所以它能给人强烈的心理感受。下面跟大家分享创建网页背景材质常用的4种方法。

1、运用图案来创建网页背景材质
(1)如何运用“图案”填充文档背景及如何自定义图案的操作,前面已经有提到过,现在我们主要分享如何运用它来解决实际问题。

(2)如果我们选择的图案色调不符合设计的要求,我们可以通过图层混合模式来进行调整。比如我们想要创建暗调色的背景材质,但是手头的图案样式是高亮度的背景图案,这时候,我们就可以通过调整图案的图层的混合模式来实现。在背景色亮调较多的情况下,可将图层的混合模式更改为“正片叠底”来实现。

(3)如果大家觉得还不太满意,可通过“新建调整图层”来实现。例如使用“色阶、曲线”等调整图层都可以快速实现我们的设计目标。当然,还可以通过添加“黑色”调整图层来给整个背景材质去色,通过“色相/饱和度”调整图层背景材质的色彩变化及明暗变化。

2、使用笔刷来添加质感
(1)使用笔刷来创建网页背景材质也很简单,首先打开一张用来承载图案的背景素材,然后将前景色调整为白色,选择画笔工具,调整好笔刷的大小,在新建的图层上随机添加一些笔刷效果,可通过多建几个图层、调整不同图层的透明度来增加视觉的层次感和真实感。

(2)更改图层的混合模式为“叠加”或者“柔光”模式,以便于让笔刷效果和背景更好的融合。

3、应用滤镜来创建网页材质背景
使用滤镜来给网页背景添加材质的方法很多,但最常用的就是运用“杂色”滤镜来实现需要的效果。首先将图层转换为“智能对象”,这样更为方便随时调整滤镜值。然后执行“滤镜”→“杂色”→“添加杂色”命令即可,添加杂色时,滤镜数值的设置一定要小,一般使用1%就够了,数值太大材质看上去就不够自然。

4、使用材质图片来创建网页背景
比如我们要让网页背景看上去是木质的感觉。很多时候大家是通过添加不同层次的滤镜效果模拟来实现类似于木质的效果,但是如果直接把一张纸质材质放到文档中,然后再通过调整图层的混合模式,做出来的效果往往要更真实和自然。

二、创造倒影效果的3种常用方法
在网页界面设计中,为了增加产品的立体效果,通常需要为产品添加倒影。但倒影也会因为物体形状的差异而产生制作上的差异。下面给大家分享创造倒影效果的3种常用方法。

1、常规平面物体的倒影:代表物“女包”
(1)打开一幅素材图象,然后按Ctrl+J组合键,复制一层,然后对复制得到的图层执行“编辑”→“变换”→“垂直翻转”命令,将素材对象垂直反转来,并将它移动至原图层的下方。

(2)为翻转后的图层添加图层蒙版,然后使用选择渐变工具,在蒙版中制作由黑到白的线性渐变,完成的倒影效果。

这种方式特别适合平面的照片素材,而对于一些立体包装、立体效果的照片并不适合。

2、立体产品的倒影制作:代表物“包装”
(1)打开一幅素材图像,然后按Ctrl+J组合键,复制一层,然后对复制得到的图层执行“编辑”→“变换”→“垂直翻转”,将素材对象垂直反转来,并将它移动至原图层的下方。

(2)选择矩形选框工具,选中副本图层上的区域,然后执行“编辑”→“变换”→“斜切”命令,对素材图像进行斜切变形,目的是将产品的倒影“底部”与产品底部对齐。

(3)其他部位也进行相同的操作。最后给图层添加图层蒙版,选择渐变工具,创建由黑到白的线性渐变,获得产品的倒影。

3、不规则物体倒影:代表物“洗车”
(1)打开一幅素材图像,然后Ctrl+J组合键,复制一层,然后对复制得到的图层执行“编辑”→“变换”→“垂直翻转”命令,将素材对象垂直翻转,并将它移动至原图层下方。

(2)选择矩形选框工具,选中副本图层上如图所示的区域,然后执行“编辑”→“变换”→“垂直翻转”命令,对汽车后轮胎部分进行调整,目的是将产品的倒影“底部”与产品的底部对齐。

(3)为副本图层添加图层蒙板,选择渐变工具,创建由黑到白的线性渐变,获得产品的倒影效果。盖印图层,用相同的方法完成其他汽车的倒影,置入素材、文案,即可快速完成一则网页Banner的制作。

三、外发光和内发光
外发光也是网页设计师为设计对象添加光效果时很实用的一种方法,尤其当我们需要为对象添加高光时,外发光样式很管用。下面与大家分享外发光和内发光和内发光的应用技巧。

外发光除了与投影、内阴影等样式具有相同的参数设置以外,它还有属于自己的特质,那便是图素、范围与抖动。图素设计组中包含扩展和大小两个可调节参数,主要用来控制外发光的范围和强度变化。当光照非常接近物体边缘时,范围可用来调整发光区域,而抖动决定了渐变与不透明度的复合。

内发光光源有两个选项:居中和边缘。居中中意味着光将从中心开始放射,而边缘意味着光从边缘放射到中心。但在设计应用中,内发光(包括阴影)通常被用来设计与外发光一样的高光效果。

以上是运用Photoshop系统提供的调控参数所示制作的发光效果。除此之外,我们依然可以借助画笔工具和模糊滤镜来制作高光效果。

四、斜面浮雕与浮雕效果
斜面和浮雕的样式包括内斜面、外斜面、浮雕、枕形浮雕和描边浮雕。内外斜面就是在设计对象的边缘加入内部/外部斜面。浮雕就是为图层加入浮雕效果。枕头浮雕模拟了冲压效果。而描边浮雕则为图层加入一种笔划感。

应用外斜面样式会为图像“设定”两个紧密相联的图层,上方是高光层,下方是阴影层。这样就可以运用光线的照射原理产生视觉上的凸起效果。

在网页界面设计中,通常在设计网页特效字时会用到“斜面和浮雕”样式效果。在设计中为了表现凸起效果的平滑性,我们可选择浮雕的“方法”为雕刻柔和。此外,要注意“大小”的使用,在调整时它还会影响到浮雕的“深度”。所以,二者最好相互协调、共同调节。

浮雕效果的光照“角度”的设置一定要参照背景的环境光的角度,这样最终的效果才会更加统一。

另外系统还为“斜面和浮雕”提供了“等高线”和“纹理”的选项,“等高线”能够为浮雕效果加入各种绚丽的边缘效果,而“纹理”主要用来为浮雕效果添加材质感。

五、渐变叠加与颜色叠加
如果单纯从操作的角度看渐变叠加与渐变填充会产生类似的结果;而颜色叠加也会与颜色填充产生类似的效果。但在网页界面设计中,尤其在体现设计的细节方面渐变叠加与颜色叠加会更胜一筹。下面,我们一起体验其应用微妙。

1、选择圆角矩形工具,然后在选项栏设置其填充方式为“渐变”,即可得得一个按钮效果。如果我们想调整按钮整体的亮度,还需要创建相应的调整图层来实现。

2、很显然,您一定喜欢更通透,更漂亮的按钮。但如果不使用调整图层还有其他的办法吗?小编通过运用图层样式面板中的渐变叠加与颜色叠加功能与大家一起来体验其微妙。

3、还是原来的按钮,我们为其添加渐变叠加效果。但将渐变叠加的混合模式设置为明度模式。按钮也变得通透了。

4、所以,对于某一图层的图层样式的混合模式,如果将“渐变叠加”样式的混合模式设为“明度”,或将“颜色叠加”样式的混合模式设为“色相”,都可以更方便地帮助设计师调节渐变。

5、首先我们为所设计的案例对象确定统一的渐变风格,也就是相同的明度变化,然后为不同按钮叠加不同的颜色,您会发现设计效果虽然不同,但整体的亮度十分的协调和统一。

六、精准定位“镜头光晕”的位置
镜头光晕滤镜,是网页设计师为网页界面元素添加光晕常用的一种方法,但有时也会为了无法获得光晕的精准位置而犯愁。下面,小编与大家一起分享网页设计中如何获得光晕效果的精准位置。

1、打开素材文件,我们发现页面的亮度较高,所以可通过添加光晕来引导浏览者的注意力。但是在具体添加过程中我们需要找准光晕添加位置。

2、用鼠标拖曳辅助线,获得光影的精准位置。然后牢记其具体的坐标数值。

3、为设计效果添加光晕。打开光晕设置面板,然后按住Alt键不松开,在光晕预览窗口中任意位置单击鼠标,此时,我们发现出现了精准设置光晕坐标的对话框。

4、单击确定按钮以后,设置好光晕的大小及强度,我们即可发现光晕被应用在了十分精准的位置当中了。

七、透明玻璃
“透明玻璃”实际是一种比喻的说法。它主要是指我们在广告设计中在设计字体、图形等表现要素时为了增强视觉冲击效果或吸引浏览者的注意而采用的一种设计技巧。下面与大家分享在广告设计中如何制作和应用“透明玻璃”的技巧。

首先,我们结合一则成熟的设计案例来分析“透明玻璃”所具有的基本特点。

小编认为要制作出比较完美的“透明”效果,至少应注意以下4个关键要点。

1、光影的变化
透明效果之所以透明,正是因为其受到光的照射,所以我们的眼睛才能识别物体所具有的透明度。失去光的照射何谈透明?

2、细致的轮廓线条
“透明玻璃”效果之所以具有视觉美感而吸引浏览者的注意力,其外观细致轮廓功不可没。线条的实与透明化的虚完美结合,在广告版面中又借助光的作用,很好地体现了“虚实结合”的构成原理。

3、折射
就像一根筷子放入水中一样,我们的眼睛通过透明的水而观察到的是一双变形的筷子,而这一切都是筷子在透明的水的影响下而产生的折射,进而造成我们眼睛识别的错觉。所以,我们在设计“透明玻璃”后面的物体时应注意对“折射”原理的应用。

4、模糊效果的恰当应用
透明的美妙之处就在于其营造了一种平滑的质感之美,一方面它真实再现了物体的透明,另一方面也增强了物体的真实度,无形之中会提高浏览者“触摸物体”的体验欲望。
提升网页设计质量的7个重点:http://www.luweit.com/news/jianzhan/180.html
标签: 网页设计
热门标签
相关新闻
免费获取一份方案或报价
* 请认真填写需求信息,我们会在24小时内与您取得联系。

关于我们

东莞市绿维信息技术有限公司致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发,等服务范围,并且涵盖基础的域名服务、主机服务;企业邮箱、网络营销等应用服务;
more>
立即咨询
快速获得解决方案
咨询电话
135 8088 5012
公司地址
广东省东莞市南城建设大厦7F
公司邮箱
Copyright ©2016-2021 东莞市绿维信息技术有限公司 粤ICP备18104664号-2