PS教你設計有范兒的個人作品時間軸網頁
發(fā)布時間：2014-01-27 13:42:28 作者：佚名 
我要評論
我要評論PS教你設計有范兒的個人作品時間軸網頁，制作出來很有范兒，喜歡的朋友可以一起來學習
先上效果圖：
Step 1
創(chuàng)建新文件，參數如圖：
新建參考線，以便平衡視覺。位置：水平 60px，垂直分別是 20px,，50px，115px，230px，550px，570px，875px和1180px，這里推薦同學們使用神器「GuideGuide」，具體使用有勞移步：PS 參考線插件GUIDEGUIDE下載及使用說明，非常方便。
為了保證我們的設計有序專業(yè)，我們先新建3個圖層組，分別命名為：左側欄、簡介、作品。平常沒關注規(guī)范的同學，優(yōu)設哥特別向您和您所在的團隊推薦《PS禮儀手冊》!網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南。
Step 4
側邊欄為我們展示聯系方式、作導航，讓我們來建設它吧。
選擇矩形工具，前景色改為 #11171c，在左側欄的圖層組里畫一個大小230x1320px的矩形，移到左側邊緣，緊貼著第四條參考線就對咯，如圖：
在左側欄的圖層組新建一個圖層組，位置在矩形上邊，命名為輪廓圖。
然后利用橢圓工具，摁住Shift，繪制大小100x100px的圓形，移到左數第三條參考線的中間，上邊緊貼水平參考線，如圖：
現在，請聽指揮 ^_^ ，把電腦里最帥氣最漂釀的頭像找出來，拖進去，摁住Alt，單擊圓形，作為剪切蒙版，然后移動調整到合適(看得到臉)的位置。
改變前景色為 #FFFFFF，選擇文字工具，選擇安裝好的字體，大小16pt，寫上你的英文名，移動到距頭像下25px的位置，確保在第三條參考線的中間。
現在為自己添加點個人介紹吧，作者使用的字體大小14pt，距名字20px，這樣界面看起來有呼吸感。
棒極了，現在繼續(xù)在左側欄的圖層組下新建一個圖層組，命名為社交媒體。把素材里的圖標拖進組里，雙擊圖層，顏色疊加——選擇白色。將圖層樣式復制到其他圖標上。
選擇直線工具，前景色為白色，大小1px，在圖標下方50px處畫一條直線，長度：從邊緣到第四條參考線
繼續(xù)新建一個圖層組，命名為導航。把素材的矢量圖標拖進來，大小調整為13*16px，將這個圖標命名為作品。
雙擊圖層，顏色疊加：#d35136，位置：直線下方40px，緊貼第一條垂直參考線。
使用 14pt 大小的文字，寫上作品，或者Work，位置：第二條參考線處，水平方向與圖標對齊。
前景色改成#424a51，繼續(xù)文字工具打字，內容隨喜，大小14pt，行距設置成24pt，完成后將這個目錄圖層移到距「作品」下方24px處
當點擊時，我們需要使鏈接變亮，所以改變Lastest的文字顏色為白色。
把聯系人的圖標拖進來，轉成智能對象，大小調整成16x16px，顏色疊加#27b599，位置在目錄30px下，緊貼第一條參考線。
重復上次步驟。唯一不同的是，「關于」的文本顏色改為#424a51
最后創(chuàng)建聯系方式。圖標拖進來，大小調整成16x13px，顏色疊加#088ecc，其他同上，不同的就是「聯系」字樣顏色為#424a51
現在做簡介頁面，回到簡介圖層組。
前景色改成 #f7f7f7，創(chuàng)建一個大小320x1320px的矩形，緊貼左側欄和第五條參考線。
前景色改成#e7e7e8，創(chuàng)建一條直線，大小1px，放在底部，長度到第五條參考線處，見圖：
現在創(chuàng)建時間軸，利用直線工具，畫一條豎線，大小為3px，命名為時間軸，位置：距左側欄24px，頂部30px
前景色改成#d35136，畫一個圓形，大小11x11px，位置：距左側欄跟頂部都是20px，見圖：
為圓形圖層添加樣式，參數如下：
前景色改成#11171c，打字，隨喜，按照作者的例子也行。大小14pt，加粗，位置：距圓形和頂部都是20px。
恩，到這個時候你可能注意到整個設計的節(jié)奏感了，如何去平衡頁面的各個元素非常重要，這也是這個教程的目的。
前景色改成#5e5e5e，顏色的減淡使頁面有層次感，閱讀更加容易。
文字改成正常，不加粗，打出簡介的內容，間距18pt。
回車兩次，介紹客戶，貼上標簽，加粗文字，以便突出，間距同上，如圖：
復制圓形，重復步驟，圓形的位置取決于后面內容的篇幅。
最后一個區(qū)域了，回到作品圖層組
創(chuàng)建610x400px大小的矩形，顏色可以先擱下，位置：緊貼第六條參考線與第八條，距頂部20px
將素材的筆記本PSD拖進來，同樣轉成矩形的剪切模板，調整到合適大小。
復制矩形，移動到離第一個矩形20px處，以此類推，再加上素材里的圖片，重復蒙版的步驟。
重復簡介部分的操作，記得對齊。
把矢量素材的刷新圖標拖進來，顏色疊加#a0a2a4，大小20x20px，位置：距圖片下方20px，
最后一步咯
打字，大小14pt，加粗，輸入Loading…移動到距圖標10px處，水平對齊。然后一起移動兩個圖層，直到在參考線的中間。
Step 1
創(chuàng)建新文件，參數如圖：
新建參考線，以便平衡視覺。位置：水平 60px，垂直分別是 20px,，50px，115px，230px，550px，570px，875px和1180px，這里推薦同學們使用神器「GuideGuide」，具體使用有勞移步：PS 參考線插件GUIDEGUIDE下載及使用說明，非常方便。
為了保證我們的設計有序專業(yè)，我們先新建3個圖層組，分別命名為：左側欄、簡介、作品。平常沒關注規(guī)范的同學，優(yōu)設哥特別向您和您所在的團隊推薦《PS禮儀手冊》!網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南。
Step 4
側邊欄為我們展示聯系方式、作導航，讓我們來建設它吧。
選擇矩形工具，前景色改為 #11171c，在左側欄的圖層組里畫一個大小230x1320px的矩形，移到左側邊緣，緊貼著第四條參考線就對咯，如圖：
在左側欄的圖層組新建一個圖層組，位置在矩形上邊，命名為輪廓圖。
然后利用橢圓工具，摁住Shift，繪制大小100x100px的圓形，移到左數第三條參考線的中間，上邊緊貼水平參考線，如圖：
現在，請聽指揮 ^_^ ，把電腦里最帥氣最漂釀的頭像找出來，拖進去，摁住Alt，單擊圓形，作為剪切蒙版，然后移動調整到合適(看得到臉)的位置。
改變前景色為 #FFFFFF，選擇文字工具，選擇安裝好的字體，大小16pt，寫上你的英文名，移動到距頭像下25px的位置，確保在第三條參考線的中間。
現在為自己添加點個人介紹吧，作者使用的字體大小14pt，距名字20px，這樣界面看起來有呼吸感。
棒極了，現在繼續(xù)在左側欄的圖層組下新建一個圖層組，命名為社交媒體。把素材里的圖標拖進組里，雙擊圖層，顏色疊加——選擇白色。將圖層樣式復制到其他圖標上。
選擇直線工具，前景色為白色，大小1px，在圖標下方50px處畫一條直線，長度：從邊緣到第四條參考線
繼續(xù)新建一個圖層組，命名為導航。把素材的矢量圖標拖進來，大小調整為13*16px，將這個圖標命名為作品。
雙擊圖層，顏色疊加：#d35136，位置：直線下方40px，緊貼第一條垂直參考線。
使用 14pt 大小的文字，寫上作品，或者Work，位置：第二條參考線處，水平方向與圖標對齊。
前景色改成#424a51，繼續(xù)文字工具打字，內容隨喜，大小14pt，行距設置成24pt，完成后將這個目錄圖層移到距「作品」下方24px處
當點擊時，我們需要使鏈接變亮，所以改變Lastest的文字顏色為白色。
把聯系人的圖標拖進來，轉成智能對象，大小調整成16x16px，顏色疊加#27b599，位置在目錄30px下，緊貼第一條參考線。
重復上次步驟。唯一不同的是，「關于」的文本顏色改為#424a51
最后創(chuàng)建聯系方式。圖標拖進來，大小調整成16x13px，顏色疊加#088ecc，其他同上，不同的就是「聯系」字樣顏色為#424a51
現在做簡介頁面，回到簡介圖層組。
前景色改成 #f7f7f7，創(chuàng)建一個大小320x1320px的矩形，緊貼左側欄和第五條參考線。
前景色改成#e7e7e8，創(chuàng)建一條直線，大小1px，放在底部，長度到第五條參考線處，見圖：
現在創(chuàng)建時間軸，利用直線工具，畫一條豎線，大小為3px，命名為時間軸，位置：距左側欄24px，頂部30px
前景色改成#d35136，畫一個圓形，大小11x11px，位置：距左側欄跟頂部都是20px，見圖：
為圓形圖層添加樣式，參數如下：
前景色改成#11171c，打字，隨喜，按照作者的例子也行。大小14pt，加粗，位置：距圓形和頂部都是20px。
恩，到這個時候你可能注意到整個設計的節(jié)奏感了，如何去平衡頁面的各個元素非常重要，這也是這個教程的目的。
前景色改成#5e5e5e，顏色的減淡使頁面有層次感，閱讀更加容易。
文字改成正常，不加粗，打出簡介的內容，間距18pt。
回車兩次，介紹客戶，貼上標簽，加粗文字，以便突出，間距同上，如圖：
復制圓形，重復步驟，圓形的位置取決于后面內容的篇幅。
最后一個區(qū)域了，回到作品圖層組
創(chuàng)建610x400px大小的矩形，顏色可以先擱下，位置：緊貼第六條參考線與第八條，距頂部20px
將素材的筆記本PSD拖進來，同樣轉成矩形的剪切模板，調整到合適大小。
復制矩形，移動到離第一個矩形20px處，以此類推，再加上素材里的圖片，重復蒙版的步驟。
重復簡介部分的操作，記得對齊。
把矢量素材的刷新圖標拖進來，顏色疊加#a0a2a4，大小20x20px，位置：距圖片下方20px，
最后一步咯
打字，大小14pt，加粗，輸入Loading…移動到距圖標10px處，水平對齊。然后一起移動兩個圖層，直到在參考線的中間。
相關文章
- 這篇教程是向腳本之家的朋友詳細介紹Photoshop時間軸之5個小技巧，教程比較實用，對于學習者來說很值得大家學習，一起來看看吧2016-05-11
- 這篇教程是向腳本之家的朋友介紹用ps時間軸制作漂亮的動態(tài)圖片方法，教程比較基礎，制作出來的效果非常不錯，推薦到腳本之家，喜歡的朋友快快來學習吧2016-03-11
- 在ps中如何使用時間軸制作動作?很多朋友并不是很清楚，其實方法很簡單的，下面小編就為大家詳細介紹一下，一起來看看吧2016-02-22
- 這篇教程主要是向腳本之家的朋友介紹Photoshop時間軸簡單制作gif動畫效果方法，教程比較基礎，很適合新手來學習，推薦到腳本之家，喜歡的朋友一起來學習吧2015-02-10
- 動態(tài)效果其實非常簡單，前期先扣好素材圖以及做好文字，后邊在時間軸上一步完成。Photoshop時間軸做出動態(tài)手寫字效果教程2014-09-12
- 使用PS時間軸制作GIF動畫，教程制作出來的動畫效果還挺漂亮的，制作的難度也不大2013-10-11
- 本文為大家詳細介紹下流光字的制作過程，主要使用到了文字工具、畫筆工具、視頻時間軸以及剪切蒙版等等，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-10
- 通過前面的課程，我們已經學會了利用關鍵幀過渡，以及利用獨立圖層這兩種制作動畫的方式。它們可以用來制作一些簡單的單物體動畫，在很長一段時間內也是Photoshop唯一2008-10-05
- Photoshop CS3教程:時間軸制作動畫 現在我們正式開始利用時間軸來制作動畫，這與我們之前的幀式動畫有很大不同，但相比之下時間軸方式來的更直觀和簡便，也是我們以2008-10-05
- 隨著Photoshop版本的不斷升級，其功能的優(yōu)化和增加，都是一次次的驚喜，發(fā)展到CC版本，時間軸已可以對視頻簡易剪輯，所以時間軸制作簡單的gif動畫足已。來看看下文對時間軸2016-05-12