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) 修改单位,点击编辑 ...
随机推荐
- 微信小程序填坑之旅一(接入)
一.小程序简介 小程序是什么? 首先“程序”这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为它嵌入在微信中,受微 ...
- oralce下载
oracle的官网网址:oracle.com 打开之后选择中文 然后在页面的下方找到下载和试用链接 点击进入,选择数据库下载,在页面中找到如下部分点击进入即可下载对应版本的oracle
- 【题解】Friends
题目描述 有三个好朋友喜欢在一起玩游戏,A君写下一个字符串S,B君将其复制一遍得到T,C君在T的任意位置(包括首尾)插入一个字符得到U.现在你得到了U,请你找出S. 输入输出格式 输入格式 第一行,一 ...
- BZOJ1018 SHOI2008堵塞的交通(线段树)
动态图的连通性当然是可以用LCT维护的.但这相当的不优美,毕竟这样做没有用到任何该图的性质,LCT自带的大常数也会使其跑得非常慢. 考虑用线段树维护区间左右端四个点之间各自的连通性(仅经过该区间内路径 ...
- tomcat Failed creating java C:\Program Files\Java\jre6\bin\client\jvm.dll %1 不是有效的 Win32 应用程序。
jdk版本搞的鬼 请下载64位的jdkj进行安装
- Kakfa的设计思想
Kafka Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实 ...
- 【BZOJ4260】Codechef REBXOR (Trie树)
[BZOJ4260]Codechef REBXOR (Trie树) 题面 BZOJ 题解 两眼题.第一眼不会做,第二眼好简单... 前缀异或和一下,拿\(Trie\)树维护求一个在这个端点以左的最大值 ...
- Docker镜像加速==》阿里云加速器
1.使用阿里云加速器加快获取docker官方的镜像 步骤一:如果没有阿里云账号,需要注册阿里云开发账号 https://dev.aliyun.com/ 步骤二:进入加速器页面获取加速信息 https: ...
- Windows 7 安装VS2008 SP1 失败
由于Windows 7自带了.NET Framework 3.5 SP1, 所以在安装VS 2008 SP1的时候会发生fatal error during installation的错误, 网上找来 ...
- Hadoop生态圈-Flume的组件之sink处理器
Hadoop生态圈-Flume的组件之sink处理器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一. 二.