Photoshop做活潑手繪風格網頁設計稿
這是一篇用Photoshop做網頁視覺設計稿的教程,文章將一步步介紹如何在Photoshop中做一個活潑的手寫風格網頁設計稿。設計過程主要分為以下幾個部分:背景、header部分、body部分、footer部分。
背景描繪
第一步:創建畫布
首先,打開photoshop創建一個新的專案。你可以點擊檔>新建或按下CTRL+N快速鍵來創建。我們選擇一個普通的畫布大小1000×900,當然這些設置可以在後期增加。
第二步:應用漸變
既然我們的畫布已經創建了,是時候開始背景的設計了。創建一個新層(快速鍵CTRL+SHIFT+N)。接著給這個圖層從左往右添加漸變前景色設置為#edd8af背景色為#ede4c9。這個顏色用來表示盒子的顏色。
第三步:添加紋理
我們想要BoxedArt背景設計看起來像厚紙板的效果。創建另一個新層,顏色填充網頁設計為#bcb6a9。下一步應用膠片顆粒藝術效果設置參數如下。接著為了使它看起來粗糙一點,我們給它應用一點高斯模糊效果。
HEADER部分
第四步:導航條設計
頂部的導航區域部分我們放置了一條條狀的帶子。我們可以看到這種帶狀風格在很多網站都有應用,不過我們這裡用到的有一點不同。由於BoxedArt想要將這個設計看起來像用來發送郵件的盒子。為了創建這個導航條我們需要從bigstockphotos.com上下載一個帶狀的圖片,使用自由變換工具(在編輯功能表下選擇自由變換或者快速鍵CTRL+T)沿著頂部的區域網頁設計伸展開來。接下來創建透明效果我們要把圖層樣式設置為線性加深。下麵就是效果:
第五步:老郵票導航按鈕
停留在盒子主題,我們要讓這個導航按鈕看起來有點破舊磨損郵票。為了達到這種效果列,我們需要一張老郵票。下載後第一步是描出郵票的路徑,從背景中提出來,郵票上依然有圖像。為了覆蓋郵票上的圖像,我們用一張黃色的紙張粘貼在上面也就是添加一個紋理效果。
下一步,我們要給導航按鈕添加一些顏色來區別各種不同類的導航,我們在郵票網頁設計上添加一些裝飾花紋效果,在你完成創建好顏色盒子後,我們把這個層的樣式修改為線性加深以便顏色能與老照片混合在一起。然後我們增加另一個新層自上而下顏色為黑白我們給這個圖層添加膠片顆粒藝術效果設置如下,最後我們把圖層設置為正片疊底,把這個不透明度設置為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+SHIFT+N)。過程如之前給白紙創建陰影差不多,但是是將不透明度設置為40%。你需要變換一下陰影來創建一種傾斜效果,輕微的拖動一下如圖所示。
第十步:給便簽紙添加內容
下一步,給便簽紙添加一些文字,在我們的便簽紙中我們要添加一些加入等按鈕,為了創建相似的按鈕首先我們繪製一個盒子使用綠色填充,然後添加一個蒙板選擇一種grudge筆刷。下一步遮住按鈕的一些部分看起來就像破損一樣,這就是我們創建郵戳的效果。
留言列表