【前端】psd到html切图，包含ps切图
仅仅记录自己所学。
学习链接：
前端工程师必备技能—PS切图-免费在线视频教程-php中文网
主要是后面两个视频，前面介绍ps基本操作比较多
前端psd到html切图视频教程-慕课网
这个包含代码构建，我自己还没来得及学
先贴最重要的
ps切图方法
最简单就是点击图层右击导出就行。
ps图层右键合并或者直接导出图层。
半自动切图（适用于需求量小的切图操作）
>>>第一步：点击菜单栏中的“编辑”，然后点击“首选项”，然后点击“增效工具”，点击“启用生成器”，然后点击“确定”；（快捷键 ctrl +k ）重启PS
>>> 第二步：点击菜单栏中的“文件”，然后点击“生成”，然后点击“图像资源”。
>>> 第三步：首先选中要切的图片所在的图层，然后来到图层面板，双击图层名文字，在图层名后添加.png 或 .jpg；然后回车。
>>> 第四步：来到psd文件所在文件夹，打开以assets结尾的文件，即可看到相应的切图。
细节：导出之前最好psd文件也重新命名一下
以下是学习记录
PS切图设置
去除暂时没有的一些窗口
一些设置
存储预设
选择设置Ctrl
窗口调整
关闭颜色、通道
历史记录和图层放一起
以上是窗口调整
信息面板选项设置
编辑 首选项 单位与标尺
可以将工作区保留一下，方便上面设置直接调出
一些快捷键
（暂时还不熟悉，以后慢慢熟悉更新吧）
Shift键正方形 圆
Alt 从圆心开始画
M选区快捷键
Shift+M轮流切换选区椭圆还是方形
Shif 加区域 alt 减区域
快速选择工具 大括号放大缩小选择
Ctrl+d删除选区
直接从标尺拖动出来参考线
快捷键新建alt v e
Ctrl+; 隐藏参考线
其他参考链接
ps在psd格式图片里面切图流程_gongxunqiang005的博客-CSDN博客
利用ps在psd图片中抠取我们需要的图片素材_半步浮生的博客-CSDN博客_psd文件提取素材
PS切图
https://www.jianshu.com/p/b89c50a652fb?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation 主要参考，关键记录
方法1
计算机全自动运算切图（适用于图层较少的psd文件，如果图层较多，内容较复杂，那么就非常耗时）
扩展知识介绍-前端工程师必备技能—PS切图-PHP中文网教程
- >>> 点击菜单栏“文件”，然后点击“导出”，然后点击“将图层导出到文件”，然后勾选相应选项（将仅限可见图层、png24 裁剪、透明、交错都勾上），然后点击“运行”；
该方法的特点：会保留图片的阴影，将裁剪的图片命名为图层的名字。
方法2：半自动切图（适用于需求量小的切图操作）
扩展知识介绍-前端工程师必备技能—PS切图-PHP中文网教程
- >>>第一步：点击菜单栏中的“编辑”，然后点击“首选项”，然后点击“增效工具”，点击“启用生成器”，然后点击“确定”；（快捷键 ctrl +k ）
- >>> 第二步：点击菜单栏中的“文件”，然后点击“生成”，然后点击“图像资源”。
- >>> 第三步：首先选中要切的图片所在的图层，然后来到图层面板，双击图层名文字，在图层名后添加.png 或 .jpg；然后回车。
扩展：通过重命名来指定
宽度高度扩大一倍
SVG格式
- >>> 第四步：来到psd文件所在文件夹，打开以assets结尾的文件，即可看到相应的切图。
【前端】psd到html切图，包含ps切图相关推荐
- ps怎么切图后放html下,怎么使用PS切图？PS切图后怎么保存到本地？
怎么使用PS切图?使用PS切图的目的其实就是将大的设计图分割成多个小图片,通过网页代码定位后台相册的照片来显示前端网页的效果,当然,在处理某X宝的图片的时候也是可以使用该方法的,具体见下文怎么使用PS ...
- android ps切图工具下载,移动APP设计之PS切图插件大汇总，值得收藏
移动APP界面设计切图和标注是一项必不可少的步骤.所以,设计界也涌现出了很多切图神器和标注神器. 包括25学堂之前介绍过的很多切图工具和切图教程. 今天25学堂的小编为大家精选了几个不错的移动APP设 ...
- ps切图后 JAVA开发_2018年设计师都在用的PS切图插件--摹客
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...
- 2018年设计师都在用的PS切图插件--摹客
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...
- 前端编程中利用PS切图还原设计图
一. PS 切图 1.1. 常见的图片格式 序号 格式 特点和常用的用途 1 jpg JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们**产品类的图片** 经常用jp ...
- 【学习笔记】前端开发调试工具与PS切图技巧
[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理 ...
- ps切图后 JAVA开发_photoshop操作之前端PS操作切图和合并sprite
今天给大家介绍一下关于前端相关PS操作之切图和合并sprite,首先给那些已经学习完HTML/CSS基础知识,想模仿做一个静态页面,但缺少对ps了解的新手同学,那么下面我们一起来看一下吧. 一.准备工 ...
- 【前端必学】PS切图详细教程3种方法（图层切图，切片，切图神器cutterman）
PSD图像格式是Photoshop的专用格式,里面可以存放图层.通道.遮置等多种设计稿,对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离, 我们开发需要的是一 ...
- ps切图后 JAVA开发_做一个会PS切图的前端开发
系列链接 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开 ...
最新文章
- jquery终止函数
- word服务器草稿位置有必要更改么,如何改变WIN10常用文档的默认位置？真的有必要更改吗？...
- 硬件结构（中）：EqualLogic PS5000 对等存储“动车组”
- AWS 之于 K8s，如同 Windows 之于 Linux！
- Win10 安装CUDA10（包括各种版本的CUDA和cuDNN下载链接）
- 微软lync 持续服务器,Lync Server 2013 持久聊天服务器通道关闭
- 每个男人心中都有一段《西西里的美丽传说》
- 南昌大学计算机学硕和专硕,南昌大学同等学力是专硕还是学硕
- 浅谈SAP FICO—总账科目
- hdu 2475 box LCT
- 深圳服务器托管，影响价格的因素
- java 实现 仿QQ聊天系统 简易地实现 网络 在线聊天 代码详解（附源代码）
- 计算机内无法使用搜狗,电脑无法在Word文档中使用搜狗拼音输入法怎么办
- 做为一个中国的ITer，你感到耻辱吗？看CSDN的“软件中国2006风云榜之10大最具创新性技术”...
- 最大游戏工会YGG转型DAO，DAO能否成为下一个爆点？
- 每个人心里都有个非盈利性质的理想
- 基于CentOS7开发之路 --- 第一章 ： 安装 CentOS 7.2-1511
- Python3多线程_thread模块的应用
- 成都拓嘉启远：拼多多基础四项优化如何做
- tcp四次挥手 最后一次ack如果没有收到