直 敏

(盤錦職業(yè)技術學院 機電工程系，遼寧 盤錦 124000)

云平臺和Photoshop技術在網(wǎng)站美工設計中的應用

直 敏

(盤錦職業(yè)技術學院 機電工程系，遼寧 盤錦 124000)

針對網(wǎng)站美工設計中出現(xiàn)的布局單一、元素缺失、色彩失調(diào)、動畫粗糙和訪問速率較慢等問題，通過PS技術構(gòu)建了更好的布局策略、更多的實用元素、更和諧的色彩方案以及更精美的動畫；采用云平臺技術構(gòu)建了分布式服務器集群和云存儲預加載模式，提升了網(wǎng)絡的訪問性能，在一定程度上解決了美工網(wǎng)站加載資源過多而造成的速度慢問題.

云平臺；Photoshop技術；美工設計；網(wǎng)站設計

據(jù)統(tǒng)計，到目前為止，全球的網(wǎng)站總數(shù)超過十億個，且有呈指數(shù)增長的態(tài)勢，中國的網(wǎng)站數(shù)量超過四百五十萬個，人們接觸的網(wǎng)站越來越多，信息量也越來越大[1].網(wǎng)站也不再單純聚焦在信息的內(nèi)容上，合理的網(wǎng)站布局也有利于提高網(wǎng)站的訪問量，網(wǎng)站的美觀程度越來越受到用戶的重視，美觀、簡潔、大方的網(wǎng)站更能受到用戶的青睞，從而獲得更多的訪問量，提升知名度[2].Photoshop(簡稱PS)技術由于擁有諸多良好的性能，在網(wǎng)站設計過程中逐步成為了主流的圖形圖像處理、視頻處理工具[3].PS技術對圖像擁有強大的編輯、改編、創(chuàng)作和剪輯能力，通常能夠?qū)D像中的創(chuàng)意變?yōu)楝F(xiàn)實，有利于提升網(wǎng)站美工設計的效率，為大量的創(chuàng)意提供實現(xiàn)的平臺.網(wǎng)站的美工設計往往伴隨著大量的動態(tài)圖像和視頻的加載，常規(guī)的服務器對于這些數(shù)據(jù)的處理過程很慢，而用戶往往耐心不足.因此，在完成網(wǎng)站美工設計以后，還需要考慮服務器的運行能力，以便為不同的用戶提供快速的數(shù)據(jù)處理服務.而在服務器上采用云計算和云存儲技術，則能夠很好地解決這些問題[4].

1 網(wǎng)站美工設計存在的問題

根據(jù)調(diào)查，當前我國的大部分網(wǎng)站都處于美工設計的初級階段，在網(wǎng)站的設計過程中，還存在著較多的問題[5].

(1)布局單一

一般來說，網(wǎng)站的整體布局多種多樣，包括一欄排列、兩欄排列、三欄排列，以圖像為主排列還是以文字為主排列，文字與圖像之間的排列格式是按照環(huán)繞格式還是其他方式.在現(xiàn)代網(wǎng)站設計中，絕大多數(shù)的網(wǎng)站設計都采用一欄排列，而且以文字為主，少許圖像也是單獨出現(xiàn)在屏幕中央，缺少襯托.布局形式單一，使得大多數(shù)用戶容易對網(wǎng)站出現(xiàn)審美疲勞，從而對網(wǎng)站的內(nèi)容也不感興趣，最終導致網(wǎng)站的訪問量降低.

(2)元素缺失

網(wǎng)站是一個整體，由多個網(wǎng)頁組成，網(wǎng)頁中的多個元素在網(wǎng)站中各司其職.但是，為了快速地完成網(wǎng)站設計，網(wǎng)站上通常缺少其中的大多數(shù)元素.雖然很多元素例如頁眉、互動窗口等對于大多數(shù)用戶的用處不大，但是對于特定的用戶，這些元素的應用價值很高.

(3)色彩失調(diào)

色彩失調(diào)的網(wǎng)站不在少數(shù).這樣的網(wǎng)站會給瀏覽者造成不適感，從而導致訪問量減少和網(wǎng)站的知名度逐漸降低.網(wǎng)頁訪問者第一眼看到的色彩將會影響其瀏覽體驗.一般情況下，網(wǎng)站應以暖色調(diào)為主，瀏覽者對于白色背景、黑色文字的色彩適應度較強，且能夠長時間不疲勞.目前，國內(nèi)大部分網(wǎng)站的色彩較為均衡，少數(shù)網(wǎng)站為了追求新穎，在色彩上特立獨行，色彩失調(diào)，使得瀏覽者對于該色彩的疲勞度增加，產(chǎn)生疲勞的時間較短.

(4)動畫粗糙

動畫效果由動態(tài)圖像GIF或者視頻展現(xiàn)是目前許多網(wǎng)站美工設計的主要方式之一.動畫效果能夠在靜態(tài)網(wǎng)頁上提升瀏覽者對網(wǎng)站的興趣，提高網(wǎng)站的訪問量，并在一定時間內(nèi)保證瀏覽者的愉悅感.實際上，目前大多數(shù)網(wǎng)站的動畫設計很粗糙，缺少創(chuàng)意，由于制作時間有限，往往只有一些常見的動畫效果，很容易出現(xiàn)審美疲勞，且長時間重復觀看此類動畫，會在一定程度上降低瀏覽者的忍耐度，甚至會產(chǎn)生反感.粗糙的動畫制作成本低廉，體積龐大，網(wǎng)速不佳的時候還會影響網(wǎng)站的加載速度，從而影響瀏覽者的體驗感.

(5)加載速度慢

網(wǎng)站呈現(xiàn)給瀏覽者的時間也是衡量一個網(wǎng)站水平的根本指標.網(wǎng)站中的元素多種多樣，需要加載各種插件，加入美工設計以后，需要加載更多的動態(tài)圖像GIF以及視頻段，當加載的內(nèi)容增多后，在網(wǎng)速不變的情況下，加載速度不可避免地會變慢.而網(wǎng)站的種類較多，相同內(nèi)容的網(wǎng)站往往有多個，由于用戶對網(wǎng)站的忍耐時間有限，他們通常會選擇加載時間短的網(wǎng)站,所以應該通過技術提升加載速度吸引網(wǎng)民，從而提升網(wǎng)站的競爭力.

2 云平臺與PS技術在網(wǎng)站美工設計中的應用

2.1 云平臺與PS技術

云平臺是近幾年新興的計算平臺，在計算上采用集群分布式，集成了集群上的所有計算資源，讓數(shù)據(jù)處理和文件加載變得更快.云存儲則擁有海量的存儲數(shù)據(jù)能力，若將常用的資源，例如網(wǎng)站加載所需要的動態(tài)圖像和視頻資源進行云存儲，那么在用戶訪問網(wǎng)站的時候就能夠快速預加載這些已經(jīng)在云平臺上存儲的內(nèi)容，用戶在瀏覽過程中的體驗效果也會更佳，流暢度也會更好.云平臺在網(wǎng)站的設計上應用較廣，能夠提高網(wǎng)站的加載速度.而美工設計需要加載的資源較多，應用云平臺能夠很好地完成美工后網(wǎng)站的加載，減少網(wǎng)站瀏覽體驗不佳的現(xiàn)象.

PS軟件是一款專門進行圖像處理的軟件，具有超強的圖像處理功能，能夠讀取絕大多數(shù)的圖像格式并對圖像進行處理，且速度快、精度高、誤差小，這些特點使PS軟件在美工設計中應用廣泛.在Logo設計上、視頻渲染上和動畫制作上，該技術都有成熟的應用，它簡化了開發(fā)過程中的繁瑣操作，大量集成的插件以及圖像處理工具使得該軟件被廣大美工設計者所接受，無論怎樣天馬行空的藝術想像，幾乎都能通過該軟件實現(xiàn).網(wǎng)站的美工設計通過美觀的網(wǎng)頁為瀏覽者提供更好的體驗，使其在享受美感的同時獲得大量直觀的信息，PS技術使這種展現(xiàn)方式成為現(xiàn)實，由此帶來的效果也能夠更直達用戶的內(nèi)心[6].

2.2 云平臺與PS技術解決策略

2.2.1 更好的布局策略

PS技術在布局方面集成了大量的現(xiàn)有布局模板，能夠滿足絕大多數(shù)的設計需求，最大限度地體現(xiàn)美工設計師的構(gòu)思.相比于傳統(tǒng)的Dreamweaver手繪草稿布局結(jié)構(gòu)，PS不但能夠?qū)⒉季中蜗蠡卣宫F(xiàn)給設計師，而且能夠減少布局的設計時間，提升美工設計的效率.另外，PS技術有多層圖層功能，該功能可以讓使用者在每個圖層上放置不同的元素，每個圖層之間是相互獨立的，可以分別放置各自的內(nèi)容，但是圖層間也有許多疊加的方法可供使用，靈活性高、可操作性強，容易實現(xiàn)設計者的想法且不受約束，也比較方便調(diào)整和修改.圖1為PS技術的布局方案圖，可以看出，它有多種模式可以進行布局設計和圖像優(yōu)化.

圖1 PS技術的布局方案圖

2.2.2 更多的實用元素

隨著網(wǎng)站設計的多元化，網(wǎng)頁中的元素越來越多，例如網(wǎng)頁中的導航條、標識、圖標和頁眉、頁腳等，這些元素對于習慣性用戶的作用非常大，通過它能快速地獲取所需的訪問，并在一定程度上為網(wǎng)站特定用戶帶來較多的使用優(yōu)勢.在PS中，設計者可以快速設計出合適的實用元素，并構(gòu)建好模板，很方便在多個網(wǎng)頁中移植應用.由于PS能夠?qū)D像進行美化處理，所以在制作實用元素的過程中，利用PS技術能夠方便、快捷地構(gòu)建出有各種質(zhì)感和效果的元素工具，增強元素的可分辨性，提升瀏覽者的舒適度.豐富的圖像處理模式以及更多實用元素的結(jié)合，能夠為開發(fā)者帶來更多的靈感和創(chuàng)意.

2.2.3 更和諧的色彩方案

當前大多數(shù)網(wǎng)站美工設計的色彩比較單一，而利用PS技術能夠單獨對每個圖層、每個區(qū)域完成色彩的設置，當不同區(qū)域需要的色彩不同時，可以通過疊加多個圖層來完成多種色彩混合的網(wǎng)站設計，并形成設計師所需要的配色方案.另外，PS技術采用了最新的Web安全色功能，該功能可以在色彩方案中設置Web安全顏色、Web安全色相和Web安全色譜，并提供保存安全色彩方案的選項，且該色彩方案的兼容性好.當開發(fā)硬件環(huán)境、操作系統(tǒng)環(huán)境、用戶瀏覽器發(fā)生改變時，該色彩方案不會發(fā)生變化，能完美地契合不同的環(huán)境，為設計者和用戶解除兼容問題的困擾.圖2為PS技術的Web安全色彩方案界面圖.

圖2 PS技術的Web安全色彩方案界面圖

2.2.4 更精巧的動畫設計

動畫設計的最初方式是由采用幀格式的圖像序列組成，這使得設計好的動畫容量較大，加載緩慢，為網(wǎng)站的加載帶來災難性的時間消耗.實際上，對于大多數(shù)美工設計而言，可能不需要聲音和連續(xù)圖像，只需要少量采樣后的連貫圖像即可完成動畫設計.在PS技術中，將圖像保存為GIF格式可將原始動畫進行降采樣，選擇合適的采樣幀組成GIF，并去掉聲音，能夠在保證動畫流暢的基礎上讓動畫的內(nèi)存占比達到最小，從而讓網(wǎng)站加載變得更加流暢.由于該格式的動畫穩(wěn)定性較好，支持各大瀏覽器，為當前網(wǎng)絡設計中比較流行的格式，因此能夠適用于較多的領域.圖3為PS技術的動畫設計界面圖.

圖3 PS技術的動畫設計界面圖

2.2.5 更快速的瀏覽體驗

網(wǎng)站的瀏覽體驗與網(wǎng)站的加載速度有較大關聯(lián).在網(wǎng)站設計中，大量美工的引入不可避免地需要加載更多的圖像和動畫資源，PS技術在保證資源質(zhì)量的基礎上雖然降低了一些資源的大小，但當大量網(wǎng)頁同時加載時，仍需要從服務器端入手，提高資源的加載速度.而采用云平臺構(gòu)建的服務器，能夠很好地結(jié)合云計算服務和云存儲服務，提高網(wǎng)站的加載速度.

(1)云計算通過分布式計算提高計算的效率，在網(wǎng)站實際運行過程中，往往有大量用戶并發(fā)訪問的情況，采用云計算構(gòu)建出集群服務器，在每個服務器上都預加載該網(wǎng)站，當用戶較多時，通過負載均衡策略，將不同區(qū)域的用戶請求提交到離用戶最近、最寬松的服務器上，為用戶提供網(wǎng)頁加載服務；用戶通過瀏覽器也能快速、流暢地獲取網(wǎng)站內(nèi)容，而不會出現(xiàn)卡頓狀態(tài)，可大大提高加載速度.

(2)云存儲將內(nèi)容存儲在云端總服務器上.在網(wǎng)站正式運營過程中，云服務器將相同的網(wǎng)站內(nèi)容分發(fā)給不同的用戶服務器，相同內(nèi)容能夠重復使用，提升資源的利用效率.另外，云端的預加載服務能夠在用戶訪問之前將大量需要重復加載的圖像、動畫等內(nèi)容和網(wǎng)站的整體美工架構(gòu)搭建好，在用戶訪問時，只需要加載當前最新的內(nèi)容即可，這樣就能夠從根本上保證網(wǎng)站加載的流暢度.

圖4為在云平臺上構(gòu)建的美工網(wǎng)站加載流程圖.它針對美工網(wǎng)站需要的大量圖像及動畫形成預加載，在實際訪問時，通過分布式服務器集群解決用戶并發(fā)訪問的問題，能從根本上解決美工設計后網(wǎng)站加載慢的問題，提高用戶的瀏覽流暢度，在一定程度上保證用戶的訪問量.

圖4 云平臺下美工網(wǎng)站加載流程圖

3 結(jié)語

當前網(wǎng)站的設計已由功能瓶頸轉(zhuǎn)化為用戶體驗瓶頸，在用戶體驗瓶頸中最重要的一環(huán)是網(wǎng)站的美工設計和服務器的流暢設計.本文針對現(xiàn)階段網(wǎng)站美工設計過程中出現(xiàn)的布局單一、元素缺失、色彩失調(diào)、動畫粗糙和訪問速率較慢等問題，結(jié)合云平臺和PS技術進行網(wǎng)站的美工設計，有效地解決了這些問題.相信會有越來越多的智能技術應用到網(wǎng)站的美工設計上，為網(wǎng)站的設計者提供更精準的設計服務，也為網(wǎng)站的瀏覽者提供更流暢的瀏覽服務.

[1] 宋雙榮.試析Photoshop在網(wǎng)站美工建設中的應用[J].科教導刊：電子版(下旬),2015(10):156-156.

[2] 翟英杰.基于ASP的動態(tài)網(wǎng)站開發(fā)設計[J].電腦知識與技術,2012,8(11):2489-2491.

[3] 黃琳.論如何將電子“商”務融入到Photoshop課程的教學中[J].科教文匯,2013(28):74，85.

[4] 韓杰，馮駿，肖巖軍，等.建設laaS模式的可信網(wǎng)站云平臺[J].計算機安全，2014(11):40-44.

[5] 劉薇,范冰冰.云環(huán)境下建站技術的研究與比較[J].現(xiàn)代計算機：專業(yè)版,2014(20):49-53.

[6] 張靚，范冰冰，鄭偉平，等.云平臺應用系統(tǒng)遷移方法的研究[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-)，女，遼寧盤錦人，盤錦職業(yè)技術學院講師，碩士，研究方向:程序設計、平面設計.

1009-4873(2016)06-0046-04

TP393.092

：A