如何設(shè)計(jì)有范兒的個(gè)人作品時(shí)間軸網(wǎng)頁(yè)

2014-3-27    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里

藍(lán)藍(lán)設(shè)計(jì)這個(gè)教程中我們將使用Photoshop CS6設(shè)計(jì)一個(gè)簡(jiǎn)單、干凈、三列的作品集時(shí)間軸。在這個(gè)過(guò)程中,我們將著眼于自定義網(wǎng)格,排版樣式,并利用不同的顏色和對(duì)比度實(shí)現(xiàn)我們想要的美感。

同學(xué)們可以從這個(gè)教程學(xué)習(xí)如何在一個(gè)頁(yè)面平衡不同的元素,使整個(gè)界面設(shè)計(jì)富有韻律感與呼吸感??飚厴I(yè)的童鞋們可以嘗試這樣展示你的作品集喲。

上效果圖:

1p

Step 1

創(chuàng)建新文件,參數(shù)如圖:

2p

Step 2

新建參考線,以便平衡視覺(jué)。位置:水平 60px,垂直分別是 20px,,50px,115px,230px,550px,570px,875px和1180px,這里推薦同學(xué)們使用神器「GuideGuide」,具體使用有勞移步:PS 參考線插件GUIDEGUIDE下載及使用說(shuō)明,非常方便。

3p

Step 3

為了保證我們的UI設(shè)計(jì)有序?qū)I(yè),我們先新建3個(gè)圖層組,分別命名為:左側(cè)欄、簡(jiǎn)介、作品。平常沒(méi)關(guān)注規(guī)范的同學(xué),優(yōu)設(shè)哥特別向您和您所在的團(tuán)隊(duì)推薦《PS禮儀手冊(cè)》!網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法,更是不可或缺的WEB設(shè)計(jì)指南。

26 AAA

準(zhǔn)備工作就此完畢咯。

Step 4

側(cè)邊欄為我們展示聯(lián)系方式、作導(dǎo)航,讓我們來(lái)建設(shè)它吧。

選擇矩形工具,前景色改為 #11171c,在左側(cè)欄的圖層組里畫(huà)一個(gè)大小230x1320px的矩形,移到左側(cè)邊緣,緊貼著第四條參考線就對(duì)咯,如圖:

31

Step 5

在左側(cè)欄的圖層組新建一個(gè)圖層組,位置在矩形上邊,命名為輪廓圖。

然后利用橢圓工具,摁住Shift,繪制大小100x100px的圓形,移到左數(shù)第三條參考線的中間,上邊緊貼水平參考線,如圖:

28

Step 6

現(xiàn)在,請(qǐng)聽(tīng)指揮 ^_^ ,把電腦里最帥氣最漂釀的頭像找出來(lái),拖進(jìn)去,摁住Alt,單擊圓形,作為剪切蒙版,然后移動(dòng)調(diào)整到合適(看得到臉)的位置。

6p

Step 7

改變前景色為 #FFFFFF,選擇文字工具,選擇安裝好的字體,大小16pt,寫(xiě)上你的英文名,移動(dòng)到距頭像下25px的位置,確保在第三條參考線的中間。

18p

Step 8

現(xiàn)在為自己添加點(diǎn)個(gè)人介紹吧,作者使用的字體大小14pt,距名字20px,這樣界面看起來(lái)有呼吸感。

19p

Step 9

棒極了,現(xiàn)在繼續(xù)在左側(cè)欄的圖層組下新建一個(gè)圖層組,命名為社交媒體。把素材里的圖標(biāo)拖進(jìn)組里,雙擊圖層,顏色疊加——選擇白色。將圖層樣式復(fù)制到其他圖標(biāo)上。

12p

圖標(biāo)間距調(diào)整為10px,整個(gè)圖標(biāo)的圖層組距離 簡(jiǎn)介 20px


4p

Step 10

選擇直線工具,前景色為白色,大小1px,在圖標(biāo)下方50px處畫(huà)一條直線,長(zhǎng)度:從邊緣到第四條參考線

9p

為了視覺(jué)微妙點(diǎn),將圖層不透明度調(diào)整到10%


9p

Step 11

繼續(xù)新建一個(gè)圖層組,命名為導(dǎo)航。把素材的矢量圖標(biāo)拖進(jìn)來(lái),大小調(diào)整為13*16px,將這個(gè)圖標(biāo)命名為作品。

雙擊圖層,顏色疊加:#d35136,位置:直線下方40px,緊貼第一條垂直參考線。

21p

Step 12

使用 14pt 大小的文字,寫(xiě)上作品,或者Work,位置:第二條參考線處,水平方向與圖標(biāo)對(duì)齊。

前景色改成#424a51,繼續(xù)文字工具打字,內(nèi)容隨喜,大小14pt,行距設(shè)置成24pt,完成后將這個(gè)目錄圖層移到距「作品」下方24px處

bbb

Step 13

當(dāng)點(diǎn)擊時(shí),我們需要使鏈接變亮,所以改變Lastest的文字顏色為白色。

24

Step 14

把聯(lián)系人的圖標(biāo)拖進(jìn)來(lái),轉(zhuǎn)成智能對(duì)象,大小調(diào)整成16x16px,顏色疊加#27b599,位置在目錄30px下,緊貼第一條參考線。

8p

Step 15

重復(fù)上次步驟。唯一不同的是,「關(guān)于」的文本顏色改為#424a51

15p

Step 16

最后創(chuàng)建聯(lián)系方式。圖標(biāo)拖進(jìn)來(lái),大小調(diào)整成16x13px,顏色疊加#088ecc,其他同上,不同的就是「聯(lián)系」字樣顏色為#424a51

26

Step 17

現(xiàn)在做簡(jiǎn)介頁(yè)面,回到簡(jiǎn)介圖層組。

前景色改成 #f7f7f7,創(chuàng)建一個(gè)大小320x1320px的矩形,緊貼左側(cè)欄和第五條參考線。

34

Step 18

前景色改成#e7e7e8,創(chuàng)建一條直線,大小1px,放在底部,長(zhǎng)度到第五條參考線處,見(jiàn)圖:

VVV

Step 19

現(xiàn)在創(chuàng)建時(shí)間軸,利用直線工具,畫(huà)一條豎線,大小為3px,命名為時(shí)間軸,位置:距左側(cè)欄24px,頂部30px

29

Step 20

前景色改成#d35136,畫(huà)一個(gè)圓形,大小11x11px,位置:距左側(cè)欄跟頂部都是20px,見(jiàn)圖:

32

Step 21

為圓形圖層添加樣式,參數(shù)如下:

13p 25

Step 22

前景色改成#11171c,打字,隨喜,按照作者的例子也行。大小14pt,加粗,位置:距圓形和頂部都是20px。

恩,到這個(gè)時(shí)候你可能注意到整個(gè)設(shè)計(jì)的節(jié)奏感了,如何去平衡頁(yè)面的各個(gè)元素非常重要,這也是這個(gè)教程的目的。

20p

Step 23

前景色改成#5e5e5e,顏色的減淡使頁(yè)面有層次感,閱讀更加容易。

文字改成正常,不加粗,打出簡(jiǎn)介的內(nèi)容,間距18pt。

回車兩次,介紹客戶,貼上標(biāo)簽,加粗文字,以便突出,間距同上,如圖:

23

Step 24

復(fù)制圓形,重復(fù)步驟,圓形的位置取決于后面內(nèi)容的篇幅。

35

Step 25

最后一個(gè)區(qū)域了,回到作品圖層組

創(chuàng)建610x400px大小的矩形,顏色可以先擱下,位置:緊貼第六條參考線與第八條,距頂部20px

30

Step 26

將素材的筆記本PSD拖進(jìn)來(lái),同樣轉(zhuǎn)成矩形的剪切模板,調(diào)整到合適大小。

5p

Step 27

復(fù)制矩形,移動(dòng)到離第一個(gè)矩形20px處,以此類推,再加上素材里的圖片,重復(fù)蒙版的步驟。

7p

Step 28

重復(fù)簡(jiǎn)介部分的操作,記得對(duì)齊。

22

Step 29

把矢量素材的刷新圖標(biāo)拖進(jìn)來(lái),顏色疊加#a0a2a4,大小20x20px,位置:距圖片下方20px,

10p

Step 30

最后一步咯

打字,大小14pt,加粗,輸入Loading…移動(dòng)到距圖標(biāo)10px處,水平對(duì)齊。然后一起移動(dòng)兩個(gè)圖層,直到在參考線的中間。

17p

現(xiàn)在一個(gè)作品集時(shí)間軸的效果圖已經(jīng)完成了,你隨時(shí)可以交給網(wǎng)頁(yè)設(shè)計(jì)師,在瀏覽器上實(shí)現(xiàn)它。

1p

分享本文至:

日歷

鏈接

個(gè)人資料

存檔