Photoshop在網頁設計中的作用分析

陳瑞英

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

關鍵詞：Photoshop;網頁設計;作用

中圖分類號：TP37? ?文獻標識碼：A? ? ? ?文章編號：1009-3044（2018）35-0209-02

1 Photoshop在網頁設計中的優勢

1.1 具有較強的靈活性

Photoshop的靈活性為其在網頁設計中作用的發揮創造了條件，能夠在不同的圖層上放置不同的元素，能夠根據需要進行調整，使網頁設計更加便利。還能夠在不同的圖層上疊加，使圖層中的元素更加多樣。在圖層上設置鏈接后能夠使圖層更加具體，不會出現偏差，使設計者的設計更加靈活，比其他圖形設計軟件更加有操作性。

1.2 能夠方便修改

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

1.3 更加便于瀏覽

隨著生活節奏的加快，人們對網頁的便捷性和美觀性提出了更高的要求，Photoshop的應用能讓人們更快地查找出所需要的內容，而且更加形象，提高了網頁設計的價值。例如，在網頁設計過程中能夠對多個元素進行統一設計，提高用戶的關注度，通過文字、圖片和視頻等讓用戶對網頁中的內容有更加深刻的了解，利用鏈接的設置讓用戶了解更多的內容，也節省了用戶時間，提高了點擊率。

2 Photoshop在網頁設計中的原則

2.1 畫面方面

Photoshop在網頁設計中的畫面中的元素進行設計時，要遵循整體性、連貫性、獨立性和協調性。整體性即網頁中的畫面內容是一個整體，不能夠分割。連貫性，即頁面內容相互聯系，具有一定的邏輯關系。獨立性，即畫面內容是相對獨立的，不受其他內容的干擾。協調性即整個頁面要符合大眾審美要求。

2.2 造型方面

網頁內容主要依靠視覺效果進行傳達，而視覺效果主要依賴造型。在設計中應先降畫面上的元素作為基本要素處理，對其中的點、線、面進行優化組合，常見的手法有順序。比例等，要根據具體情況確定。點、線、面的組合能夠突出重要元素、設計主題，同時也能夠提高網頁的優美性，實現設計目的。

2.3 色彩方面

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

3 Photoshop在網頁設計中的應用

3.1 網頁刊頭的制作

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

3.2 網頁底紋設計和有關按鈕的制作

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

另外，在網頁設計中還會經常看到很多按鈕，如注冊、登陸等，在使用Photoshop進行網頁制作時可以設計一些簡單的按鈕，還可以對按鈕進行美化，提高網頁的美觀和協調度，吸引用戶，常見的按鈕有漸變按鈕、動態按鈕等，如圖2所示。

3 Photoshop切片工具在網頁設計中的應用

只有正確使用Photoshop中的切片工具才能夠對圖像進行有效整合。要選擇好參考線，確保所切出的圖像的尺寸統一協調，避免“留白”或“爆邊”。大的圖像應切分均勻，以提高網頁的下載速度。導航也需要進行切片后使用。所保存的切片應以英文命名，格式應為Gif格式。切片的整合時可以使用純顏色代替區域，能用小圖像的就不用大圖像，切片去要整齊規整，如圖3所示。

4 Photoshop在網頁設計中的應用技巧

通過上文的敘述可知，Photoshop是一款較為強大的圖像處理軟件，應充分掌握Photoshop的使用技巧，創造更加優美 、使用的網頁。

4.1 網頁構圖

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

4.2? Photoshop對簡單圖像的處理

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

4.3? Photoshop使圖像背景透明

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

4.4? Photoshop使圖像融合

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

4.5 Photoshop的特殊字體

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

5 結束語

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

參考文獻：

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

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

[3] 鄂義元，姜軼涵.網站開發中Photoshop的運用[J].中央民族大學學報：自然科學版，2014，23（2）：50-54.

[通聯編輯：聞翔軍]