程序员PS技能:程序员创建PSD文件展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图

Posted 长沙红胖子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了程序员PS技能:程序员创建PSD文件展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图相关的知识,希望对你有一定的参考价值。

若该文为原创文章,转载请注明原文出处
本文章博客地址:https://hpzwl.blog.csdn.net/article/details/121366684
红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等)持续更新中…(点击传送门)

程序员PS技能

上一篇:《程序员PS技能(三):程序员使用PSD源文件切图
下一篇:敬请期待…


前言

  本篇是程序员仿照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切图的主要内容,如果未能解决你的问题,请参考以下文章

将 PSD 转换为 Android XML(布局)格式?

principle 怎么打开psd文件

Unity PSD导入到Unity

Unity PSD导入到Unity

Unity PSD导入到Unity

PSD 是什么