A. 怎麼使用Photoshop做活潑手繪風格網頁設計稿
怎麼使用Photoshop做活潑手繪風格網頁設計稿？
這是一篇用Photoshop做網頁視覺設計稿的教程，文章將一步步介紹如何在Photoshop中做一個活潑的手寫風格網頁設計稿。設計過程主要分為以下幾個部分：背景、header部分、body部分、footer部分。
下面是效果圖預覽。 背景描繪 第一步：創建畫布 首先，打開photoshop創建一個新的項目。你可以點擊文件新建或按下CTRL+N快捷鍵來創建。我們選擇一個普通的畫布大小1000×900，當然這些設置可以在後期增加。
第二步：應用漸變 既然我們的畫布已經創建了，是時候開始背景的設計了。創建一個新層(快捷鍵CTRL+SHIFT+N)。接著給這個圖層從左往右添加漸變前景色設置為#edd8af背景色為#ede4c9。這個顏色用來表示盒子的顏色。
第三步：添加紋理 我們想要BoxedArt背景設計看起來像厚紙板的效果。創建另一個新層，顏色填充為#bcb6a9。下一步應用膠片顆粒藝術效果設置參數如下。接著為了使它看起來粗糙一點，我們給它應用一點高斯模糊效果。
以下就是我們應用這些效果後背景圖層看起來的效果。
方法/步驟2
網頁頭部 HEADER部分 第四步：導航條設計 頂部的導航區域部分我們放置了一條條狀的帶子。我們可以看到這種帶狀風格在很多網站都有應用，不過我們這里用到的有一點不同。由於BoxedArt想要將這個設計看起來像用來發送郵件的盒子。為了創建這個導航條我們需要從bigstockphotos.com上下載一個帶狀的圖片，使用自由變換工具(在編輯菜單下選擇自由變換或者快捷鍵CTRL+T)沿著頂部的區域伸展開來。接下來創建透明效果我們要把圖層樣式設置為線性加深。下面就是效果：
第五步：老郵票導航按鈕 停留在盒子主題，我們要讓這個導航按鈕看起來有點破舊磨損郵票。為了達到這種效果列，我們需要一張老郵票(還是在bigstockphotos.com上下載)。下載後第一步是描出郵票的路徑，從背景中提出來，郵票上依然有圖像。為了覆蓋郵票上的圖像，我們用一張黃色的紙張粘貼在上面也就是添加一個紋理效果。 下一步，我們要給導航按鈕添加一些顏色來區別各種不同類的導航，我們在郵票上添加一些裝飾花紋效果，在你完成創建好顏色盒子後，我們把這個層的樣式修改為線性加深以便顏色能與老照片混合在一起。然後我們增加另一個新層自上而下顏色為黑白我們給這個圖層添加膠片顆粒藝術效果設置如下，最後我們把圖層設置為正片疊底，把這個不透明度設置為60%。
第六步：應用導航按鈕到導航條上 現在我們已經創建好了幾個不同顏色的郵票按鈕，是時候來完成最後header部分的准備工作了，把導航按鈕應用到導航條上，我們通過給每個導航按鈕應用由mathilde設計的Sketchy icons圖標來添加一些手寫效果。這些icon圖標是放置在每個顏色盒子，並調整了中心圖標的位置。同樣的步驟把icon應用到每個郵票上去。
下一步，對每個郵票使用自由變換工具(CTRL+T)，將他們調整不同的朝向給他們一種拍打的效果。這一步後，我們切換到文字工具，每個分類使用一種手寫字體。這里我用到的是「Loved by the King」。最後我們的導航條就完成了。
第七步：開始頂部介紹區域 首先創建一個新層(CTRL+SHIFT+N)在工具欄中選擇矩形選框工具。現在在頁面上創建一個矩形使用白色來填充。這塊區域將被用來當做一張白紙。
現在我們已經完成白色紙張部分了，在白紙圖層下面創建另一個新層然後填充黑色，這個將用來創建陰影。完成之後我們轉到濾鏡模糊高斯模糊半徑設置為6.5.之後把這個層的不透明度設置為20%，向右移動5pixels。然後添加主要的文字，這樣的話短語「Simplify and Save」會被用到，位於頂部紙張部分。
現在你看在白紙下面有陰影，但是紙張並不是粘在哪裡的。所以我們在紙張的一邊來添加一些膠帶，如先前的教程一樣，我們在另一邊添加了一個郵戳來保持畫面的平衡。在你的紙張完成後，我們選擇一些手寫字體來添加一些文字。看起來的話想事包裹上的信息。最後加亮這些圖層按下CTRL+T自由變換工具，角度設為-1.5 degrees 使它看起來更加具有真實效果。
第八步：貼上一個便簽 我們使用了一個便簽設計來分開空間來介紹我們網站的優惠注冊信息。這個在整個盒子主題上運用的非常好，設計這樣一個便簽效果需要創建另一個新的圖層，選擇鋼筆工具使用鋼筆工具來繪制一個方形區域如下圖所示
在你完成之後轉到路徑面板，按住CTRL鍵點擊路徑圖層，接著你會看到方形區域已經載入選區了，之後使用前景色#fffb78背景色#fffcd1從左上角到右下角繪制漸變。你將會看到這樣一個熟悉的黃色便簽紙形狀。 在你完成之後轉到路徑面板，按住CTRL鍵點擊路徑圖層，接著你會看到方形區域已經載入選區了，之後使用前景色#fffb78背景色#fffcd1從左上角到右下角繪制漸變。你將會看到這樣一個熟悉的黃色便簽紙形狀。
第十步：給便簽紙添加內容 下一步，給便簽紙添加一些文字，在我們的便簽紙中我們要添加一些加入等按鈕，為了創建相似的按鈕首先我們繪制一個盒子使用綠色填充，然後添加一個蒙板選擇一種grudge筆刷。下一步遮住按鈕的一些部分看起來就像破損一樣，這就是我們創建郵戳的效果。
B. 怎麼修改網頁背景代碼
一、網頁單色背景 - TOP
如果純顏色的網頁背景，只需要對body設置background背景顏色即可
body{background:#FFF}
設置網頁背景為白色
二、規律背景圖片 - TOP
1、從上到下漸變橫向相同背景
漸變從上到下寬度全屏背景效果截圖
這種網頁背景只需要切出1像素寬，高度合適的圖片作為背景素材，如下圖：
切出這樣一個豎條圖片素材作為背景素材
body{background:#FFF url(bg.gif) repeat-x 0}
這樣設置這個圖片為背景圖片靠網頁頂部水平平鋪，背景為白色，這里注意根據你的圖片路徑設置好引入圖片路徑。
2、水平平鋪類背景圖片
比如2014版DIVCSS5網頁，原理和漸變平鋪相同，也是切出一豎條後作為Body背景水平平鋪實現，這樣就全屏網頁背景鋪滿。
css切出這樣一個豎條效果截圖
代碼和第1種相同，只是圖片不同而已。對body設置背景圖片水平平鋪。
三、不規律大圖背景 - TOP
常常看到一些專題或形象網頁，背景是一種非常大圖片作為背景，而通常情況下寬屏和窄屏顯示器都能顯示鋪滿的全屏背景圖片，就像圖片能自適應寬度大小一樣的。其實這種實現一樣非常簡單，將這張圖片寬度美工設計足夠大，比如市場上最寬顯示屏解析度寬度為2560像素，那麼要讓這樣的寬屏顯示器瀏覽此網頁也能鋪滿全屏，那麼你的這張背景圖片就必須做成寬度大於或等於2560px寬度的，這樣以來寬屏、窄屏顯示器打開此網頁都能鋪滿全屏，最小化、最大化、改變瀏覽器窗口打開背景圖片都是全屏的居中的看上去就像背景圖片自適應大小一樣。
關鍵：全屏自適應背景圖片關鍵是圖片做足夠寬，以最寬解析度顯示屏能都鋪滿，小解析度自然就更是鋪滿。同時需要設置這樣背景圖片作為body背景後需要居中。
假如這張背景圖片為：bg.jpg
設置CSS代碼：
body{background: url(bg.jpg) no-repeat center 0}
代碼解釋：設置這個圖片為網頁背景，通常不平鋪（no-repeat），水平居中，靠上顯示
四、頭部背景圖片和底部背景圖片內容多少高度可增減頭部底部背景不變 - TOP
這里DIVCSS5為大家介紹兩種常見頭部和底部不同背景圖片技巧設置布局方法。
1、頭部和版權圖片
這種直接將頭部背景圖片設置為body背景居中靠上顯示，底部版權地方DIV設置寬度100%；同時設置此背景圖片或背景顏色。
body{background: url(bg.jpg) no-repeat center 0} #footer{margin:0 auto;width:100%;background: url(ft-bg.jpg) no-repeat center 0}
這樣即可實現頭部底部背景不同，同時不受內容多少高度影響。
2、網頁靠頂部上背景圖與固定底部靠下背景圖
而靠底部背景圖片遠超出了版權底部盒子高度。
網頁靠上靠下背景圖片不同，內容區域跨越靠上和靠下的背景效果截圖
這樣的結構上下不同圖片，不隨中間內容增高減少影響背景布局，通常對html標簽和body設置背景即可實現。
假如頂部深藍背景圖片為「top.jpg」,底部淺藍背景圖片為「foot.jpg」
DIV CSS設置網頁背景關鍵CSS代碼：
html{background: url(top.jpg) no-repeat center 0} body{background: url(foot.jpg) no-repeat center bottom}