程序员PS技能(三):程序员使用PSD源文件切图

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

程序员PS技能

上一篇:《程序员PS技能(二):程序员切图最常使用的工具组-选择工具组
下一篇:《程序员PS技能(四):程序员创建PSD文件、展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图


前言

  通过前面的篇章,具备了对PS基本操作的认知,作为程序员我们知道前面这几个就行了,然后本篇章来进行实战。


原图

  原图我们就使用如下图:
  在这里插入图片描述


示例1:获取设计图像的大小并调整

步骤一:选择菜单栏的中“图像”,点击图像大小

  在这里插入图片描述

步骤二:查看图像信息

  在这里插入图片描述

步骤三:开始调整,选择宽度高度的单位(像素)

  在这里插入图片描述

步骤四:改为目标大小,如1920x1080

  在这里插入图片描述

步骤五:确认后,检查图像信息

  在这里插入图片描述
  在这里插入图片描述


示例2:获取图标的位置和大小

步骤一:查看到图标的距离信息

  选中图层,按crtl+鼠标,可以查看到图标的距离信息,如下图:
  在这里插入图片描述

步骤二:更改单位

  使用ctrl+r,出现“参考线”,如下图:
  在这里插入图片描述
  鼠标右键,选择“像素”,如下图:
  在这里插入图片描述

步骤三:查看像素

  选中图层,ctrl+鼠标,即可查看,如下图:
  在这里插入图片描述

步骤四:查看图层本身的像素信息

  打开“属性”窗口。
  在这里插入图片描述
  选择“图层”即可查看:
  在这里插入图片描述


示例3:切图标的切图

  在这里插入图片描述

步骤一:选中该图层

  一般对于选中就会有选中标识,PS中没有,如下图:
  在这里插入图片描述
  可以长按alt+鼠标点击任意其他图层,可以反馈出到底选择了哪一个图层图片,如下图:
  在这里插入图片描述

步骤二:确认图层

  查看右下角图层,确认是需要切图的图层,如下图:
  在这里插入图片描述

步骤三:鼠标右键选择“快速导出为PNG”

  在这里插入图片描述

步骤四:导出

  在这里插入图片描述

步骤五:确认导出成功

  查看到处文件夹,如下图:
  在这里插入图片描述
  (其他图标类似)


示例4:切图标为固定大小

  在这里插入图片描述

步骤一:选中该图层

  一般对于选中就会有选中标识,PS中没有,如下图:
  在这里插入图片描述
  可以长按alt+鼠标点击任意其他图层,可以反馈出到底选择了哪一个图层图片,如下图:
  在这里插入图片描述

步骤二:确认图层

  查看右下角图层,确认是需要切图的图层,如下图:
  在这里插入图片描述

步骤三:鼠标右键选择“导出为…”

  在这里插入图片描述

步骤四:导出参数调整

  在这里插入图片描述
  在这里插入图片描述

步骤五:导出

  在这里插入图片描述

步骤六:确认导出

  查看到处文件夹,如下图:
  在这里插入图片描述


上一篇:《程序员PS技能(二):程序员切图最常使用的工具组-选择工具组
下一篇:《程序员PS技能(四):程序员创建PSD文件、展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

长沙红胖子Qt(长沙创微智科)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值