PS教程:設(shè)計(jì)BoxedArt網(wǎng)站模板教程

 這篇photoshop網(wǎng)站設(shè)計(jì)教程是我們?cè)诮榻B2009年度TOP30佳photoshop精品教程 里面的系列教程之一，我們對(duì)我們BoxedArt.com網(wǎng)站煞費(fèi)苦心的設(shè)計(jì)感到非常的自豪，我們從設(shè)計(jì)、內(nèi)容、編程為此傾入了幾個(gè)月的時(shí)間就是為了重新上線給大家?guī)碜詈玫姆?wù)。好了，我們將展示出我們的設(shè)計(jì)秘密。好了二話不說，讓我們開始這一步步指導(dǎo)大家如何在photoshop中設(shè)計(jì)網(wǎng)頁(yè)。

這個(gè)photoshop web界面教程分為以下幾個(gè)部分：

背景，header部分，body部分，footer部分

背景

第一步：創(chuàng)建一個(gè)畫布

首先，打開photoshop創(chuàng)建一個(gè)新的項(xiàng)目。你可以點(diǎn)擊文件>新建或按下CTRL+N快捷鍵來創(chuàng)建。我們選擇一個(gè)普通的畫布大小1000×900，當(dāng)然這些設(shè)置可以在后期增加。

第二步：應(yīng)用漸變

既然我們的畫布已經(jīng)創(chuàng)建了，是時(shí)候開始背景的設(shè)計(jì)了。創(chuàng)建一個(gè)新層(快捷鍵CTRL+SHIFT+N)。接著給這個(gè)圖層從左往右添加漸變前景色設(shè)置為#edd8af背景色為 #ede4c9.這個(gè)顏色用來表示盒子的顏色。

第三步：添加紋理

我們想要BoxedArt背景設(shè)計(jì)看起來像厚紙板的效果。創(chuàng)建另一個(gè)新層，顏色填充為#bcb6a9。下一步應(yīng)用膠片顆粒藝術(shù)效果設(shè)置參數(shù)如下。接著為了使它看起來粗糙一點(diǎn)，我們給它應(yīng)用一點(diǎn)高斯模糊效果。

以下就是我們應(yīng)用這些效果后背景圖層看起來的效果。

HEADER部分

第四步：導(dǎo)航條設(shè)計(jì)

頂部的導(dǎo)航區(qū)域部分我們放置了一條條狀的帶子。我們可以看到這種帶狀風(fēng)格在很多網(wǎng)站都有應(yīng)用，不過我們這里用到的有一點(diǎn)不同。由于BoxedArt 想要將這個(gè)設(shè)計(jì)看起來像用來發(fā)送郵件的盒子。為了創(chuàng)建這個(gè)導(dǎo)航條我們需要從bigstockphotos.com上下載一個(gè)帶狀的圖片，使用自由變換工具(在編輯菜單下選擇自由變換或者快捷鍵CTRL+T)沿著頂部的區(qū)域伸展開來 。接下來創(chuàng)建透明效果我們要把圖層樣式設(shè)置為線性加深。下面就是效果：

第五步：老郵票導(dǎo)航按鈕

停留在盒子主題，我們要讓這個(gè)導(dǎo)航按鈕看起來有點(diǎn)破舊磨損郵票。為了達(dá)到這種效果列，我們需要一張老郵票(還是在bigstockphotos.com上下載)。下載后第一步是描出郵票的路徑，從背景中提出來，郵票上依然有圖像。為了覆蓋郵票上的圖像，我們用一張黃色的紙張粘貼在上面也就是添加一個(gè)紋理效果。

下一步，我們要給導(dǎo)航按鈕添加一些顏色來區(qū)別各種不同類的導(dǎo)航，我們?cè)卩]票上添加一些裝飾花紋效果，在你完成創(chuàng)建好顏色盒子后，我們把這個(gè)層的樣式修改為線性加深以便顏色能與老照片混合在一起。然后我們?cè)黾恿硪粋€(gè)新層自上而下顏色為黑白我們給這個(gè)圖層添加膠片顆粒藝術(shù)效果設(shè)置如下，最后我們把圖層設(shè)置為正片疊底，把這個(gè)不透明度設(shè)置為60%。

注意：您可以在上述屏幕快照看到創(chuàng)建的郵票圖層。

第六步應(yīng)用導(dǎo)航按鈕到導(dǎo)航條上

現(xiàn)在我們已經(jīng)創(chuàng)建好了幾個(gè)不同顏色的郵票按鈕，是時(shí)候來完成最后header部分的準(zhǔn)備工作了，把導(dǎo)航按鈕應(yīng)用到導(dǎo)航條上，我們通過給每個(gè)導(dǎo)航按鈕應(yīng)用由mathilde設(shè)計(jì)的Sketchy icons圖標(biāo)來添加一些手寫效果。這些icon圖標(biāo)是放置在每個(gè)顏色盒子，并調(diào)整了中心圖標(biāo)的位置。同樣的步驟把icon應(yīng)用到每個(gè)郵票上去。