切图之前

哪些是需要切出来的?


修饰性的 (一般用在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. C语言学习006:歌曲搜索

    #include <stdio.h> #include <string.h> //字符串处理库 ]={ "I left my heart in Harvard Med ...

  2. [前端]使用JQuery UI Layout Plug-in布局 - wolfy

    引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...

  3. 单元测试与Nunit的基本使用

    一.单元测试是什么 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体含义,如C语言中单元指一个函数,C# ...

  4. 点我吧工作总结(技术篇) zookeeper

    我思故我在,提问启迪思考! 1.什么是zookeeper? 2.zookeeper与dubbo.springMVC之间的协同工作? http://doc.okbase.net/congcong68/a ...

  5. ActiveMQ消息队列介绍

    ActiveMQ是一个开源兼容Java Message  Service  (JMS) 1.1面向消息的中件间. 来自Apache Software Foundation. ActiveMQ提供松耦合 ...

  6. 模拟Executor策略的实现

    Executor作为现在线程的一个管理工具,就像管理线程的管理器一样,不用像以前一样,通过start来开启线程 Executor将提交线程与执行线程分离开来,使得用户只需要提交线程,并不需要在乎怎么和 ...

  7. 把GAE程序通过SSH部署到 VPS

    大部分在文档上都写了, 写这篇文章的目的是发现现在appcfg.py update xxxx的时候会打开浏览器访问google请求授权(后台内建了一个本地server, 端口是8090, 授权成功后会 ...

  8. HTML自学基础

    关于自学HTML中遇到的各类细节问题 1.<a>表示链接标签,类似的有<img src>.链接的地址在<base>中填写.<base href="h ...

  9. MontageJS:构建现代 Web App 的 HTML5 框架

    MontageJS 可以帮助您构建高可扩展性和可维护性的 HTML5 应用.有了 MontageJS,开发人员可以创建可重用的用户界面组件和模块,组件和控制器之间的绑定属性,并且同步 DOM 查询和更 ...

  10. CSS中!important的作用

    提升指定样式规则的应用优先权. IE6及以下浏览器有个比较显式的支持问题存在,!important在同一条规则集里不生效.请看下述代码: 示例代码: div { color: #f00 !import ...