前言
本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了。
前提条件
已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传过,若没有装PS的则自己装PS,没有装蓝湖插件请去蓝湖官网查询一下,可以安装插件一键上传。
程序员切图要突破的必要技能
以下技能,就是算装了PS,会一些基本的调图,但是实际不熟,需要将PS的几个与切图相关的功能熟练。
指定大小 :在PS中,将新建图标切换成指定大小,并且切图导出。
缩放:在PS中,将新建图标进行缩放后,再切,并且切图导出。
透明背景: 在PS中,将新建图标除了图标本身外,其他切成透明背景
圆角: 在PS中,将新建图标的背景做成圆角,结合透明背景,实现立体的按键。
阴影:在PS中,将立体的按键背景加上阴影。
本篇目标
操作:新建一个PSD文件
步骤一:打开PSD软件
步骤二:新建PSD文件
步骤三:保存PSD文件
操作:绘制一个按钮五种状态
步骤一:拖一个矩形框
步骤二:修改为200×60像素
步骤三:复制5个图层
将该图层复制5个
点击确认,就会在原有同样位置新增一个图层,这样新建五个,如下图:
然后对图层进行改名字,双击名字即可,如下:
校准下位置,方法为先点击图形,然后点击移动,如下图:
调整完成后,如下图:
步骤四:调整颜色
步骤五:调整颜色渐变
删除渐进点:将渐进点击不送,拖出去即可删除渐进点。
操作如下图:
调整第一张,如下图:
逐一,抓色然后调整,最终如下图:
重新校准下大小(参照本操作的步骤二):
把背景图层的颜色也改成一样的,如下图:
操作:绘制第四种,五种状态的图标
在原来的图层上,需要增加新的绘制,那么实际上是新增图层,并将图层合并到组,这样第四五种就变成了图层组了。
步骤一:先绘制2个椭圆条
步骤二:调整颜色
步骤三:合并组
第四五个按钮实际上是一个组的(为了后续上传蓝湖会一个图片)
然后将上面的按钮拖入组,注意显示在上面的必须在前面,最后如下图:
可点击组旁边的“眼睛”去查看实际效果,如下图:
操作:添加圆角
步骤一:设置圆角矩形半径
步骤二:依次都设置好,圆角为5
操作:添加渐进描边
步骤一:选择图层
步骤二:右键“混合选项”
步骤三:选择“样式”
步骤四:调整到相似的效果
步骤五:其他按键图层依次操作
操作:上传PSD至蓝湖
步骤一:选择蓝湖插件
步骤二:登录
步骤三:选择上传到的团队和项目
步骤四:上传成功,查看蓝湖
步骤五:标记切图,重新上传,查看蓝湖
下载切图测试
上一篇:《程序员PS技能(三):程序员使用PSD源文件切图》
下一篇:敬请期待…