ps設(shè)計制作時尚網(wǎng)頁效果圖教學(xué)文案

1、Good is good, but better carries it.精益求精，善益求善。ps設(shè)計制作時尚網(wǎng)頁效果圖-效果圖:第一步首先新建一個文檔。我創(chuàng)建的是寬1100px高1100px的文檔。這個文檔可以用于寬為1024px的站點，仍然還有空間去決定在可視區(qū)域之外如何布置，這樣在更大屏幕下也很好的適應(yīng)?，F(xiàn)在第一步先創(chuàng)建一個美觀抽象背景。我們使用從#1b204c到#472373這兩種顏色按照線性遞減繪制背景。第二步現(xiàn)在我們要一個吸引眼球的背景，足夠抽象到不會干擾人閱讀文字。很走運(yùn)，在GoMediasArsenal站點里有一張很棒的免費(fèi)水彩圖片，點擊“freebie(免費(fèi)贈品)”區(qū)，你就能找

2、到兩張水彩圖片;我們要的是綠色那張?，F(xiàn)在這樣很開心了，你按下CTRL+I將圖片反置，會在黑色為底的背景上呈現(xiàn)漂亮的粉紫色，這樣就更酷了!第三步現(xiàn)在把處理過的水彩圖片拷貝到主畫布上，按下CTRL+T鍵，將其調(diào)整到適當(dāng)大小。這里我們要將右邊淡化為黑色(這樣在后面我們可以更方便地編輯我們的HTML代碼)。另外，我們也不想在豎直方向過長，因此最好擦掉一些超出的地方。選取一個畫刷，選用黑色擦去底下部分。注意最好選取帶有一些紋理的畫刷，這樣擦去部分不會顯得很明顯。如果你向下滾動畫刷列表，有一個Photoshop自帶的像圖例中的畫刷。這個畫刷也能用，當(dāng)然你可能有其他更漂亮的畫刷，用起來更加自如。你選中以后，

3、在右邊和底下區(qū)域黑色填充，這樣這層就覆蓋在整個畫布上了。第四步現(xiàn)在將水彩圖層的透明度減少到70%左右，將覆蓋模式設(shè)置為混合模式。這樣一些顏色頭出來顯得更加美觀。第五步現(xiàn)在在水彩圖層之上再新建一個圖層，然后從下至上從黑色到透明做線性遞減繪制，這樣基本上整個畫布到底部就褪化為黑色了。第六步下一步在兩個新圖層中，繪制一組白色到透明的光線梯度，逐步擴(kuò)大。將這些設(shè)置為覆蓋，最外圈和最小圈的透明度分別設(shè)置為40%和100%?；旧夏銘?yīng)該在圖像上做高亮設(shè)置，顯得更多的紋理。第七步現(xiàn)在就是最后完工的背景了。深色、抽象，顏色也相當(dāng)別致。當(dāng)然一般來說粉色可能不是你的最愛，如果這樣的話，在頂層圖層上再加一種顏色圖層

4、做調(diào)整。我比較喜歡粉紫色，我就這么干了!第八步現(xiàn)在我們創(chuàng)建一個新圖層，加上一個“圖標(biāo)”。我本來沒有打算做它，因此我決定只是放一些文字做我的圖標(biāo)。因為這個教程一半在PSDTUTS，另一半在NETTUTS，我就寫“psdvsnet”幾個簡單字而已。這里我用的字體是Egyptian505BT粗體和Egytian505LTBTLight(這個字體更淡的版本我用在vs上了)。要讓vs抬起來一些，可以在字體面板的基線控制(在下面第二幅圖里展示)。最后還要給文字加上一點淡淡梯度重疊和1個像素的內(nèi)部白光。第九步現(xiàn)在這一步打開標(biāo)尺(按下CTRL+R)繪制一組引導(dǎo)線。分別在50px,320px,610px,900

5、px分別繪制四條線將頁面劃分為三欄。至少這些是我已經(jīng)用過的數(shù)值?？纯次业钠聊唤貓D，我才發(fā)現(xiàn)第三條線已經(jīng)出界了。哦!反正我已經(jīng)所有元素放入空間里去了。但是如果要做多重頁面，可能就按照其他方式用網(wǎng)格。像這樣只是設(shè)計主頁，我打算用一次這三欄一會兒以后。第十步來，現(xiàn)在我們繪制第一個黑色方框。保持標(biāo)尺和引導(dǎo)線打開狀態(tài)，新建一個圖層從一邊到另一邊繪制一個方形選取框。用黑色填充，再將透明度設(shè)置為80%，右鍵點擊圖層選擇混合選項。點擊“比劃”，然后在外邊加1px的白色筆畫，設(shè)置為重疊模式。這樣邊界看起來更酷，黑色盒子看起來更銳利。第十一步現(xiàn)在復(fù)制方框所在圖層，按CTRL+T調(diào)整方框大小，保持寬度不變，高度變短

6、(如下圖所示)。這就是我們的瀏覽框。將透明度設(shè)置為40%，填充設(shè)置為50%。這樣這個方框看起來更淡，給兩個方框添加了一些深度感，讓人覺得主次分明，有所側(cè)重。這種兩個方框的對比方式可以很好用來表現(xiàn)元素之間的視覺差異。用戶瀏覽該頁面，我們首先想讓他們看到大塊信息，然后才是瀏覽欄。將其淡化處理意在告訴用戶這部分并不是要想突出的地方，可以稍后再看。第十二步來，我們現(xiàn)在加上一些文字。這里我仍給大標(biāo)題使用EgyptianLight字體(在最終的HTML代碼中這里是一幅圖片)，菜單欄使用Arial字體(這里將是HTML文字鏈接)。這里給出關(guān)于字型的一些建議。這樣的設(shè)計很大程度上取決于我們使用一種簡潔字型。漂

7、亮大方的文字顯得非常大氣，同時它是一種細(xì)瘦字型，因此看起來十分優(yōu)雅。如果你在尋找一個高端設(shè)計外觀，細(xì)瘦經(jīng)典的字型必不可少。當(dāng)我第一次看到Helvetica超幼體的時候，我記得瘋狂地將它應(yīng)用到所有設(shè)計中，設(shè)計看起來的確既簡潔又高檔。另外，Egyptian這種特別字體具有非常筆直的衫線，又有一種方形感覺，看起來很酷(我的感覺)。還有其他很多很棒的字體可以使用。但是一般來說要用一些更為經(jīng)典的字體。換句話說，除非你確定知道你的需求，否則最好還是不要使用那些樣子奇怪的字體比方說一些看起來具有未來派的字體。實際上一個有效總體原則就是除非你自信滿滿，否則還是選擇一些更為普通的字體。另外一種用在這里效果非常不

8、錯的字型是那種位技術(shù)看起來像是ChrisGarrettMedia用的字體。我也不知道這是什么字體，或者這種類型的字體叫什么，不過非常簡潔。也許一個熱心的印刷達(dá)人在評論里告訴我們的。第十三步不管怎樣，看完ChrisGarrettMedia的站點之后，我決定給字體上再加一個梯度覆蓋，增加一些亮光，這樣看起來更酷。你在下面可以看到，這里我們正在添加一個從黑到白的梯度覆蓋，在覆蓋模式下淡化一點。第十四步現(xiàn)在我們再畫一個大黑框作為內(nèi)容區(qū)。實際上你可以復(fù)制先前的涂層，然后做一些調(diào)整。這樣我們就實現(xiàn)下圖所示的樣子了?？雌饋硐喈?dāng)酷吧!第十五步現(xiàn)在我們在內(nèi)容框里加一些假內(nèi)容。這里我還是給大多數(shù)文字用Arial字

9、體，但是標(biāo)題沒用Egyptian，我用了Georgia字體。Georgia沒有那么優(yōu)雅，但是也是個標(biāo)準(zhǔn)字體，可以放在之前的HTML代碼里用作標(biāo)題，可以不用圖像或者Flash。實際上，隨著WindowsVista的發(fā)布又有一種叫做Cambria的半標(biāo)準(zhǔn)字體產(chǎn)生。但是在蘋果上火狐瀏覽器特定尺寸下Cambria存在一些奇怪的渲染問題，因此我們現(xiàn)在還是用表現(xiàn)穩(wěn)定的Georgia字體。第十六步最后我在底部新建一個新圖層，用深紫色填充，在頂部加1px的邊界，瞧，就有個頁腳了。可選背景一這個設(shè)計很酷地方之一就是更換背景圖片很容易，換了以后依然很炫。這里我換了一張從iStockPhoto站點叫做“Passio

10、n”的圖片做背景，其顏色策略相似。這是一張很酷的3D光線渲染圖，像我們現(xiàn)在用的背景一樣，也是抽象派，看起來很炫目?？蛇x背景/顏色二這里我又換了一張iStockPhoto站點的叫做“BlueEnergy”的抽象圖片做背景。因為顏色變了，所以通覽一遍，將一些地方的顏色做了修改特別是文字地方再在主圖層上添加一個亮光。為什么奏效現(xiàn)在你可能也不會想這個詳細(xì)設(shè)計了既然我已經(jīng)寫了完整教程?，F(xiàn)在談一談為什么有這個效果，這樣可以幫助你用這些原則來創(chuàng)建你的專屬頁面這里是本次設(shè)計的幾條原則：首先，我挑選了幾張很炫的背景圖片。用幾張iStock的圖片和一張GoMedia圖片可以做出來很好看圖片。雖然很好看，但是不會喧賓奪主。他們也很容易淡出。一般容易淡化的圖片更容易處理。好圖片一定要搭配簡潔的字體排版。因為圖片已經(jīng)很可愛了，就沒有必要過分強(qiáng)調(diào)字體。一定要是清爽明了，井井有條。作品另一個因