切图技巧

我们在制作网站的时候如何把做好的效果图转成网页格式呢?这里就有很多方法,如果是比较复杂的网页就需要用手动来切图。如果不是很复杂的可以直接用PS自带的切片工具来切割。教程中介绍的是规则切图,实际应用中需要用手动来划分区块的大小。最终效果

一、打开要分割的图片,点工具栏的切片工具。

详解PS切片工具的切图使用技巧

详解PS切片工具的切图使用技巧

二、将划分切片的水平划分为4,垂直划分为3,点好后出现12个等分的图片。

详解PS切片工具的切图使用技巧

三、将图片划分好后,我们点工具栏最下面的键计入IR状态下编辑图片。

详解PS切片工具的切图使用技巧

四、直接点文件,将优化结果储存为HTML格式。

详解PS切片工具的切图使用技巧

五、保存在电脑桌面或其它文件夹,会出现一个HTML格式的网页,我们打开另一个文件名为Images的文件包,里面就是我们刚才分割好的小图片。

详解PS切片工具的切图使用技巧

六、我们打开这些小图时会返现默认为索引颜色,这时选择菜单:图像 > 模式 > RGB颜色就可以对这些小图片进行处理了。

详解PS切片工具的切图使用技巧

我们在做网页的时候,使用分割好的小图片有利于网页的浏览速度。

详解PS切片工具的切图使用技巧

转载时请保留本教程来源于:PS学习网(www.ps-xxw.cn),详文参考:http://www.ps-xxw.cn/shiyongjiqiao/2538.html

时间: 2024-10-16 14:05:42

切图技巧的相关文章

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

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

前端PS常用切图技巧

前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就是用选区工具选中我们要的切图区域,复制到新文件,然后整个保存下来,这样的切图方法几乎没有可取之处,不过我最初确实就是这样干的... 2. 传统切图 02 这种效率要高一些,可以同时切多个图片,用切片工具选中多张我们需要的图片区域,点击文件->保存为 web 所用格式,这种方法的缺点是默认会保存多张图

前端PS切图技巧(二)

之前介绍了传统的切图技巧,主要用于切多张图片的时候,但很多时候我们可能只需要切一两张图标,如果还用传统的方法就会很繁琐,所以这次分享一种导出单个图标的方法. 没有psd文件的,我这里准备了一份,需要的可以去下载 psd练习文件 (和之前的一样) http://pan.baidu.com/s/1pL2dwL1 1 工具:一.二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法两个版本的软件都可以实现,三中的方法cc才能实现,所以建议大家下载photo

前端开发切图技巧总结

1.固定宽度切图:对于有一些宽高都一样的元素需要切出来的话,就可以使用固定宽度切图,非常方便. 2.这种方法我认为是最简便的一种方法,需要切哪个元素,直接把周围的底色去掉,一定要是透明状态,然后用刀子框选这个元素,再按一下ctrl+c复制,ctrl+n新建文件(要是透明的底色,图片大小自动生成和你要切的图的大小是一样的),最后一步就是粘贴,最后就是ctrl+shift+alt+s保存就行了,非常方便.快捷. 3.当我们在需要切一段文字的时候,比如下面这段文字,需要一个字一个字切出来,这样做的一个

每天学点切图技巧——PS篇

1.选框工具这里可以选择增加选区.减少选区 ==> 2.存储为web格式 1)JPG:一般用于大图 2)gif:可作动图,与png-8基本一样,不支持半透明 3)png-8:不支持动图,不支持半透明 4)png-24:只有这个,支持半透明 调整时可用ctrl加+放大查看 3.背景渐变的按钮,上头有文字,选中1px渐变条复制,按ctrl+T拉伸一下,将文字盖住 4.如果用选框选取四周都是参考线的选区,很有可能多选1px,解决方法是按住ctrl再去选,就能正好了 5.ctrl+alt+shift+E

切图技巧详细总计

一.使用切片工具创建切片 选择切片工具 在要切片的区域拖出一个矩形框,就是一个用户切片. 按住Shift拖动,可以创建正方形切片. 按住Alt拖动,可以从中心向外创建切片. 二.切片工具选项栏 样式 可选择创建不同样式的切片. 基于参考线创建切片 点击该按钮后,可以基于参考线进行切片. 三.基于图层切片 选择某一图层. 执行 "图层>新建基于图层的切片",切片就会包含该图层中的所有像素. 如果我们移动图层时,切片区域也会随之自动调整. 四.选择.移动与调整切片 使用切片选择工具单

前端PS切图技巧(一)

UI给我们设计图的时候都会有一份设计原稿psd文件,有的公司可能UI会把需要的图标给切好,更多时候是需要我们自己来切的.而且,有的时候可能需要的东西UI没有切出来,你就要去是去找UI切好了再发给我们,这个过程就变得很麻烦,所以不如自己学一些切图方法  没有psd文件的,我这里准备了一份,需要的可以去下载 psd练习文件 http://pan.baidu.com/s/1pL2dwL1 1 工具:一.二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法

前端切图技巧

ps面板配置注意单位都为像素 1.采用切片工具 2.采用ps脚本层到文件的方式导出 mac下面常用的快捷键: 名称 快捷键 标尺 command+r 放大 command+= 缩小 command+- 手形工具 h或者space 框选工具 m 裁剪工具 c 吸管工具 i 快捷件小技巧: 当图片放大到100%之后的时候,按住h点按触摸板可以切换放大的大小 所有左侧的工具按住shift再按对应的名字可以在备选工具中切换 框选工具下,按住shift是合并框选,按住alt是清除部分原来框选.单个框选按住

ps切图技巧

获取图片 step1   ctrl+E 合并图层 step2  ctrl+点击  选中图层 step3  ctrl+C 复制图层 step4  ctrl+N 新建视图 step5  ctrl+V 粘贴图层 显示当前层,隐藏其他层  alt+点击眼睛