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

前言

  本篇是程序员仿照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源文件切图
下一篇:敬请期待…

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注