秦平易

摘要：Photoshop是當前最為出名的圖像處理軟件之一，在圖形圖像及輸入輸出方面表現(xiàn)精確而細致，不但在數(shù)碼照片處理、廣告攝影、視覺創(chuàng)意、平面設(shè)計、藝術(shù)文字和建筑效果圖后期修飾等領(lǐng)域廣泛應(yīng)用，而且在網(wǎng)頁設(shè)計方面也有出色表現(xiàn)。本文主要介紹Photoshop在網(wǎng)頁設(shè)計中的應(yīng)用情況，希望能給網(wǎng)頁設(shè)計者提供些許參考。

關(guān)鍵詞：Photoshop;網(wǎng)頁設(shè)計;布局;色彩

近年來，隨著信息技術(shù)帶來經(jīng)濟社會的高速發(fā)展，已經(jīng)邁入了互聯(lián)網(wǎng)+的新時代。無論是電商、微商，還是企事業(yè)單位，網(wǎng)站、網(wǎng)頁都成為了解信息和熱點的主要窗口。日常辦公、購物、交流、閱讀，都離不開悅目、友好的界面。網(wǎng)頁設(shè)計環(huán)節(jié)迅速被重視起來。而Photoshop在界面和創(chuàng)意設(shè)計的優(yōu)異表現(xiàn)，讓Photoshop備受青睞。

1 網(wǎng)頁色彩應(yīng)用

1.1 色彩模式介紹

在網(wǎng)頁設(shè)計時，比較常用的色彩模式有兩種：RGB顏色模式和索引顏色模式（也稱Indexed顏色模式），幾乎所有的網(wǎng)頁圖像都是在RGB顏色模式下開發(fā)出來的，這種模式非常適合顯示器等投放設(shè)備顯示。而索引顏色模式下的文件只有8位色彩深度、256種顏色，有效控制圖像文件的大小，非常利于網(wǎng)上傳輸，但不適合顏色豐富的圖像。

1.2 色彩搭配原則

色彩搭配是專業(yè)性較強的工作，除考慮網(wǎng)頁自身特點外，還要遵循一些設(shè)計原則。要達到對比強烈、鮮明，可以采用高明度和高純度的色彩刺激視覺，適用于餐飲行業(yè)，麥當勞、肯德基等跨國連鎖餐飲公司就是典型案例之一;要達到特別的感覺，可以采用黑色和金色搭配，會備感高貴，如略加深紅或者紫色，更添柔美質(zhì)感，典型案例：法國蘭蔻、雅詩蘭黛和香奈兒等世界知名美妝品牌;欲舒適協(xié)調(diào)的效果，可以優(yōu)選藍色或者粉（紅）色，藍色體現(xiàn)理性與專業(yè)，粉（紅）色正好凸顯浪漫與唯美，典型案例：大寶、相宜本草等品牌;而藝術(shù)風格，多追求最原始的元素表達，如水墨、粗布、老城墻等，立足傳統(tǒng)而打破傳統(tǒng)，大膽創(chuàng)新。

1.3 配色能力培養(yǎng)

首先，學習網(wǎng)頁色彩搭配理論和應(yīng)用技巧。其次，有針對性地鑒賞、模擬色彩功能劃分明確的知名案例。最后，要善于觀察生活，體會細節(jié)，豐富閱歷。

2 網(wǎng)頁布局和構(gòu)成

在使用Photoshop設(shè)計網(wǎng)頁時，視覺效果好不好，還要考慮網(wǎng)頁元素的合理布局和結(jié)構(gòu)設(shè)計。

2.1 網(wǎng)頁布局

網(wǎng)頁布局實際就是首頁和其他頁的結(jié)構(gòu)形式，一般來說，主頁和其他頁的布局形式是不相同的。頁面的主題和內(nèi)容決定采用何種布局形式。常見結(jié)構(gòu)有通欄（一分欄）、二分欄、三分欄和四分欄，四分欄相對少見，適合局部應(yīng)用。分欄式的布局相對規(guī)范，中規(guī)中矩，缺乏創(chuàng)意，適合政府、學校、企業(yè)等方向的網(wǎng)頁設(shè)計。還有區(qū)塊化型、四方型、T型、全圖封面型及框架型，而最終的布局選擇，還要取決于設(shè)計的主題和具體內(nèi)容。

2.2 網(wǎng)頁構(gòu)成

眾所周知，無論物體結(jié)構(gòu)如何，都是由基本的點、線、面組成的。頁面上元素的視覺效果也是如此，點元素形狀不固定，既可以是規(guī)則排列，也可以不規(guī)則排列。點有集中、吸引視線的作用，適用于表現(xiàn)節(jié)奏感和聚焦感。在Photoshop畫圖工具里，各種筆觸樣式極為豐富。線的種類有很多，如直線、折線、曲線、幾何線等;直線象征平實、挺拔、平穩(wěn)和速度;曲線則給人平滑、柔和、優(yōu)雅和婉轉(zhuǎn)的感覺。在Photoshop的工具箱里，有專門的繪制直線的工具和編輯曲線的工具。大量的點和封閉的線組成網(wǎng)頁中的面，在Photoshop中，無論是圓形、方形，還是不規(guī)則形狀都可以輕松繪制出來，并加以編輯修改。將點、線、面疊加使用時，面會成為視覺的中心，點和線則起陪襯和修飾的作用，視覺沖擊效果一強一弱，產(chǎn)生強烈的對比和空間感。

3 網(wǎng)頁文字和圖像

3.1 網(wǎng)頁文字

文字是網(wǎng)頁上重要元素之一，它首先是信息主要載體，其次是文字的顏色、外形和結(jié)構(gòu)等產(chǎn)生的視覺效果。在網(wǎng)頁上的文字大概分為兩類：信息類和特效類，信息類文字以傳達信息為主要任務(wù)，對文字效果要求不高;特效類文字則是視覺表達效果和信息載體結(jié)合的產(chǎn)物。我們希望在表達信息的同時，也考慮裝飾、點綴一下網(wǎng)頁，那么就可以對文字進行特效處理。文字顏色方面，高對比度的文字色彩和背景顏色，使閱讀較容易，識別度高，通常柔和的背景色搭配深色文字，深色背景則適合淺色文字，這樣看起來更自然、舒服。

3.2 網(wǎng)頁圖像

圖像是網(wǎng)頁元素中重要的視覺語言，它直觀、生動、容易理解。目前網(wǎng)絡(luò)上主流圖像格式有：PNG圖像、JPEG圖像和GIF圖像等，各自都有不同的特點和適用的范圍。Photoshop在處理純色、漸變色、圖片方面表現(xiàn)出色，如網(wǎng)頁中漸變背景色，使網(wǎng)頁具有柔和、自然之美，增加了立體感。大幅圖片的網(wǎng)頁設(shè)計表達形式，往往給人一種藝術(shù)氣息和較好的視覺效果。

4 UI設(shè)計應(yīng)用

UI即User Interface（用戶界面）的簡稱，指人機交互的定制界面，實現(xiàn)操作快捷、界面美觀的整體設(shè)計。好的UI設(shè)計不僅個性有品味，而且操作的時候更舒適、簡單、友好。根據(jù)主題內(nèi)容，使用Photoshop設(shè)計出效果圖，最后使用“切片工具”把圖像進行合理的分割。生成客戶所需界面的過程，就是UI設(shè)計。UI設(shè)計也廣泛應(yīng)用于軟件、游戲開發(fā)等領(lǐng)域。

5 結(jié)語

Photoshop立足于圖形圖像處理技術(shù)，功能完善而強大、效果突出，在網(wǎng)頁視覺效果設(shè)計中發(fā)揮著重要作用。那么，掌握Photoshop處理手法及色彩使用技巧，充分發(fā)揮想象空間，善觀察、品味生活，敲開創(chuàng)意思維之門，是每一位設(shè)計者的必經(jīng)之路。其難點不是Photoshop如何使用編輯，而是怎樣把好的創(chuàng)意淋漓盡致地展示給觀眾。

參考文獻：

[1]謝劍，楊衛(wèi)紅.網(wǎng)頁設(shè)計與美工Dreamweaver CS5[M].大象出版社，2014.

[2]數(shù)字藝術(shù)教育研究室.中文版Photoshop CC基礎(chǔ)培訓教程[M].人民郵電出版社，2016.

[3]張曉景.網(wǎng)站布局與網(wǎng)頁配色設(shè)計[M].人民郵電出版社，2018.

[4]陳東方，王魁祎.淺析Photoshop在網(wǎng)頁制作中的運用[J].電腦知識與技術(shù)，2018（21）.