ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁模板教程

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

先下載教程需要的素材：http://bbs.16xx8.com/thread-165802-1-1.html

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

先上效果圖：

Step 1

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

Step 2

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

Step 3

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

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

Step 4

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

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

Step 5

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

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

Step 6

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

Step 7