photoshop設(shè)計(jì)時尚網(wǎng)站模板(5)
來源:未知
作者:學(xué)photoshop
學(xué)習(xí):1860人次
前幾天暴風(fēng)彬彬在譯言看到一篇關(guān)于如何設(shè)計(jì)網(wǎng)頁的譯文,教程以Step By Step的方式詳細(xì)的講解了如何從無到有設(shè)計(jì)一個時尚的網(wǎng)站頁面,設(shè)計(jì)工具使用photoshop,讀者既能學(xué)到網(wǎng)頁設(shè)計(jì)的一些理念有能學(xué)到一些photoshop的網(wǎng)頁處理技術(shù)。即使是網(wǎng)頁設(shè)計(jì)高手,也能從中領(lǐng)略到當(dāng)今國外比較流行的Web設(shè)計(jì)風(fēng)格及元素。該教程分為設(shè)計(jì)成效果圖和使用XHTML及CSS制作成網(wǎng)頁兩部分,以下是設(shè)計(jì)教程部分。感謝maidoumao的辛苦翻譯。 在本教程中,我們使用簡潔細(xì)瘦的字體,配上優(yōu)美的背景圖片,經(jīng)過精心排布的空間布局,設(shè)計(jì)一個高檔的網(wǎng)頁。
當(dāng)你看完本教程,你再去看看我們的姐妹站點(diǎn)NETTUTS,然后跟著做,這樣我們就用簡潔的HTML代碼實(shí)現(xiàn)設(shè)計(jì)。來吧,讓我們開始!
大家好!我在數(shù)年前通過閱讀photoshop教程開始進(jìn)入設(shè)計(jì)領(lǐng)域,而后創(chuàng)建了PSDTUTS。我希望這個站點(diǎn)可以幫助和鼓舞其他人!除了PSDTUTS之外,我還在一家叫做Envato的大公司里做了很多不同站點(diǎn),完成了很棒的項(xiàng)目。
前端設(shè)計(jì)
首先我們開始設(shè)計(jì)。
一個優(yōu)雅的設(shè)計(jì)可能符合設(shè)計(jì)者的文件夾類型站點(diǎn)的需求,但是可能要根據(jù)各種各樣的原因而改變。這一切取決于要有良好的版面,結(jié)構(gòu)化的布局以及具有視覺吸引力的背景。
設(shè)計(jì)真正的力量在于向您展現(xiàn)如何在保持設(shè)計(jì)簡潔的同時并完成。在教程中photoshop部分的最后,我將向您展示如何輕易地更換背景和字體,并闡述這樣設(shè)計(jì)良好效果的原因。
結(jié)構(gòu)很簡單:橫向菜單,主標(biāo)題面板和內(nèi)容區(qū)。盡管是設(shè)計(jì)主頁,你也可以想象一下內(nèi)部頁面可能也就是具有不同的主題面板和新的內(nèi)容區(qū)。出于簡潔的考慮,我們將只講解主頁的設(shè)計(jì)。
第一步
首先新建一個文檔。我創(chuàng)建的是寬1100px高1100px的文檔。這個文檔可以用于寬為1024px的站點(diǎn),仍然還有空間去決定在可視區(qū)域之外如何布置,這樣在更大屏幕下也很好的適應(yīng)。
現(xiàn)在第一步先創(chuàng)建一個美觀抽象背景。我們使用從#1b204c到#472373這兩種顏色按照線性遞減繪制背景。
第二步
現(xiàn)在我們要一個吸引眼球的背景,足夠抽象到不會干擾人閱讀文字。很走運(yùn),在GoMedia’s Arsenal站點(diǎn)里有一張很棒的免費(fèi)水彩圖片,點(diǎn)擊“freebie(免費(fèi)贈品)”區(qū),你就能找到兩張水彩圖片;我們要的是綠色那張。
現(xiàn)在這樣很開心了,你按下CTRL+I將圖片反置,會在黑色為底的背景上呈現(xiàn)漂亮的粉紫色,這樣就更酷了!
第三步
現(xiàn)在把處理過的水彩圖片拷貝到主畫布上,按下CTRL+T鍵,將其調(diào)整到適當(dāng)大小。這里我們要將右邊淡化為黑色(這樣在后面我們可以更方便地編輯我們的HTML代碼)。另外,我們也不想在豎直方向過長,因此最好擦掉一些超出的地方。選取一個畫刷,選用黑色擦去底下部分。
注意最好選取帶有一些紋理的畫刷,這樣擦去部分不會顯得很明顯。如果你向下滾動畫刷列表,有一個photoshop自帶的像圖例中的畫刷。這個畫刷也能用,當(dāng)然你可能有其他更漂亮的畫刷,用起來更加自如。
你選中以后,在右邊和底下區(qū)域黑色填充,這樣這層就覆蓋在整個畫布上了。
第四步
現(xiàn)在將水彩圖層的透明度減少到70%左右,將覆蓋模式設(shè)置為混合模式。這樣一些顏色頭出來顯得更加美觀。
[table][tr][/tr] [/table]
.
第五步
現(xiàn)在在水彩圖層之上再新建一個圖層,然后從下至上從黑色到透明做線性遞減繪制,這樣基本上整個畫布到底部就褪化為黑色了。
第六步
下一步在兩個新圖層中,繪制一組白色到透明的光線梯度,逐步擴(kuò)大。將這些設(shè)置為覆蓋,最外圈和最小圈的透明度分別設(shè)置為40%和100%。
基本上你應(yīng)該在圖像上做高亮設(shè)置,顯得更多的紋理。
第七步
現(xiàn)在就是最后完工的背景了。深色、抽象,顏色也相當(dāng)別致。當(dāng)然一般來說粉色可能不是你的最愛,如果這樣的話,在頂層圖層上再加一種顏色圖層做調(diào)整。我比較喜歡粉紫色,我就這么干了!
第八步
現(xiàn)在我們創(chuàng)建一個新圖層,加上一個“圖標(biāo)”。我本來沒有打算做它,因此我決定只是放一些文字做我的圖標(biāo)。因?yàn)檫@個教程一半在PSDTUTS,另一半在NETTUTS,我就寫“psd vs net”幾個簡單字而已。
這里我用的字體是Egyptian505 BT粗體和Egytian505 LT BT Light(這個字體更淡的版本我用在‘vs‘上了)。要讓‘vs’抬起來一些,可以在字體面板的基線控制(在下面第二幅圖里展示)。
最后還要給文字加上一點(diǎn)淡淡梯度重疊和1個像素的內(nèi)部白光。
第九步
現(xiàn)在這一步打開標(biāo)尺(按下CTRL+R)繪制一組引導(dǎo)線。分別在50px,320px,610px,900px分別繪制四條線將頁面劃分為三欄。至少這些是我已經(jīng)用過的數(shù)值。看看我的屏幕截圖,我才發(fā)現(xiàn)第三條線已經(jīng)出界了。。。哦!
反正我已經(jīng)所有元素放入空間里去了。但是如果要做多重頁面,可能就按照其他方式用網(wǎng)格。像這樣只是設(shè)計(jì)主頁,我打算用一次這三欄——一會兒以后。
[table][tr][/tr] [/table]
.
第十步
來,現(xiàn)在我們繪制第一個黑色方框。保持標(biāo)尺和引導(dǎo)線打開狀態(tài),新建一個圖層從一邊到另一邊繪制一個方形選取框。用黑色填充,再將透明度設(shè)置為80%,右鍵點(diǎn)擊圖層選擇混合選項(xiàng)。點(diǎn)擊“比劃”,然后在外邊加1px的白色筆畫,設(shè)置為重疊模式。這樣邊界看起來更酷,黑色盒子看起來更銳利。
第十一步
現(xiàn)在復(fù)制方框所在圖層,按CTRL+T調(diào)整方框大小,保持寬度不變,高度變短(如下圖所示)。這就是我們的瀏覽框。
將透明度設(shè)置為40%,填充設(shè)置為50%。這樣這個方框看起來更淡,給兩個方框添加了一些深度感,讓人覺得主次分明,有所側(cè)重。
這種兩個方框的對比方式可以很好用來表現(xiàn)元素之間的視覺差異。用戶瀏覽該頁面,我們首先想讓他們看到大塊信息,然后才是瀏覽欄。將其淡化處理意在告訴用戶這部分并不是要想突出的地方,可以稍后再看。
第十二步
來,我們現(xiàn)在加上一些文字。這里我仍給大標(biāo)題使用Egyptian Light字體(在最終的HTML代碼中這里是一幅圖片),菜單欄使用Arial字體(這里將是HTML文字鏈接)。
這里給出關(guān)于字型的一些建議。這樣的設(shè)計(jì)很大程度上取決于我們使用一種簡潔字型。漂亮大方的文字顯得非常大氣,同時它是一種細(xì)瘦字型,因此看起來十分優(yōu)雅。
如果你在尋找一個高端設(shè)計(jì)外觀,細(xì)瘦經(jīng)典的字型必不可少。當(dāng)我第一次看到Helvetica超幼體的時候,我記得瘋狂地將它應(yīng)用到所有設(shè)計(jì)中,設(shè)計(jì)看起來的確既簡潔又高檔。
另外,Egyptian這種特別字體具有非常筆直的衫線,又有一種方形感覺,看起來很酷(我的感覺)。
還有其他很多很棒的字體可以使用。但是一般來說要用一些更為經(jīng)典的字體。換句話說,除非你確定知道你的需求,否則最好還是不要使用那些樣子奇怪的字體——比方說一些看起來具有未來派的字體。實(shí)際上一個有效總體原則就是除非你自信滿滿,否則還是選擇一些更為普通的字體。
另外一種用在這里效果非常不錯的字型是那種位技術(shù)——看起來像是Chris Garrett Media用的字體。我也不知道這是什么字體,或者這種類型的字體叫什么,不過非常簡潔。也許一個熱心的印刷達(dá)人在評論里告訴我們的。
第十三步
不管怎樣,看完Chris Garrett Media的站點(diǎn)之后,我決定給字體上再加一個梯度覆蓋,增加一些亮光,這樣看起來更酷。你在下面可以看到,這里我們正在添加一個從黑到白的梯度覆蓋,在覆蓋模式下淡化一點(diǎn)。
第十四步
現(xiàn)在我們再畫一個大黑框作為內(nèi)容區(qū)。實(shí)際上你可以復(fù)制先前的涂層,然后做一些調(diào)整。
這樣我們就實(shí)現(xiàn)下圖所示的樣子了?雌饋硐喈(dāng)酷吧!!
[table][tr][/tr] [/table]
.
第十五步
現(xiàn)在我們在內(nèi)容框里加一些假內(nèi)容。這里我還是給大多數(shù)文字用Arial字體,但是標(biāo)題沒用Egyptian,我用了Georgia字體。Georgia沒有那么優(yōu)雅,但是也是個標(biāo)準(zhǔn)字體,可以放在之前的HTML代碼里用作標(biāo)題,可以不用圖像或者Flash。
實(shí)際上,隨著Windows Vista的發(fā)布又有一種叫做Cambria的半標(biāo)準(zhǔn)字體產(chǎn)生。但是在蘋果上火狐瀏覽器特定尺寸下Cambria存在一些奇怪的渲染問題,因此我們現(xiàn)在還是用表現(xiàn)穩(wěn)定的Georgia字體。
第十六步
最后我在底部新建一個新圖層,用深紫色填充,在頂部加1px的邊界,瞧,就有個頁腳了。
準(zhǔn)備建站
把以上這些放在一起,準(zhǔn)備建站了。
可選背景一
這個設(shè)計(jì)很酷地方之一就是更換背景圖片很容易,換了以后依然很炫。這里我換了一張從iStockPhoto站點(diǎn)叫做“Passion”的圖片做背景,其顏色策略相似。這是一張很酷的3D光線渲染圖,像我們現(xiàn)在用的背景一樣,也是抽象派,看起來很炫目。
可選背景/顏色二
這里我又換了一張iStockPhoto站點(diǎn)的叫做“Blue Energy”的抽象圖片做背景。因?yàn)轭伾兞,所以通覽一遍,將一些地方的顏色做了修改——特別是文字地方——再在主圖層上添加一個亮光。
為什么奏效
現(xiàn)在你可能也不會想這個詳細(xì)設(shè)計(jì)了——既然我已經(jīng)寫了完整教程。現(xiàn)在談一談為什么有這個效果,這樣可以幫助你用這些原則來創(chuàng)建你的專屬頁面
這里是本次設(shè)計(jì)的幾條原則:
首先,我挑選了幾張很炫的背景圖片。用幾張iStock的圖片和一張GoMedia圖片可以做出來很好看圖片。雖然很好看,但是不會喧賓奪主。他們也很容易淡出。一般容易淡化的圖片更容易處理。
好圖片一定要搭配簡潔的字體排版。因?yàn)閳D片已經(jīng)很可愛了,就沒有必要過分強(qiáng)調(diào)字體。一定要是清爽明了,井井有條。
作品另一個因素就是有足夠空間。在復(fù)雜背景下,很容易看東西就一團(tuán)糟,所以元素之間,方框以內(nèi)等地方要保持足夠的空間?臻g寬裕也是讓設(shè)計(jì)看起來更為高檔的好方法。沒人喜歡亂七八糟的下等設(shè)計(jì)。
誠然還有很多其他方面的東西可以談,像顏色、優(yōu)先級等,但是我認(rèn)為這里需要關(guān)注的主要設(shè)計(jì)元素還是字體和背景的搭配。最后總結(jié)一下,這里一幅小圖就說明一切了:-)
現(xiàn)在看HTML/CSS
photoshop部分的工作已經(jīng)完工了,現(xiàn)在要看看HTML/CSS!接下來來到NETTUTS,我們把設(shè)計(jì)應(yīng)用到正在使用的網(wǎng)站上。
英文原文:Create a Sleek, High-End Web Design from Scratch
當(dāng)你看完本教程,你再去看看我們的姐妹站點(diǎn)NETTUTS,然后跟著做,這樣我們就用簡潔的HTML代碼實(shí)現(xiàn)設(shè)計(jì)。來吧,讓我們開始!
大家好!我在數(shù)年前通過閱讀photoshop教程開始進(jìn)入設(shè)計(jì)領(lǐng)域,而后創(chuàng)建了PSDTUTS。我希望這個站點(diǎn)可以幫助和鼓舞其他人!除了PSDTUTS之外,我還在一家叫做Envato的大公司里做了很多不同站點(diǎn),完成了很棒的項(xiàng)目。
前端設(shè)計(jì)
首先我們開始設(shè)計(jì)。
一個優(yōu)雅的設(shè)計(jì)可能符合設(shè)計(jì)者的文件夾類型站點(diǎn)的需求,但是可能要根據(jù)各種各樣的原因而改變。這一切取決于要有良好的版面,結(jié)構(gòu)化的布局以及具有視覺吸引力的背景。
設(shè)計(jì)真正的力量在于向您展現(xiàn)如何在保持設(shè)計(jì)簡潔的同時并完成。在教程中photoshop部分的最后,我將向您展示如何輕易地更換背景和字體,并闡述這樣設(shè)計(jì)良好效果的原因。
結(jié)構(gòu)很簡單:橫向菜單,主標(biāo)題面板和內(nèi)容區(qū)。盡管是設(shè)計(jì)主頁,你也可以想象一下內(nèi)部頁面可能也就是具有不同的主題面板和新的內(nèi)容區(qū)。出于簡潔的考慮,我們將只講解主頁的設(shè)計(jì)。
第一步
首先新建一個文檔。我創(chuàng)建的是寬1100px高1100px的文檔。這個文檔可以用于寬為1024px的站點(diǎn),仍然還有空間去決定在可視區(qū)域之外如何布置,這樣在更大屏幕下也很好的適應(yīng)。
現(xiàn)在第一步先創(chuàng)建一個美觀抽象背景。我們使用從#1b204c到#472373這兩種顏色按照線性遞減繪制背景。
第二步
現(xiàn)在我們要一個吸引眼球的背景,足夠抽象到不會干擾人閱讀文字。很走運(yùn),在GoMedia’s Arsenal站點(diǎn)里有一張很棒的免費(fèi)水彩圖片,點(diǎn)擊“freebie(免費(fèi)贈品)”區(qū),你就能找到兩張水彩圖片;我們要的是綠色那張。
現(xiàn)在這樣很開心了,你按下CTRL+I將圖片反置,會在黑色為底的背景上呈現(xiàn)漂亮的粉紫色,這樣就更酷了!
第三步
現(xiàn)在把處理過的水彩圖片拷貝到主畫布上,按下CTRL+T鍵,將其調(diào)整到適當(dāng)大小。這里我們要將右邊淡化為黑色(這樣在后面我們可以更方便地編輯我們的HTML代碼)。另外,我們也不想在豎直方向過長,因此最好擦掉一些超出的地方。選取一個畫刷,選用黑色擦去底下部分。
注意最好選取帶有一些紋理的畫刷,這樣擦去部分不會顯得很明顯。如果你向下滾動畫刷列表,有一個photoshop自帶的像圖例中的畫刷。這個畫刷也能用,當(dāng)然你可能有其他更漂亮的畫刷,用起來更加自如。
你選中以后,在右邊和底下區(qū)域黑色填充,這樣這層就覆蓋在整個畫布上了。
第四步
現(xiàn)在將水彩圖層的透明度減少到70%左右,將覆蓋模式設(shè)置為混合模式。這樣一些顏色頭出來顯得更加美觀。
[table][tr][/tr] [/table]
.
第五步
現(xiàn)在在水彩圖層之上再新建一個圖層,然后從下至上從黑色到透明做線性遞減繪制,這樣基本上整個畫布到底部就褪化為黑色了。
第六步
下一步在兩個新圖層中,繪制一組白色到透明的光線梯度,逐步擴(kuò)大。將這些設(shè)置為覆蓋,最外圈和最小圈的透明度分別設(shè)置為40%和100%。
基本上你應(yīng)該在圖像上做高亮設(shè)置,顯得更多的紋理。
第七步
現(xiàn)在就是最后完工的背景了。深色、抽象,顏色也相當(dāng)別致。當(dāng)然一般來說粉色可能不是你的最愛,如果這樣的話,在頂層圖層上再加一種顏色圖層做調(diào)整。我比較喜歡粉紫色,我就這么干了!
第八步
現(xiàn)在我們創(chuàng)建一個新圖層,加上一個“圖標(biāo)”。我本來沒有打算做它,因此我決定只是放一些文字做我的圖標(biāo)。因?yàn)檫@個教程一半在PSDTUTS,另一半在NETTUTS,我就寫“psd vs net”幾個簡單字而已。
這里我用的字體是Egyptian505 BT粗體和Egytian505 LT BT Light(這個字體更淡的版本我用在‘vs‘上了)。要讓‘vs’抬起來一些,可以在字體面板的基線控制(在下面第二幅圖里展示)。
最后還要給文字加上一點(diǎn)淡淡梯度重疊和1個像素的內(nèi)部白光。
第九步
現(xiàn)在這一步打開標(biāo)尺(按下CTRL+R)繪制一組引導(dǎo)線。分別在50px,320px,610px,900px分別繪制四條線將頁面劃分為三欄。至少這些是我已經(jīng)用過的數(shù)值。看看我的屏幕截圖,我才發(fā)現(xiàn)第三條線已經(jīng)出界了。。。哦!
反正我已經(jīng)所有元素放入空間里去了。但是如果要做多重頁面,可能就按照其他方式用網(wǎng)格。像這樣只是設(shè)計(jì)主頁,我打算用一次這三欄——一會兒以后。
[table][tr][/tr] [/table]
.
第十步
來,現(xiàn)在我們繪制第一個黑色方框。保持標(biāo)尺和引導(dǎo)線打開狀態(tài),新建一個圖層從一邊到另一邊繪制一個方形選取框。用黑色填充,再將透明度設(shè)置為80%,右鍵點(diǎn)擊圖層選擇混合選項(xiàng)。點(diǎn)擊“比劃”,然后在外邊加1px的白色筆畫,設(shè)置為重疊模式。這樣邊界看起來更酷,黑色盒子看起來更銳利。
第十一步
現(xiàn)在復(fù)制方框所在圖層,按CTRL+T調(diào)整方框大小,保持寬度不變,高度變短(如下圖所示)。這就是我們的瀏覽框。
將透明度設(shè)置為40%,填充設(shè)置為50%。這樣這個方框看起來更淡,給兩個方框添加了一些深度感,讓人覺得主次分明,有所側(cè)重。
這種兩個方框的對比方式可以很好用來表現(xiàn)元素之間的視覺差異。用戶瀏覽該頁面,我們首先想讓他們看到大塊信息,然后才是瀏覽欄。將其淡化處理意在告訴用戶這部分并不是要想突出的地方,可以稍后再看。
第十二步
來,我們現(xiàn)在加上一些文字。這里我仍給大標(biāo)題使用Egyptian Light字體(在最終的HTML代碼中這里是一幅圖片),菜單欄使用Arial字體(這里將是HTML文字鏈接)。
這里給出關(guān)于字型的一些建議。這樣的設(shè)計(jì)很大程度上取決于我們使用一種簡潔字型。漂亮大方的文字顯得非常大氣,同時它是一種細(xì)瘦字型,因此看起來十分優(yōu)雅。
如果你在尋找一個高端設(shè)計(jì)外觀,細(xì)瘦經(jīng)典的字型必不可少。當(dāng)我第一次看到Helvetica超幼體的時候,我記得瘋狂地將它應(yīng)用到所有設(shè)計(jì)中,設(shè)計(jì)看起來的確既簡潔又高檔。
另外,Egyptian這種特別字體具有非常筆直的衫線,又有一種方形感覺,看起來很酷(我的感覺)。
還有其他很多很棒的字體可以使用。但是一般來說要用一些更為經(jīng)典的字體。換句話說,除非你確定知道你的需求,否則最好還是不要使用那些樣子奇怪的字體——比方說一些看起來具有未來派的字體。實(shí)際上一個有效總體原則就是除非你自信滿滿,否則還是選擇一些更為普通的字體。
另外一種用在這里效果非常不錯的字型是那種位技術(shù)——看起來像是Chris Garrett Media用的字體。我也不知道這是什么字體,或者這種類型的字體叫什么,不過非常簡潔。也許一個熱心的印刷達(dá)人在評論里告訴我們的。
第十三步
不管怎樣,看完Chris Garrett Media的站點(diǎn)之后,我決定給字體上再加一個梯度覆蓋,增加一些亮光,這樣看起來更酷。你在下面可以看到,這里我們正在添加一個從黑到白的梯度覆蓋,在覆蓋模式下淡化一點(diǎn)。
第十四步
現(xiàn)在我們再畫一個大黑框作為內(nèi)容區(qū)。實(shí)際上你可以復(fù)制先前的涂層,然后做一些調(diào)整。
這樣我們就實(shí)現(xiàn)下圖所示的樣子了?雌饋硐喈(dāng)酷吧!!
[table][tr][/tr] [/table]
.
第十五步
現(xiàn)在我們在內(nèi)容框里加一些假內(nèi)容。這里我還是給大多數(shù)文字用Arial字體,但是標(biāo)題沒用Egyptian,我用了Georgia字體。Georgia沒有那么優(yōu)雅,但是也是個標(biāo)準(zhǔn)字體,可以放在之前的HTML代碼里用作標(biāo)題,可以不用圖像或者Flash。
實(shí)際上,隨著Windows Vista的發(fā)布又有一種叫做Cambria的半標(biāo)準(zhǔn)字體產(chǎn)生。但是在蘋果上火狐瀏覽器特定尺寸下Cambria存在一些奇怪的渲染問題,因此我們現(xiàn)在還是用表現(xiàn)穩(wěn)定的Georgia字體。
第十六步
最后我在底部新建一個新圖層,用深紫色填充,在頂部加1px的邊界,瞧,就有個頁腳了。
準(zhǔn)備建站
把以上這些放在一起,準(zhǔn)備建站了。
可選背景一
這個設(shè)計(jì)很酷地方之一就是更換背景圖片很容易,換了以后依然很炫。這里我換了一張從iStockPhoto站點(diǎn)叫做“Passion”的圖片做背景,其顏色策略相似。這是一張很酷的3D光線渲染圖,像我們現(xiàn)在用的背景一樣,也是抽象派,看起來很炫目。
可選背景/顏色二
這里我又換了一張iStockPhoto站點(diǎn)的叫做“Blue Energy”的抽象圖片做背景。因?yàn)轭伾兞,所以通覽一遍,將一些地方的顏色做了修改——特別是文字地方——再在主圖層上添加一個亮光。
為什么奏效
現(xiàn)在你可能也不會想這個詳細(xì)設(shè)計(jì)了——既然我已經(jīng)寫了完整教程。現(xiàn)在談一談為什么有這個效果,這樣可以幫助你用這些原則來創(chuàng)建你的專屬頁面
這里是本次設(shè)計(jì)的幾條原則:
首先,我挑選了幾張很炫的背景圖片。用幾張iStock的圖片和一張GoMedia圖片可以做出來很好看圖片。雖然很好看,但是不會喧賓奪主。他們也很容易淡出。一般容易淡化的圖片更容易處理。
好圖片一定要搭配簡潔的字體排版。因?yàn)閳D片已經(jīng)很可愛了,就沒有必要過分強(qiáng)調(diào)字體。一定要是清爽明了,井井有條。
作品另一個因素就是有足夠空間。在復(fù)雜背景下,很容易看東西就一團(tuán)糟,所以元素之間,方框以內(nèi)等地方要保持足夠的空間?臻g寬裕也是讓設(shè)計(jì)看起來更為高檔的好方法。沒人喜歡亂七八糟的下等設(shè)計(jì)。
誠然還有很多其他方面的東西可以談,像顏色、優(yōu)先級等,但是我認(rèn)為這里需要關(guān)注的主要設(shè)計(jì)元素還是字體和背景的搭配。最后總結(jié)一下,這里一幅小圖就說明一切了:-)
現(xiàn)在看HTML/CSS
photoshop部分的工作已經(jīng)完工了,現(xiàn)在要看看HTML/CSS!接下來來到NETTUTS,我們把設(shè)計(jì)應(yīng)用到正在使用的網(wǎng)站上。
英文原文:Create a Sleek, High-End Web Design from Scratch
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 學(xué)photoshop
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁模版,個人網(wǎng)站建設(shè)入門知識
- 網(wǎng)頁模板,設(shè)計(jì)酒吧主題網(wǎng)頁模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁模板教程
- ps cs6設(shè)計(jì)時尚促銷專題頁教程
- 網(wǎng)頁設(shè)計(jì)的分割布局秘密
- ps cs6設(shè)計(jì)個人作品網(wǎng)頁模板教程
- ps設(shè)計(jì)電影網(wǎng)站實(shí)例
- ps黑色風(fēng)格網(wǎng)頁模板
- ps一個木紋風(fēng)格網(wǎng)頁模板
- PS設(shè)計(jì)一個葡萄酒博客網(wǎng)頁模板
推薦教程
- Photoshop繪制好看的老式wordpress主題
- PS教程:制作非常不錯的wordpress博客網(wǎng)站模板
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁的詳細(xì)教程
- Photoshop網(wǎng)頁設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- photoshop網(wǎng)頁應(yīng)用實(shí)例:制作蘋果導(dǎo)航欄
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁特效
- PS教程:繪制清新的色彩生動的網(wǎng)頁布局
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板
- Photoshop制作禮品店網(wǎng)站模板
關(guān)注大神微博加入>>
網(wǎng)友求助,請回答!