教您怎樣用Photoshop制作一個(gè)漂亮的網(wǎng)頁(yè)
2022-12-26 14:12:25
來源/作者: /
己有:175人學(xué)習(xí)過
作者:佚名 來源:祝君成功網(wǎng)站建設(shè)
本教程中,我們使用簡(jiǎn)潔細(xì)瘦的字體,配上優(yōu)美的背景圖片,經(jīng)過精心排布的空間布局,設(shè)計(jì)一個(gè)高檔的網(wǎng)頁(yè)。
當(dāng)你看完本教程,你可以去看看我們的姐妹站點(diǎn)NETTUTS,然后跟著做,這樣我們就用簡(jiǎn)潔的HTML代碼實(shí)現(xiàn)設(shè)計(jì)。來吧,讓我們開始!
大家好!我在數(shù)年前通過閱讀Photoshop教程開始進(jìn)入設(shè)計(jì)領(lǐng)域后創(chuàng)建了PSDTUTS。我希望這個(gè)站點(diǎn)可以幫助和鼓舞其他人!除了PSDTUTS之外,我還在一家叫做Envato的大公司里做了很多不同站點(diǎn),完成了很棒的項(xiàng)目。
端設(shè)計(jì) 首先我們開始設(shè)計(jì)。(點(diǎn)擊下圖可見大圖)
一個(gè)優(yōu)雅的設(shè)計(jì)可能符合設(shè)計(jì)者的文件夾類型站點(diǎn)的需求,但是可能要根據(jù)各種各樣的原因而改變。這一切取決于要有良好的排版,結(jié)構(gòu)化的布局以及具有視覺吸引力的背景。
設(shè)計(jì)真正的力量在于向您展現(xiàn)如何在保持設(shè)計(jì)簡(jiǎn)潔的同時(shí)并完成。在教程中Photoshop部分的最后,我將向您展示如何輕易地更換背景和字體,并闡述這樣設(shè)計(jì)奏效的原因。
結(jié)構(gòu)很簡(jiǎn)單:橫向菜單,主標(biāo)題面板和內(nèi)容區(qū)。盡管是設(shè)計(jì)主頁(yè),你也可以想象一下內(nèi)部頁(yè)面可能也就是具有不同的主題面板和新的內(nèi)容區(qū)。出于簡(jiǎn)潔的考慮,我們將只進(jìn)行主頁(yè)設(shè)計(jì)。
第一步 首先新建一個(gè)文檔。我創(chuàng)建的是寬1100px高1100px的文檔。這個(gè)文檔可以用于寬為1024px的站點(diǎn),仍然還有空間去決定在可視區(qū)域之外如何布置,這樣在更大屏幕下也很好的適應(yīng)。
現(xiàn)在第一步先創(chuàng)建一個(gè)美觀抽象背景。我們使用從#1b204c到#472373這兩種顏色按照線性遞減繪制背景。
第二步 現(xiàn)在我們要一個(gè)吸引眼球的背景,足夠抽象到不會(huì)干擾人閱讀文字。很走運(yùn),在GoMedia’s Arsenal站點(diǎn)里有一張很棒的免費(fèi)水彩圖片,點(diǎn)擊“freebie(免費(fèi)贈(zèng)品)”區(qū),你就能找到兩張水彩圖片;我們要的是綠色那張。
現(xiàn)在這樣很開心了,你按下CTRL+I將圖片反置,會(huì)在黑色為底的背景上呈現(xiàn)漂亮的粉紫色,這樣就更酷了!
第三步 現(xiàn)在把處理過的水彩圖片拷貝到主畫布上,按下CTRL+T鍵,將其調(diào)整到適當(dāng)大小。這里我們要將右邊淡化為黑色(這樣在后面我們可以更方便地編輯我們的 HTML代碼)。另外,我們也不想在豎直方向過長(zhǎng),因此最好擦掉一些超出的地方。選取一個(gè)畫刷,選用黑色擦去底下部分。
注意最好選取帶有一些紋理的畫刷,這樣擦去部分不會(huì)顯得很明顯。如果你向下滾動(dòng)畫刷列表,有一個(gè)Photoshop自帶的像圖例中的畫刷。這個(gè)畫刷也能用,當(dāng)然你可能有其他更漂亮的畫刷,用起來更加自如。
你選中以后,在右邊和底下區(qū)域黑色填充,這樣這層就覆蓋在整個(gè)畫布上了。
本教程中,我們使用簡(jiǎn)潔細(xì)瘦的字體,配上優(yōu)美的背景圖片,經(jīng)過精心排布的空間布局,設(shè)計(jì)一個(gè)高檔的網(wǎng)頁(yè)。
當(dāng)你看完本教程,你可以去看看我們的姐妹站點(diǎn)NETTUTS,然后跟著做,這樣我們就用簡(jiǎn)潔的HTML代碼實(shí)現(xiàn)設(shè)計(jì)。來吧,讓我們開始!
大家好!我在數(shù)年前通過閱讀Photoshop教程開始進(jìn)入設(shè)計(jì)領(lǐng)域后創(chuàng)建了PSDTUTS。我希望這個(gè)站點(diǎn)可以幫助和鼓舞其他人!除了PSDTUTS之外,我還在一家叫做Envato的大公司里做了很多不同站點(diǎn),完成了很棒的項(xiàng)目。
端設(shè)計(jì) 首先我們開始設(shè)計(jì)。(點(diǎn)擊下圖可見大圖)
一個(gè)優(yōu)雅的設(shè)計(jì)可能符合設(shè)計(jì)者的文件夾類型站點(diǎn)的需求,但是可能要根據(jù)各種各樣的原因而改變。這一切取決于要有良好的排版,結(jié)構(gòu)化的布局以及具有視覺吸引力的背景。
設(shè)計(jì)真正的力量在于向您展現(xiàn)如何在保持設(shè)計(jì)簡(jiǎn)潔的同時(shí)并完成。在教程中Photoshop部分的最后,我將向您展示如何輕易地更換背景和字體,并闡述這樣設(shè)計(jì)奏效的原因。
結(jié)構(gòu)很簡(jiǎn)單:橫向菜單,主標(biāo)題面板和內(nèi)容區(qū)。盡管是設(shè)計(jì)主頁(yè),你也可以想象一下內(nèi)部頁(yè)面可能也就是具有不同的主題面板和新的內(nèi)容區(qū)。出于簡(jiǎn)潔的考慮,我們將只進(jìn)行主頁(yè)設(shè)計(jì)。
第一步 首先新建一個(gè)文檔。我創(chuàng)建的是寬1100px高1100px的文檔。這個(gè)文檔可以用于寬為1024px的站點(diǎn),仍然還有空間去決定在可視區(qū)域之外如何布置,這樣在更大屏幕下也很好的適應(yīng)。
現(xiàn)在第一步先創(chuàng)建一個(gè)美觀抽象背景。我們使用從#1b204c到#472373這兩種顏色按照線性遞減繪制背景。
第二步 現(xiàn)在我們要一個(gè)吸引眼球的背景,足夠抽象到不會(huì)干擾人閱讀文字。很走運(yùn),在GoMedia’s Arsenal站點(diǎn)里有一張很棒的免費(fèi)水彩圖片,點(diǎn)擊“freebie(免費(fèi)贈(zèng)品)”區(qū),你就能找到兩張水彩圖片;我們要的是綠色那張。
現(xiàn)在這樣很開心了,你按下CTRL+I將圖片反置,會(huì)在黑色為底的背景上呈現(xiàn)漂亮的粉紫色,這樣就更酷了!
第三步 現(xiàn)在把處理過的水彩圖片拷貝到主畫布上,按下CTRL+T鍵,將其調(diào)整到適當(dāng)大小。這里我們要將右邊淡化為黑色(這樣在后面我們可以更方便地編輯我們的 HTML代碼)。另外,我們也不想在豎直方向過長(zhǎng),因此最好擦掉一些超出的地方。選取一個(gè)畫刷,選用黑色擦去底下部分。
注意最好選取帶有一些紋理的畫刷,這樣擦去部分不會(huì)顯得很明顯。如果你向下滾動(dòng)畫刷列表,有一個(gè)Photoshop自帶的像圖例中的畫刷。這個(gè)畫刷也能用,當(dāng)然你可能有其他更漂亮的畫刷,用起來更加自如。
你選中以后,在右邊和底下區(qū)域黑色填充,這樣這層就覆蓋在整個(gè)畫布上了。
標(biāo)簽(TAG) 網(wǎng)頁(yè)模板