前端PS切图（笔记）

一界面设置

预设WEB 1920*1080

自定义 *2000 72 RGB 背景：透明

自动选择图层 Ctrl+单击
视图》显示》智能参考线》标尺（Ctrl+R）
窗口图层，历史记录，信息，字符

信息面板中单位：像素一、二颜色：RGB 文档尺寸
编辑》首选项》单位与标尺单位：像素
保存窗口》工作区》新建工作区》WEB切图

二 PS基本操作

1.简单工具

选区单击选择双选区，单击同时，shift加选区 alt减选区
shift正圆 alt固定圆心画圆 Ctrl +放大 Ctrl -缩小 Space移动
移动V 选区M + Shift 切换下三角选择项
快选 [大 ]小魔棒填充，内容识别
裁剪C 选中图层裁；选区裁，自动按包含选区的最小矩形裁
吸管点改前景色
污点修复（有羽化值）画笔、图章
历史记录画笔高斯模糊后使用，可以去斑点
模糊、涂抹、减淡、海绵
字体毛边Window LCD，走钢笔路径
蒙版选区
快捷键 Ctrl+Alt+Shift+E：盖印图层 Alt+Del：填充前景色

Ctrl+T：自由变换 Alt+拖动：复制图层 Ctrl+R：标尺

参考线拖拉过程中，按Alt横竖参考线互变

2.图层原理、操作

变换选区缩小得同心圆选区

3.参考线及辅助

视图》新建参考线或者Alt+V+E+H 水平参考线

V 垂直

选中图层后，拉参考线会自动吸附边缘

Ctrl+；隐藏/显示参考线

三切图

1.传统切图：拖参考线，切片》基于参考线切图》导出（先裁剪再切会快些）

Alt+Shift+Ctrl+S生成WEB所用格式（导出）

2.精准切图：脚本》将图层导出到文件，PNG24全勾选（仅限高版本PS）

3.（1）编辑》首选项》增效工具》启用生成器

（2）文件》生成》图像资源

（3）图层重命名为图层.png 会自动生成图片也可.svg

200%button@2X.jpg 双倍Retina屏使用

文件》抽出资源图层》复制CSS（生成CSS代码）

转载于:https://blog.51cto.com/djvvv9/1745214

前端PS切图（笔记）相关推荐

前端ps切图，图文教程，详细。
写在前面:本文主要内容是目前我所知道的切图技巧结合网上的资料,写出来分享一波.图文教程,多图!! BB:很多人都会说,切图这个活倒底分给UI还是分给前端.虽然好的UI会给我们把图切好,但是他们切的图不 ...
Web前端 PS切图
网页切图常用的工具有ps.fireworks,这儿使用ps对网页进行切图,我们通过切图得到所需的图片(.png..jpg文件),用于给网页提供需要的素材. ps切图常用的快捷键: 初始化PSD文件:F ...
前端 ~ PS切图工具
*** 工具准备 *** 1.PS(photoshop) [注意]:安装时,需要先选择"试用",之后通过注册机进行注册,直接重新打开ps应用即可(应该会无需登录) 2.更改:缓存盘 ...
实用形ps切图技巧，图片格式及其相关
写在前面之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
前端编程中利用PS切图还原设计图
一. PS 切图 1.1. 常见的图片格式序号格式特点和常用的用途 1 jpg JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们**产品类的图片** 经常用jp ...
真正的ps切图方法（前端必看）
看了很多ps切图方法,真的感觉都不是很满意,可能说不是很合适我们前端的用法,毕竟我们要获取的是某一个图层里面的小图片,不需要获取全部切图,好了,废话不多说,看方法. 1.选中所在的图层,commond ...
【前端必学】PS切图详细教程3种方法（图层切图，切片，切图神器cutterman）
PSD图像格式是Photoshop的专用格式,里面可以存放图层.通道.遮置等多种设计稿,对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离, 我们开发需要的是一 ...
【前端】psd到html切图，包含ps切图
仅仅记录自己所学. 学习链接: 前端工程师必备技能-PS切图-免费在线视频教程-php中文网主要是后面两个视频,前面介绍ps基本操作比较多前端psd到html切图视频教程-慕课网这个包含代码构建 ...

前端PS切图（笔记）

前端PS切图（笔记）相关推荐

最新文章

热门文章