云平台和Photoshop技术在网站美工设计中的应用

直 敏

(盘锦职业技术学院 机电工程系，辽宁 盘锦 124000)

云平台和Photoshop技术在网站美工设计中的应用

直 敏

(盘锦职业技术学院 机电工程系，辽宁 盘锦 124000)

针对网站美工设计中出现的布局单一、元素缺失、色彩失调、动画粗糙和访问速率较慢等问题，通过PS技术构建了更好的布局策略、更多的实用元素、更和谐的色彩方案以及更精美的动画；采用云平台技术构建了分布式服务器集群和云存储预加载模式，提升了网络的访问性能，在一定程度上解决了美工网站加载资源过多而造成的速度慢问题.

云平台；Photoshop技术；美工设计；网站设计

据统计，到目前为止，全球的网站总数超过十亿个，且有呈指数增长的态势，中国的网站数量超过四百五十万个，人们接触的网站越来越多，信息量也越来越大[1].网站也不再单纯聚焦在信息的内容上，合理的网站布局也有利于提高网站的访问量，网站的美观程度越来越受到用户的重视，美观、简洁、大方的网站更能受到用户的青睐，从而获得更多的访问量，提升知名度[2].Photoshop(简称PS)技术由于拥有诸多良好的性能，在网站设计过程中逐步成为了主流的图形图像处理、视频处理工具[3].PS技术对图像拥有强大的编辑、改编、创作和剪辑能力，通常能够将图像中的创意变为现实，有利于提升网站美工设计的效率，为大量的创意提供实现的平台.网站的美工设计往往伴随着大量的动态图像和视频的加载，常规的服务器对于这些数据的处理过程很慢，而用户往往耐心不足.因此，在完成网站美工设计以后，还需要考虑服务器的运行能力，以便为不同的用户提供快速的数据处理服务.而在服务器上采用云计算和云存储技术，则能够很好地解决这些问题[4].

1 网站美工设计存在的问题

根据调查，当前我国的大部分网站都处于美工设计的初级阶段，在网站的设计过程中，还存在着较多的问题[5].

(1)布局单一

一般来说，网站的整体布局多种多样，包括一栏排列、两栏排列、三栏排列，以图像为主排列还是以文字为主排列，文字与图像之间的排列格式是按照环绕格式还是其他方式.在现代网站设计中，绝大多数的网站设计都采用一栏排列，而且以文字为主，少许图像也是单独出现在屏幕中央，缺少衬托.布局形式单一，使得大多数用户容易对网站出现审美疲劳，从而对网站的内容也不感兴趣，最终导致网站的访问量降低.

(2)元素缺失

网站是一个整体，由多个网页组成，网页中的多个元素在网站中各司其职.但是，为了快速地完成网站设计，网站上通常缺少其中的大多数元素.虽然很多元素例如页眉、互动窗口等对于大多数用户的用处不大，但是对于特定的用户，这些元素的应用价值很高.

(3)色彩失调

色彩失调的网站不在少数.这样的网站会给浏览者造成不适感，从而导致访问量减少和网站的知名度逐渐降低.网页访问者第一眼看到的色彩将会影响其浏览体验.一般情况下，网站应以暖色调为主，浏览者对于白色背景、黑色文字的色彩适应度较强，且能够长时间不疲劳.目前，国内大部分网站的色彩较为均衡，少数网站为了追求新颖，在色彩上特立独行，色彩失调，使得浏览者对于该色彩的疲劳度增加，产生疲劳的时间较短.

(4)动画粗糙

动画效果由动态图像GIF或者视频展现是目前许多网站美工设计的主要方式之一.动画效果能够在静态网页上提升浏览者对网站的兴趣，提高网站的访问量，并在一定时间内保证浏览者的愉悦感.实际上，目前大多数网站的动画设计很粗糙，缺少创意，由于制作时间有限，往往只有一些常见的动画效果，很容易出现审美疲劳，且长时间重复观看此类动画，会在一定程度上降低浏览者的忍耐度，甚至会产生反感.粗糙的动画制作成本低廉，体积庞大，网速不佳的时候还会影响网站的加载速度，从而影响浏览者的体验感.

(5)加载速度慢

网站呈现给浏览者的时间也是衡量一个网站水平的根本指标.网站中的元素多种多样，需要加载各种插件，加入美工设计以后，需要加载更多的动态图像GIF以及视频段，当加载的内容增多后，在网速不变的情况下，加载速度不可避免地会变慢.而网站的种类较多，相同内容的网站往往有多个，由于用户对网站的忍耐时间有限，他们通常会选择加载时间短的网站,所以应该通过技术提升加载速度吸引网民，从而提升网站的竞争力.

2 云平台与PS技术在网站美工设计中的应用

2.1 云平台与PS技术

云平台是近几年新兴的计算平台，在计算上采用集群分布式，集成了集群上的所有计算资源，让数据处理和文件加载变得更快.云存储则拥有海量的存储数据能力，若将常用的资源，例如网站加载所需要的动态图像和视频资源进行云存储，那么在用户访问网站的时候就能够快速预加载这些已经在云平台上存储的内容，用户在浏览过程中的体验效果也会更佳，流畅度也会更好.云平台在网站的设计上应用较广，能够提高网站的加载速度.而美工设计需要加载的资源较多，应用云平台能够很好地完成美工后网站的加载，减少网站浏览体验不佳的现象.

PS软件是一款专门进行图像处理的软件，具有超强的图像处理功能，能够读取绝大多数的图像格式并对图像进行处理，且速度快、精度高、误差小，这些特点使PS软件在美工设计中应用广泛.在Logo设计上、视频渲染上和动画制作上，该技术都有成熟的应用，它简化了开发过程中的繁琐操作，大量集成的插件以及图像处理工具使得该软件被广大美工设计者所接受，无论怎样天马行空的艺术想像，几乎都能通过该软件实现.网站的美工设计通过美观的网页为浏览者提供更好的体验，使其在享受美感的同时获得大量直观的信息，PS技术使这种展现方式成为现实，由此带来的效果也能够更直达用户的内心[6].

2.2 云平台与PS技术解决策略

2.2.1 更好的布局策略

PS技术在布局方面集成了大量的现有布局模板，能够满足绝大多数的设计需求，最大限度地体现美工设计师的构思.相比于传统的Dreamweaver手绘草稿布局结构，PS不但能够将布局形象化地展现给设计师，而且能够减少布局的设计时间，提升美工设计的效率.另外，PS技术有多层图层功能，该功能可以让使用者在每个图层上放置不同的元素，每个图层之间是相互独立的，可以分别放置各自的内容，但是图层间也有许多叠加的方法可供使用，灵活性高、可操作性强，容易实现设计者的想法且不受约束，也比较方便调整和修改.图1为PS技术的布局方案图，可以看出，它有多种模式可以进行布局设计和图像优化.

图1 PS技术的布局方案图

2.2.2 更多的实用元素

随着网站设计的多元化，网页中的元素越来越多，例如网页中的导航条、标识、图标和页眉、页脚等，这些元素对于习惯性用户的作用非常大，通过它能快速地获取所需的访问，并在一定程度上为网站特定用户带来较多的使用优势.在PS中，设计者可以快速设计出合适的实用元素，并构建好模板，很方便在多个网页中移植应用.由于PS能够对图像进行美化处理，所以在制作实用元素的过程中，利用PS技术能够方便、快捷地构建出有各种质感和效果的元素工具，增强元素的可分辨性，提升浏览者的舒适度.丰富的图像处理模式以及更多实用元素的结合，能够为开发者带来更多的灵感和创意.

2.2.3 更和谐的色彩方案

当前大多数网站美工设计的色彩比较单一，而利用PS技术能够单独对每个图层、每个区域完成色彩的设置，当不同区域需要的色彩不同时，可以通过叠加多个图层来完成多种色彩混合的网站设计，并形成设计师所需要的配色方案.另外，PS技术采用了最新的Web安全色功能，该功能可以在色彩方案中设置Web安全颜色、Web安全色相和Web安全色谱，并提供保存安全色彩方案的选项，且该色彩方案的兼容性好.当开发硬件环境、操作系统环境、用户浏览器发生改变时，该色彩方案不会发生变化，能完美地契合不同的环境，为设计者和用户解除兼容问题的困扰.图2为PS技术的Web安全色彩方案界面图.

图2 PS技术的Web安全色彩方案界面图

2.2.4 更精巧的动画设计

动画设计的最初方式是由采用帧格式的图像序列组成，这使得设计好的动画容量较大，加载缓慢，为网站的加载带来灾难性的时间消耗.实际上，对于大多数美工设计而言，可能不需要声音和连续图像，只需要少量采样后的连贯图像即可完成动画设计.在PS技术中，将图像保存为GIF格式可将原始动画进行降采样，选择合适的采样帧组成GIF，并去掉声音，能够在保证动画流畅的基础上让动画的内存占比达到最小，从而让网站加载变得更加流畅.由于该格式的动画稳定性较好，支持各大浏览器，为当前网络设计中比较流行的格式，因此能够适用于较多的领域.图3为PS技术的动画设计界面图.

图3 PS技术的动画设计界面图

2.2.5 更快速的浏览体验

网站的浏览体验与网站的加载速度有较大关联.在网站设计中，大量美工的引入不可避免地需要加载更多的图像和动画资源，PS技术在保证资源质量的基础上虽然降低了一些资源的大小，但当大量网页同时加载时，仍需要从服务器端入手，提高资源的加载速度.而采用云平台构建的服务器，能够很好地结合云计算服务和云存储服务，提高网站的加载速度.

(1)云计算通过分布式计算提高计算的效率，在网站实际运行过程中，往往有大量用户并发访问的情况，采用云计算构建出集群服务器，在每个服务器上都预加载该网站，当用户较多时，通过负载均衡策略，将不同区域的用户请求提交到离用户最近、最宽松的服务器上，为用户提供网页加载服务；用户通过浏览器也能快速、流畅地获取网站内容，而不会出现卡顿状态，可大大提高加载速度.

(2)云存储将内容存储在云端总服务器上.在网站正式运营过程中，云服务器将相同的网站内容分发给不同的用户服务器，相同内容能够重复使用，提升资源的利用效率.另外，云端的预加载服务能够在用户访问之前将大量需要重复加载的图像、动画等内容和网站的整体美工架构搭建好，在用户访问时，只需要加载当前最新的内容即可，这样就能够从根本上保证网站加载的流畅度.

图4为在云平台上构建的美工网站加载流程图.它针对美工网站需要的大量图像及动画形成预加载，在实际访问时，通过分布式服务器集群解决用户并发访问的问题，能从根本上解决美工设计后网站加载慢的问题，提高用户的浏览流畅度，在一定程度上保证用户的访问量.

图4 云平台下美工网站加载流程图

3 结语

当前网站的设计已由功能瓶颈转化为用户体验瓶颈，在用户体验瓶颈中最重要的一环是网站的美工设计和服务器的流畅设计.本文针对现阶段网站美工设计过程中出现的布局单一、元素缺失、色彩失调、动画粗糙和访问速率较慢等问题，结合云平台和PS技术进行网站的美工设计，有效地解决了这些问题.相信会有越来越多的智能技术应用到网站的美工设计上，为网站的设计者提供更精准的设计服务，也为网站的浏览者提供更流畅的浏览服务.

[1] 宋双荣.试析Photoshop在网站美工建设中的应用[J].科教导刊：电子版(下旬),2015(10):156-156.

[2] 翟英杰.基于ASP的动态网站开发设计[J].电脑知识与技术,2012,8(11):2489-2491.

[3] 黄琳.论如何将电子“商”务融入到Photoshop课程的教学中[J].科教文汇,2013(28):74，85.

[4] 韩杰，冯骏，肖岩军，等.建设laaS模式的可信网站云平台[J].计算机安全，2014(11):40-44.

[5] 刘薇,范冰冰.云环境下建站技术的研究与比较[J].现代计算机：专业版,2014(20):49-53.

[6] 张靓，范冰冰，郑伟平，等.云平台应用系统迁移方法的研究[J].计算机科学，2013,40(z1):271-275.

责任编辑：金 欣

The cloud platform and Photoshop technology at website aesthetics

ZHI Min

(Department of Electrics and Mechanics, Panjin Vocational Technology College, Panjin, Liaoning 124000, China)

The paper aims at solving the bottleneck of website graphic designing, single layouts, missing elements, color imbalance, rough animation and slow access. It also provides aesthetic layouts, delicate designs, richer color, smaller, more accurate and exquisite animations through Photoshop technology. Cloud platform is also used to build distributed server clusters and cloud storage preload modes so that the network access performance is promoted, thus solving the slow access speed caused by massive loading to some extent.

cloud platform; Photoshop technology; artistic design; website

2016-11-15

直 敏(1979-)，女，辽宁盘锦人，盘锦职业技术学院讲师，硕士，研究方向:程序设计、平面设计.

1009-4873(2016)06-0046-04

TP393.092

：A