PS 切图、抠图
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 切图、抠图的更多相关文章
- ps切图抠图详解-web前端(转)
网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...
- 页面制作部分之PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 做一个会PS切图的前端开发
系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...
- 前端技术-PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 学习笔记2:前端PS切图
前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...
- PS切图保存后的背景图为透明
1.若想PS切图保存后的背景图为透明,那么则需要在如下图中所示的修改即可,切图后[文件]——>[存储为web格式]——>[PNG-24]: 2.要想在css中的背景图片为相通,则先剪切一个 ...
- 前端PS切图
http://www.imooc.com/learn/506 慕课网地址 Tools Tools Photoshop 快捷键 l 移动工具 V l 选取工具 M l 套索工具 L l ...
- ps切图插件
ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用
- 两种ps切图方法(图层/切片)
两种Ps切图方法 一. 基础操作: a) Ctrl++ 放大图片,ctrl - -缩小图片 b) 按住空格键space+,点击鼠标左键,拖动图片. c) 修改单位,点击编辑 ...
随机推荐
- 【设计模式】—— 享元模式Flyweight
前言:[模式总览]——————————by xingoo 模式意图 享元模式,也叫[轻量级模式]或者[蝇量级模式].主要目的就是为了减少细粒度资源的消耗.比如,一个编辑器用到大量的字母数字和符号,但是 ...
- BZOJ2749 HAOI2012外星人(数论)
不妨把求φ抽象成把将每个位置上的一个小球左移一格并分裂的过程,那么即求所有球都被移到1号格子的步数. 显然要达到1必须先到达2.可以发现每次分裂一定会分裂出2号位的球,因为2以外的质数一定是奇数.以及 ...
- import static和import的区别(转)
import static静态导入是JDK1.5中的新特性.一般我们导入一个类都用 import com.....ClassName;而静态导入是这样:import static com.....Cl ...
- 解题:NOI 2010 航空管制
题面 常见的套路与不常见的套路 第一问是常见的套路,建反边用优先队列跑拓扑排序 第二问是不常见的套路,如何判断一个点最早什么时候起飞?先不加它来拓扑排序,直到拓扑排序不能进行下去了,这个时刻就是它必须 ...
- 【纪中集训2019.3.27】【集训队互测2018】小A的旅行(白)
题目 描述 \(0-n-1\)的图,满足\(n\)是\(2\)的整数次幂, $ i \to j $ 有 $ A_{i,j} $ 条路径: 一条路径的愉悦值定义为起点和终点编号的\(and\)值 ...
- 【洛谷P2114】起床困难综合征 位运算+贪心
题目大意:给定 N 个操作,每个操作为按位与.或.异或一个固定的数字,现在要求从 0 到 M 中任选一个数字,使得依次经过 N 个操作后的值最大. 题解:位运算有一个重要的性质是:位运算时,无进位产生 ...
- Mac 删除应用卸载后无法正常移除的图标
经常会不通过appstore下载软件,也就是从网页中下载dmg,自己安装,但是当我不再想要这个软件,然后把它卸载掉之后就会发现,launchpad里还是遗留了这个软件的图标,而且删不掉.这个时候,就可 ...
- Linux上vi编辑文件非正常退出后文件恢复
Vim另存文件的命令为 编辑完文件后Esc,输入以下指令 :w filename 编辑文件时非正常退出,会生成.hello.txt.swp的文件,还有一些其他信息 恢复文件要使用以下命令: [keys ...
- [六字真言]6.吽.SpringMVC中上传大小异常填坑
最近在讲课的时候,遇到了关于上传文件过大的时候浏览器无法响应的问题,配置了捕获异常,有的学生浏览器好使,有的学生浏览器不好用!莫名其妙! MaxUploadSizeExceededException进 ...
- css3 :nth-child()选择器的使用
一.nth-child() 1. nth-child(n):父元素下的第n个子元素,n>0,索引从1开始.不区分子元素类型. 2. nth-child(odd):父元素下的奇数子元素,等同于:n ...