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

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

本教程將教你如何在Photoshop中創(chuàng)建一個漂亮的網(wǎng)站,在僅幾步之遙。您將創(chuàng)建一個網(wǎng)站,讓用戶在您的網(wǎng)站上注冊,非常快。

最終效果

 

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


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

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

 

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


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

 

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


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

 

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


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

 

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


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

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

 

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


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

 

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


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

 

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


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

 

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


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

 

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


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

 

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


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

 

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


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

 

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


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

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

 

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


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

 

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


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

 

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


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

 


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

 

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


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

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

 

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


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

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

 

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


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

 

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


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

 

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


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

 

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



最后

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

 

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

 


 

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