如果您喜歡『PS學習網』,請推薦給您身邊的朋友!本站永久域名:www.tlbvwg.live

設計透明WEB網頁登錄框圖片的PS教程

當前位置 : PS學習網 > 實例教程 > 正文來源:網絡作者:網絡時間:2019-05-31人氣:

本教程主要使用Photoshop繪制半透明的Web登錄框效果圖,作者P大點S給同學們來一發登錄界面教程,教程不是很難的,技巧點都集中在圖層樣式的運用,操作非常細致,零基礎也可以學會,附上源文件供參考,喜歡的朋友一起來學習吧。

先看看效果圖

設計透明WEB網頁登錄框圖片的PS教程

1、新建一個文檔,這里我用的是400*300像素,填充一個#d0c0be的顏色填充調整層。

設計透明WEB網頁登錄框圖片的PS教程

2、選擇畫筆工具,使用圓角柔邊畫筆,設置前景色為#364e35,畫出如下圖中的形狀出來。

設計透明WEB網頁登錄框圖片的PS教程

3、執行“濾鏡—模糊—高斯模糊”,我用的數值是46.9像素,賦予這個顏色層一個模糊效果,跟我們的背景融合。

設計透明WEB網頁登錄框圖片的PS教程

4、選擇圓角矩形工具,并設置前景色為#313c45,畫一個圓角矩形,并將圓角矩形的填充設置為11%

設計透明WEB網頁登錄框圖片的PS教程

5、為這個圓角矩形添加一個圖層樣式。這里,我添加了描邊、內陰影以及投影。

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

 

6、下面,復制一層這個圓角矩形,按照構思, 我們將用第一個圓角矩形來當作輸入用戶名 的框框,復制來的這一個圓角矩形,我們下 移一定的像素,用來當作輸入密碼的框框。

設計透明WEB網頁登錄框圖片的PS教程

7、接下來,我們繼續復制一層這個圓角矩形, 依舊下移一定的像素,用來當作確定的框框。右鍵清除掉圖層樣式,并將形狀填充顏色更改為#749e5e,添加一個圖層樣式。

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

 

8、添加文本,會員登錄,文本顏色設置為白色#ffffff,并為其添加一個圖層樣式,這里我添加了描邊以及投影。

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

9、添加最底下那個綠色框中的文本:確定。設置確定兩字的顏色為白色,并添加一個圖層樣式,這里我用了描邊和投影。

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

10、下面,我們添加用戶名及密碼兩個文本,同樣的設置文本的顏色為白色,添加一個圖層樣式,在這里,我設置了一個投影效果。

設計透明WEB網頁登錄框圖片的PS教程

設計透明WEB網頁登錄框圖片的PS教程

到這里,就算是完成了,來看看我們的效果吧!

設計透明WEB網頁登錄框圖片的PS教程

回頂部
黑龙江p62玩法开奖结果查询 大发快三精准预测号码 篮球斗牛 棋牌娱乐软件 黑龙江快乐十分前三走势图 幸运飞艇最近开奖不统一 qq分分彩 贵州捉鸡麻将技巧 河内5分彩计划 股票开户国泰君安 捕鸟达人旧版本下载 - 视频 欢乐棋牌 掌悦理财 股票短线交易技巧 九武至尊棋牌 p3开奖结果今天号 5分pk10骗局