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

2016-02-16 05:43 66 1 收藏

最近很多朋友喜欢上PS,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - PS 】

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

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

先看效果图:

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

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

单击确定按钮。

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

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

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

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

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

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

完成最终效果!

Photoshop制作简易的办公平台登陆框网页教程,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1568750.html

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

经验教程

853

收藏

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