第一篇：Photoshop在網(wǎng)頁美工設(shè)計(jì)中的應(yīng)用研究

Photoshop在網(wǎng)頁美工設(shè)計(jì)中的應(yīng)用研究

摘要：隨著互聯(lián)網(wǎng)上各類網(wǎng)站越來越多，人們在瀏覽網(wǎng)頁時(shí)除了基本的對信息量的需求外，對網(wǎng)站的界面設(shè)計(jì)也產(chǎn)生了新的要求，一個(gè)信息齊全、設(shè)計(jì)精美的網(wǎng)站更能吸引觀眾的目光。本文主要描述了強(qiáng)大的圖形圖像處理軟件Photoshop在網(wǎng)頁美工設(shè)計(jì)中的應(yīng)用。

關(guān)鍵詞：Photoshop；網(wǎng)頁美工；應(yīng)用

目前，全世界的網(wǎng)站總數(shù)已經(jīng)超過了10億個(gè)，中國的網(wǎng)站總數(shù)接近400萬個(gè)，如何使自己的網(wǎng)站能夠在眾多的網(wǎng)站中脫穎而出，令人刮目相看，除了提升網(wǎng)站的知名度和訪問率外，對網(wǎng)站內(nèi)容進(jìn)行詳細(xì)的規(guī)劃和設(shè)計(jì)也是提高網(wǎng)站訪問率的重要因素?，F(xiàn)在眾多的網(wǎng)站已經(jīng)由原來單一的功能性向現(xiàn)在的功能和美觀兼顧的方向發(fā)展。相同情況下，一個(gè)設(shè)計(jì)美觀的網(wǎng)站更能受到人們的青睞。以往設(shè)計(jì)網(wǎng)頁常用的軟件Dreamweaver在網(wǎng)頁的美工設(shè)計(jì)方面有一定的局限性，而Photoshop是網(wǎng)頁設(shè)計(jì)師常用的一個(gè)非常重要而強(qiáng)大的工具，可以讓網(wǎng)頁設(shè)計(jì)師的工作高效便捷的進(jìn)行，也為設(shè)計(jì)師們的天馬行空提供了實(shí)際技術(shù)實(shí)現(xiàn)。

網(wǎng)頁設(shè)計(jì)的根本目的是通過網(wǎng)頁美工設(shè)計(jì)出作品為人們傳播直觀的信息，使人們獲得美感享受的同時(shí)獲得大量直觀的信息，充分表達(dá)用戶要求的內(nèi)容，Photoshop為這種直觀的展現(xiàn)提供了很好的平臺。Photoshop在網(wǎng)頁美工設(shè)計(jì)中的應(yīng)用主要表現(xiàn)在以下幾個(gè)方面：

一、更好的布局

作為一個(gè)網(wǎng)頁設(shè)計(jì)師開始一個(gè)項(xiàng)目時(shí)經(jīng)常會(huì)考慮到網(wǎng)頁的布局，是用兩欄布局還是三欄布局？是采用普通框架結(jié)構(gòu)還是采用自由式結(jié)構(gòu)？是以文字為主還是以圖片為主？Photoshop軟件可以在網(wǎng)頁布局階段把設(shè)計(jì)師的構(gòu)思更好的展現(xiàn)出來，這種展現(xiàn)比手繪草稿更形象生動(dòng)貼近實(shí)際，比用Dreamweaver實(shí)際制作出來的網(wǎng)頁更節(jié)約時(shí)間便于修改。Photoshop的圖層功能每層可以放置不同的元素，圖層之間相互獨(dú)立又可相互鏈接，圖層屬性可以隨意修改。如此靈活的功能，完全可以讓設(shè)計(jì)者隨心所欲設(shè)計(jì)而不受任何約束，設(shè)計(jì)的同時(shí)可根據(jù)各方的意見隨時(shí)進(jìn)行修改和調(diào)整，最終達(dá)到大家同時(shí)認(rèn)同的標(biāo)準(zhǔn)。

二、更細(xì)致的元素

一個(gè)標(biāo)準(zhǔn)的網(wǎng)頁里面涉及到很多的元素，比如說頁眉、頁腳、標(biāo)志、圖標(biāo)、導(dǎo)航條等等，這些元素的處理直接關(guān)系到整個(gè)頁面的效果，而且元素的風(fēng)格與頁面的主題有著很強(qiáng)的相關(guān)性。Photoshop強(qiáng)大的功能為制作這些元素提供了方便，可以制作各種效果和各種質(zhì)感的元素，為網(wǎng)頁的最終效果提供了豐富的選擇，能完美的實(shí)現(xiàn)設(shè)計(jì)師各種想法創(chuàng)意。

三、更豐富的色彩

色彩的搭配也是網(wǎng)頁設(shè)計(jì)的一個(gè)重要因素，Photoshop的圖層功能也為網(wǎng)頁色彩的搭配提供了方便。在基本元素確定的情況下，可以單獨(dú)對各個(gè)圖層、各個(gè)區(qū)域的顏色進(jìn)行單獨(dú)的調(diào)整，簡單的操作就可以搭配出需要的顏色，并可以實(shí)時(shí)對顏色進(jìn)行比較分析，非常方便。而且Photoshop帶有的網(wǎng)頁安全色的功能，可以在色板中選擇web安全顏色、web色譜和web色相命令，載入該調(diào)板中的任何色彩在不同硬件環(huán)境、不同操作系統(tǒng)，不同瀏覽器中都能夠正常實(shí)現(xiàn)的色彩，這些顏色在任何終端瀏覽用戶的顯示設(shè)備上所呈現(xiàn)出的效果都是相同的。

四、更精巧的動(dòng)畫

在網(wǎng)頁設(shè)計(jì)中，動(dòng)畫可以增添網(wǎng)頁的趣味性，吸引觀眾的目光，Photoshop也可以制作簡單的“幀動(dòng)畫”，存儲為GIF格式。GIF格式其實(shí)將多幅圖像保存為一個(gè)圖像文件，從而形成動(dòng)畫，具有文件體積小、瀏覽器支持穩(wěn)定的優(yōu)點(diǎn)，是一種在網(wǎng)絡(luò)上非常流行的圖形文件格式。

五、更快的速率

一個(gè)不美觀的網(wǎng)頁是不能吸引觀眾的，但是一個(gè)打開速度慢的網(wǎng)站盡管做得再精美也會(huì)使觀眾流失。在互聯(lián)網(wǎng)高度發(fā)展的今天，同類型的網(wǎng)站層出不窮，人們一般在一個(gè)網(wǎng)站等待超過10秒就會(huì)失去耐心，雖然決定網(wǎng)頁打開速度的因素很多，但是在條件相同時(shí)，網(wǎng)頁大小及網(wǎng)頁元素的優(yōu)化和配置就是唯一的因素。用Photoshop可以有多種方式縮小圖片體積，比如對圖像進(jìn)行減色處理，在對圖片質(zhì)量影響不大的基礎(chǔ)下減去圖片上的一些顏色，使圖像更為小巧，或是對大塊圖像進(jìn)行分塊，大的圖像切分成均勻的小圖，這樣可以多幅圖像同時(shí)傳送，提高網(wǎng)頁下載速度。使用Photoshop的切片工具切片后，存儲時(shí)用“存儲為web所用格式”命令，Dreamweaver就能對效果圖進(jìn)行有效的整合。切片存儲格式要求一般存為Gif格式，Gif占用體積小。要求較高的圖像存儲為JPEG格式，JPG格式顯示更多的圖片細(xì)節(jié)。這樣進(jìn)行合理的存儲后，大大的縮小的網(wǎng)頁的大小，從而提高了傳輸?shù)乃俾省?/p>

表達(dá)是所有設(shè)計(jì)的第一目的，一個(gè)專業(yè)的網(wǎng)站界面可以很好的表達(dá)網(wǎng)站本身的主題與內(nèi)容，通過網(wǎng)站可以將你本身最想表達(dá)的東西體現(xiàn)出來。一個(gè)精美的網(wǎng)站設(shè)計(jì)界面，可以給訪問者以很好的體驗(yàn)感受，往往第一印象的好壞就能獲得對方的信任，有可能這個(gè)訪問者就將成為你的客戶或潛在客戶。一個(gè)專業(yè)設(shè)計(jì)的網(wǎng)站就需要一個(gè)專業(yè)的軟件，Photoshop作為專業(yè)且應(yīng)用最廣的圖形圖像處理軟件，能夠幫助網(wǎng)頁設(shè)計(jì)師更好更高效的完成設(shè)計(jì)。（作者單位：重慶城市管理職業(yè)學(xué)院）

參考文獻(xiàn)：

[1]徐琳.Photoshop圖像設(shè)計(jì)中的網(wǎng)頁色彩表現(xiàn)[J].文藝生活，2012（3）：87.[2]劉麗君，等.淺談Photoshop在網(wǎng)頁制作中的應(yīng)用[J].科技廣場，2007（7）：212-213

第二篇：武漢網(wǎng)頁美工設(shè)計(jì)培訓(xùn)

網(wǎng)頁美工設(shè)計(jì)專業(yè)班課程

武漢新思維，網(wǎng)頁美工設(shè)計(jì)專業(yè)班課程

網(wǎng)頁美工設(shè)計(jì)專業(yè)班

招生對象：在校大中專學(xué)生、在職轉(zhuǎn)行學(xué)員、初入門的設(shè)計(jì)愛好者

上課形式：周一到周六每天三小時(shí)，分上午班或下午班

學(xué)習(xí)內(nèi)容：

課程一：photoshop

學(xué)習(xí)目的及效果：

Photoshop是著名的圖像處理軟件，具有超強(qiáng)的特效制作功能和照片處理合成功能。是設(shè)計(jì)師必須掌握和精通的軟件。本課程采用案例式教學(xué)方法，通過對大量有針對性的教學(xué)案例，使學(xué)習(xí)者掌握Photoshop的圖像處理、圖像合成、圖像創(chuàng)意效果等技術(shù)。

課程二：網(wǎng)頁界面及網(wǎng)站美工設(shè)計(jì)

學(xué)習(xí)目的及效果：

網(wǎng)頁美工及界面設(shè)計(jì)，是指網(wǎng)頁設(shè)計(jì)者根據(jù)網(wǎng)頁所要表達(dá)的主題，將大量信息通過歸納、整理、美化設(shè)計(jì)，使頁面視覺漂亮、網(wǎng)頁信息有條理，從而提高網(wǎng)頁的閱讀效率和信息搜索率。網(wǎng)頁設(shè)計(jì)者不僅要掌握基本的網(wǎng)頁制作技術(shù)，還需要掌握網(wǎng)站的風(fēng)格、配色等網(wǎng)頁美術(shù)設(shè)計(jì)原理，依照項(xiàng)目設(shè)計(jì)的目的和需求，自覺地對網(wǎng)頁的構(gòu)成元素進(jìn)行藝術(shù)構(gòu)思，是一種創(chuàng)造性思維活動(dòng)，以創(chuàng)造出藝術(shù)化、人性化的網(wǎng)站頁面為目的。

本課程旨在提高學(xué)員的審美能力、讓學(xué)員能熟練操作PS軟件進(jìn)行各類風(fēng)格類型的靜態(tài)頁面設(shè)計(jì)。

課程三：Dreamweaver

課程四：Fireworks

課程五：Flash

課程六：網(wǎng)頁設(shè)計(jì)及綜合案例

第三篇：網(wǎng)頁美工設(shè)計(jì)制作崗位職責(zé)

1.負(fù)責(zé)網(wǎng)站整體版式設(shè)計(jì)。

2.負(fù)責(zé)網(wǎng)站各種活動(dòng)推廣頁面設(shè)計(jì)工作。

3.熟練運(yùn)用各種不同類型的設(shè)計(jì)表現(xiàn)形式，準(zhǔn)確傳達(dá)信息。

4.本著以用戶為核心的設(shè)計(jì)理念，對頁面進(jìn)行優(yōu)化，使用戶操作更趨于人性化。

第四篇：網(wǎng)頁美工設(shè)計(jì)色彩搭配原則

網(wǎng)頁美工設(shè)計(jì)色彩搭配原則

網(wǎng)頁設(shè)計(jì)中：網(wǎng)頁美工設(shè)計(jì)色彩搭配原則

網(wǎng)頁美工設(shè)計(jì)中，最常用的幾個(gè)顏色為藍(lán)色、綠色、橙色，以及暗紅色。

藍(lán)色多與白、橙搭配，藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點(diǎn)綴;藍(lán)天白云，沉靜整潔的感覺。

綠色多與白、蘭兩色搭配，綠為主調(diào)。白底，綠標(biāo)題欄，蘭色或橙色按鈕或ICON做點(diǎn)綴，綠白相間，雅致而有生氣。

橙色多與白、紅搭配，橙為主調(diào)。白底，橙標(biāo)題欄，暗紅或桔紅色按鈕或ICON做點(diǎn)綴，橙色活潑熱情，標(biāo)準(zhǔn)的商業(yè)色調(diào)，因此多用于商業(yè)網(wǎng)站的網(wǎng)頁美工設(shè)計(jì)。

暗紅色顯得寧重、嚴(yán)肅、高貴，需要配黑和灰來壓制刺激的紅色，常以暗紅為主調(diào)。黑或灰底，暗紅標(biāo)題欄，文字內(nèi)容背景為淺灰色。

網(wǎng)頁美工設(shè)計(jì)色彩忌諱

盡管三原色的相互搭配創(chuàng)造出了無數(shù)顏色，可不是所有的顏色都適用于網(wǎng)頁美工設(shè)計(jì)，不同的顏色在搭配上也有著其中的學(xué)問，網(wǎng)頁設(shè)計(jì)就相當(dāng)于平面設(shè)計(jì)，網(wǎng)頁設(shè)計(jì)師可以將平面設(shè)計(jì)中的審美觀點(diǎn)套用到這上面來，所以平面設(shè)計(jì)上的審美的觀點(diǎn)在網(wǎng)頁設(shè)計(jì)上非常實(shí)用。

在網(wǎng)頁美工設(shè)計(jì)中對于色彩的使用特別忌諱臟、純、跳、花、粉這幾種情形。

忌臟是指背景與文字內(nèi)容對比不強(qiáng)烈，灰暗的背景令人沮喪!

忌純是指艷麗的純色對人的刺激太強(qiáng)烈抗議，缺乏內(nèi)涵。

忌跳是指再好看的顏色，也不能脫離整體。

忌花是指要有一種主色貫穿其中，主色并不是面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導(dǎo)者一樣，雖然在人數(shù)上居少數(shù)，但起決定作用。

忌粉是指顏色淺固然顯的干凈，但如果對比過弱，顯得蒼白無力了，就象病夫一樣無可救藥。

另外，藍(lán)色忌純，綠色忌黃，紅色忌艷。

一位網(wǎng)頁美工設(shè)計(jì)的前輩說過：設(shè)計(jì)師不要“為設(shè)計(jì)而設(shè)計(jì)”。再炫酷的頁面效果、再豐富的表現(xiàn)形式，如果偏離了以用戶為中心的主線，讓用戶抓不住重點(diǎn)，感悟不到網(wǎng)頁本身所需要體現(xiàn)的信息，那么，再好的畫面呈現(xiàn)也是敗筆。

第五篇：網(wǎng)頁美工設(shè)計(jì)需要注意的三大細(xì)節(jié)

網(wǎng)頁美工設(shè)計(jì)需要注意的三大細(xì)節(jié) 細(xì)節(jié)決定成敗，可用于每一件事，每一個(gè)工作，對于細(xì)致的網(wǎng)頁美工來說更是需要注意了，下面為大家美工新手們介紹幾種需要注意的細(xì)節(jié)。

1、精確到1個(gè)像素

如果你是一個(gè)成功的頁面設(shè)計(jì)者，你至少會(huì)在做出頁面前已經(jīng)把整個(gè)頁面構(gòu)思好了;如果你很寬容地對待圖片中1個(gè)像素的差別，那說明你還不是很合格。

2、色彩的平衡與呼應(yīng)。1)色彩的平衡。色彩在頁面中可以形成很多的效果，通過強(qiáng)烈的對比，可以突出頁面的重點(diǎn)。還可以通過色彩調(diào)配，達(dá)到頁面穩(wěn)重度的改變。一般的情況下，頁面上方的顏色總是很重，這樣才能壓住下面的顏色，如果不采取這種辦法，整個(gè)頁面將顯得很不穩(wěn)重，底下的文字圖片，有飄出的意味。因此，要使整個(gè)頁面顯得很平衡，必須要有能鎮(zhèn)住其他顏色的色彩。

2)色彩的呼應(yīng)。一種比較突出的色彩，如果很突兀地放在頁面中，無論你是突出重點(diǎn)也好，還是logo圖標(biāo)，都給整個(gè)頁面帶來了副作用。為此，你必須在相對稱的位置加上該色系(對于頁面并不醒目)的色彩以呼應(yīng)，這樣可以弱化這種視覺的沖擊。

3、注意頁面的分塊，著手設(shè)計(jì)一個(gè)頁面的時(shí)候，你必須根據(jù)所掌握的內(nèi)容，以及其風(fēng)格，對頁面的整體進(jìn)行分塊。分塊是一個(gè)非常必要且難以掌握的技巧。對于一般雜志來說，它們是有邊的，這意味著雜志美工設(shè)計(jì)師有邊可循，依靠邊來形成立體感，依靠邊來產(chǎn)生未盡的意韻;但是對于web頁面，邊的概念被淡化了，屏幕可以上下左右的拖動(dòng)。所以此時(shí)分塊顯得非常必要，目的也就是產(chǎn)生邊的效果。

分塊可以用不同著色的色塊、框、細(xì)線、排列整齊的英文等等，還可以混合使用，但是注意不要過于醒目，因?yàn)轫撁娴闹攸c(diǎn)在內(nèi)容，而不在其他。

1.ps圖像處理的功底要好，這樣才能夠吸引人的眼球。

2.要有審美觀點(diǎn)，網(wǎng)頁不是平面，頁面里的元素比較多。

3.需要細(xì)心，對做出來的東西近可能的細(xì)。

4.多參考一些精品網(wǎng)站，學(xué)習(xí)了解他們的經(jīng)驗(yàn)，你會(huì)收獲很大。

5.很重要的一點(diǎn)，就是網(wǎng)站的布局一定要合理，一個(gè)布局合理的網(wǎng)站是成功的一大半。

6.多交流多溝通，可將自己設(shè)計(jì)好的網(wǎng)站給朋友們來欣賞，讓他們提提建議，說不定會(huì)有好的建議，但自己一定要有主見。