Photoshop教程:設(shè)計(jì)簡(jiǎn)單又酷的登陸框界面(3)

來(lái)源：未知 作者：bbs.16xx8.com 學(xué)習(xí)：632人次
作者:佚名　  出處:夕木木

 在網(wǎng)頁(yè)設(shè)計(jì)中會(huì)經(jīng)常用到Photoshop來(lái)制作網(wǎng)頁(yè)的布局.那么在今天將和童學(xué)們一起來(lái)學(xué)習(xí)一下用Photoshop來(lái)制作出一個(gè)即簡(jiǎn)單又非常時(shí)尚的登陸框.

先來(lái)看最終效果吧.

1.打開(kāi)photoshop軟件,按ctrl+N,新建一個(gè)大小為:600x400px的文檔,并填充灰色.

2.在工具欄上選擇"圓角矩形"并在其選擇欄上設(shè)置圓角:4px,然后在畫(huà)布上畫(huà)一個(gè)大小為280x180px(注意:在選項(xiàng)欄的選中按扭)

3.雙擊矩形所在的圖層,設(shè)置圖層樣式,按下面的數(shù)據(jù)設(shè)置.

顯示的效果:


4.現(xiàn)在我們給矩形的外邊框添加發(fā)光的效果.

在工具欄上選擇"矢量線條",畫(huà)一條直線,如圖如示.

添加圖層樣式,設(shè)置如下圖:

復(fù)制直線,然后移動(dòng)到下面來(lái),效果如下圖:

使用"矢量直線"工具,也在另外兩個(gè)邊框畫(huà)上直線,并設(shè)其樣式:

5.使用"圓角矩形"設(shè)半徑:7px.畫(huà)一個(gè)矩形來(lái)做輸入框.并給其添加樣式.


在這里我將給大家介紹如何給矩形添加一個(gè)新的陰影.

使用"圓角矩形"設(shè)半徑為:10px;畫(huà)一個(gè)大小和輸入框差不多的矩形,并填充黑色.最后把圖層拖到輸入框圖層的后面去.

現(xiàn)在我們給這個(gè)矩形添加一個(gè)濾鏡:濾鏡>模糊>高斯模糊;設(shè)模糊度在4px左右.最后在圖層面板上設(shè)"不透明度"為:30%.

6.新建一個(gè)圖層,使用"圓角矩形"繪制一個(gè)矩形來(lái)做"Submit"按扭.給其添加樣式:

7.使用"圓角矩形"繪制兩條直線并分別填充:#cccccc;#ffffff.

再次繪制一個(gè)"單選"選框,效果如下圖如示:

8.如果童學(xué)們看到這里,那么恭喜你,你快完成了.

在這里我們給這個(gè)登陸框添加一個(gè)"X"和"√"的圖標(biāo).

再添加上一些文字,那么一個(gè)超酷又時(shí)尚的登陸框就完成了.



學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS，跟著教程做一遍，做完的圖到這交作業(yè)：提交作業(yè)
  • 建議練習(xí)時(shí)，大家自己找素材，盡量不要用教程提供的素材。
  • 教程有看不懂的地方，可以到論壇發(fā)帖提問(wèn)：新手求助
  • 加官方微信，隨時(shí)隨地，想學(xué)就能學(xué)：ps_bbs，或掃右側(cè)二維碼！
  • 關(guān)注我們學(xué)更多，每天都有新教程：新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論，交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助，請(qǐng)回答！