Photoshop设计简单又酷的登陆框界面

a3410150

a3410150

2016-02-16 07:12

下面图老师小编要向大家介绍下Photoshop设计简单又酷的登陆框界面,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

先来看最终效果吧.

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

1.打开photoshop软件,按ctrl+N,新建一个大小为:600x400px的文档,并填充灰色.

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

2.在工具栏上选择"圆角矩形"并在其选择栏上设置圆角:4px,然后在画布上画一个大小为280x180px(注意:在选项栏的选中按扭)

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

3.双击矩形所在的图层,设置图层样式,按下面的数据设置.

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/ps/)

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

显示的效果:

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

4.现在我们给矩形的外边框添加发光的效果.

在工具栏上选择"矢量线条",画一条直线,如图如示.

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

添加图层样式,设置如下图:

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

复制直线,然后移动到下面来,效果如下图:

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

使用"矢量直线"工具,也在另外两个边框画上直线,并设其样式:

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

5.使用"圆角矩形"设半径:7px.画一个矩形来做输入框.并给其添加样式.

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

在这里我将给大家介绍如何给矩形添加一个新的阴影.

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/ps/)

使用"圆角矩形"设半径为:10px;画一个大小和输入框差不多的矩形,并填充黑色.最后把图层拖到输入框图层的后面去.

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

现在我们给这个矩形添加一个滤镜:滤镜模糊高斯模糊;设模糊度在4px左右.最后在图层面板上设"不透明度"为:30%.

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

6.新建一个图层,使用"圆角矩形"绘制一个矩形来做"Submit"按扭.给其添加样式:

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

7.使用"圆角矩形"绘制两条直线并分别填充:#cccccc;#ffffff.

再次绘制一个"单选"选框,效果如下图如示:

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

8.如果童学们看到这里,那么恭喜你,你快完成了.

在这里我们给这个登陆框添加一个"X"和"√"的图标.

再添加上一些文字,那么一个超酷又时尚的登陆框就完成了.

Photoshop设计简单又酷的登陆框界面,PS教程,图老师教程网

展开更多 50%)
分享

猜你喜欢

Photoshop设计简单又酷的登陆框界面

PS PS基础
Photoshop设计简单又酷的登陆框界面

Photoshop设计蓝色风格的网页登陆框

PS PS基础
Photoshop设计蓝色风格的网页登陆框

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop设计Windows登陆界面制作

PS PS基础
Photoshop设计Windows登陆界面制作

Photoshop设计清新风格绿色登陆框教程

PS PS基础
Photoshop设计清新风格绿色登陆框教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Photoshop设计制作红色网页登陆界面

PS PS基础
Photoshop设计制作红色网页登陆界面

Photoshop设计简易的办公平台登陆框网页教程

电脑网络
Photoshop设计简易的办公平台登陆框网页教程

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Photoshop结合Maya制作羌族小女孩

Photoshop结合Maya制作羌族小女孩

Photoshop打造卡通圣诞老人壁纸

Photoshop打造卡通圣诞老人壁纸
下拉加载更多内容 ↓