程序员PS技能(四):程序员创建PSD文件、展示简单PSD设计流

2021-11-16  本文已影响0人  红模仿_红胖子

前言

  本篇是程序员仿照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源文件切图

下一篇:敬请期待…

上一篇 下一篇

猜你喜欢

热点阅读