2014-3-27 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.chinatradebeam.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è)過程中，我們將著眼于自定義網(wǎng)格，排版樣式，并利用不同的顏色和對(duì)比度實(shí)現(xiàn)我們想要的美感。
同學(xué)們可以從這個(gè)教程學(xué)習(xí)如何在一個(gè)頁(yè)面平衡不同的元素，使整個(gè)界面設(shè)計(jì)富有韻律感與呼吸感?？飚厴I(yè)的童鞋們可以嘗試這樣展示你的作品集喲。
上效果圖：
創(chuàng)建新文件，參數(shù)如圖：
新建參考線，以便平衡視覺。位置：水平 60px，垂直分別是 20px,，50px，115px，230px，550px，570px，875px和1180px，這里推薦同學(xué)們使用神器「GuideGuide」，具體使用有勞移步：PS 參考線插件GUIDEGUIDE下載及使用說明，非常方便。
為了保證我們的UI設(shè)計(jì)有序?qū)I(yè)，我們先新建3個(gè)圖層組，分別命名為：左側(cè)欄、簡(jiǎn)介、作品。平常沒關(guān)注規(guī)范的同學(xué)，優(yōu)設(shè)哥特別向您和您所在的團(tuán)隊(duì)推薦《PS禮儀手冊(cè)》！網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南。
準(zhǔn)備工作就此完畢咯。
側(cè)邊欄為我們展示聯(lián)系方式、作導(dǎo)航，讓我們來(lái)建設(shè)它吧。
選擇矩形工具，前景色改為 #11171c，在左側(cè)欄的圖層組里畫一個(gè)大小230x1320px的矩形，移到左側(cè)邊緣，緊貼著第四條參考線就對(duì)咯，如圖：
在左側(cè)欄的圖層組新建一個(gè)圖層組，位置在矩形上邊，命名為輪廓圖。
然后利用橢圓工具，摁住Shift，繪制大小100x100px的圓形，移到左數(shù)第三條參考線的中間，上邊緊貼水平參考線，如圖：
現(xiàn)在，請(qǐng)聽指揮 ^_^ ，把電腦里最帥氣最漂釀的頭像找出來(lái)，拖進(jìn)去，摁住Alt，單擊圓形，作為剪切蒙版，然后移動(dòng)調(diào)整到合適（看得到臉）的位置。
改變前景色為 #FFFFFF，選擇文字工具，選擇安裝好的字體，大小16pt，寫上你的英文名，移動(dòng)到距頭像下25px的位置，確保在第三條參考線的中間。
現(xiàn)在為自己添加點(diǎn)個(gè)人介紹吧，作者使用的字體大小14pt，距名字20px，這樣界面看起來(lái)有呼吸感。
棒極了，現(xiàn)在繼續(xù)在左側(cè)欄的圖層組下新建一個(gè)圖層組，命名為社交媒體。把素材里的圖標(biāo)拖進(jìn)組里，雙擊圖層，顏色疊加——選擇白色。將圖層樣式復(fù)制到其他圖標(biāo)上。
圖標(biāo)間距調(diào)整為10px，整個(gè)圖標(biāo)的圖層組距離 簡(jiǎn)介 20px
選擇直線工具，前景色為白色，大小1px，在圖標(biāo)下方50px處畫一條直線，長(zhǎng)度：從邊緣到第四條參考線
為了視覺微妙點(diǎn)，將圖層不透明度調(diào)整到10%
繼續(xù)新建一個(gè)圖層組，命名為導(dǎo)航。把素材的矢量圖標(biāo)拖進(jìn)來(lái)，大小調(diào)整為13*16px，將這個(gè)圖標(biāo)命名為作品。
雙擊圖層，顏色疊加：#d35136，位置：直線下方40px，緊貼第一條垂直參考線。
使用 14pt 大小的文字，寫上作品，或者Work，位置：第二條參考線處，水平方向與圖標(biāo)對(duì)齊。
前景色改成#424a51，繼續(xù)文字工具打字，內(nèi)容隨喜，大小14pt，行距設(shè)置成24pt，完成后將這個(gè)目錄圖層移到距「作品」下方24px處
當(dāng)點(diǎn)擊時(shí)，我們需要使鏈接變亮，所以改變Lastest的文字顏色為白色。
把聯(lián)系人的圖標(biāo)拖進(jìn)來(lái)，轉(zhuǎn)成智能對(duì)象，大小調(diào)整成16x16px，顏色疊加#27b599，位置在目錄30px下，緊貼第一條參考線。
重復(fù)上次步驟。唯一不同的是，「關(guān)于」的文本顏色改為#424a51
最后創(chuàng)建聯(lián)系方式。圖標(biāo)拖進(jìn)來(lái)，大小調(diào)整成16x13px，顏色疊加#088ecc，其他同上，不同的就是「聯(lián)系」字樣顏色為#424a51
現(xiàn)在做簡(jiǎn)介頁(yè)面，回到簡(jiǎn)介圖層組。
前景色改成 #f7f7f7，創(chuàng)建一個(gè)大小320x1320px的矩形，緊貼左側(cè)欄和第五條參考線。
前景色改成#e7e7e8，創(chuàng)建一條直線，大小1px，放在底部，長(zhǎng)度到第五條參考線處，見圖：
現(xiàn)在創(chuàng)建時(shí)間軸，利用直線工具，畫一條豎線，大小為3px，命名為時(shí)間軸，位置：距左側(cè)欄24px，頂部30px
前景色改成#d35136，畫一個(gè)圓形，大小11x11px，位置：距左側(cè)欄跟頂部都是20px，見圖：
為圓形圖層添加樣式，參數(shù)如下：
前景色改成#11171c，打字，隨喜，按照作者的例子也行。大小14pt，加粗，位置：距圓形和頂部都是20px。
恩，到這個(gè)時(shí)候你可能注意到整個(gè)設(shè)計(jì)的節(jié)奏感了，如何去平衡頁(yè)面的各個(gè)元素非常重要，這也是這個(gè)教程的目的。
前景色改成#5e5e5e，顏色的減淡使頁(yè)面有層次感，閱讀更加容易。
文字改成正常，不加粗，打出簡(jiǎn)介的內(nèi)容，間距18pt。
回車兩次，介紹客戶，貼上標(biāo)簽，加粗文字，以便突出，間距同上，如圖：
復(fù)制圓形，重復(fù)步驟，圓形的位置取決于后面內(nèi)容的篇幅。
最后一個(gè)區(qū)域了，回到作品圖層組
創(chuàng)建610x400px大小的矩形，顏色可以先擱下，位置：緊貼第六條參考線與第八條，距頂部20px
將素材的筆記本PSD拖進(jìn)來(lái)，同樣轉(zhuǎn)成矩形的剪切模板，調(diào)整到合適大小。
復(fù)制矩形，移動(dòng)到離第一個(gè)矩形20px處，以此類推，再加上素材里的圖片，重復(fù)蒙版的步驟。
重復(fù)簡(jiǎn)介部分的操作，記得對(duì)齊。
把矢量素材的刷新圖標(biāo)拖進(jìn)來(lái)，顏色疊加#a0a2a4，大小20x20px，位置：距圖片下方20px，
最后一步咯
打字，大小14pt，加粗，輸入Loading…移動(dòng)到距圖標(biāo)10px處，水平對(duì)齊。然后一起移動(dòng)兩個(gè)圖層，直到在參考線的中間。
現(xiàn)在一個(gè)作品集時(shí)間軸的效果圖已經(jīng)完成了，你隨時(shí)可以交給網(wǎng)頁(yè)設(shè)計(jì)師，在瀏覽器上實(shí)現(xiàn)它。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com