zoukankan      html  css  js  c++  java
  • 程序员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源文件切图
    下一篇:敬请期待…

  • 相关阅读:
    第二十章 springboot + consul(1)
    附2 hystrix详述(2)- 配置
    附1 hystrix详述(1)
    第十九章 springboot + hystrix(1)
    第十八章 springboot + thymeleaf
    第十七章 springboot + devtools(热部署)
    Nginx(二):虚拟主机配置
    SpringMVC中异常处理详解
    五分钟读懂UML类图
    Java web中WEB-INF目录理解
  • 原文地址:https://www.cnblogs.com/qq21497936/p/15564241.html
Copyright © 2011-2022 走看看