程序员PS技能(四):程序员创建PSD文件、展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图
前言
本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了。
前提条件
已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传过,若没有装PS的则自己装PS,没有装蓝湖插件请去蓝湖官网查询一下,可以安装插件一键上传。
程序员切图要突破的必要技能
以下技能,就是算装了PS,会一些基本的调图,但是实际不熟,需要将PS的几个与切图相关的功能熟练。
- 指定大小 :在PS中,将新建图标切换成指定大小,并且切图导出。
- 缩放:在PS中,将新建图标进行缩放后,再切,并且切图导出。
- 透明背景: 在PS中,将新建图标除了图标本身外,其他切成透明背景
- 圆角: 在PS中,将新建图标的背景做成圆角,结合透明背景,实现立体的按键。
- 阴影:在PS中,将立体的按键背景加上阴影。
本篇目标
操作:新建一个PSD文件
步骤一:打开PSD软件
步骤二:新建PSD文件
步骤三:保存PSD文件
操作:绘制一个按钮五种状态
步骤一:拖一个矩形框
步骤二:修改为200x60像素
步骤三:复制5个图层
将该图层复制5个
点击确认,就会在原有同样位置新增一个图层,这样新建五个,如下图:
然后对图层进行改名字,双击名字即可,如下:
校准下位置,方法为先点击图形,然后点击移动,如下图:
调整完成后,如下图:
步骤四:调整颜色
直接对整个图层,进行调色,如下图:
步骤五:调整颜色渐变
对于渐进色调整的方法:
修改渐进点颜色:颜色会弹出颜色的选择
新增渐进点:点击中间区域:新增渐进点
删除渐进点:将渐进点击不送,拖出去即可删除渐进点。
操作如下图:
调整第一张,如下图:
逐一,抓色然后调整,最终如下图:
重新校准下大小(参照本操作的步骤二):
把背景图层的颜色也改成一样的,如下图:
操作:绘制第四种,五种状态的图标
在原来的图层上,需要增加新的绘制,那么实际上是新增图层,并将图层合并到组,这样第四五种就变成了图层组了。
步骤一:先绘制2个椭圆条
步骤二:调整颜色
调整完效果如下图:
步骤三:合并组
第四五个按钮实际上是一个组的(为了后续上传蓝湖会一个图片)
然后将上面的按钮拖入组,注意显示在上面的必须在前面,最后如下图:
可点击组旁边的“眼睛”去查看实际效果,如下图:
操作:添加圆角
步骤一:设置圆角矩形半径
步骤二:依次都设置好,圆角为5
操作:添加渐进描边
步骤一:选择图层
步骤二:右键“混合选项”
步骤三:选择“样式”
步骤四:调整到相似的效果
如下图:
步骤五:其他按键图层依次操作
最终效果如下:
操作:上传PSD至蓝湖
步骤一:选择蓝湖插件
步骤二:登录
步骤三:选择上传到的团队和项目
步骤四:上传成功,查看蓝湖
下图是没有标记切图的情况下上传的:
步骤五:标记切图,重新上传,查看蓝湖
下载切图测试
上一篇:《程序员PS技能(三):程序员使用PSD源文件切图》
下一篇:敬请期待…
程序员PS技能(四):程序员创建PSD文件、展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图的更多相关文章
- 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载
微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...
- 基于Picture Library创建的图片文档库中的上传多个文件功能(upload multiple files)报错怎么解决?
复现过程 首先,我创建了一个基于Picture Library的图片文档库,名字是 Pic Lib 创建完毕后,我点击它的Upload 下拉菜单,点击Upload Picture按钮 在弹出的对话框中 ...
- 25.week4 docker build 也就是创建自己的image 上传image到dockerhub 从dockerhub下载images
dado可以写你自己的名字 这个命令就会根据目录下的Dockerfile(固定用和这个名字)文件里面的内容 去下载并创建运行命令一步一步地 Setting up libxfixes3:amd64 (: ...
- PHP 后台程序配置config文件,及form表单上传文件
一,配置config文件 1获取config.php文件数组, 2获取form 表单提交的值 3保存更新config.php文件,代码如下: $color=$_POST['color']; $back ...
- 微信小程序云函数中有以下未安装的依赖,如果未安装即全量上传
云函数中有以下未安装的依赖,如果未安装即全量上传 在新建的云函数,右击终端打开->cmd,安装依赖 npm install --production 依赖安装成功之后,文件里面会出现 packa ...
- 用git创建仓库关联本地项目,又一直上传不上去
这个不能勾,我这边勾了用VSCODE上传不了
- 怎样将IPhone应用程序软件公布到应用程序商店?
转自:http://www.shtion.com/667.html 怎样将IPhone应用程序软件公布到应用程序商店? 2009年10月19日公布 分类: App store, iphone, 手机应 ...
- 如何上传网站程序(文件浏览器上传网页、FileZilla上传网站程序)
问题场景: 网页制作完成后,程序需上传至虚拟主机. 注意事项: Windows系统的主机请将全部网页文件直接上传到FTP根目录,即 / . Linux系统的主机请将全部网页文件直接上传到 /htdoc ...
- Google Chrome 应用商店上传扩展程序
1. 进入 Google 开发者中心 网址: https://chrome.google.com/webstore/developer/dashboard?hl=zh-cn 2. 添加新项 上传后,出 ...
随机推荐
- FastAPI(44)- 操作关系型数据库
ORM FastAPI 可与任何数据库和任何样式的库配合使用并和数据库通信 object-relational mapping 对象关系映射 ORM 具有在代码和数据库表(关系)中的对象之间进行转换( ...
- 关于布隆过滤器,手写你真的知其原理吗?让我来带你手写redis布隆过滤器。
说到布隆过滤器不得不提到,redis, redis作为现在主流的nosql数据库,备受瞩目:它的丰富的value类型,以及它的偏向计算向数据移动属性减少IO的成本问题.备受开发人员的青睐.通常我们使用 ...
- 实现js读取Excel数据
如何通过js去读取excel中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- VS2017离线安装QT插件出错:未能正确加载VSIX包
问题现象: 问题已解决,忘记截图了 出现原因:可能是自己离线安装,安装版本与不符合当前VS吧.记得当时下载了一个最新的版本.重新卸载当前插件,再装一个合适版本即可 http://download.qt ...
- bzoj1341 名次排序问题rank sorting(dp,考虑到对未来的贡献)
QWQ啊 这个题可以说是我目前碰到过的最难理解的dp之一了. 题目大意: 已知参赛选手的得分,你的任务是按照得分从高到底给出选手的排名.遗憾的是,保存选手信息的数据结构只支持 一种操作,即将一个选手从 ...
- ORM框架查询数据库时返回指定的字段
django model.objects.filter() 查询指定字段 1.model.objects.filter().values('field_name'),单个字段 2.model.obje ...
- Linux环境下安装java的方法
linux安装java步骤 方式一:yum方式下载安装 1.查找java相关的列表 yum -y list java* 或者 yum search jdk 2.安装jdk yum install ja ...
- 无法获取指向控制台的文件描述符 (couldn't get a file descriptor referring to the console)
背景 最近收拾东西,从一堆杂物里翻出来尘封四年多的树莓派 3B 主机来,打扫打扫灰尘,接上电源,居然还能通过之前设置好的 VNC 连上.欣慰之余,开始 clone 我的 git 项目,为它们拓展一个新 ...
- .Net2.0连接PG数据注意事项
.Net2.0连接PG数据注意事项 第一次用.net操作PG[.NET2.0] 一:Npgsql版本问题 1:如果是.net2.0 建议用2.0.11.0[NuGet搜索npgsql第一个的最低版本 ...
- Redis:学习笔记-03
Redis:学习笔记-03 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 7. Redis配置文件 启动 ...