PS切图
https://www.cnblogs.com/xiongmanli/p/6079172.html

https://tech.youzan.com/cut-boy/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

切图

  • 内容性图片 指的是图片在页面是作为内容存在,如页面中的海报。
  • 修饰性图片 指的是图片在页面中起修饰作用,如页面中的背景和图标。

修饰性图标和内容性图片需要(在 HTML 的 <img> 之中,只需站位不需切图)切出。切出的内容性图片应保存为 *.jpg 格式,而修饰性图片因保存为 png24(IE6 不支持半透明,Alpha 透明) 或 png8 它们均支持全透明。

+

隐藏文字,方法一,直接在图层中隐藏文字图层。方法二(两种,分别应对于纯色和有背景需要隐藏文本的情况)如下图所示,使用自由变换。

PNG24切图方法

  • 移动工具选中所需图层(Ctrl 多选)
  • 右键合并图层(Ctrl + E)
  • 复制到新图层

PNG8带背景切图方法

  • 合并可见图层(Shift + Ctrl + E)
  • 矩形选框选择内容
  • 魔棒工具去除多余部分(Alt + 选取)

可平铺背景的切图方法

  • 用矩形选择一个区域
  • 复制至新图层

NOTE: X 轴平铺需要占满图片的宽,Y 轴平铺需要占满图片的高。

切片工具(大图化小的方法,将一大图分为多小图)

  • 拉参考线
  • 选择切片工具
  • 点击 “基于参考线的切片” 按钮
  • 选择切片选择工具
  • 保存于新图层
  • 如何开始切图

    第一步:去掉所有文字,只留背景

    打开视觉稿后,用上面说过的方法去掉所有的文字,只留背景和图片(记得备份一下PSD文件)。

PS 切图、抠图的更多相关文章

  1. ps切图抠图详解-web前端(转)

    网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...

  2. 页面制作部分之PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  3. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  4. 前端技术-PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  5. 学习笔记2:前端PS切图

    前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...

  6. PS切图保存后的背景图为透明

    1.若想PS切图保存后的背景图为透明,那么则需要在如下图中所示的修改即可,切图后[文件]——>[存储为web格式]——>[PNG-24]: 2.要想在css中的背景图片为相通,则先剪切一个 ...

  7. 前端PS切图

    http://www.imooc.com/learn/506    慕课网地址 Tools Tools  Photoshop 快捷键 l  移动工具 V l  选取工具 M l  套索工具 L l  ...

  8. ps切图插件

    ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用

  9. 两种ps切图方法(图层/切片)

    两种Ps切图方法 一.      基础操作: a)    Ctrl++ 放大图片,ctrl - -缩小图片 b)    按住空格键space+,点击鼠标左键,拖动图片. c)    修改单位,点击编辑 ...

随机推荐

  1. js手写俄罗斯方块

    代码如下 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  2. BZOJ 3876 支线剧情 | 有下界费用流

    BZOJ 3876 支线剧情 | 有下界费用流 题意 这题题面搞得我看了半天没看懂--是这样的,原题中的"剧情"指的是边,"剧情点"指的才是点. 题面翻译过来大 ...

  3. Centos7搭建SS以及加速配置的操作记录

    部署 Shadowsocks之前,对它做了一个简单的了解,下面先介绍下.一道隐形的墙众所周知,天朝局域网通过 GFW (中国防火墙长城:英文名称Great Firewall of China,简写为G ...

  4. Zabbix应用六:Zabbix监控Redis

    利用Zabbix监控Redis Zabbix监控redis就比较简单了,因为zabbix官方提供了监控redis的模版和脚本,而且脚本有nodejs和python两种,下载地址:https://git ...

  5. Hadoop生态圈-使用Kafka命令在Zookeeper中对应关系

    Hadoop生态圈-使用Kafka命令在Zookeeper中对应关系 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.zookeeper保存kafka的目录     二.使用Ka ...

  6. Golang的文件处理方式-常见的读写姿势

    Golang的文件处理方式-常见的读写姿势 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在 Golang 语言中,文件使用指向 os.File 类型的指针来表示的,也叫做文件句柄 ...

  7. Java大话设计模式

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  8. 解决linux mysql命令 bash: mysql: command not found 的方法

    错误: root@DB-02 ~]# mysql -u root-bash: mysql: command not found 原因:这是由于系统默认会查找/usr/bin下的命令,如果这个命令不在这 ...

  9. Spark记录-spark介绍

    Apache Spark是一个集群计算设计的快速计算.它是建立在Hadoop MapReduce之上,它扩展了 MapReduce 模式,有效地使用更多类型的计算,其中包括交互式查询和流处理.这是一个 ...

  10. hdu 5079 Square

    http://acm.hdu.edu.cn/showproblem.php?pid=5079 题意: n*n网格,每个格子可以涂黑色或白色,有的格子必须涂黑色 问最大白色正方形边长分别为0,1,2,… ...