當(dāng)前位置:首頁>ps實例教程>ps網(wǎng)頁設(shè)計>網(wǎng)頁模板>教程內(nèi)容

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

來源:優(yōu)設(shè) 作者:佚名 學(xué)習(xí):28457人次

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

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

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

先上效果圖:

Photoshop設(shè)計時尚的個人作品網(wǎng)頁界面

Step 1

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

Photoshop設(shè)計時尚的個人作品網(wǎng)頁界面

Step 2

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

Photoshop設(shè)計時尚的個人作品網(wǎng)頁界面

Step 3

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

Photoshop設(shè)計時尚的個人作品網(wǎng)頁界面

Photoshop設(shè)計時尚的個人作品網(wǎng)頁界面

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

Step 4

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

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

Photoshop設(shè)計時尚的個人作品網(wǎng)頁界面

Step 5

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

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

Photoshop設(shè)計時尚的個人作品網(wǎng)頁界面

Step 6

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

Photoshop設(shè)計時尚的個人作品網(wǎng)頁界面

Step 7

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
曙光_照亮黑夜2017-06-01 05:38
過來看看 是怎樣搞的Katherine 的原帖:有中文版的嗎?
曙光_照亮黑夜2017-06-01 05:38
沒有中文版的?
Katherine2017-05-28 04:16
過來看看 是怎樣搞的
此處無需多言2017-05-28 02:42
看起來很好的效果
塞尚的蘋果2017-05-28 04:16
真復(fù)雜啊~~~~~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!