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

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

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

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

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

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

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

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

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

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

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

下面以買購網(wǎng)水印為案例，對一篇文章進行水印疊加,。

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

第二步：把疊加的水印定義成圖案,。點擊【編輯】---》點擊【定義圖案】，命名好后點擊【確定】,。到這一步定義圖案已經(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)在處理圖片時，每一次縮小調(diào)整都會降低圖像的顯示質(zhì)量,。如果你再將圖像拉大,，你會發(fā)覺圖像已經(jīng)模糊不清。建議一開始處理圖片前先將圖片轉(zhuǎn)化為智能對象,，因為在智能對象中，你可以將圖像隨意縮小放大,，并且不需要擔(dān)心圖像顯示質(zhì)量的問題（前提原圖需要是大圖）,。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1、攝圖網(wǎng)

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

2、CC0圖片網(wǎng)

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

國外可免費商用網(wǎng)站

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10,、pakutaso

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

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

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

2,、（國外） Iconshow

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

3,、（國外） pictogram2 （人類形象圖）

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

4,、（國外）subtlepatterns

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

5,、（國外）svgsilh

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

6、（國外）Peecheey

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

7,、（國外）iconstore

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

8,、（國外）pngimg

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

1,、Colorschemedesigner配色盤

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

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

4、Coolors

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

5、Material Palette

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

6、colordrop

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

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

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

2,、免費網(wǎng)頁設(shè)計資源

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

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

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

4,、站酷

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

5、花瓣網(wǎng)

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