ps前端切图常用快捷键

一、
新建文件:预设-自定;宽度1920,单位像素,高度自定义;分辨率:72像素/英寸;颜色模式:RGB,8位;背景色:透明;可存储预设,以后直接调用。
视图:显示-只能参考线勾上;标尺勾上,快捷键ctrl+r;
窗口:库、颜色、通道、路径、属性、段落都关闭;信息。字符打开;
信息右侧打开属性:颜色选RGB,标尺单位:像素,文档尺寸勾上;
编辑:首选项-标尺-单位都选像素
窗口/工作区/新建工作区/名称:web切除,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。

二、快捷键

1.自由的控制视图系列

自由的浏览图片:按住空格后,鼠标拖动

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

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

工作区类型切换:Tab

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

2.控制内容系列

通过画面上点选一个图层:Alt + 鼠标右键

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

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

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

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

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

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

3.实用工具系列

画一个选区:点击M进入选区模式,鼠标拖画

放弃选区:Ctrl+D

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

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

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

4.参考线

ctrl+r,显示参考线
    Ctrl+分号,隐藏参考线

时间: 2024-08-19 02:37:51

ps前端切图常用快捷键的相关文章

前端切图常用的代码

前言:我们不是代码的创造者,我们只是代码的搬运工. <h1>文本标题<p>段落标签<br>强制换行标签 空格<hr>水平线标签<b>加粗<strong>加重语气的加粗标签<i>倾斜<em>加重语气<u>下划线<s>删除线标签<a>超链接<a href="#">超链接<a href="https://www.taobao.com&

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我们都会给他一个样

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

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

利用PS自动切图、支持svg且支持icoMoon——再也不用四处去转格式了

今天想导出svg格式的图片支持webFont,结果AI打不开了,文件好像损坏了,于是就想办法在PS里面导出. 网上搜索到一篇文章,腾讯的 http://isux.tencent.com/ps-photoshop-cc-fd.html, 同时还会引用到一个三方脚本  http://hackingui.com/design/export-photoshop-layer-to-svg/ , 三方脚本的一篇文章 http://www.ui.cn/detail/53284.html. 最终找到了解决办法,

前端切图推荐方法

 个人认为切图虽然不是前端的主要工作,但掌握一些切图的技巧还是有利无害的. 切过图的小伙伴肯定对传统切图方式很反感.因为真的很麻烦,要一张一张的切. 要切的图少还好,多了简直就是噩梦,特别是当用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.图片不是太大的时候,可