Photo Shop切图
切图之前
哪些是需要切出来的?
修饰性的 (一般用在background属性)
图标、logo
有特殊效果的按钮 文字等
非纯色的背景
内容性的 (一般用在img标签)
Banner、广告图片
文章中的配图
从服务器加载的图片不用 切图,只需要『占位』即可
切出来的图片 存为哪种类型?
修饰性的
PNG24 (IE6不支持半透明)
PNG8
内容性的
一般存为 JPG
切图 · 隐藏文字只留背景
若文字为独立图层,隐藏文字图层
找到文字图层
去掉眼睛图标
若文字和背景合并,平铺背景覆盖文字
矩形选框工具
自由变换 ( Ctrl+T )
使用移动工具 + Alt
切图 · png24
移动工具选中所需图层 (按住Ctrl 多选)
右键合并图层 (Ctrl+E)
再右键复制图层到新文件,或直接拖至已有文件 (新建 : Ctrl+N)



切图 . png8
带背景切
合并 (可见) 图层 (Shift + Ctrl +E)
矩形选框工具选择内容
魔棒工具去除多余部分
- 从选区中减去: 按住 Alt
可平铺背景的切图
主要针对css里面,background : repeat
用矩形选框工具选取一块区域
复制粘贴到新文件
平铺内容充满文件的宽 (x轴) 或高 (y轴)
切片工具
适用于可以一刀切的活动页
拉参考线
选择切片工具
点击 “基于参考线的切片”按钮
保存(全选切片,统一设置存储格式)
保存
存储所需内容
复制、 新建、 粘贴
Ctrl+c Ctrl+N Ctrl+V
( or 拖动内容至新文件)
存储为web 所用格式
(Alt+Shift+Ctrl+S)

保存类型一
当图片色彩丰富且无透明要求时
建议保存为JPG格式并选择合适的品质
品质,不要设置才能100,因为一旦设置成100,这就意味着图片没有任何压缩,这会导致图片相当大。
保存类型二
当图片色彩不太丰富时无论有无透明要求
请保存为PNG8格式

保存类型三
当图片有半透明要求
请保存PNG24格式

保存类型四
为保证图片质量
保留一份PSD,在PSD上进行修改
Photo Shop切图的更多相关文章
- 关于png、jpg、gif切图时的使用感悟
关于png.jpg.gif切图时的使用感悟 曾经切图时都是一股脑所有图全切成jpg格式,最近突然心血来潮简单的研究了下其他图片格式的具体属性,才突然发现走了不少弯路,并没有做到使图片用最小体积展现出最 ...
- iOS设计 - 一款APP从设计稿到切图过程概述
这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...
- iOS - 如何切图适配各种机型
关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...
- 切图时图片的选择:JPG、PNG、GIF的区别
目前网站图片的采用一共有流行三种,分别是JPG.PNG.GIF,然而很多人并不知道三者在选择的时候究竟应该选谁.虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度.大小和失真程度的问题.如果你运 ...
- 页面制作部分之PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 前端工程师技能之photoshop巧用系列第三篇——切图篇
× 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切 ...
- Android启动icon切图大小
我们在给app切图的时候不知道告诉ui启动图标切多大,其实你新建一个android项目就知道应该切多大了.新建一个项目会产生几种大小的启动图标. 我把各个文件夹下的ic_launcher.png文件都 ...
- WebGIS中矢量切图的初步研究
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS领域,金字塔技术一直是一个基础性技术,WMTS规范专 ...
- 利用AE编写切图工具的一些探讨
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这周利用晚上在家时间研究了下如何使用AE来开发切图工具.最初 ...
随机推荐
- 使用jquery的append(content)方法的注意事项
append(content)函数:向每个匹配的元素内部追加内容. 如以下示例: 向所有段落中追加一些HTML标记. HTML 代码: <p>I would like to say: &l ...
- Asp.net Mvc模块化开发之“开启模块开发、调试的简单愉快之旅”
整个世界林林种种,把所有的事情都划分为对立的两个面. 每个人都渴望的财富划分为富有和贫穷,身高被划分为高和矮,身材被划分为胖和瘦,等等. 我们总是感叹,有钱人的生活我不懂;有钱人又何尝能懂我们每天起早 ...
- [范例] Firemonkey 弹簧动画
弹簧动画效果: 不用写任何代码,只需设定下面动画属性: 参考动画曲线: http://monkeystyler.com/guide/Interpolation-and-AnimationType-Il ...
- [函数] Unicode 检查字符串是否含中文字
// 字串含中文 by Aone function IsIncludeChinese(Str: String): Boolean; var i: Integer; UCS4Str: UCS4Strin ...
- 利用servlet3.0上传,纯原生上传,不依赖任何第三方包
tomcat7里面自带的servlet3.0.jar,支持很多新特性,例如,annotation配置servlet,上传,异步等等.... 如果你的tomcat版本低于7的话,单独在项目中引入serv ...
- Android提升篇系列:Android项目代码优化实践
Android开发中,不同的开发团队,不同的开发人员,在实际编码中会有一些不同的地方.但是,具有一定的更普适性的编码习惯,无疑还是相当重要的.本文主要罗列项目中常见的一些编码片段,并给出相关建议. 1 ...
- i++,++i,Math.max,hasOwnPrototype.ajax,indexOf(),firefox的一些东西,jquery的contains函数,window.open
一.i++与++i的区别 1 var i=0;3 console.log(i++)5 0 1 var j=0; 2 3 console.log(++j) 4 1 a=++i;相当于i=i+1;a=i; ...
- 使用 SVG 动画实现弹性的页面元素效果
Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...
- 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片
前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道 ...
- 从0开始学angularjs-笔记02
上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子.最近都没有时间写博客了....忙成狗呀...今天周末,在写一篇吧~~ 今天主要跟大家详细讲解一下angularjs的 ...