1.3切图

1、哪些是需要切出来的

修饰性的（一般用在css的background属性）

图标 logo

有特殊效果的按钮、文字等

非纯色的背景

内容性的（一般用在html的img标签）

Banner、广告图片

文章中的配图

不切图 只占位

2、切出来的图 存为哪种类型

内容性的 一般存为JPG格式 有时还会压缩保证图片大小不要太大

修饰性的 PNG24 图片质量较高 PNG8 两种都支持全透明 PNG24支持半透明 PNG不支持

IE6的PNG24不支持半透明 这时需要对IE6做兼容

3、切图

隐藏文字只留背景

若文字为独立图层，隐藏文字图层

找到文字图层 去掉眼镜图标

若文字和背景合并 平铺背景覆盖文字

矩形选框工具在上面画个框

如果背景可以拉伸

自由变换（ctrl+T）拉伸 隐藏掉文字

如果背景不可以拉伸

使用移动工具+alt 向右侧拉 隐藏掉文字

切图 PNG24

移动工具选中所需图层（按住ctrl+多选）

时间： 2024-10-30 21:22:24

1.3切图的相关文章

页面制作学习笔记：D2.Photoshop切图

一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 <img src="images/avatar.jpg" alt="头像"> 在CSS里面通过background属性引入图片资源 .icon { background-image:url(../images/avtar.jpg); background-posi

切图 or 切片

一点题外话: 提到切图,让我想起曾经有好几个月的时间,我每天的主要工作就是切图,或者说切片了. 要制作语文课本中每篇课文的朗读卡拉OK效果,其中一道工序,就是要把文章中的每个字连同上面的拼音,切成单独的一张小图. 一张图上,文字数百上千,纯粹的体力活. 不过这是用fireworks切的片. 今天要说的是用photoshop来切片. 要做一个拼图的小游戏,需要用ps把原图切成长宽一致的15张小图. 1,用ps打开图片 2,在图片上点右键,调出菜单 3,设置水平划分为3,垂直划分为5,则自动划分为1

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松

前端必备技能之Photosh切图

切图:即从设计稿里面切出网页素材 一.使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素 2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用 3.工作区弄乱时,可以使用上图中的复位,或者在下图中选择工作区: 4.切图常用工具 注意:在工具菜单栏中右击会出现同组备选工具: 5.放大缩小画布: 1).点击缩放工具 2).ctrl  + 加号/减号 3).alt  + 鼠标滚轮 6.辅助视图 标尺快捷键:ctrl + r 7.获取文字大小和行高 1).文字是单独图层,使

前端PS切图小技巧

切图,重要的是找精确像素!不要在用传统的切刀进行切割啦,拿到一副PSd图形的,可以使用这样两种方式: (1)如果你的图层很多,你可以用“ctrl+点击想要的图片“直接选中你想要图片的图层,简单到位,然后将图层转化为智能对象(当然可以几个图层拼到一起),然后双击弹出点击确定,就ok了: (2)对于大图,这个时候就有很多的东西存在,这里就使用,选区先选中你要切的图形,然后”编辑-合并拷贝-新建-拷贝“,就能建立一个完成整的图片切图的样子了,就ok了. 注意:这里的有几点说明: (1)切图要拉好参考线

UI，切图，命名

APP切图流程和APP切图命名规范详细完整版 http://www.25xt.com/appdesign/7339.html Marketch

前端开发工程师必备JS技能-切图

/******************************************** 学习时间:2015年12月21日 学习者:易天曦 学习目的:掌握切图技巧 学习目标:1.学会从网页设计师的PSD文件中提取素材 2.对PS有一定的了解 3.对审美有一定的提高 *******************************************/ 学习内容: 1.网页设计中初始化尺寸参数和一些快捷键. 2.选择和移动元素. 3.常见的Web切图界面设置.

ps切图步骤

我们要用到的切图工具有两个,一个是切片工具,另一个是切片选择工具.左边有个小按钮,你按住它这三个选项就会显示出来. 2.这是我等下用做示范的图片. 3.在切图之前有一点需要说明的是,如果你需要辅助切图,你可以先添加参考线.在PS上方的菜单栏,你可以在视图里找到新建参考线选项.如上图,我已经添加两条参考线,因为参考线在鼠标靠近的时候有吸附功能,所以切图不容易切错位置. 4.好了现在我们开始切图,我用切图工具先裁一个框出来,我们可以看到图片上已经有01的框,但是右边02显示为灰色. 5.我继续用切图

重构切图相关

很久不做设计,貌似对设计相关的事了解少了许多,之前做H5时需要频繁切图,本来准备自己写个小工具来计算切图位置,后来了解到CC版本的PS有一些新增的功能(例如复制CSS),另外也有国人写了更方便的切图扩展工具,但是PS版本什么的一直安装上总是各种问题,但却总是因为各种事情一直搁置,今天耐下心来都安装完毕,以自己WIN7为例介绍一下. 1.清除注册表信息 - A - AdobeCreativeCloudCleanerTool.exe 因为需要安装扩展,扩展器总是各种安装不成功,原因是安装过Adobe

切图神器

解决问题: 1. 解决ios的@2x.png的分辩率问题 2. 解决android的多分辩率的问题 3. 解决web下也需要导出图片的问题 4. 自动切图 - 注意是切图,不是生成html.根据一些简单规则自动切好图片放到相应的文件夹里 三条规则,非常简单: 1. 要输出图的单位以图层文件夹(组)为单位, 文件夹命名末尾加『@』为结束符.并且,自动切除边界外透明的像素. 2. 以『#』名字命名的图层可以认为是选择图片输出的边界.例输出背景图:组命名为『[email protected]』,组里有