基于Photoshop的网页图像处理应用研究

来源:用户上传      作者:祝晓铭 王艳平

　　摘要：网页设计是平面设计借助计算机多媒体技术在网络媒介上做出的艺术展现形式的演进，Photoshop在网页整体的页面布局、色彩搭配以及文字排版效果设计等方面的应用作用突出。本文旨在对Photoshop在网页图像处理方面的应用规律和设计技巧进行分析研究，以期为网页设计者提供理论借鉴和实践依据。
　　关键词：网页设计;图像处理;Photoshop;界面设计
　　中图分类号：TP391.41 文献标识码：A 文章编号：1004-9436（2020）21-00-02
　　0 引言
　　Photoshop是国外Adobe公司开发和发行的专业图像处理软件，它具有强大的图像处理功能，可以进行图像编辑和图片设计工作，也可以进行精确细致的矢量图形绘制。PS主要用于处理位图，即通常所说的以像素构成的数字图像，其使用范围集中在平面类的各种应用，如广告设计、影像创意、后期修饰、网页（包括各类APP界面）设计等。
　　在现代计算机网络环境下，原有广义范围内的平面设计宣传内容借助计算机网络和多媒体信息技术于网络媒介载体上演进而出现了新型的信息传播方式——网页。网页由文字和图片作为最基本的构成元素，按照一定的布局架构样式和色彩组合运用的原则进行页面的规划设计制作，也就是我们通常所说的网页设计。Photoshop是设计者进行网页设计及其图像处理的“最佳工具”。
　　1 应用内容
　　1.1 “形”与“色”
　　《设计的法则》中提出：要增加人们的辨识力，让人回想起重要信息，可以利用“图片优势效应”。用图片加上文字，并且确认两者强调的是同一信息，以便达到最佳效果[1]。鉴于此，设计者通过Photoshop完成界面设计的“形”和“色”设计可以确保图片优势效应的实现。在这里，所谓“形”，主要是指网页设计中占比最大的图形设计，其作用效果偏于网页信息传递这一功能性的实现，即如何由一张“白紙”从无到有做起，来实现关于网页界面的布局排版和各类元素组合处理。设计作品应该更好地为设计内容服务，努力寻求更为准确的、合乎情理的设计语言成为设计家的首要任务[2]，这就使网页设计中功能性应该摆在艺术性之前。而“色”主要指的是网页色彩设计的艺术性体现，即界面在充分保障信息传递功能的同时，充分发挥色彩作为第一视觉形式语言自身凸显的强大视觉冲击力和意识感染力。通过高品质的色彩处理手段和设计效果来引起网页浏览者的浏览兴趣和互动热情，以此提升网页浏览体验。
　　做好网页设计“形”与“色”的处理，是网页“功能性”和“艺术性”的协调与融合，可以引导浏览者按照设计者在网页界面中精心构建好的视觉指引，逐层递进地浏览吸收网页传递的各类感官信息，实现设计思想和浏览行为的有效统一。
　　1.2 格式选择
　　一般来说，网页设计中常见的图像（片）格式主要是JPEG、GIF和PNG三种，其具体的存储格式可以按照界面设计的不同使用需要进行选择。除去需设计者周知的图像格式属性，三种格式在Photoshop使用中也有各自的显著特点，值得引起注意。
　　GIF格式，在Photoshop中可以完成简单的逐帧动画直接代入网页中使用，这个特点是其他图像格式所不具备的，极大地方便了设计者的基础动画展示需求。
　　PNG格式在Photoshop中可以完成真正意义上的背景透明处理，明显区别于GIF格式的“假透明”（只能在存储色范围内实现单一背景色透明，范围外使用时会出现毛刺和白边），比较适合Buttons/按钮、Icon/小图标以及Background/背景色的使用。
　　JPEG格式在Photoshop中可以完成最为丰富的色彩处理，重点适合Banner图片以及大幅版面图片的使用。同时，JPEG格式还支持极限效果的压缩处理，适合不讲求品质的Web图像高效显示。
　　根据界面结构布局以及图片自身展示功用的不同，图片存储格式也会面临多种选择，设计者也要结合网页在不同的外显设备和网络传输速率等因素进行综合考虑。
　　1.3 设计尺寸
　　现在流行的显示器分辨率主要集中在1920px*1080px，在此分辨率下，网页的主题显示区域设置在1200Px即可达到较优效果。考虑到如今仍有可能使用到1024px*800px的低显分辨率，设计者可以将主体显示区域设置为1002px，以确保即使在1024px分辨率下使用时网页横屏效果仍然会得到全幅显示而不会出现左右横向滚动条。一般来说，Banner的高度不宜超过500px，这也是为保证Banner部分在通用分辨率下仍能得到全景显示。
　　随着各类网络移动应用端的快速发展和层出不穷，浏览者会出现针对网页界面的不同尺寸显示需求，现有的技术解决手段主要为响应式网页以及在此基础上出现的自适应网页。这里需要注意的是，响应式网页是自动调整页面布局结构后出现不同的展现方式，而自适应式网页则是自动适应不同设备的分辨率要求来显示同样的布局样式。因此在网页图像设计尺寸上要有综合考虑和预测把握，做大不做小，以备实现图像（片）在等比缩放后依然能够保持良好的显示效果。
　　2 界面设计
　　2.1 构成元素
　　网页的布局设计构成主要包括Logo/标志、Navigation/导航（栏）、Banner/横幅（广告）、Content/内容、Links/链接和Copyright/版权等部分。设计者利用Photoshop建立第一张空白图层，再按照网页界面构成的基本元素来划分相应板块的内容组成，逐步叠加适用素材内容，进行不同图片颜色间的调和处理，直至完整的界面效果图设计完成。
　　Banner部分是界面设计中尺寸、位置占比最大的部分，也是使用Photoshop最多的部分。图片是文字以外最早引入网络中的多媒体对象，它传达信息的直观性与寓意性远远超过文字，而且图片的引入也大大美化了网络页面[3]。Banner图片主要包含两类形式：一是直接利用相对完整的能够基本符合视觉传达主题的图像素材，再在其中添加主题描述文字、导航链接图标等;二是直接在空白图层上，根据视觉传达主题搜寻适合素材，通过设计者的图形创意进行素材组合以实现网页主题的内容表达。 　　内容部分主要体现为文字板块间的相互排列和组合，要注重主次板块间的层次结构和相互对比度，主要的标题内容易使用粗而黑的衬线结构字体样式，正文内容则适合使用纤细的非衬线字体样式并且降低透明度，以免文字板块大面积重色破坏主题画面协调。还要注重适度扩大字体行间距以做好留白处理，避免字体密集效果带来的视觉拥挤。
　　2.2 图层分类
　　Photoshop图像处理中使用最多的技术应用即设计图层的合成，界面效果图的总体形成即由每一板块构成元素所包含的设计图层组成。界面的规划设计从最初的原始空白图层到色彩丰富、页面元素众多的成型网页，图层的数量随着设计过程的深入会呈几何倍数增加，并将包含许多效果相似的图层，如果不提前加以科学的分类管理，势必会影响到设计效率和效果呈现。因此在设计之初，就要根据界面布局构成元素做好“六大板块”的分类结构文件夹，甚至可以在一类文件夹下根据组成元素或位置划分，再形成多个图形或字体文件夹以方便管理，其效果在实现板块元素的等量复制时显得尤为突出。
　　界面设计的初始阶段可以按照不同板块所属位置以几何形态确定其尺寸大小，对图层进行不同颜色间且为单一色相的颜色填充，并适度降低颜色的饱和度和透明度，使其叠加于空白背景图层之上。这样既可以实现界面上不同板块的比重划分，又能够形成网页界面的基础色调，以形成用色参照来进行网页素材的选取及调和使用。
　　图层是整个Photoshop中应用最多的技术手段，其图层遮罩功能和混合样式功能的使用，可以使网页中的图像在设计处理后呈现千姿百态的视觉设计效果。
　　2.3 色彩设置
　　网站不同的主题定位以及服务对象范围对于网页界面的主体色调的要求不尽相同，而主体色调对于网页浏览行为会起到重要的引导作用，使用Photoshop做好界面主体色调确立，主要围绕页面的色彩取向和色相调和发挥作用。主体色调主导网页整体的风格，是由界面中占比最大的色系来完成视觉观感的确立，即画面中不论是绘制的图形背景或是使用的大幅面圖片的基础色调，都会使浏览者产生对于网站网页主体色调的认知。
　　色彩信息具有强调和突出信息点的作用，主要依靠色彩的饱和度与明度、色相区分度和色块面积比来完成[4]。设计者在确立了网页主体色调后，可以使用Photoshop中的吸管工具在选定的主题色周边色域选取合适的临近色作为辅助配色，通过多种临近色的选取使之围绕主题色延伸出相同的色彩取向，构成网页界面的基础主色调。主色调确定之后可以根据色相的补色关系来选取调和色，一般是选择主色的对比色作为调和色使用。主体色调和辅助色调的和谐搭配可以使整个界面色调和谐特色鲜明，引发浏览者良好的阅读体验。
　　Banner图片在界面中尤其是在网页浏览的首屏效果中占比巨大，因此设计者应高度重视Banner部分图形的设计制作和图片素材的处理使用，一定要符合网页确定的主题色调，在文字或图标方面予以不同色相之间的互补调和;内容部分则包括用于信息传递的大幅文字部分，这些部分位置占比巨大，一般不易使用色相和纯度过高的颜色，以免影响图形图像部分形成的主体色调，在Photoshop中也可以通过降低其透明度使之做好减幅处理;文字以外的各类用于装饰的图标、图像、装饰线以及格式化后作为装饰图形出现的文字，因为体积位置占幅较小，因此可以使用色相相对鲜亮的颜色作为点缀来发挥调和作用。
　　2.4 图像合成
　　网页是通过视觉元素引入，被用户关注，并实现信息的传达，这就要求网页的设计必须适应受众的视觉在心理和生理上需求的特点[5]。在网页界面中利用图片的视觉优先传播效应，可以形成网页信息传达焦点实现主题信息的快速传递，并且图片是参与深层次语义过程的信息载体，可以大大提高浏览者对于信息接收的记忆程度。网页界面中的图片主要包括照片素材和图形设计两大类别，根据其位置、大小、色调、表现形式等不同，发挥的视觉传达作用而有所不同。
　　照片素材的选用要符合网页主题信息的视觉传达要求，照片受前期拍摄效果的影响一般需要进行裁剪处理;其次应对照片素材的细节部分进行一定降噪处理，通过对其明度和饱和度的处理来减少杂色，最大限度恢复照片的图像拍摄细节;最后还要对照片进行色调的微细调整，使其能够完全融入页面主体色调之中。
　　网页中重要主题的配图一般应进行单独的图片创意设计，根据页面信息主题寻找素材进行图像的再加工处理，搭配简洁醒目的精彩设计文案，可以更好地实现网页主题信息的传达目的和浏览效果。在图片设计框选择范围内选定基础主色调后，每一个融入的设计素材都要做好边缘虚化处理，可以点选其图层作整体选取后，在选择范围上作像素级的收紧和羽化处理后反转选区进行删除处理，可以使素材形象较好地融入主体背景;再者要利用图层蒙版或叠加模式并选择不同的参数设置，做好素材间的融合或透叠的效果处理，实现主题突出丰富多彩的图片效果;最后还要注意图像合成处理时元素的虚实对比处理，通常使用模糊处理以及降低色彩明度、饱和度的方法来实现网页空间感的塑造。
　　3 结语
　　Photoshop在网页图像处理的过程中功能强大而效果多变，设计者要以网页信息的充分视觉传达为设计依据，充分尊重浏览者的阅读习惯以积极营造良好的用户体验;同时不应拘泥于固有的书本参数设置，而是要充分借助计算机图像处理快捷、直观、多变的设计效果。遵循艺术创作规律和形式美法则来多做艺术探索和设计实践，在创意多变中寻求设计统一，实现网页设计的赏心悦目和与众不同。
　　参考文献：
　　[1] 林欢，谭浩，赵江洪.图片优势效应在网页设计中的应用[J].包装工程，2014（9）：13-16.
　　[2] 严晨，杨智坤.网页设计中的功能性与艺术性关系研究[J].科技与出版，2011（6）：59-60.
　　[3] 董海斌，王丽梅，孙浩章.网页界面设计中的平面视觉元素[J].包装工程，2010（4）：89-91.
　　[4] 王心远.网页设计中的色彩应用——以电子产品官方网站为例[J].艺术探索，2014（1）：106-108.
　　[5] 马晓林，陈静文.网页设计的表现特征[J].电影评介，2012（4）：83-85.
　　作者简介：祝晓铭（1977—），男，山东青州人，硕士，工程师，研究方向：计算机网络和网站设计。
　　王艳平（1977—），女，山东青州人，硕士，中学一级教师，研究方向：美术教育。
转载注明来源:https://www.xzbu.com/1/view-15362904.htm