日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > ps cs6設計個人作品網頁模板教程

ps cs6設計個人作品網頁模板教程

時間:2024-03-06 22:32作者:下載吧人氣:14

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

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

同學們可以從這個教程學習如何在一個頁面平衡不同的元素,使整個設計富有韻律感與呼吸感。快畢業的童鞋們可以嘗試這樣展示你的作品集喲。

先上效果圖:

ps cs6設計個人作品網頁模板教程

Step 1

創建新文件,參數如圖:

ps cs6設計個人作品網頁模板教程

Step 2

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

ps cs6設計個人作品網頁模板教程

Step 3

為了保證我們的設計有序專業,我們先新建3個圖層組,分別命名為:左側欄、簡介、作品。平常沒關注規范的同學,優設哥特別向您和您所在的團隊推薦《PS禮儀手冊》!網頁設計師必須修煉的內功技法,更是不可或缺的WEB設計指南。

ps cs6設計個人作品網頁模板教程

ps cs6設計個人作品網頁模板教程

準備工作就此完畢咯。

Step 4

側邊欄為我們展示聯系方式、作導航,讓我們來建設它吧。

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

ps cs6設計個人作品網頁模板教程

Step 5

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

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

ps cs6設計個人作品網頁模板教程

Step 6

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

ps cs6設計個人作品網頁模板教程

Step 7

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

ps cs6設計個人作品網頁模板教程

Step 8

現在為自己添加點個人介紹吧,作者使用的字體大小14pt,距名字20px,這樣界面看起來有呼吸感。

ps cs6設計個人作品網頁模板教程

Step 9

棒極了,現在繼續在左側欄的圖層組下新建一個圖層組,命名為社交媒體。把素材里的圖標拖進組里,雙擊圖層,顏色疊加——選擇白色。將圖層樣式復制到其他圖標上。

ps cs6設計個人作品網頁模板教程

圖標間距調整為10px,整個圖標的圖層組距離 簡介 20px

ps cs6設計個人作品網頁模板教程

Step 10

選擇直線工具,前景色為白色,大小1px,在圖標下方50px處畫一條直線,長度:從邊緣到第四條參考線

ps cs6設計個人作品網頁模板教程

為了視覺微妙點,將圖層不透明度調整到10%

ps cs6設計個人作品網頁模板教程

Step 11

繼續新建一個圖層組,命名為導航。把素材的矢量圖標拖進來,大小調整為13*16px,將這個圖標命名為作品。

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

ps cs6設計個人作品網頁模板教程

Step 12

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

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

ps cs6設計個人作品網頁模板教程

Step 13

當點擊時,我們需要使鏈接變亮,所以改變Lastest的文字顏色為白色。

ps cs6設計個人作品網頁模板教程

Step 14

把聯系人的圖標拖進來,轉成智能對象,大小調整成16x16px,顏色疊加#27b599,位置在目錄30px下,緊貼第一條參考線。

ps cs6設計個人作品網頁模板教程

Step 15

重復上次步驟。唯一不同的是,「關于」的文本顏色改為#424a51

ps cs6設計個人作品網頁模板教程

Step 16

最后創建聯系方式。圖標拖進來,大小調整成16x13px,顏色疊加#088ecc,其他同上,不同的就是「聯系」字樣顏色為#424a51

ps cs6設計個人作品網頁模板教程

Step 17

現在做簡介頁面,回到簡介圖層組。

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

ps cs6設計個人作品網頁模板教程

Step 18

前景色改成#e7e7e8,創建一條直線,大小1px,放在底部,長度到第五條參考線處,見圖:

ps cs6設計個人作品網頁模板教程

Step 19

現在創建時間軸,利用直線工具,畫一條豎線,大小為3px,命名為時間軸,位置:距左側欄24px,頂部30px

ps cs6設計個人作品網頁模板教程

Step 20

前景色改成#d35136,畫一個圓形,大小11x11px,位置:距左側欄跟頂部都是20px,見圖:

ps cs6設計個人作品網頁模板教程

Step 21

為圓形圖層添加樣式,參數如下:

ps cs6設計個人作品網頁模板教程

ps cs6設計個人作品網頁模板教程

Step 22

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

恩,到這個時候你可能注意到整個設計的節奏感了,如何去平衡頁面的各個元素非常重要,這也是這個教程的目的。

ps cs6設計個人作品網頁模板教程

Step 23

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

文字改成正常,不加粗,打出簡介的內容,間距18pt。

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

ps cs6設計個人作品網頁模板教程

Step 24

復制圓形,重復步驟,圓形的位置取決于后面內容的篇幅。

ps cs6設計個人作品網頁模板教程

Step 25

最后一個區域了,回到作品圖層組

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

ps cs6設計個人作品網頁模板教程

Step 26

將素材的筆記本PSD拖進來,同樣轉成矩形的剪切模板,調整到合適大小。

ps cs6設計個人作品網頁模板教程

Step 27

復制矩形,移動到離第一個矩形20px處,以此類推,再加上素材里的圖片,重復蒙版的步驟。

ps cs6設計個人作品網頁模板教程

Step 28

重復簡介部分的操作,記得對齊。

ps cs6設計個人作品網頁模板教程

Step 29

把矢量素材的刷新圖標拖進來,顏色疊加#a0a2a4,大小20x20px,位置:距圖片下方20px,

ps cs6設計個人作品網頁模板教程

Step 30

最后一步咯

打字,大小14pt,加粗,輸入Loading…移動到距圖標10px處,水平對齊。然后一起移動兩個圖層,直到在參考線的中間。

ps cs6設計個人作品網頁模板教程

現在一個作品集時間軸的效果圖已經完成了,你隨時可以交給網頁設計師,在瀏覽器上實現它。

ps cs6設計個人作品網頁模板教程

希望在這個教程你能學到新的東西,有問題或想法在評論區回復,歡迎曬作品喲。

標簽網頁,界面,作品,個人,設計,時尚,Step,大小,參考,位

相關下載

查看所有評論+

網友評論

網友
您的評論需要經過審核才能顯示

公眾號

主站蜘蛛池模板: 亚洲综合国产精品 | 欧美精品片在线观看网站 | 手机看片日韩国产一区二区 | 免费的成人a视频在线观看 免费的毛片 | 色老汉丁香网 | 美女被免费视频的网站 | 黄色片免费网址 | 最新亚洲精品国自产在线 | 奇米影视7777久久精品 | 92精品国产自产在线 | a毛片视频 | 成人国产精品免费视频不卡 | 99视频国产热精品视频 | 在线观看国产一区二区三区99 | 日本精品网 | 久久久久久久久久久久久久久久久 | 91在线精品亚洲一区二区 | 日本香蕉一区二区三区 | 成人国产亚洲 | 91成人在线免费观看 | 国产精品亲子乱子伦xxxx裸 | 91精品国产一区二区三区左线 | 中文字幕在线免费观看 | 国产丶欧美丶日韩丶不卡影视 | 国产精品免费观看视频 | 国产欧美一区二区三区在线看 | 国产手机在线小视频免费观看 | 又黄又湿又爽吸乳视频 | 欧美一区二区三区四区在线观看 | 图片区偷拍区小说区 | 国产免费久久精品 | 亚洲黄色成人 | 99久久国产综合精品五月天 | 一级毛片aaaaaa免费看 | 日韩欧美一级毛片精品6 | 一区二区三区在线 | 欧 | 在线视频一二三区2021不卡 | 国产精品_国产精品_国产精品 | 欧美一a级做爰 | 久久精品国产国产精品四凭 | 欧美毛片|