SCI论文（www.lunwensci.com）
摘 要 ：随着网络信息化时代的到来,网站成为人们进行交流沟通,获取信息数据的重要载体和平台,但随着人们审美要 求的不断提升,不仅对网站的功能性提出了要求,同时对于网站的审美要求也越来越高。基于此,本文探讨图形图像处理软件 在 Web 前端设计中运用的重要价值,介绍了 Web 前端设计中常用的图像图形处理技术,提出 Web 前端设计中图形图像处理 软件的应用方法,希望为 Web 前端设计生动美观性提供一些有价值的参考。
关键词： 图形图像处理软件,Web 前端设计,Banner 设计,Photoshop 软件
Application of Graphics and Image Processing Software in Web Front End Design
WANG Wenzhu
(Liaoning Vocational University of Technology, Jinzhou Liaoning 121007)
【Abstract】： With the advent of the network information age, the website becomes a place for people to communicate, important carriers and platforms for obtaining information and data, but with the continuous improvement of people's aesthetic requirements, it not only requires the functionality of the website, at the same time, the aesthetic requirements for websites are getting higher and higher. Based on this, this paper discusses the important value of graphics and image processing software in Web front-end design, this paper introduces the common image and graphics processing technologies in Web front-end design, the application method of graphics and image processing software in Web front-end design is proposed, hope to provide some valuable reference for the vivid and beautiful design of the Web front-end.
【Key words】： graphic and image processing software;Web front-end design;Banner design;Photoshop software
引言：在 Web 前端设计中可以很好地将网站中的信息进 行最直观的表达, 所以, 在进行 Web 前端设计时要充 分借助于图形图像处理软件来进行整体布局、Banner 设计、Buttion 设计以及 Logo 设计等,以此来让 Web 前端设计的功能性和艺术审美性更好地体现出来。图形 图像处理软件在 Web 前端设计中的应用主要是通过合 理的平面构图来对整个 Web 结构、功能布局、艺术表 现等进行充分体现,以此来实现将网页中内容进行视觉 传播,提高网页艺术感染力和冲击力的目的。同时,借 助于图形图像处理技术还可以大大提升 Web 前端设计 中网页的加载速度,让整个 Web 前端设计更加符合规 范化的设计标准,大大提升用户的使用体验感。
1 图形图像处理软件在 Web 前端设计中运用的重要价值
在 Web 前端设计中利用图形图像处理软件可以很 好地对设计中出现的问题进行解决。同时,图形图像 处理软件并不单指一种软件,其包括了多种不同的软 件,每一种软件中的工具、功能和素材也非常丰富,利 用这些工具、功能、素材等可以更好地保障 Web 前端 设计的效果。比如, Web 前端设计人员在进行设计中 利用图形图像处理软件更好地将自己的设计理念和想法 进行艺术创造,呈现出最好的效果 [1]。另外,在以往的 Web 前端设计中,设计主题和颜色并不能很好地体现 出来,这也是传统设计中固有的一种局限,但是,利用 图形图像处理软件可以更好地将设计者真实想法进行创 新设计,呈现出完美的艺术效果,同时也让整个 Web前端设计更加具有创新性和艺术性。
2 Web 前端设计中常用图像图形处理技术介绍
2.1 Photoshop 软件
在 Web 前端设计中, Photoshop 软件是一种应用 频率非常的高图形图像处理软件,其最明显突出的功能 是对各种不同的图像进行处理,同时也可以通过该软件 来制作出设计者所需要的各种图像效果。在进行 Web 前端设计中,借助于 Photoshop 软件可以进行网站页 面的整体布局,同时结合网页的整体布局和风格来设计 符合整个页面的美学元素,并且还可以进行图像效果的 处理和色彩的搭配,让整个网页形成一幅优美的艺术作 品,这样在满足网站用户功能需求的同时,也可以满足 用户的审美需求。另外,在进行 Web 布局设计时,利 用 Photoshop 图形处理软件中的图层功能可以将网页 中的各个元素进行整合,并且还可以对这些元素进行单 独性的调整、优化,同时,还可以对这些单独的元素进 行不同格式、大小、分辨率的调整,从而使整个网页的 色彩在不同显卡、显示器中呈现出最美画面,保证色彩 不失真,也可以让整个 Web 前端设计更加方便快捷。
2.2 Fireworks 软件
Fireworks 软件是一种专门性的辅助 Web 前端设计 的图形软件,利用该软件可以进行网页图像从无到有地 创建, 同时 Fireworks 中还自带网页设计资源库, Web 前端设计者可以从资源库中下载所需要的设计资源,更 好地完成 Web 前端设计和制作。另外, Frieworks 在 进行 Web 前端设计中, 可以利用切片工具、动画制作 工具、图像优化工具来进行网页设计,同时,利用其网 页图像格式优化面板来将网页进行分割处理,并转化 成 PNG、GIF 和 JPEG 等 不 同 格 式 [2]。 此 外, 在 该 软 件中还可以对图像的颜色进行参数设置,压缩图形图像 文件的大小。Fireworks 软件在 Web 前端设计中的应 用还可以在网页中添加一些链接跳转功能,可以进行图 像动态制作、显示,将多个图片进行显示帧设计,最后 生成动画效果。总之,在 Web 前端设计中 Fireworks 图形图像处理软件有着非常明显的优势,甚至可以说 Fireworks 软件是 Web 前端设计必不可少的软件。
2.3 Illustrator 软件
Illustrator 软件是一款专业性的绘图软件,同时 该软件还有图像处理、插画绘制、排版以及网页制作功 能。Illustrator 最为突出的特点是可以利用塞尔曲线来 进行矢量图的绘制,可以绘制出各种不同的矢量图形。 在进行 Web 前端设计时,利用 Illustrator 软件图形制 作功能可以设计出图像阴影、色彩渐变、个性化字体设计等效果,将这些效果应用到网页设计中可以让整个网 页画面的个性化更强。在 Web 前端设计中, 渐变效果 可以让整个网页的视觉效果更加突出,从而吸引用户的 眼球。另外, 利用 Illustrator 软件中的光栅化工具还 可以设计出各种不同的阴影效果,实现多种不同的、个 性化的艺术字效果,将设计者在艺术字设计中的思想进 行很好的体现。
3 Web 前端设计中图形图像处理软件应用方法
3.1 页面布局设计制作方法
在 Web 前端设计页面布局制作中需要进行 Logo、 页面内容分区、导航栏、说明内容分区等多个部分的设 计制作。在此过程中,可以利用 Fireworks 软件来进 行设计制作。首先,要先按照网页设计页面尺寸来建立 合适的页面,在此过程中会按照显示器尺寸大小来进行 页面尺寸的确定。其次,结合网页设计的主题和内容 来将整个页面划分为左右框架结构、集中式结构、拐 角型结构等,一般来说,在进行内容布局划分时会按 照人们的视觉特征来进行布局划分,大多是以从左到 右,从上到下的浏览习惯来进行布局,这样就可以将网 页页面划分为多个不同等级的感知区域,如表 1 所示。 Fireworks 软件还可以提供参考线辅助,这样设计者 在进行 Web 前端设计时,利用参考线来对整个网页的 版面进行合理规划,而不需要将所有的内容进行区域填 充,大大节省了设计时间,同时还可以按照区域内容来 进行切片处理,然后生成网页可编辑的多个元素,构建 一幅完整的网页画面 [3]。
3.2 导航栏设计制作方法
网页中的导航栏主要的作用是引导用户进行网站浏 览,所以,通常导航栏是整个页面中最为突出的明显的 区域。不仅需要在网页明显的位置,同时还要在色彩、 形状等设计方面进行重点突出。很多设计者在进行导航 栏设计制作时常常会利用 Potoshop 软件来进行设计制 作,利用图层工具来进行导航栏各个元素的设计,同时 利用滤镜工具来构建生动化和立体化的导航栏,在满足 吸引用户注意力的同时还可以让其艺术效果更加突出。
3.3 Logo 的设计制作方法
Web 前端设计中, Logo 设计是网站标志设计, 其主 要作用是体现网站的品牌和理念, 同时还是网站内容的浓 缩,所以,很多 Web 前端设计人员非常重视 Logo 的设 计。从 Logo 设计制作的本身来说,其应用范围并不能 局限于网页本身中,同时还可以在其他领域进行应用。 在进行 Logo 设计制作时,常用的软件为 Illustrator 软 件, 利用赛尔曲线来绘制 Logo 的图像,或者是艺术字 体 Logo,利用艺术字体的方式来将网站的设计理念和 内容进行表达。先利用 Illustrator 的赛尔曲线勾勒出 Logo 的基本形状;然后,再利用剪刀工具来对形状进 行编辑调整;最后,利用颜色工具来进行 Logo 色彩的 填充,提升 Logo 的艺术效果。
3.4 图像尺寸和规格的处理方法
Web 前端设计的版面是有限的,所以,在将图形 图像插入页面中需要对图像图形的尺寸和规格进行调 整,保障其尺寸规格的大小合适。一般来说,图形图像 大多是以像素单位为标准的,要求的格式可以为 JPEG 格式、PNG 格式和 GIF 格式,其中 GIF 格式是一种动 态图像格式,在进行网页上传中可以直接利用;PNG 格 式比较适合简单的背景图像;而 JPEG 格式可以作为复 杂背景图像应用 [4]。所以,需要按照网页设计的需求来 选择图形图像的存储格式,并在此过程中,选择合适的 分辨率,保障图形图像在网页中达到清晰美观的画面。 3.5 图像融合处理方法
在进行 Web 前端设计中, 借助于 Photoshop 软件 的图层处理工具可以让图形图像的效果和空间感更加突 出,艺术效果更明显。因此,在进行图像效果处理时, 可以借助于 Photoshop 软件中图像色彩饱和度、亮度、 色相等工具来对每个图层中的图像进行调整,从而使其 达到一种完美的结合; 同时,还可以借助于渐变工具和 蒙版工具来将各个图层的图像边缘进行融合消除,从而 更好地让不同图层中的图像得到充分融合,提升整个画 面的艺术效果。
3.6 色彩搭配处理方法
在进行 Web 前端设计的过程中,色彩搭配设计是 体现创意和效果的重要组成部分。网页中内容的显示是 通过显示设备来体现的,不同的显示器和显卡会呈现出 不同的色彩效果,所以,在网页设计的过程中,需要设 置安全色标准,这样可以在不同显示设备中呈现完整的 色彩效果。通常 Web 前端设计中包括了 216 安全色彩,颜色呈现是通过 16 进制方式呈现的。并且,在 Web 前 端设计中,为了更好地将网页的主题和重要内容凸显 出来,在进行颜色选择的过程中要以颜色的色彩值为标 准,选择一致的颜色,这样就可以减少色彩失真的问 题,从而更好地提高用户的浏览舒适度。
3.7 视频设计制作方法
Web 前 端 设 计 中 不 仅 包 括 了 图 片 内 容、 文 字 内 容,同时还包括了视频内容。在进行视频制作的过程 中,很多人会想到利用 Premiere 软件,或者是 After Effects 等类似的视频制作软件来进行视频制作,但是, 利用 Photoshop 软件也可以进行简单视频的制作,也 就是网页设计制作中常用的 GIF 动态图画。在进行制 作时,首先要点击进入到动感模式,之后构建新的文 件,这里新建的文件是电影影片格式 [5]。在新建文件构 建完成后,利用时间轴来进行新视频的创建,把需要的 图片信息拖入到视频系统中,然后对帧频进行调整来达 到所需的要求,将图片位置进行平移、旋转、调整图片 的大小,而图片位置、大小、角度的调整就是一个动态 过程,也是 GIF 动态图画的播放路径,在动态图画创 设结束之后,将文件导出并设置成 GIF 格式,这样一 个简单的 GIF 网站动态视频就制作完成,将其应用到 Web 前端设计中来提升网页设计的艺术效果。
4 结语
综上所述,在进行 Web 前端设计过程中,对各种 图形和图像进行处理是非常重要的,其是保障网页设计 功能性和美观性的重要途径。在进行 Web 前端设计时 要合理利用图形图像处理技术对整个页面结构布局进行 调整优化,以提升页面的美感,提高用户浏览网站的体 验感,从而提升网站的点击率。
参考文献
[1] 陈恬雨 .Photoshop在网页设计中的技巧及运用研究[J].信 息记录材料,2020.21(12):206-207.
[2] 智慧 .Photoshop在网页设计中的作用[J].数码世界,2019 (8):106-107.
[3] 王清 .计算机图像处理技术在网页设计中的应用[J].无线互 联科技,2022.19(8):91-92.
[4] 刘红勤 .Photoshop在网页制作中的应用研究[J].信息与电 脑(理论版),2018(1):104-105+108.
[5] 孙雪 .Photoshop在网页制作中的运用[J].信息系统工程, 2020(10):23-24.
关注SCI论文创作发表，寻求SCI论文修改润色、SCI论文代发表等服务支撑，请锁定SCI论文网！
文章出自SCI论文网转载请注明出处：https://www.lunwensci.com/jisuanjilunwen/63567.html
