從10月20日期，25學(xué)堂將會(huì)不定期推出相關(guān)網(wǎng)頁設(shè)計(jì)，ui設(shè)計(jì)，APP界面設(shè)計(jì)系列的設(shè)計(jì)技巧課程。我們會(huì)以圖文并茂，或視頻教學(xué)的方式展示給網(wǎng)頁設(shè)計(jì)者。對(duì)于網(wǎng)頁設(shè)計(jì)初學(xué)者來說，是一個(gè)快速走上設(shè)計(jì)之路的便捷之路，也是前輩留下的設(shè)計(jì)寶典。對(duì)于我們這些從事設(shè)計(jì)的老鳥來說，也是一次溫故而知新的設(shè)計(jì)回味。

在此，25學(xué)堂的《Web網(wǎng)頁設(shè)計(jì)技巧經(jīng)驗(yàn)之談》第一節(jié)課正式上課了。

1、如何處理ps設(shè)計(jì)過程中一些技巧。

首先掌握好ps的設(shè)計(jì)快捷鍵。

選擇功能?

? 全部選?。骸綜trl】+【A】

? 取消選擇：【Ctrl】+【D】

? 重新選擇：【Ctrl】+【Shift】+【D】

? 羽化選擇：【Ctrl】+【Alt】+【D】

? 反向選擇：【Ctrl】+【Shift】+【I】? 撤銷選擇：【Ctrl】+【Z】

? 路徑變選區(qū) 數(shù)字鍵盤的：【Enter】

? 載入選區(qū)： 【Ctrl】+點(diǎn)按圖層、路徑、通道面板中的縮約圖

圖層混合模式?

? 循環(huán)選擇混合模式 ：【Alt】+【-】或【+】

? 正常 ：【Ctrl】+【Alt】+【N】

? 閾值（位圖模式）： 【Ctrl】+【Alt】+【L】

? 溶解 ：【Ctrl】+【Alt】+【I】

? 背后 ：【Ctrl】+【Alt】+【Q】

? 清除 ：【Ctrl】+【Alt】+【R】

? 正片疊底： 【Ctrl】+【Alt】+【M】?

? 屏幕： 【Ctrl】+【Alt】+【S】

? 疊加： 【Ctrl】+【Alt】+【O】

? 柔光： 【Ctrl】+【Alt】+【F】

? 強(qiáng)光：【Ctrl】+【Alt】+【H】

? 顏色減淡 ：【Ctrl】+【Alt】+【D】

? 顏色加深 ：【Ctrl】+【Alt】+【B】

? 變暗： 【Ctrl】+【Alt】+【K】

? 變亮：【Ctrl】+【Alt】+【G】

? 差值： 【Ctrl】+【Alt】+【E】

? 排除：【Ctrl】+【Alt】+【X】

? 色相： 【Ctrl】+【Alt】+【U】

? 飽和度： 【Ctrl】+【Alt】+【T】

? 顏色： 【Ctrl】+【Alt】+【C】

? 光度： 【Ctrl】+【Alt】+【Y】

? 復(fù)制當(dāng)前圖層：【Ctrl】+【J】

色階：【Ctrl】+【L】? 曲線：【Ctrl】+【M】

? 強(qiáng)行關(guān)閉當(dāng)前話框：【Ctrl】+【Alt】+【W(wǎng)】

? 粘貼：【Ctrl】+【Alt】+【V】

? 無限返回上一步：【Ctrl】+【Alt】+【Z】

2、ps毛邊的處理方式

(1)調(diào)整后的毛邊

當(dāng)對(duì)一個(gè)位圖的大小進(jìn)行調(diào)整后，正常情況下會(huì)留下1px的毛邊（如果你注意的話），邊界會(huì)變得模糊，如果繼續(xù)調(diào)整模糊度會(huì)加大，這個(gè)問題太不起眼了，以至于你無法用肉眼來理繪，我們先用商品圖片舉例子：

在這里，我們應(yīng)該把圖放大合適的倍數(shù)，把出現(xiàn)透明的區(qū)域刪除掉或補(bǔ)齊。

再者，不能放大圖片，最好重新畫質(zhì)圖片，因?yàn)榉糯缶蜁?huì)出現(xiàn)鋸齒。

（2)關(guān)于邊框和背景

有些區(qū)塊需要用邊框裝飾點(diǎn)綴得醒目一點(diǎn),有文字區(qū)塊圖片區(qū)塊等,文字區(qū)塊加邊框的建議使用同基色的背景色填充區(qū)塊,不然內(nèi)容會(huì)很空洞，圖片加邊框的話,如果是CSS定義的邊框最好是加上間隔距離,因?yàn)閳D片不是固定的,所以可能會(huì)出現(xiàn)底色與邊框不協(xié)調(diào),嚴(yán)重的會(huì)造成毛邊效果。

注意一：白色背景下，背景不要比邊框太深，再努力的調(diào)整區(qū)塊內(nèi)容的顏色能與背景融合也于事無補(bǔ)，邊框成了毛邊。

注意二：在深色背景下，才使用加亮邊框?；蚴峭该鞅尘暗仍O(shè)置。

注意三：關(guān)于圖片邊框，圖片本身就有背景，而且色彩是多樣的，在給圖片加邊框時(shí)也最好是與圖片背景同一個(gè)基色的背景，而且最好是取與圖片最邊上的色彩的深基色，如果是邊上有多種顏色，取最多的那顏色。

注意四：在多個(gè)圖片混排的時(shí)候，圖片邊框的色彩就不協(xié)調(diào)了，如果在圖片是不確定的情況下，加邊框時(shí)最好是給圖片與邊框之間加上邊框距。白色為底。

注意五：在看看在深色背景下的效果，深色背景下可以有兩種方案，一是去掉外框，以白色間距邊框，二是加亮外框，留出與背景相同顏色的間距。

（3)關(guān)于邊距與對(duì)齊

設(shè)計(jì)師尋找靈感時(shí)，偶爾會(huì)隨意、自由的拖拉擺放區(qū)塊、填色、繪制等，直到滿意才會(huì)停下，在這個(gè)過程中會(huì)出現(xiàn)有與“經(jīng)驗(yàn)”掛鉤的細(xì)小漏洞。

（4)關(guān)于陰影與質(zhì)感：

在設(shè)計(jì)點(diǎn)綴版面時(shí)需要有深度和3D質(zhì)感的時(shí)候，可能就會(huì)用到投影、陰影、光線感等效果。但web設(shè)計(jì)和平面廣告不同，太強(qiáng)、太硬的質(zhì)感只會(huì)讓頁面顯得粗糙，web頁面是個(gè)很細(xì)致的活，還是那句話，這里只說細(xì)節(jié)，陰影要小一點(diǎn)、顏色要淺一點(diǎn),另外這里面其實(shí)還有一個(gè)問題，和前面講的邊框一樣，如果圖片是的投影顏色與圖片顏色（或背景顏色）相同，效果會(huì)很尷尬，所以要邊框一樣給圖片加一個(gè)間隔距離。

理論上講，將一個(gè)沒有質(zhì)感的元素進(jìn)行投影或加陰影是不現(xiàn)實(shí)的！前面講的一些陰影效果，元素本身沒有任何質(zhì)感。

關(guān)于深色背景下的質(zhì)感，陰影和投影是不現(xiàn)實(shí)的，所以只能用發(fā)光或光線質(zhì)感來實(shí)現(xiàn)。