1. <dd id="nlasp"></dd>

        <div id="nlasp"><tr id="nlasp"></tr></div>
        1. <em id="nlasp"></em>
          1. 當前位置: 首頁 > 設計教程 > 網頁設計教程 > Photoshop設計時尚的個人作品網頁界面

            Photoshop設計時尚的個人作品網頁界面

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

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

            先上效果圖:

            Photoshop設計時尚的個人作品網頁界面

            Step 1

            創建新文件,參數如圖:

            Photoshop設計時尚的個人作品網頁界面

            Step 2

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

            Photoshop設計時尚的個人作品網頁界面

            Step 3

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

            Photoshop設計時尚的個人作品網頁界面
            Photoshop設計時尚的個人作品網頁界面

            準備工作就此完畢咯。

            Step 4

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

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

            Photoshop設計時尚的個人作品網頁界面

            Step 5

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

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

            Photoshop設計時尚的個人作品網頁界面

            Step 6

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

            Photoshop設計時尚的個人作品網頁界面

            Step 7

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

            Photoshop設計時尚的個人作品網頁界面

            Step 8

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

            Photoshop設計時尚的個人作品網頁界面

            Step 9

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

            Photoshop設計時尚的個人作品網頁界面

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

            Photoshop設計時尚的個人作品網頁界面

            分享到: 
            Photoshop制作透明大氣的導航按鈕
            Photoshop設計電影導演工作室網站首頁

            熱門推薦

            体彩11选5开奖查询