PS在網(wǎng)頁設(shè)計中的應(yīng)用

1、PS網(wǎng)頁設(shè)計教程為網(wǎng)頁準備圖片，PS是一個靈活的、富有創(chuàng)造力的軟件， 這個教程，是為了緊接下一步將內(nèi)容放到網(wǎng)頁上或設(shè)計有效的網(wǎng)頁界面。將談及使用“存儲為WEB所用格式”優(yōu)化網(wǎng)頁圖片的原則，學習如何整理動畫，如何為網(wǎng)頁設(shè)計一張合成圖，其中包括如何為圖像翻轉(zhuǎn)和導航設(shè)計圖片。如何以及為什么要切割圖片，自動從你的圖片中整理網(wǎng)站的功能，演示PS和三劍客結(jié)合使用。在本次課中，要為你們演示一些你可以在PS中為網(wǎng)頁整理的東西，一是為網(wǎng)頁優(yōu)化圖片和照片。如何使用“存儲為WEB所用格式”窗口，將作品優(yōu)化為JPEG圖片、GIF圖片以及PNG圖片，準備好放到網(wǎng)頁上。所有關(guān)于切割的知識，如何將一張小圖片導入PS，然后使

2、用多樣的模板，將它轉(zhuǎn)化成一個重復的網(wǎng)頁背景，如何整理一個全屏的背景，以及如何根據(jù)顯示器的分辨率也就是你的觀眾可能會使用的分辨率查閱你的網(wǎng)站，重置它的尺寸。如何為網(wǎng)站準備好透明圖片。由透明像素包圍的圖片。使得那些透明圖片與網(wǎng)頁背景平滑的融合在一起。在PS中，并不能使圖標動作按鈕運作。但可在PS中為按鈕整理圖片。如何使用PS的圖層復合功能整理圖片按鈕的一個完整的導航條，如何使用一個特殊的PS腳本從圖層復合中導入多個按鈕圖片。那個是一個LYNDA所應(yīng)用的腳本，可以免費使用。如何使用PS的自定義圖形工具，從照片中整理出矢量導航圖標。學習為網(wǎng)頁準備照片的工作流程。從原始照片開始、重置照片尺寸，為網(wǎng)站銳化

3、照片。如何使用逐幀動畫以及自動補間動畫整理GIF動畫。學習一些刺激的自動功能，包括網(wǎng)上圖庫。它能夠自動從你的圖片中整理一個完整的網(wǎng)站的，還包括zoomify功能，它以讓你導出較大的圖片，如全景圖，然后在網(wǎng)上以較高分辨率展示它們。如何使用PS中的變理和數(shù)據(jù)集在網(wǎng)頁標語上自動整理多樣的變化。如何整合PS的網(wǎng)頁操作和三劍客。有配套練習文件。按章節(jié)整理了練習文件。一共有14個PS新界面：左邊是工具欄、右邊是相關(guān)顏色圖層等面板 工具欄點擊不放會彈出更多的工具，想選擇其中一個工具，直接將鼠標移到彈出菜單中對應(yīng)工具的上面，然后松手，現(xiàn)在那工具就是激活的了，它的選項就會出現(xiàn)在工具選項欄上，比如裁剪工具里就有切

4、片工具和切片選取工具，CS6中有了一些新功能，臨時在工具之間切換的能力，彈簧調(diào)節(jié)工具功能，方式是這樣的，每一個工具都有一個快捷鍵，例如移動工具的快捷鍵是V，如果按住V，并保持住，那么我就可以暫時切換到移動工具，那樣我就可以點擊并拖動文件中一個選中的圖層，然后，當我松開V鍵，那么就會自動切換回我使用移動工具之前所選中的工具，在這種情況下是切換回切片選取工具，在蘋果電腦中，頂部是快速切換欄，如果是PC，快速切換欄中的所有選項都會出現(xiàn)在屏幕中的菜單欄中?？焖偾袚Q欄是為了讓你快速找到那些你經(jīng)常用到的功能，這里有一個菜單，可能讓你放大（相關(guān)工具欄）、縮小、抓手，旋轉(zhuǎn)視圖。多個文件排列窗口，不同布局，同時

5、查看多個文件屏幕模式，3種不同的屏幕模式全屏模式，為客戶展示你的設(shè)計的一個很好的方法，返回常規(guī)視窗時，可以直接按F鍵。在PS中中一個新的界面功能便是如果你想要給一個網(wǎng)頁設(shè)計添加不同的圖片，或想要比較多張圖片以找出最合適的一張用于這個設(shè)計，在PS中，多個文件的運作方式和單個文件運作不同，當在你PS中打開多個文件的時候，會以橫排列表出現(xiàn)，除了點擊外，還可以使用快捷鍵來打開它們：ctrl+tab往一個方向，shift+ctrl+tab又是另一個方向。同時查看多個文件:整理文件（窗口排列）同時比較兩張圖片：同一比例同時查看圖片中的某個人物（窗口排列匹配縮放、匹配位置，或者全部匹配），可以非常方便的對比

6、圖片。在排列中還可以隨時移動圖片，非常方便圖片的組合。在單一窗口中也可直接拖動圖片到另一個標簽中。新的標簽文件使得追蹤所有打開的圖片變得前所未有的簡單。這樣比拖動窗口進行浮動好得多。標簽文件的使用，使得在CS中進行網(wǎng)頁設(shè)計時操作更順心。PS面板中包含了很多當你進行網(wǎng)頁設(shè)計的時候用到的面板，一般來說很少需要一直用到所有的面板。因此建議自定義面板布局?？梢詫⒛切┳畛Ｓ玫降目刂普淼接|手可及的地方，而不要多余的面板占用寶貴的屏幕空間。默認面板是按分組整理的，而如果你點擊分組中的任意一個面板標簽，展開和收攏面板。收攏會成為一組標簽，可點擊需要使用的一個。收攏面板后，如果還需要更多的操作空間，還可以再往

7、右邊拖動，就可以將列表縮小成只剩下圖標?？梢酝ㄟ^面板菜單關(guān)閉面板操作。通過窗口可以重新打關(guān)閉的窗口，可以關(guān)閉整個選項組。在面板條上空白處右單擊，可以選擇最小化或者展開面板。面板之間的組合可以通過拖動來實現(xiàn)。比如把圖層、歷史記錄和圖層復合放在一起，圖層復合通常是跟圖層面板結(jié)合使用的。把圖層復合面板放在圖層、歷史記錄的下面。就組合成一個新的面板，可以拖動到處移動?？梢渣c擊右上角的復位基本功能恢復所有的面板設(shè)置。并沒有一個永久不變的供網(wǎng)頁設(shè)計的面板，當你準備網(wǎng)頁圖片的時候，需要執(zhí)行各種不同的任務(wù)。并沒有一個能夠永久適用于網(wǎng)頁工作的配置。一天整理文本、一天切割圖片等等，根據(jù)工作需要來設(shè)置不同的面板組。

8、PS的快捷鍵：很多工具很多菜單項可以通過快捷鍵來激活，能否使用快捷鍵調(diào)用常用命令是衡量使用PS是否熟練的標準。自定義在網(wǎng)頁設(shè)計工作 中，工具欄中的所有工具都有快捷鍵。所以與其點擊工具來激活它，不如直接按快捷鍵，想知道工具的快捷鍵，只需要使用將光標盤旋到工具上在即可，比如裁剪工具，按C，然后按住shift，再按C，就激活了切片工具。再次按C，就激活了切片選擇工具。右邊的面板菜單中也有很多快捷鍵，從面板菜單中可以看到很多的命令之后都帶有快捷鍵。比如新建圖層：shift+ctrl+n，頂部的菜單欄上也有很多的快捷鍵，比如網(wǎng)頁設(shè)計中經(jīng)常使用的命令“另存為網(wǎng)頁”，你可以看到它的快捷鍵是非常復雜的，得同時

9、按4個鍵。Alt+shift+ctrl+s，比較難記也比較難用，需要自定義快捷鍵，容易使用和記憶。比如圖層里有一個網(wǎng)頁設(shè)計中經(jīng)常使用的“新建基于圖層的切片”。原來是沒有快捷鍵的，現(xiàn)在有了，但不方便，編輯鍵盤快捷鍵，在窗口中選擇圖層新建基于圖層的切片，在窗口中可以選擇“面板菜單”、“應(yīng)用程序菜單”和“工具”。在改變之前還是新建一個自定義鍵盤快捷鍵的文件，這樣可以隨時恢復默認的快捷鍵，可以給網(wǎng)頁設(shè)計自定義另一套快捷鍵而又保留原來的快捷鍵。然后再來簡化和設(shè)置快捷鍵：“另存為網(wǎng)頁”改為ctrl和逗號，直接按你想要的快捷鍵。給沒有快捷鍵的添加快捷鍵“新建基于圖層的切片”，設(shè)為F5，那么F5原來用于別的命

10、令就失效了。新建網(wǎng)頁設(shè)計的工作區(qū)：8視頻復制PS行為方式顏色管理方法的設(shè)置：1、如何使瀏覽器上看上去圖片與PS一致，先配置好PS顏色設(shè)置，編輯顏色設(shè)置，只需要從其中一個菜單進行一個設(shè)置即可，選擇北美常規(guī)用途2，這是網(wǎng)頁設(shè)計使用的選項，超過“北美web/internet”。一旦選擇了此項，就自動設(shè)置了面板里的其他選項，主要是RGB空間，已經(jīng)自動設(shè)置為SRGB了，SRGB是網(wǎng)頁工作的最佳選擇，當你在PS中操作圖片的時候，RGB工作空間決定了該圖片中的顏色特征，因為它是與標準的PC顯示器中的顏色特征最為相似的工作空間，也主是你的觀眾查看你的圖片通常會使用的顯示器，當你整理將要在網(wǎng)頁上展示的圖片時，S

11、RGB是你想要使用的RGB色彩空間，即便相較于用于打印工作的色彩空間，例如ADOBE RGB或Prophote，SRGB所包含的色彩范圍非常局限。整理網(wǎng)頁所感興趣的唯一一種工作空間就是RGB工作空間，所以可以直接跳過CMYK等，查看色彩管理方案，下面的RGB管理方案設(shè)置為“保留嵌入的配置文件”。如果剛好在PS中打開了一張附帶有一個不 于SRGB，如ADOBE RGB，那么PS將會尊重那個非SRGB色彩配置文件，不會嘗試改變它。網(wǎng)頁設(shè)計的顏色管理工作流程第一步：假如打開了一張為網(wǎng)站所準備的圖片，而它并不是SRGB工作空間的，而是標記為一個非SRGB的色彩配置文件，將圖片轉(zhuǎn)化成SRGB使它能夠與我

12、的工作空間匹配，打開圖片在左下角查看，文檔配置文件，有2種方法轉(zhuǎn)化：一是在PS編輯圖片時進行轉(zhuǎn)化，編輯轉(zhuǎn)換為配置文件另一種方法就是當你在“另存為網(wǎng)頁時”，在你編輯或調(diào)整圖片，將它處理成你想要的樣子，已經(jīng)將它優(yōu)化成一個網(wǎng)頁格式之后。文件存儲為WEB所用格式，對話框中有大量設(shè)置以后詳解。勾選“轉(zhuǎn)化為SRGB”，假設(shè)已將剩下的所有控制設(shè)置為我想要的了，保存另存為一個另外的文件名。不勾選再保存一次。打開兩張圖片比較，與原有的PSD文件比較，勾選是最近似的。網(wǎng)頁安全色的概念在90年代是非常重要的，用戶只有8位顯卡，256色，網(wǎng)頁安全色216色，比如3.01，左邊不是安全色，右邊用安全色看差別太大，現(xiàn)在基

13、本不用，除非用戶需要。其實是一個包含216色的特殊調(diào)色板。PS有很多工具從筆刷工具到文本工具，了解你可以使用多種方式選擇，將在PS中應(yīng)用的顏色，其中包括拾色器，工具欄底部的前景和背景色，點擊前景色打開拾色器，HSB選擇顏色，RGB特定顏色值。16進制顏色值。在拾色器中，還可將它設(shè)置為只顯示網(wǎng)頁安全色。網(wǎng)頁安全色視頻11使用拾色器視頻12滴管工具視頻13，可以使用它選擇屏幕中的任意位置的顏色，包括屏幕以外的（需要激活應(yīng)用程序框架），這個功能可以選擇在屏幕上打開網(wǎng)頁上的顏色。針對選擇多層圖層可以有很多選項，比如當前圖層、當前和下方圖層、所有圖層等等。色板面板視頻14，自定義色板集存儲你從一個現(xiàn)有的

14、網(wǎng)頁，那樣你便可以在你自己的網(wǎng)頁設(shè)計中使用該網(wǎng)站的配色方案作為一個著手點。視頻15重新上色視頻16 快捷鍵 圖層各項鎖定統(tǒng)一網(wǎng)頁設(shè)計上色視頻17 PS有一個功能，能夠復制在PS中打開的任意圖片中的任意顏色的16進制，可以粘貼到網(wǎng)頁整理程序當中另存為網(wǎng)頁視頻18優(yōu)化JPG視頻19添加圖片版權(quán)信息視頻20優(yōu)化GIF視頻21優(yōu)化GIF輸出視頻22兩種PNG格式的優(yōu)化視頻23網(wǎng)頁背景圖的整理視頻24PS編寫網(wǎng)頁代碼視頻25對稱背景的設(shè)計視頻26重復背景整理視頻27填滿觀眾瀏覽器的全屏背景且不會出現(xiàn)重復視頻28透明圖片處理視頻29邊緣柔和的透明圖片視頻30透明GIF圖片放置圖案背景上視頻31透明GIF投

15、影與圖案背景的設(shè)置視頻32給網(wǎng)頁圖片添加透明區(qū)域視頻33最適合優(yōu)化照片的JPG如何添加透明區(qū)域視頻34導航圖片的整理視頻35圖層樣式整理一個簡單的按鈕視頻36智能對象整理一致的導航按鈕視頻37使用圖標整理導航欄視頻38膠體按鈕整理視頻39創(chuàng)建網(wǎng)頁新頁視頻40創(chuàng)建故事板（線框圖，草似內(nèi)容區(qū)域）視頻41給故事板添加內(nèi)容技巧視頻42為網(wǎng)頁照片整理工作流程視頻43在網(wǎng)頁中保持照片尺寸視頻44銳化網(wǎng)頁照片視頻45網(wǎng)頁切片視頻46用戶和自動切片的使用視頻47基于圖層的切片視頻48給切片添加信息視頻49保存整個網(wǎng)頁合成圖的切片視頻50翻轉(zhuǎn)的整理視頻51圖層復合的使用視頻52優(yōu)化翻轉(zhuǎn)圖片視頻53保存每一種翻轉(zhuǎn)狀態(tài)視頻54使用腳本導入翻轉(zhuǎn)圖片視頻55利用圖層改變翻轉(zhuǎn)狀態(tài)視頻56給網(wǎng)站、博