陳瑞英

摘要：在科學(xué)技術(shù)的推動下，網(wǎng)絡(luò)信息技術(shù)發(fā)展迅速，人們對網(wǎng)絡(luò)的依賴性也越來越大，網(wǎng)絡(luò)成了人們工作和生活必不可少的一部分，人們對網(wǎng)站的審美需求也越來越高，對網(wǎng)站的精美設(shè)計也提出了更高的要求。而Photoshop以其獨(dú)特的文字、圖片等處理功能逐漸應(yīng)用到了網(wǎng)頁的設(shè)計中，在網(wǎng)頁設(shè)計中有較多的應(yīng)用。該文主要分析了Photoshop在網(wǎng)頁設(shè)計中的作用，期望能夠充分發(fā)揮Photoshop的功能，提高網(wǎng)頁設(shè)計質(zhì)量。

關(guān)鍵詞：Photoshop;網(wǎng)頁設(shè)計;作用

中圖分類號：TP37? ?文獻(xiàn)標(biāo)識碼：A? ? ? ?文章編號：1009-3044（2018）35-0209-02

1 Photoshop在網(wǎng)頁設(shè)計中的優(yōu)勢

1.1 具有較強(qiáng)的靈活性

Photoshop的靈活性為其在網(wǎng)頁設(shè)計中作用的發(fā)揮創(chuàng)造了條件，能夠在不同的圖層上放置不同的元素，能夠根據(jù)需要進(jìn)行調(diào)整，使網(wǎng)頁設(shè)計更加便利。還能夠在不同的圖層上疊加，使圖層中的元素更加多樣。在圖層上設(shè)置鏈接后能夠使圖層更加具體，不會出現(xiàn)偏差，使設(shè)計者的設(shè)計更加靈活，比其他圖形設(shè)計軟件更加有操作性。

1.2 能夠方便修改

網(wǎng)頁設(shè)計中很少能夠一次成功，需要很多次修改。在Photoshop對網(wǎng)頁進(jìn)行設(shè)計，如果設(shè)計失誤或者對其中的圖片、文字等不滿意可以隨時進(jìn)行點(diǎn)擊修-改，還可以隨意更換顏色，而且還不會對其他圖層產(chǎn)生影響。

1.3 更加便于瀏覽

隨著生活節(jié)奏的加快，人們對網(wǎng)頁的便捷性和美觀性提出了更高的要求，Photoshop的應(yīng)用能讓人們更快地查找出所需要的內(nèi)容，而且更加形象，提高了網(wǎng)頁設(shè)計的價值。例如，在網(wǎng)頁設(shè)計過程中能夠?qū)Χ鄠€元素進(jìn)行統(tǒng)一設(shè)計，提高用戶的關(guān)注度，通過文字、圖片和視頻等讓用戶對網(wǎng)頁中的內(nèi)容有更加深刻的了解，利用鏈接的設(shè)置讓用戶了解更多的內(nèi)容，也節(jié)省了用戶時間，提高了點(diǎn)擊率。

2 Photoshop在網(wǎng)頁設(shè)計中的原則

2.1 畫面方面

Photoshop在網(wǎng)頁設(shè)計中的畫面中的元素進(jìn)行設(shè)計時，要遵循整體性、連貫性、獨(dú)立性和協(xié)調(diào)性。整體性即網(wǎng)頁中的畫面內(nèi)容是一個整體，不能夠分割。連貫性，即頁面內(nèi)容相互聯(lián)系，具有一定的邏輯關(guān)系。獨(dú)立性，即畫面內(nèi)容是相對獨(dú)立的，不受其他內(nèi)容的干擾。協(xié)調(diào)性即整個頁面要符合大眾審美要求。

2.2 造型方面

網(wǎng)頁內(nèi)容主要依靠視覺效果進(jìn)行傳達(dá)，而視覺效果主要依賴造型。在設(shè)計中應(yīng)先降畫面上的元素作為基本要素處理，對其中的點(diǎn)、線、面進(jìn)行優(yōu)化組合，常見的手法有順序。比例等，要根據(jù)具體情況確定。點(diǎn)、線、面的組合能夠突出重要元素、設(shè)計主題，同時也能夠提高網(wǎng)頁的優(yōu)美性，實(shí)現(xiàn)設(shè)計目的。

2.3 色彩方面

色彩能夠喚醒人們的感知意識，例如，看到紅色就會想到太陽，會聯(lián)想到熱情，看到黃色會感覺華貴，白色給人以純潔無瑕之感。不同的色彩承載了人們的不同情感，并隨著人們所在的國家、時代、經(jīng)濟(jì)發(fā)展等不同而不同。因此，在網(wǎng)頁設(shè)計中也要注意色彩的應(yīng)用，根據(jù)網(wǎng)頁所要表達(dá)的內(nèi)容確定一種顏色或顏色組合，提高了網(wǎng)頁的表達(dá)力度。

3 Photoshop在網(wǎng)頁設(shè)計中的應(yīng)用

3.1 網(wǎng)頁刊頭的制作

網(wǎng)頁刊頭包括網(wǎng)頁名稱、Logo等，在網(wǎng)頁設(shè)計中Photoshop能夠?qū)ogo放置在一定的位置，和網(wǎng)頁中的其他內(nèi)容相呼應(yīng)，給人以美的感受。在設(shè)計網(wǎng)頁時應(yīng)將圖片設(shè)為背景圖層，然后再入新的圖層，使用Photoshop中的工具進(jìn)行進(jìn)一步的處理，然后再使用文字工具和顏色填充工具完善其他信息，然后保存即可。

3.2 網(wǎng)頁底紋設(shè)計和有關(guān)按鈕的制作

在網(wǎng)頁設(shè)計過程中，其背景通常是固定的，也可以在對圖像處理后作為網(wǎng)頁的底紋使用，使網(wǎng)頁更加生動。在網(wǎng)頁底紋設(shè)計時，要確保網(wǎng)頁背景圖連接的自然平滑，沒有明顯的拼接情況，打開圖像后，使用濾鏡工具將分割線周圍的圖像進(jìn)行覆蓋制作，對圖像優(yōu)化處理確保圖像的整體效果，如圖1所示。

另外，在網(wǎng)頁設(shè)計中還會經(jīng)常看到很多按鈕，如注冊、登陸等，在使用Photoshop進(jìn)行網(wǎng)頁制作時可以設(shè)計一些簡單的按鈕，還可以對按鈕進(jìn)行美化，提高網(wǎng)頁的美觀和協(xié)調(diào)度，吸引用戶，常見的按鈕有漸變按鈕、動態(tài)按鈕等，如圖2所示。

3 Photoshop切片工具在網(wǎng)頁設(shè)計中的應(yīng)用

只有正確使用Photoshop中的切片工具才能夠?qū)D像進(jìn)行有效整合。要選擇好參考線，確保所切出的圖像的尺寸統(tǒng)一協(xié)調(diào)，避免“留白”或“爆邊”。大的圖像應(yīng)切分均勻，以提高網(wǎng)頁的下載速度。導(dǎo)航也需要進(jìn)行切片后使用。所保存的切片應(yīng)以英文命名，格式應(yīng)為Gif格式。切片的整合時可以使用純顏色代替區(qū)域，能用小圖像的就不用大圖像，切片去要整齊規(guī)整，如圖3所示。

4 Photoshop在網(wǎng)頁設(shè)計中的應(yīng)用技巧

通過上文的敘述可知，Photoshop是一款較為強(qiáng)大的圖像處理軟件，應(yīng)充分掌握Photoshop的使用技巧，創(chuàng)造更加優(yōu)美 、使用的網(wǎng)頁。

4.1 網(wǎng)頁構(gòu)圖

用Photoshop設(shè)計網(wǎng)頁時首先要知道網(wǎng)頁的一些基本常識。網(wǎng)頁主要包括Logo、導(dǎo)航等，為了提高頁面構(gòu)圖的科學(xué)合理，設(shè)計者就需要清除Logo應(yīng)該放在哪里，導(dǎo)航應(yīng)該放在哪。對于用戶來說，他們能夠根據(jù)自己的審美觀判斷網(wǎng)頁是否合理，因?yàn)槿绻麡?gòu)圖不合理的話會讓其感到別扭。常見的網(wǎng)頁布局有方向式布局、曲線式布局。方向式布局又分為水平型、垂直型和斜向型。水平型框架將頁面分為了左右結(jié)構(gòu)，左邊為Logo，右邊是正文，讓人感覺簡單、大方，方便了觀看。垂直型為上下結(jié)構(gòu)，上邊為Logo，下邊為正文。斜向型較為個性，便于讀者瀏覽和操作。曲線式布局較為柔和，讓人感覺充滿了藝術(shù)感，如教育網(wǎng)站、藝術(shù)網(wǎng)站等。在設(shè)計過程中，還應(yīng)充分發(fā)揮參考線的作用對網(wǎng)頁實(shí)行優(yōu)化布局，使用參考線將網(wǎng)頁頁面先分割，然后將內(nèi)容放在分割電商，以吸引用戶的注意，實(shí)現(xiàn)突出的效果，使布局也更加美觀。

4.2? Photoshop對簡單圖像的處理

在確定網(wǎng)頁結(jié)構(gòu)時需要細(xì)致處理圖片，并將其應(yīng)用到網(wǎng)頁設(shè)計中。網(wǎng)頁設(shè)計時通常只用到圖片的某一部分，設(shè)計者就需要掌握截取圖片的技能。在打開Photoshop后，載入原圖片，然后選擇截取工具進(jìn)行截取，同時也可以設(shè)定尺寸，單機(jī)圖片即可，然后將圖片另存為就完成了截圖了。

4.3? Photoshop使圖像背景透明

在使用Photoshop時可以將圖片透明，以讓一張圖片中的人物或事物到另一個背景中，使它們的融合更加和諧，使它們?nèi)跒橐惑w。設(shè)計者打開Photoshop后打開原圖片，使用選取工具選擇圖像，如果是單一顏色的圖片就可以使用魔棒反選，反向選中要保留的圖片。然后再使用同樣的方法保存另一張圖片，然后再新建畫布，選擇“背景內(nèi)容”中的透明，然后粘貼圖片，調(diào)整尺寸后保存圖片。

4.4? Photoshop使圖像融合

在網(wǎng)頁設(shè)計過程中通常需要將兩張圖片融合成一張，使用Photoshop時會更容易。打開Photoshop后打開第一章圖片，然后將另一張圖片拖進(jìn)來，調(diào)整位置，然后將第二張圖片建立蒙版，拖拽兩張圖片的結(jié)合處，使其逐漸黑白漸變，然后調(diào)整透明度，保存圖片。

4.5 Photoshop的特殊字體

在網(wǎng)頁設(shè)計過程中還需要使用一些特殊字體，以體現(xiàn)網(wǎng)站的風(fēng)格，表達(dá)一定的含義。在當(dāng)前的網(wǎng)頁設(shè)計中，單一的字體已難以滿足用戶的需求，用戶更希望看到一些另類的字體，但多數(shù)計算機(jī)都沒有特殊字體，這時就需要在計算機(jī)上安裝，例如，想在圖片上添加“方正清刻本悅宋簡體”，本地計算機(jī)是沒有的，因此就可以在網(wǎng)上下載該字體到電腦上，然后復(fù)制到c盤的Windows文件夾的Fonts的文件中，這樣在使用Photoshop時就會看到字體列表中有了“方正清刻本悅宋簡體”，然后就可以使用。

5 結(jié)束語

隨著互聯(lián)網(wǎng)的發(fā)展，人們在工作和生活中對網(wǎng)絡(luò)的依賴性越來越大，對網(wǎng)頁的整體質(zhì)量也提出了越來越高的要求。網(wǎng)頁設(shè)計者應(yīng)充分利用Photoshop這一款強(qiáng)大的圖像處理軟件，美化網(wǎng)頁，提高網(wǎng)頁的下載速度，提高網(wǎng)頁的點(diǎn)擊率，給用戶更好的體驗(yàn)。本文主要介紹了Photoshop在網(wǎng)頁設(shè)計中的應(yīng)用，并提供了一些簡單的技巧。在Photoshop設(shè)計網(wǎng)頁的過程中，還有很多功能等待我們發(fā)現(xiàn)和使用。

參考文獻(xiàn)：

[1] 張成忠.PhotoShop網(wǎng)頁設(shè)計的技巧研究[J].電腦知識與技術(shù)，2015，11（20）：152-154.

[2] 鄧美玲，李丹.Photoshop在網(wǎng)頁設(shè)計中的作用[J].電子技術(shù)與軟件工程，2015（4）：110.

[3] 鄂義元，姜軼涵.網(wǎng)站開發(fā)中Photoshop的運(yùn)用[J].中央民族大學(xué)學(xué)報：自然科學(xué)版，2014，23（2）：50-54.

[通聯(lián)編輯：聞翔軍]