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) 修改单位,点击编辑 ...
随机推荐
- oracle 创建表空间 与创建用户与分配用户权限
创建一个表空间名为ABC create tablespace "ABC" //貌似要大写 datafile 'D:\oracle\TBSPACES\ABC.dbf' / ...
- HGOI 20181027 幻象(概率DP)
40 pts: 考场上打了40分暴力,理论的话就是概率树,把每一个状态去去到各个带权(概率)的和就是答案 最终处理的话就是dfs出01序列0代表没有幻象,1代表出现幻象然后在每一次dfs出一段序列的时 ...
- 洛谷 P4389 付公主的背包 解题报告
P4389 付公主的背包 题目背景 付公主有一个可爱的背包qwq 题目描述 这个背包最多可以装\(10^5\)大小的东西 付公主有\(n\)种商品,她要准备出摊了 每种商品体积为\(V_i\),都有\ ...
- POJ 1847 Tram (最短路径)
POJ 1847 Tram (最短路径) Description Tram network in Zagreb consists of a number of intersections and ra ...
- bzoj千题计划180:bzoj4411: [Usaco2016 Feb]Load balancing
http://www.lydsy.com/JudgeOnline/problem.php?id=4411 用树状数组维护扫描线 一个树状数组维护扫描线之上的y<=i点,另一个维护扫描线之下y&l ...
- SQL语句(六)成批导入导出数据
(六) 成批导入导出数据 假设已经存在teaching数据库, 存在一张Student表,如图: 右键teaching->任务->导入数据 下一步->数据源(Microsoft Ex ...
- Chrome插件LiveStyle结合Sublime Text3编辑器实现高效可视化开发
LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件.利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发,一次配置,简单易用! 本文由前端交流QQ群管理员—— ...
- 流行的软件工程过程--Rational统一过程!
RUP提供了一个给角色分配任务和责任的严格方法,在J2EE开发中使用RUP出于以下三个原因: RUP以架构为中心:在将资源分配给全面开发之前,它先开发一个可执行的架构原型. UP是迭代并基于构件的. ...
- ML—机器学习常用包(持续更新….)
机器学习是计算机科学和统计学的边缘交叉领域,R关于机器学习的包主要包括以下几个方面: 1)神经网络(Neural Networks): nnet.AMORE以及neuralnet,nnet提供了最常见 ...
- 20155215 2016-2017-2 《Java程序设计》第7周学习总结
20155215 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 lambda语法:Lambda去重复,回忆DRY原则,Lambda表达式可读性更好 ...