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

第一步:整體框架設(shè)計(jì)
1、創(chuàng)建一個(gè)新的文檔,背景顏色為#dadada。

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

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

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

第二步:細(xì)節(jié)的深入刻畫以及布局詳細(xì)化
1、介于兩者之間的形狀,我會(huì)添加一些線

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

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


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

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

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

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

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



第三步:豐富畫面效果,增加視覺效果
1、我將添加一個(gè)圖像像在流動(dòng)的屏幕截圖,并在底部,我將添加另一個(gè)形狀與不透明度值的20%至30%

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

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



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

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




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

第五步:添加文字、填充畫面效果
1、右側(cè),我將創(chuàng)建一個(gè)橫向?qū)Ш讲藛?,你?huì)看到,我已經(jīng)創(chuàng)建了一個(gè)按鈕,它具有相同的圖層樣式,我已經(jīng)使用的形式。

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

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

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

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

本文地址:http://m.likemindfilms.com/tutorial/ps1332.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏