PhotoShop和Fireworks均是常用的圖片處理軟件，一般網(wǎng)站的圖片處理均用ps進(jìn)行細(xì)致處理，fw則是對(duì)圖片的精度進(jìn)行優(yōu)化，以達(dá)到最佳圖像品質(zhì)和最小壓縮大小之間的平衡。

一般常用的圖片格式分為以下3種。

【JPG格式】：以良好質(zhì)量 保存圖片。應(yīng)用最廣泛的圖片格式之一，這種圖片是經(jīng)過壓縮而來的，文件較小，便于在網(wǎng)絡(luò)上傳輸，網(wǎng)頁(yè)上大部分圖片就是這種格式。

【GIF格式】：以較低質(zhì)量保存簡(jiǎn)單繪圖。這種格式最多支持256色彩的圖像，所以一般做品牌logo或顏色單一的圖片建議保存為GIF格式。網(wǎng)上很多小動(dòng)畫也可以使用動(dòng)畫GIF格式實(shí)現(xiàn)。

【PNG格式】：以高質(zhì)量保存照片或繪圖。PNG格式圖片因其高保真性最高，支持約1600萬色。它最大的特點(diǎn)是帶透明通道，就是我們經(jīng)常說的透明背景，一般大圖不建議使用，其占用的圖片內(nèi)存比jpg的大很多。

備注：如果非要用png格式，可以進(jìn)行png壓縮處理，直接上這個(gè)網(wǎng)站進(jìn)行在線壓縮【tinypng】，有時(shí)可以壓縮掉70%的體積。

一般圖片大小分為：1GB=1024MB 1MB=1024K 1KB=1024字節(jié)

選擇所要查看的圖片，鼠標(biāo)右鍵點(diǎn)擊圖片，彈出的窗口列表點(diǎn)擊【屬性】，可以查看到圖片的信息。

如下圖，把圖片拖進(jìn)fw里，右側(cè)（優(yōu)化）黑框內(nèi)可以看到圖片的格式和品質(zhì)（若沒有該模塊，點(diǎn)擊頂部導(dǎo)航的窗口，找到優(yōu)化，點(diǎn)擊即可），下面的紅框可以看到圖片的尺寸。點(diǎn)擊查看圖片>>

打開ps后點(diǎn)擊頂部【文件】下拉單選擇【新建】（快捷鍵ctrl+n）,隨后便會(huì)彈出如下圖所示的信息框，一般處理網(wǎng)絡(luò)上傳播的圖片時(shí)，尺寸的單位選擇【像素】，分辨率72已經(jīng)足夠了，顏色模式選擇RGB顏色。

打開Fireworks---》點(diǎn)擊【文件】---》點(diǎn)擊【批處理】---》選擇需要批處理的圖片（圖片全選按Ctrl+A），點(diǎn)擊【增加】，再點(diǎn)擊【繼續(xù)】---》點(diǎn)擊【導(dǎo)出】，再點(diǎn)擊【添加】---》點(diǎn)擊底下的【編輯】---》【格式】為JPEG，【品質(zhì)】調(diào)成85以上，點(diǎn)擊【確定】---》點(diǎn)擊【繼續(xù)】---》選擇【與原始文件位置相同】，點(diǎn)擊批次。點(diǎn)擊查看圖示教程>>

下面以買購(gòu)網(wǎng)水印為案例，對(duì)一篇文章進(jìn)行水印疊加。

第一步：打開需要疊加的水印

第二步：把疊加的水印定義成圖案。點(diǎn)擊【編輯】---》點(diǎn)擊【定義圖案】，命名好后點(diǎn)擊【確定】。到這一步定義圖案已經(jīng)完成。

第三步：新建圖層--》執(zhí)行填充圖案命令【shift+F5】,選擇之前定義好的水印圖案即可。

1.調(diào)明暗：用“曲線”（ctrl+M）或者“色階”（ctrl+l）

2.調(diào)色相（換顏色）用“色相飽和度”（ctrl+u）

3.調(diào)成黑白用“去色”（ctrl+shift+u）

5.黑白調(diào)彩色 先把黑白圖片改成RGB模式-->>框選出需要上色的部分-->>執(zhí)行【ctrl+u打開色相飽和度】，勾選色相飽和度中的【著色】，滑動(dòng)色塊直至滿意的顏色。

每當(dāng)在處理圖片時(shí)，每一次縮小調(diào)整都會(huì)降低圖像的顯示質(zhì)量。如果你再將圖像拉大，你會(huì)發(fā)覺圖像已經(jīng)模糊不清。建議一開始處理圖片前先將圖片轉(zhuǎn)化為智能對(duì)象，因?yàn)樵谥悄軐?duì)象中，你可以將圖像隨意縮小放大，并且不需要擔(dān)心圖像顯示質(zhì)量的問題（前提原圖需要是大圖）。

方法：選擇要轉(zhuǎn)化成智能對(duì)象的所在圖層，右擊圖層后在彈出的列表頁(yè)中選擇【轉(zhuǎn)換為智能對(duì)象】

Photoshop默認(rèn)分辨率為72dpi，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來說已經(jīng)足夠，但是不能滿足印刷設(shè)計(jì)的要求。因此，在創(chuàng)建畫布的時(shí)候，就要根據(jù)設(shè)計(jì)需要設(shè)置好dpi的數(shù)值，比如印刷一般設(shè)置為300dpi。設(shè)置正確的分辨，可以減少后期不必要的麻煩，并且為后續(xù)修改提供更大的空間。

1、盡量地減少創(chuàng)建圖層可以令PSD文檔體積更小，并且操作更加有效率?？梢酝ㄟ^智能對(duì)象、智能濾鏡、圖層蒙版和圖層樣式等工具，減少圖層的創(chuàng)建數(shù)量。

2、當(dāng)創(chuàng)建的圖層多時(shí)，學(xué)會(huì)給圖層分組是一個(gè)專業(yè)設(shè)計(jì)師必須學(xué)會(huì)的，這不僅有利于你的修改，也是團(tuán)隊(duì)合作中少不得的習(xí)慣。

3、隱藏起來沒有用的圖層堅(jiān)決刪除，避免占用psd文檔的體積。

一般處理網(wǎng)絡(luò)圖片都是使用RGB模式顯示圖片，如果操作菜單變成灰色？顏色看起來跟平時(shí)的不一樣？當(dāng)你遇到這些問題的時(shí)候，可能就是使用錯(cuò)誤的圖像模式而引起的問題。在主菜單中選擇“圖像>模式”，在這里確保選擇正確的圖像模式。

新手摳圖時(shí)，習(xí)慣把所有圖片的都使用魔術(shù)棒來進(jìn)行摳圖，一般正常情況下，對(duì)比度大的情況下可以使用魔術(shù)棒，否則建議實(shí)用鋼筆工具或者快速選擇工具（需要注意的是邊緣需清晰無鋸齒）。

在處理圖片時(shí)我們總是會(huì)不停地進(jìn)行調(diào)整修飾，但是沒來得及回頭看看與原來效果的對(duì)比情況。因此，在下一次保存文檔的時(shí)候，找個(gè)人幫幫忙看看，詢問一下他們的意見，或許會(huì)有很好的效果。如果你已經(jīng)過度調(diào)整圖層，還可以通過調(diào)整圖層的不透明度，減淡調(diào)整效果。

在應(yīng)用一款編輯軟件的時(shí)候，我們總會(huì)犯一個(gè)錯(cuò)誤，就是保存。當(dāng)遇到突然斷電或者莫名其妙的故障時(shí)，沒有保存就會(huì)讓一切的工作成果化為烏有。養(yǎng)成定期保存的習(xí)慣是非常有必要的，時(shí)刻記得按下ctrl+S。

對(duì)于設(shè)計(jì)者，利用PS準(zhǔn)備的快捷鍵或者創(chuàng)建個(gè)性化的快捷鍵，是提高工作效率，同時(shí)省時(shí)省力的方法之一。雖然其中可能要花點(diǎn)時(shí)間去學(xué)習(xí)熟悉，但是應(yīng)用快捷鍵的效果是值得你花費(fèi)的時(shí)間的。點(diǎn)擊查看ps快捷鍵大全>>

當(dāng)需要調(diào)整圖像，并且可以選擇圖層蒙版或者橡皮擦工具的時(shí)候，建議優(yōu)先選用圖層蒙版工具。因?yàn)槭褂孟鹌げ凉ぞ邔?huì)對(duì)圖像進(jìn)行永久性調(diào)整，也就是下次打開圖像文件的時(shí)候，再也找不回原來的圖像，而圖層蒙版提供了你選擇的理由。同理，能使用智能對(duì)象的時(shí)候，不使用柵格化圖層（如圖片大小調(diào)整、濾鏡效果等）。

這也是一個(gè)新手常犯的錯(cuò)誤，就是靠直覺去判斷是否對(duì)齊，間距是否一致，其實(shí)是錯(cuò)誤的。合理運(yùn)用參考線和網(wǎng)格，會(huì)時(shí)整個(gè)網(wǎng)頁(yè)的風(fēng)格一目了然。標(biāo)尺：ctrl+r；網(wǎng)格：ctrl+h。

關(guān)于字體，很多新手喜歡在一個(gè)設(shè)計(jì)稿上使用N種字體，這樣的結(jié)果會(huì)導(dǎo)致頁(yè)面混亂同時(shí)跟他人合作時(shí)，會(huì)導(dǎo)致對(duì)方缺字體而無法編輯，同一個(gè)頁(yè)面中，前輩的經(jīng)驗(yàn)是字體不要超過兩種，只要你對(duì)每個(gè)字體的性格足夠了解，一兩個(gè)就夠用咯。

在美術(shù)上，將紅、黃、藍(lán)稱為顏料的三原色。

色彩的三要素是指：色相（色彩的相貌（就像人的名字）、飽和度（色彩的鮮艷程度，也稱色彩的純度或彩度（指添加灰色的濃度）、亮度（顏色的亮度，越亮越接近白色，越暗越接近黑色）。查看圖示>>

【近似色】：你可以使用色輪上位置相鄰的色彩。確定首選色之后，你需要選擇用來搭配的第二和第三種顏色。近似色與你的首選色接近而不同，能與之和諧存在，你可以使用近似色來構(gòu)建配色方案。

【單 色】：基于單色的配色方案也不難實(shí)現(xiàn)，首選色的色相確定之后，調(diào)整它的色度、色調(diào)和色彩（讓其與不同比例的黑色、白色和灰色混合），也可以形成一套配色方案。

【三 色】：三色配色方案借助色輪很容易實(shí)現(xiàn)，也就是使用色輪上相互等距離的3種顏色即可。

【互補(bǔ)色】：色輪中心對(duì)稱的兩邊的顏色就是互補(bǔ)色，兩種色彩相互抵消，色盲的用戶可能分辨不出來部分對(duì)比色。所以，如果你想每個(gè)人都看清楚網(wǎng)頁(yè)的內(nèi)容，那么請(qǐng)不要使用兩種正好處于相反位置的色彩。（稍微偏一點(diǎn)就好了）

【復(fù)合色】：確定首選色之后，挑選一個(gè)互補(bǔ)色，然后加上一個(gè)與首選色同色系的色彩，這樣的三色搭配方案很容易實(shí)現(xiàn)，提供了明顯的色彩反差，也不容易被濫用。

【中性色】：很多高大上的網(wǎng)站就是這么配色的，就靠中性色黑白灰撐起來的。查看圖示>>

紅色：能量，力量，活力，領(lǐng)導(dǎo)地位，勇氣，激情，快樂，危險(xiǎn)，邪惡，憤怒，血，高識(shí)別度；

橙色：開朗，熱情，快樂，激情，魅力，創(chuàng)意，有趣，輕浮，華麗，粗魯，低端；

黃色：樂觀，清新，法律，教育，傲慢，怯懦，疾病，背叛，幼稚；

綠色：財(cái)富，金錢，平靜，樹木，野心，耐力，治愈，冷靜，自然，完備，保護(hù)，羨慕，嫉妒，不成熟；

藍(lán)色：安全，守信，穩(wěn)定，忠誠(chéng)，智慧，信任，友愛，保鮮，勇氣，科學(xué)，悲傷，抑郁，冷漠，穩(wěn)重；

紫色：神奇，神秘，靈性，潛意識(shí)，創(chuàng)造力，尊嚴(yán)，皇室，悲哀，殘酷，自大，自負(fù)；

黑色：強(qiáng)大，神秘，高貴，精致，功能性，死亡，病態(tài)，瘟疫，孤傲；

1、重視視覺感受（舒服、和諧；不突兀、不刺眼、不山寨）；

2、商業(yè)設(shè)計(jì)應(yīng)符合公司形象及文化的用色要求；

3、用色要有一定系列性（如，不同內(nèi)容可用不同的顏色，相同性質(zhì)的內(nèi)容用相同的顏色表示）；

4、符合顏色的象征意義（綠色健康、傳統(tǒng)、紅色喜慶、藍(lán)色科技等）；

5、單色喜聞樂見（天的藍(lán)、草的綠、暖的橙等），多色盡量模仿（如網(wǎng)站、海報(bào)等）；

6、色彩不超三種（黑白灰除外，圖表色可稍稍靈活），整體風(fēng)格一致。

任何一張圖片都是有版權(quán)的，即著作權(quán)，網(wǎng)絡(luò)上使用圖片，未經(jīng)允許都存在侵犯他人著作權(quán)的風(fēng)險(xiǎn)。這里要分清個(gè)人使用和商業(yè)使用。

風(fēng)險(xiǎn)較高的主要有以下幾類：時(shí)事熱點(diǎn)新聞圖片，風(fēng)景名勝攝影作品，人物肖像攝影作品。

國(guó)內(nèi)可免費(fèi)商用網(wǎng)站

1、攝圖網(wǎng)

攝圖網(wǎng)是一家專注正版攝影圖免費(fèi)下載的圖庫(kù),可供下載的高清攝影圖片量包含人物,動(dòng)物,風(fēng)景,名勝,美食,旅游,建筑,時(shí)尚等。

2、CC0圖片網(wǎng)

提供免費(fèi)的無版權(quán)高清圖片下載。CC0.CN的所有圖片都以知識(shí)共享組織(Creative Commons) 的CC0協(xié)議發(fā)布,您可以用于任何形式的商業(yè)用途。

國(guó)外可免費(fèi)商用網(wǎng)站

1、Pixabay （綜合性，全部可以商用，支持中文搜索）

一個(gè)超高質(zhì)量無版權(quán)限制的圖片的貯藏室。 不論數(shù)字、印刷格式、照片還是視頻，都可以個(gè)人或者商業(yè)用途，您都可以免費(fèi)使用該網(wǎng)站的任何圖像，并且無原作者署名要求。需要注意下，涉及到人物的可能會(huì)有肖像權(quán)。

2、flickr （綜合性，部分商用需選擇，支持中文搜索）

Flickr，雅虎旗下圖片分享網(wǎng)站，里面有非常多用戶傳的圖片，很多都是隨手拍攝的，雖然圖片質(zhì)量要差一些，但是往往能找到自己想要的圖片，需要注意的是，若是要商用的，在授權(quán)方式那要選擇“允許商業(yè)用途與修改”才行，并不是全部都可以商用

3、ssyer （綜合性，全部可商用，支持中文搜索）

除了pixabay外的一個(gè)可以中文搜索的網(wǎng)站，加載速度也快，如果沒有梯子的，用這個(gè)網(wǎng)站速度會(huì)快一些，圖片內(nèi)容也多，但大部分是國(guó)外的，如果要找國(guó)內(nèi)相關(guān)的圖基本找不到。同樣要注意下人物肖像權(quán)。

4、photo-ac （綜合性，全部可商用，支持中文搜索）

日本的一家免費(fèi)商業(yè)用途的圖片網(wǎng)站，質(zhì)量也是非常不錯(cuò)的，但是最近更新了，普通用戶一天只能下載9張，購(gòu)買會(huì)員可以無線下載，質(zhì)量真心不錯(cuò)，有條件的可以開通下會(huì)員，開通的會(huì)員還能使用旗下的矢量圖片網(wǎng)站，質(zhì)量也不錯(cuò)，最主要的是價(jià)格也不貴，每月6.114美元，人民幣大約41元，跟國(guó)內(nèi)會(huì)員網(wǎng)站價(jià)格差不多，還支持中文搜索。

5、hippopx （綜合性，全部可商用，僅支持英文搜索）

國(guó)外的網(wǎng)站，類似pixabay，質(zhì)量非常好，高清大圖，無需注冊(cè)可以直接下載，搜索速度也很快，只是需要英文搜索，圖片基本都是國(guó)外的，國(guó)內(nèi)相關(guān)的圖可能沒有。

5、pexels （綜合性，全部可商用，僅支持英文搜索）

這個(gè)的圖片后期處理比較嚴(yán)重，大部分顏色也比較暗沉，像是藝術(shù)照，帶有藝術(shù)氣氛，比較特別，這類型的圖片只適合直接使用，不適合后期再次處理。

6、picjumbo （綜合性，全部可商用，僅支持英文搜索）

很多高清圖片，也只能英文搜索，不用注冊(cè)也可以直接下載，跟ssyer、pexels差不多，有一點(diǎn)，有部分圖片上面會(huì)有提示，可以找相類似的圖片，特色之一。

7、unsplash （綜合性，全部可商用，僅支持英文搜索）

很多高清圖片，也只能英文搜索，不用注冊(cè)也可以直接下載，跟ssyer、pexels差不多。

8、foodiesfeed （美食類型，全部可商用，僅支持英文搜索）

整個(gè)網(wǎng)站都是美食方面的圖片，高清高質(zhì)量的圖片，但基本都是國(guó)外的美食，也只能英文搜索，不用注冊(cè)也可以直接下載。

9、sozai-page （食材類型，全部可商用，僅支持英文搜索）

整個(gè)網(wǎng)站都是各種食材的圖片，日本那邊的，高清高質(zhì)量的圖片，直接選擇要的食材下載即可。

10、pakutaso

日本的一家高品質(zhì)照片素材免費(fèi)分享的站點(diǎn)，到目前擁有破萬張的圖庫(kù)照片，而且授權(quán)高畫質(zhì)下載，免費(fèi)商業(yè)使用，可以通過右方的人物、紀(jì)念日、天氣、建筑、工作等等不同的分類，來瀏覽我們需要的照片類型。

1、（國(guó)內(nèi)）Iconfont矢量圖標(biāo)

非常棒的矢量圖標(biāo)下載網(wǎng)站，基本上你所要的圖標(biāo)這里都可以搜索出來，最重要的是中文的喲，只要注冊(cè)一個(gè)賬號(hào)即可！

2、（國(guó)外） Iconshow

一個(gè)致力于分享免費(fèi)的紋理素材、免費(fèi)圖標(biāo)素材的網(wǎng)站，提供從256px到16px大小的不同規(guī)格的素材圖片，用戶可以很方便的查詢和選擇下載（PNG格式）。

3、（國(guó)外） pictogram2 （人類形象圖）

一個(gè)分享非常人性化的人物動(dòng)作、形象、神態(tài)矢量標(biāo)識(shí)網(wǎng)站，圖像的視覺識(shí)別度很高，涵蓋了各種公共行為動(dòng)作（包括各種奇怪的東西），很容易理解其圖案表達(dá)的含義。每一個(gè)圖標(biāo)還有各種不同款式（比如男女、左右不同款）

4、（國(guó)外）subtlepatterns

強(qiáng)大的無縫拼接背景網(wǎng)站，完全免費(fèi)的，雖然不是特別的多，但是基本夠用，比較簡(jiǎn)單大氣的背景，瞬間提升網(wǎng)頁(yè)的檔次，可以直接下載使用。

5、（國(guó)外）svgsilh

一個(gè)提供免費(fèi)下載的SVG圖像和圖標(biāo)的素材網(wǎng)站，類型豐富，涵蓋了各種人物動(dòng)物植物飾品等等，全部是CC0協(xié)議，可直接下載png圖。

6、（國(guó)外）Peecheey

Peecheey是一個(gè)免費(fèi)的矢量資源網(wǎng)站，正在開發(fā)中，包含各種各樣獨(dú)家插圖。可免費(fèi)下載私人和商業(yè)用途。

7、（國(guó)外）iconstore

iconstore的圖標(biāo)雖然只有200+套，但是每一套的質(zhì)量都很好，最重要的是上面發(fā)布的每個(gè)圖標(biāo)包都可用于個(gè)人和商業(yè)項(xiàng)目，無需歸屬，簡(jiǎn)直是設(shè)計(jì)師們的福利。

8、（國(guó)外）pngimg

國(guó)外免摳圖網(wǎng)站，類型很豐富，質(zhì)量也好，最重要的是免費(fèi)商用。

1、Colorschemedesigner配色盤

2、千圖網(wǎng)配色工具

3、美麗的調(diào)色板

4、Coolors

一個(gè)可以讓你簡(jiǎn)單快速的選色生成工具，為你找出配色的靈感，該網(wǎng)站是超快速為你生成配色，每次會(huì)為你挑選由五種顏色組合而成的調(diào)色盤，并顯示顏色的代碼，使用者可以快速選取使用或是鎖定其中的幾種顏色。

5、Material Palette

一個(gè)致力于為設(shè)計(jì)師們提供顏色組合搭配的工具，讓設(shè)計(jì)師輕松的選擇自己喜歡的顏色，在線生成Metaerial Design 風(fēng)格配色的搭配方案，讓你從煩亂的顏色中篩選出一條極具創(chuàng)意的顏色組合。選擇好呈現(xiàn)出來配色方案可多格式下載。

6、colordrop

colordrop是一個(gè)很棒的配色網(wǎng)站，收錄了不少漂亮的配色方案，選定方案之后便會(huì)彈出對(duì)應(yīng)的顏色代碼。

1、騰訊設(shè)計(jì)導(dǎo)航：

很不錯(cuò)，大量?jī)?yōu)秀站點(diǎn)，有RSS訂閱，可實(shí)時(shí)以RSS方式查看最新網(wǎng)站內(nèi)容，用QQ號(hào)登錄后，可以更加個(gè)性化定制屬于自己的設(shè)計(jì)師導(dǎo)航頁(yè)面。

2、免費(fèi)網(wǎng)頁(yè)設(shè)計(jì)資源

一個(gè)致力于幫助網(wǎng)頁(yè)設(shè)計(jì)師、產(chǎn)品設(shè)計(jì)師尋找最優(yōu)秀的網(wǎng)頁(yè)素材、優(yōu)秀代碼、免費(fèi)字體及其他各種資源的站點(diǎn)，支持訂閱，由Pasquale Vitiello平面設(shè)計(jì)師創(chuàng)辦。

3、優(yōu)設(shè)設(shè)計(jì)師網(wǎng)址導(dǎo)航

優(yōu)設(shè)網(wǎng)設(shè)計(jì)師網(wǎng)址導(dǎo)航為設(shè)計(jì)師提供ps教程、UI設(shè)計(jì)、素材下載、高清圖庫(kù)、配色方案、用戶體驗(yàn)、網(wǎng)頁(yè)設(shè)計(jì)等全方位設(shè)計(jì)師網(wǎng)站導(dǎo)航指引，挺全的。

4、站酷

國(guó)內(nèi)比較成熟的設(shè)計(jì)師學(xué)習(xí)的網(wǎng)站，里面的素材也是免費(fèi)下載的，有很多牛逼的設(shè)計(jì)師在上面發(fā)表作品，是個(gè)能力學(xué)習(xí)提升的好去處。

5、花瓣網(wǎng)

設(shè)計(jì)師尋找靈感常逛的網(wǎng)站，里面都是效果圖，雖然沒有源文件下載等，但是匯集大量的優(yōu)秀作品，是尋找靈感和學(xué)習(xí)的好地方。