前端切图PS必备快捷键

1)m  选取工具  测量设计稿中元素得位置及大小

ctrl+d 取消选取

2)z   放大缩小,默认是放大  alt + 鼠标左键 缩小
 3)alt + delete 向图层中填充前景色

ctrl + delete 向图层中填充背景色

d 恢复前景色和背景色,为黑色和白色

4)shift + c 切换到切片工具

5)ctrl + alt + shift + s 保持切片

6) F8 信息面板

7) F7 图层面板

关于保持图片格式说明:

jpeg : 不支持北京透明

png-24 支持背景透明

gif  支持背景透明,但是效果不如png好,主要用来做闪图。

原文地址:https://www.cnblogs.com/sunqq/p/8290036.html

时间: 2024-08-13 16:33:42

前端切图PS必备快捷键的相关文章

PS(photoshop)抠图(切图)必备快捷键及要点简析

对于PS来说,小码哥也算是初学者,懂得也仅仅是一些工作上用的最多的常用知识,大家不要鄙视鄙人哈!下面嗫,是小码哥我平时抠图(切图)时,常用的一些工具和快捷键.看似简单,但是,只要用精了,做网站页面编写完全木有问题滴,,,,嘎嘎 废话不多说了,看要点: 1.H键:鼠标光标转换为"小手"形状,此时,就能点击鼠标左键拖动图像了. 2.V键:则会把鼠标光标回复到正常的"箭头"状.用于你对右侧图层选择. 3.C键:鼠标光标直接转换成切片工具状--即一把刻刀的形状.然后就可以直

mac 如何安装photoshop cc 2017 ?作为前端切图仔如何利用它来提高我们的工作效率?

作为前端切图仔一名,或多或少要与ps打上交到,你如果是大厂的话,可能不需要,小厂也有不需要的.这里是需要自己抠图的小伙伴的干活. 如何利用ps 提高我们的工作效率: 首先我们需要安装下载 photoshop cc 2014版本以上: window 下可直接在百度软件中心下载(这里我为聪明的朋友贴上地址): http://rj.baidu.com/soft/detail/40767.html 本屌是mac,搞起来就比较费劲,通常来说也是很简单的,但是我安装时候会发生201 错误,这就比较尴尬, 找

前端切图+网页排版的注意事项和经验分享

现在在学校里面,培训机构里面都有很多课程是前端切图这一方面的,简单来说就是学习div+css网页排版.有很多人经过这一轮的学习之后就发现自己对排版这一方面非常的熟悉甚至说自己的div+css的高手.其实真正说要懂得一个网页排版需要注意的一些问题是什么呢?是不是在电脑上面看到自己排版出来的页面就真的是一个成功的网页了吗?下面我说一下我自己在网页排版上面会注意的一些事情: 一.使用样式的种类和名字的规范 id和class应该如何使用 在我们使用div+css排版的时候,每一个div我们都会给他一个样

photoshop脚本切图方法(习惯快捷键的朋友可以用,很方便)

photoshop脚本切图方法(习惯快捷键的朋友可以用,很方便) by  伍雪颖 其实脚本切图的原理是跟安装插件切图是一样的, 不过像安装DevRocket这种插件特麻烦,还经常装不成功,于是直接用脚本. #target photoshop function main(){ var doc = app.activeDocument; var psdPath = app.activeDocument.path; var outFolderName="pngExport"; var two

前端切图推荐方法

 个人认为切图虽然不是前端的主要工作,但掌握一些切图的技巧还是有利无害的. 切过图的小伙伴肯定对传统切图方式很反感.因为真的很麻烦,要一张一张的切. 要切的图少还好,多了简直就是噩梦,特别是当用PS提供的参考线辅助切图的时候,密密麻麻的参考线简直眼花缭乱. 后来 photoshop 2014 CC 版本开始提供了2种方法辅助切图.  第一种:打开PS以后选择文件-脚本-将图层导出到文件,然后会弹出下面界面 注:如果是 photoshop 2017 CC 版本的,选择文件-导出-将图层导出到文件

前端切图学习--每个图层都能很精细的切出来

自从换了新工作,切图成了我的新问题.因为不是专业的美工, 对photoshop的操作也只限于基本操作, 以前虽然也有遇到不切图的UI, 但是以前做的都是电商扁平化网站, 图片都很简单,差不多都是方方正正,即使有一两个像素不对, 也没有问题,用css写对就行. 然后现在从事的是游戏公司的网站, 而且美术不负责切图, 就只能自己动手了, 第一次拿到多边形的时候,我傻眼了.不知道怎么下手. 第一次的时候还是找前同事的UI 帮忙的.但是不能每次都找别人帮忙啊, 第二次的时候就自己动手了.切图都花了1天多

前端切图的一些笔记(整理的有点乱)

切图一: 1.使用移动工具 自动选择+图层 2.点击所要切的图标,这时在图层区域会锁定到你所选择的图层 3.按Alt不放,并且点击图层眼睛,这时可以把其他图层隐藏 注:图要尽量放到大 4.使用矩形选框工具,选择所要图标 5.按ctrl+shift+c复制(这个复制跟ctrl+c的复制不一样),新建一个透明图层,再ctrl+v粘贴 6.放大放大,然后选择切片工具进行切块 注意:可以做成雪碧图(CSS Sprites),设置同样的高度,这样页面上的内容就只需请求一张图片就行了,优化性能 字体:使用字

前端切图的一些小技巧

昨天晚上花了1个小时把慕课网上的PS切图教程看了一遍,发现之前用的切图方式有点low,还学习到一些设置技巧,在此记录. 1.新建页面,背景内容设置为透明,自动选择不用打勾,后面的框选图层,这样按住ctrl鼠标点击就能快速找到对应图层 2.标尺和智能参考线都打上勾 3.历史记录,图层,信息,字符4个面板都打开,面板选项中鼠标坐标设置为像素,文档尺寸打勾,颜色都选为RGB 4.新建工作区,存储 5.按shift可以智能吸附 6.保存时的jpg品质60刚刚好,画质好体积又小 7.图片不是太大的时候,可

记一次前端切图的体验之旅

之前都没有用过ps去切图,然后做成网页,这次有机会体验了一次.其实重点工作在ps的使用上. 工具使用adobe cs6,vscode即可.设计师直接给了用ps设计的psd工程.用ps软件打开后,用里面的裁剪工具,先人工将整张网页裁剪,然后保存成html网页格式. ps软件生成的网页是以table为骨架,然后在表格的单元格里填充裁剪的图片.默认图片是以数字为后缀结尾的,支持使用ps为想要的图片点击时间添加超链接,比如为导航栏的图片添加跳转到其他网页的功能. PS-前端切图教程(切jpg图和切png