切图之前

哪些是需要切出来的?


修饰性的 (一般用在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切图的更多相关文章

  1. 关于png、jpg、gif切图时的使用感悟

    关于png.jpg.gif切图时的使用感悟 曾经切图时都是一股脑所有图全切成jpg格式,最近突然心血来潮简单的研究了下其他图片格式的具体属性,才突然发现走了不少弯路,并没有做到使图片用最小体积展现出最 ...

  2. iOS设计 - 一款APP从设计稿到切图过程概述

    这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...

  3. iOS - 如何切图适配各种机型

    关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...

  4. 切图时图片的选择:JPG、PNG、GIF的区别

    目前网站图片的采用一共有流行三种,分别是JPG.PNG.GIF,然而很多人并不知道三者在选择的时候究竟应该选谁.虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度.大小和失真程度的问题.如果你运 ...

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

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

  6. 前端工程师技能之photoshop巧用系列第三篇——切图篇

    × 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切 ...

  7. Android启动icon切图大小

    我们在给app切图的时候不知道告诉ui启动图标切多大,其实你新建一个android项目就知道应该切多大了.新建一个项目会产生几种大小的启动图标. 我把各个文件夹下的ic_launcher.png文件都 ...

  8. WebGIS中矢量切图的初步研究

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS领域,金字塔技术一直是一个基础性技术,WMTS规范专 ...

  9. 利用AE编写切图工具的一些探讨

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这周利用晚上在家时间研究了下如何使用AE来开发切图工具.最初 ...

随机推荐

  1. 使用jquery的append(content)方法的注意事项

    append(content)函数:向每个匹配的元素内部追加内容. 如以下示例: 向所有段落中追加一些HTML标记. HTML 代码: <p>I would like to say: &l ...

  2. Asp.net Mvc模块化开发之“开启模块开发、调试的简单愉快之旅”

    整个世界林林种种,把所有的事情都划分为对立的两个面. 每个人都渴望的财富划分为富有和贫穷,身高被划分为高和矮,身材被划分为胖和瘦,等等. 我们总是感叹,有钱人的生活我不懂;有钱人又何尝能懂我们每天起早 ...

  3. [范例] Firemonkey 弹簧动画

    弹簧动画效果: 不用写任何代码,只需设定下面动画属性: 参考动画曲线: http://monkeystyler.com/guide/Interpolation-and-AnimationType-Il ...

  4. [函数] Unicode 检查字符串是否含中文字

    // 字串含中文 by Aone function IsIncludeChinese(Str: String): Boolean; var i: Integer; UCS4Str: UCS4Strin ...

  5. 利用servlet3.0上传,纯原生上传,不依赖任何第三方包

    tomcat7里面自带的servlet3.0.jar,支持很多新特性,例如,annotation配置servlet,上传,异步等等.... 如果你的tomcat版本低于7的话,单独在项目中引入serv ...

  6. Android提升篇系列:Android项目代码优化实践

    Android开发中,不同的开发团队,不同的开发人员,在实际编码中会有一些不同的地方.但是,具有一定的更普适性的编码习惯,无疑还是相当重要的.本文主要罗列项目中常见的一些编码片段,并给出相关建议. 1 ...

  7. 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; ...

  8. 使用 SVG 动画实现弹性的页面元素效果

    Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...

  9. 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片

    前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道 ...

  10. 从0开始学angularjs-笔记02

    上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子.最近都没有时间写博客了....忙成狗呀...今天周末,在写一篇吧~~ 今天主要跟大家详细讲解一下angularjs的 ...