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

时间:2012-07-26 09:38 来源:未知 作者:admin 点击:
:Photoshop教程:设计简单又酷的登陆框界面 在网页设计中会经常用到Photoshop来制作网页的布局.那么在今天将和童学们一起来学习一下用Photoshop来制作出一个即简单又非常时尚的登陆框. 先来看终效果吧. 1.打开photoshop软件,按ctrl+N,新建一个大小为:600x400
:Photoshop教程:设计简单又酷的登陆框界面
 在网页设计中会经常用到Photoshop来制作网页的布局.那么在今天将和童学们一起来学习一下用Photoshop来制作出一个即简单又非常时尚的登陆框.

先来看终效果吧.

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

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

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

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

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

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

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

显示的效果:

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网


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

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

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

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

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

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

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

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

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

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

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

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

Photoshop设计简单又酷的登陆框界面,PS教程,思缘教程网

 
:Photoshop教程:设计简单又酷的登陆框界面
分享到:
云南新华电脑学校专业职业规划师为你提供更多帮助

相关文章

发表评论
评价:
验证码: 点击我更换图片
咨询中心
咨询电话:0871-68211888,QQ:800068988

在线咨询 预约报名
新华云课堂
电话咨询 顶部