陳瑞英


摘要:在科學技術的推動下,網絡信息技術發展迅速,人們對網絡的依賴性也越來越大,網絡成了人們工作和生活必不可少的一部分,人們對網站的審美需求也越來越高,對網站的精美設計也提出了更高的要求。而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.
[通聯編輯:聞翔軍]