相对于程序来说,切图门槛很低,只要有一些ps基础,摸索个五分钟基本也就了解各大概。但是就跟其他的所有技能一样,切图也是有很多技巧性和经验在里面的,这些东西可以让你的切图工作更有效率,更有目的性。

笔者用photoshop cs5做示例,不同版本功能会有稍许差异。

第一部分:一些快捷键

相对于设计和绘画,切图用到的ps并不多,以下我总结一些在切图中比较常用的快捷键,这些快捷键能答复的提高你的工作效率,并且看起来很酷。

自由的控制视图系列自由的浏览图片:按住空格后,鼠标拖动

自由的缩放图片:按住alt+滚轮

切换到实际像素(100%):Ctrl + Alt + 0

工作区类型切换:Tab

一直后退操作:Ctrl + Alt + Z

控制内容系列通过画面上点选一个图层:Alt + 鼠标右键

在画面上拖动一个图层:V 切换到移动模式 鼠标拖动

复制拖动一个图层:移动模式下 Alt+拖动

删除一个图层:选中要删除的图层 按下 Delete

合并多个图层:选中要合并的图层 按下 Ctrl+E

选区内填充颜色:Alt+Delete (前景色) Ctrl+Delete(背景色)

缩放当前选择图层:Ctrl+T(自由变换模式)

实用工具系列画一个选区:点击M进入选区模式 , 鼠标拖画

放弃选区:Ctrl+D

吸管工具:点击I进入吸管模式,点选画面颜色

文字工具:点击T进入文字模式,点选画面的文字或者创建新文本

切片工具:点击C进入切片模式(旧版本会有不同)

第二部分:一些实用技巧注意PS所处的状态

photoshop开启一个文件,软件本身就处于不同的状态之中,总结下来有这样几种工具状态 -- 代表当前是出于移动模式,选区模式,切片模式或者是吸管模式等等,工具状态代表你当前对文档操作的类型。图层状态 -- 代表你当前操作的对象,有一些对象只接受特殊类型的操作。色彩索引模式 -- 这是一个常见错误,通过导出web格式图片出来的png会自动换成索引模式,如果要继续修改需要把索引模式转成RGB模式

操作图层

如果不是设计者自己来切图,那么切图者需要从图层里来体会设计者的意图。如何分组,层次间的关系都体会了设计者对页面结构个人的理解。所以对一个设计稿来说,第一步是粗看图层,理解设计意图,其次是根据自己的理解对图层进行新的操作和转换。以下是关于图层操作的一些经验:关闭图层可见性 --关闭图层可见性非常常用,因为有些页面元素是交织在一起的,你通常需要关闭其中某项先切一部分,再切一部分

合并图层 -- 设计师载入第三方的元素这类的作法,会让页面某些小部件的图层结构异常复杂,这时候将整个组合并Ctrl+E 不失为一个好办法

复制图层 -- 有些时候一些sprite效果可以直接通过复制图层在原稿上列出来,再通过切片工具出图

图层盖章 -- 在一些图层特别复杂的页面,有时需要用到图层盖章工具,选中最顶层的图层,点击Ctrl+Alt+Shift+E 可以把以下的所有图层盖到一个新的图层上。这个操作的好处是可以在不影响图层本身的情况下,合并图层。

生成图片

1)图片格式 -- 图片格式的原则简单来说是架构复杂,色彩众多的图片jpg优先,色彩简单,需求透明的png优先。png24在IE6下不兼容。

2)切片工具 -- 切片工具是ps为切图提供的强大的批量的工具,所以一定要尽可能的使用它。使用切片之前先采用上述的方法对图层进行处理,然后按需划取需要的切片区域,使用切片工具的时候有如下几个小技巧:切片选项 -- 划取完分区以后,要对切片进行一些设定是很重要的,切片工具下Alt+点击切片,会弹出如下窗口

首先,可以检查切片的尺寸和位置,尤其是尺寸,比如你要切的按钮定宽高,这里的检查和设置就至关重要。其次,在这里直接命名,可以省去出图以后重命名的时间。

切片储存 -- 切片在储存的时候,可以点选每个切片对其设定不同的图片格式,保存的时候可以选择保存选择的切片而不是全部。

3)全新图片 -- 很多时候,切片难以直接使用,图片需要进行二次处理。这时候我认为有以下几点需要注意:

千万不要对jpg进行二次处理:jpg就算质量100%也是有损格式,二次处理的jpg会有肉眼可见的质量损失,所以要采用png的各种作为中转。

注意图片尺寸:有些版本的ps在拖拽进文档的时候会默认尺寸适应,这会导致图片尺寸在你不知情的情况下发生改变。解决的办法可以是优先创建尺寸正确的图片,或者以源文档图层的形式拖拽进新文档。

缩放 : 任何格式的图片缩放都会产生质量损失,尽可能采用矢量图缩放,或者在源文件的路径里缩放再拖拽。

4)新图片处理 -- 新图片的处理有以下几个常用的技巧:

图像裁切和显示全部 : 图片小于画布或者图片大于画布的情况下使用裁切和显示全部命令,可以保证图片的精确性。命令位于 图像(I) -> 裁切/显示全部

活动选区,复制,粘贴 :这三个命令配合使用可以实现很多转换。比如一个渐变按钮的缩短扩大。切图本身并不是很难,再转换成网页的过程中,需要我们有足够的经验去书写代码,

而这个过程,需要我们经常练习,学习。这样我们的页面质量会越来越高。还需要我们懂得一些知识、标签及声明,如css sprite技术、一些兼容性的书写、移动站点的规范,这些都要求我们有足够的经验。

web切图怎么做_Web前端切图快捷键、技巧和经验相关推荐

  1. web切图怎么做_web前端人员自行切图教程

    web前端人员自行切图教程 发布时间:2018-10-18 09:01, 浏览次数:360 , 标签: web Web前端切图总结: * 前期资料准备阶段: * 获取最终版 PSD格式文件. * 安装 ...

  2. web切图怎么做_ps如何切图?

    ps如何切图?下面本篇文章就来给大家介绍一下在ps中切图的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ps切图的方法: 将准备好的详情页置入PS画布中(或随意一张图片置入画 ...

  3. web无序列表去掉点_web前端入门到实战:css如何玩转有序无序列表项list样式

    在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...

  4. 在html中轮播图怎么做,HTML轮播图怎么做

    回答:基础准备工作 1.打开Axure,页面名称命名为"图片轮播":在左侧部件(线框图)中,选择动态面板,左键选中,并按住左键,拖动其至工作台页面中,在上方菜单栏将宽调整为400, ...

  5. 思维导图怎么做?思维导图真的有效吗

    思维导图真的有效吗?如何绘制思维导图 思维导图又叫心智图,在我们的长生活中运用的四分广泛,它就像们的大脑地图,能够然我们在一张图上掌握资讯的全貌,是表达发散性思维的有效工具那么,思维导图用处何在呢?绘 ...

  6. python雷达图怎么做_PYTHON绘制雷达图代码实例

    这篇文章主要介绍了PYTHON绘制雷达图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.雷达图 import matplotlib.py ...

  7. 5款前端切图工具大比拼:谁是最强切图神器

    前端切图是前端工程师们还原设计稿的过程中必不可缺的一环.不过,切图工作究竟谁来做?这个问题我们在各大论坛也屡见不鲜:前端工程师认为设计师出了设计稿,那么相应的切图也应该一并交付:设计师则认为前端工程师 ...

  8. 前端切图之svg图标的复用基于defs和use 亲测有用

    切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...

  9. 前端切图神器avocode

    前端切图神器avocode 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而前端一般都是用photoshop,但是这个兵器 ...

  10. 介绍一个前端切图神器avocode

    2019独角兽企业重金招聘Python工程师标准>>> 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而 ...

最新文章

  1. 全球首个AI宇宙模拟器不仅有6亿光年宽度,还“自行”跑出了暗物质
  2. 舒服了,微信支持多设备同时在线!
  3. Linux 2.6内核配置说明(File systems文件系统)
  4. python123数值运算_python基础篇【第二篇】:数据运算、数据类型
  5. 【问题2】为什么TIME_WAIT状态需要经过2MSL(最大报文段生存时间)才能返回到CLOSE状态?
  6. 图论 —— 网络流 —— 最大流 —— 压入与重标记算法
  7. 咸菜可以吃吗,对健康有害吗?
  8. [摘抄] 资深软件项目经理/产品经理“扯皮技巧”汇总(新手入坑必读,不定期更新)...
  9. git学习(三)版本的前进后退
  10. Python中Base64编码与解码
  11. 对PID的理解及其实现公式
  12. Win7系统安装samba服务器,Win7 VirtualBox samba 服务器搭建
  13. Amazon EC2最新最全使用教程!!!
  14. 2160亿元电费如何降下来?地方5G“硬核”政策助力
  15. kaggle猫狗大战数据集集(百度云)
  16. ETR290规范的理解
  17. T1005: 地球人口承载力估计(信息学一本通C++)
  18. 小马哥---高仿三星Galaxy J100H主板型号J7210国外版 刷机拆机图
  19. 数据科学中的计量经济学技术
  20. 微信清除cookie

热门文章

  1. 最新即时通讯聊天安卓APP源码+全开源/Uniapp内核
  2. Oracle 日期时间函数大全
  3. 我的管理实践---《人件》读后感
  4. 控制算法(二)—— 模糊控制算法
  5. “互联网+”时代 软件去哪儿啦?
  6. 2022年全新UI聚合支付系统四方源码更新完美版
  7. 浏览器 pad android,安卓平板专享 推荐五款Pad版应用浏览器
  8. 《哥德尔、艾舍尔、巴赫——集异璧之大成》
  9. 交互式甘特图控件,教你如何使用日历!
  10. linux 系统中编译exe文件,在linux系统下执行C#编译的exe文件