您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> ps教程 >> 瀏覽設(shè)計(jì)教程

photoshop設(shè)計(jì)精美登錄注冊(cè)頁面

本教程將教你如何在Photoshop中創(chuàng)建一個(gè)漂亮的網(wǎng)站,在僅幾步之遙。您將創(chuàng)建一個(gè)網(wǎng)站,讓用戶在您的網(wǎng)站上注冊(cè),非??臁?br />
最終效果

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 01


第一步:整體框架設(shè)計(jì)

1、創(chuàng)建一個(gè)新的文檔,背景顏色為#dadada。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 02


2、使用矩形工具,創(chuàng)建一個(gè)新的形狀(#1c1c1c),并將其放置在上面的網(wǎng)站。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 03


3、在此形狀,我將創(chuàng)建一個(gè)黑暗的形狀(#292929)

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 04


4、在底部,我將創(chuàng)建一個(gè)小腳注使用相同的工具,并以同樣的顏色(#292929)

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 05


第二步:細(xì)節(jié)的深入刻畫以及布局詳細(xì)化

1、介于兩者之間的形狀,我會(huì)添加一些線

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 06


2、使用圓角矩形工具,我將創(chuàng)建一個(gè)形狀像下面的圖片中,我將其放置在中間的布局。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 07


3、對(duì)于這一輪的形狀,我已經(jīng)使用了下面的圖層樣式。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 08
 
在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 09


4、在左邊,我將創(chuàng)建一個(gè)較小的形狀

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 10


5、在右側(cè),我將創(chuàng)造另一個(gè)形狀用一個(gè)比較暗的顏色。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 11


6、在這里我將復(fù)制圖層,我會(huì)柵格,并且我要將一個(gè)形狀像下面的圖片

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 12


7、然后用同樣的方法,我將創(chuàng)建一些小的按鈕

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 13


8、這里是我已經(jīng)習(xí)慣了創(chuàng)建按鈕的圖層樣式。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 14
 
在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 15
 
在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 16


第三步:豐富畫面效果,增加視覺效果

1、我將添加一個(gè)圖像像在流動(dòng)的屏幕截圖,并在底部,我將添加另一個(gè)形狀與不透明度值的20%至30%

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 17


2、在左邊,我將創(chuàng)建一個(gè)注冊(cè)表格

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 18


3、你會(huì)看到一些漂亮的縮進(jìn)形式。我已經(jīng)使用了下面的樣式。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 19
 
在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 20
 
在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 21


3、上面的形式下,你得到的一個(gè)按鈕樣式。

 


4、我已經(jīng)使用的圖層樣式波紋管

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 22
 
在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 23
 
在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 24
 
在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 25


第四步:網(wǎng)站標(biāo)志的添加

如同任何網(wǎng)站,您將需要一個(gè)標(biāo)志。我會(huì)使用Grafpedia的Logo

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 26


第五步:添加文字、填充畫面效果

1、右側(cè),我將創(chuàng)建一個(gè)橫向?qū)Ш讲藛?,你?huì)看到,我已經(jīng)創(chuàng)建了一個(gè)按鈕,它具有相同的圖層樣式,我已經(jīng)使用的形式。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 27


2、在該網(wǎng)站的主要區(qū)域,我會(huì)用鋼筆工具創(chuàng)建一個(gè)形狀

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 28


3、我會(huì)去濾鏡>模糊>高斯模糊,我將使用這些值。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 29


4、我會(huì)提出這一點(diǎn)的暗區(qū)的頂部,和我將確保背景層之上的層。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 29



最后

你可以添加一些文字布局。這是我最后的結(jié)果。我希望你喜歡它。

 

在Photoshop中合理布局網(wǎng)站的登錄注冊(cè)頁面 30

 


 

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/ps1332.html
PS技巧:利用Photoshop制作專業(yè)網(wǎng)頁設(shè)計(jì)模板
ps實(shí)用小貼士第八期-mac下快速切換圖層混合模式
圖趣網(wǎng)微信
建議反饋
×