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

2016-02-19 17:18 32 1 收藏

下面是个Photoshop设计简易的办公平台登陆框网页教程教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - 网页设计教程 】

本PS教程为大家带来网站按钮制作教程,制作过程中主要应用渐变、蒙板等工具,希望大家喜欢!

先看效果图:

Photoshop制作简易的办公平台登陆框网页教程

1、执行菜单:文件/新建(快捷键Ctrl+N),弹出新建对话框,设置名称:制作登陆办公平台按钮,宽度:800像素,高度:600像素,

分辨率:72像素/英寸,颜色模式:RGB颜色、8位,背景内容:白色,设置完毕后单击确定按钮。

Photoshop制作简易的办公平台登陆框网页教程

2、在图层控制面板击新建图层按钮,新建一个背景,选择工具箱渐变工具(快捷键G),在工具选项栏中设置为径向渐变,然后点按可编辑渐变,

弹出渐变编辑器。双击如图3中的A处,设置色彩RGB分别为252、253、255,再双击图3中所示的B处,设置色彩RGB分别为226、239、255,

单击确定按钮。

Photoshop制作简易的办公平台登陆框网页教程

Photoshop制作简易的办公平台登陆框网页教程

3、在图层面板上单击创建新图层按钮 ,新建一个图层,再工具箱选择圆角矩形工具,在工作区拖出一个圆角矩形。

Photoshop制作简易的办公平台登陆框网页教程

4、选择工具箱渐变工具(快捷键G),在工具选项栏中设置为径向渐变,然后点按可编辑渐变,弹出渐变编辑器。

设置色彩RGB分别为135、194、254,再设置色彩RGB分别为47、146、250,单击确定按钮,按键盘快捷键Ctrl+Enter转换为选区,

并按住键盘中Shift不放在工作区拖出一个圆角矩形,按键盘快捷键Ctrl+D取消选区。

Photoshop制作简易的办公平台登陆框网页教程

Photoshop制作简易的办公平台登陆框网页教程

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

5、在图层面板上单击创建新图层按钮 ,新建一个图层2,再工具箱选择圆角矩形工具,并按住键盘中Shift不放在工作区拖出一个圆角矩形,

设置前景色为白色,按键盘快捷键Ctrl+Enter转换为选区,按键盘快捷键Ctrl+D取消选区。

Photoshop制作简易的办公平台登陆框网页教程

6、在工具箱中选择移动工具 ,按住键盘的Alt键不放,选择图层3,按鼠标左键拖出个图层3。

Photoshop制作简易的办公平台登陆框网页教程

7、单击工具箱中的横排文字工具 ,输入用户名,设置字体:黑体,大小:18点,颜色:白色,设置消除锯齿的方法:无。

Photoshop制作简易的办公平台登陆框网页教程

8、单击工具箱中的横排文字工具 ,输入密码,设置字体:黑体,大小:18点,颜色:白色,设置消除锯齿的方法:无。

Photoshop制作简易的办公平台登陆框网页教程

9、在图层面板上单击创建新图层按钮 ,新建一个图层,再工具箱选择圆角矩形工具,在工作区拖出一个圆角矩形。

Photoshop制作简易的办公平台登陆框网页教程

10、按键盘快捷键Ctrl+Enter转换为选区,执行菜单:编辑/描边弹出描边对话框,设置宽度为1,颜色为:白色,

按键盘快捷键Ctrl+D取消选区。

Photoshop制作简易的办公平台登陆框网页教程

11、单击工具箱中的横排文字工具 ,输入登陆,设置字体:黑体,大小:18点,颜色:白色,设置消除锯齿的方法:无,其他的做法也是一样,

Photoshop制作简易的办公平台登陆框网页教程

Photoshop制作简易的办公平台登陆框网页教程

12、创建新图层按钮,新建一个图层3,选择椭圆工具,在工作区拖出一个椭圆形状并填充白色,按键盘快捷键Shift+I羽化,弹出羽化选区,

设置羽化半径为50像素,然后点击确定按钮,

Photoshop制作简易的办公平台登陆框网页教程

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

13、在工具箱中设置前景色颜色RGB值为:120、199、254,按键盘快捷键Ctrl+Delete填充前景色,选择图层1按住键盘的Alt键不放,

按鼠标左键拖出一个图层1副本,并添加一个蒙板给图层1副本,在工具箱中选择渐变工具,给图层1副本添加一个渐变。

Photoshop制作简易的办公平台登陆框网页教程

Photoshop制作简易的办公平台登陆框网页教程

完成最终效果!

Photoshop制作简易的办公平台登陆框网页教程

来源:http://www.tulaoshi.com/n/20160219/1614880.html

延伸阅读
来往网页版怎么登陆   1)下载安装并打开新版的来往客户端,点击左上角二维码样式的图标,点击登陆网页版。   2)我们打开电脑,在浏览器中输入www。laiwang。com打开网页。然后在来往软件中点击开始扫描,将扫描方框对准网页中的二维码。 3)来往网页版登陆成功。
手机怎么登陆微信公众平台   一直以来微信公众号只能在电脑平台上进行管理,不过今天有个好消息告诉大家,从今往后手机也可以登录管理微信公众平台了。微信公众平台的手机版已开始公测,以下是手机登陆微信公众平台方法与具体的微信公众平台手机版使用教程。 手机怎么登陆微信公众平台 微信公众平台手机版使用教程 手机...
标签: 电脑入门
登录网页版旺旺: 如果您使用的电脑上未安装淘宝旺旺聊天工具,您可以点击"旺旺入口"和"网页版淘宝旺旺",然后用您的用户名和密码登录后,便可直接显示与淘友沟通的网页版旺旺页面。 如果您使用的电脑上有安装淘宝旺旺聊天工具,您点击"旺旺入口"便会自动打开淘宝旺旺,建议您使用淘宝旺旺登录与淘友沟通;如果...
极致相机应用登陆安卓平台   随着智能手机的逐渐普及以及成像质量的大幅提升,智能手机如今已经成为了消费者最常用的拍摄工具之一,而相机应用也成为了各大应用商店最主要的应用类别之一。在率先登陆iOS平台之后,Smugmug日前也在谷歌Play Store中推出了测试版的Camera Awesome拍照应用,售价为2.99美元。作为目前最强大的拍照应...
网页微信怎么登陆   在信息时代,如果您还没有微信真是OUT了,但是有时候我们使用手机不帮方便,这时候您也可以在电脑上登陆网页微信,也就是说使用浏览器登陆微信聊天,这个不少同学不知道吧?下面就由最火软件站给大家介绍如何在浏览器上进行微信聊天。 1、打开浏览器,输入微信网页版地址:http://wx.qq.com/ 2、然后...

经验教程

383

收藏

48
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部