前端工程师ps学习笔记

此文档记录个人学习ps过程中的笔记。

个人作为前端，学习ps主要是为了更好地衔接设计师，在设计师临时缺席时快速解决问题。

主要解决快速切图和简单抠图、换色的问题。小图标png转svg问题。

1. 入门文档： https://github.com/xiangpaopao/blog/issues/2

非常好的文档，以前我一直想学而不得其门而入。介绍了3种切图方法，大补。（之前我连2B切图法都没用好）。

2. 零星的操作：

取消： ESC， ctrl-z, ctrl-alt-z

右击左侧按钮（如‘切片选择工具’），可以出现裁剪、切片等子菜单。

拖动一个文档的图层到另一个文档： 1. 确保打开两个窗口：右击另一个文档的头部页签，“移动到新端口”；2. 调整好两个窗口的位置，拖动。
复制一个文档的图层到另一个文档：右击图层 -》复制图层 -》设置目标文档

找到某个图片的图层：选择“移动工具”，右击图片，就会显示该位置点所有相关的显示图层,其中有一个是图片图层。
上下左右移动图片位置：选择“移动工具”，按上一步方法找到图层，拖动。

清除所有自定义切片：顶部菜单“视图“， > "清除切片"

图片大小缩放：顶部菜单“图像” 》 “图像大小”

重命名图层：双击图层

3. 有时候设计师没有给出hover效果的图片。需要自己抠图，扣掉单色区域变透明，或者替换颜色。（推荐png格式）

图层解锁：打开图片，双击背景图层》确定，就解锁了。（解锁后才能抠图和换色）

选取连续或全图单色区域：左侧第二排第二列按钮右击 > 魔棒工具 > 点击某个像素点，得到选区（连续选项配置连续区域或全图，容差选项微调选区）

透明抠图：选中区域后》按delete，某个选区就变透明了。

选区换颜色：选中区域后》“编辑” 》 “填充" 》切换到 ‘使用：颜色’

4. 如何转png到svg、font-face。临时画个简单的图标也是这个步骤。（这部分只是各步骤手动弄弄，没有完整走通，感觉好多都是体力活啊。）

a. 用钢笔工具描出闭合路径。

b. ps 中 ctrl + c 图层, ai 中 ctrl + v 图层。各种小操作参考 PSD小图标变身SVG Sprites/font-face历险记

c. 导出成svg

d. 各种手工修改。icon-font

-------- 如果不要考虑一定要用ps, 可以尝试下方的工具。

TO LEARN：

蒙版，路径等等等等。

更多参考：

PS高端教程：在PS中用脚本语言来处理图片程序员的逆袭，有没有！

把UI图里的小图标制作成icon font 图片多的时候，颜色很丰富的时候可以一试，少的时候还是常规切图。

PSD小图标变身SVG Sprites/font-face历险记手工将ps中的矢量图层转成 face-font，涉及详细ai操作（可以直接ctrl-c ps的矢量图层到ai）

icon-font 如何整合多个svg图标到一个文件并嵌入网页。

批量导ps矢量图层为 svg工具 [很多文章推荐，但我还没尝试成功]

http://hackingui.com/design/export-photoshop-layer-to-svg/

http://hackingui.com/design/my-workflow-to-export-svgs-out-of-my-photoshop-design-files/

非ps png转svg工具

convertio ,picsvg 在线免费工具！异常强大有没有！！！导出的svg异常干净有没有！！得到svg后再结合icon-font 的步骤，很快出效果有没有！

png express 有收费的png转svg的工具，可以试试。windows上也有免费的这种类型的工具。

cssSprite

http://csssprites.com/

前端工程师ps学习笔记相关推荐

好程序员web前端分享Nodejs学习笔记之Stream模块
好程序员web前端分享Nodejs学习笔记之Stream模块一,开篇分析流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
PS学习笔记------运用脚本及自动化批量处理
PS学习笔记------运用脚本及自动化批量处理简单脚本运行+自动批处理多图片简单脚本运行自动批处理图片简单脚本运行+自动批处理多图片本次实现的功能是: 1.运用脚本在ps中将图片的文档名称 ...
360前端星计划学习笔记0410
360前端星计划学习笔记(五)正则的三个应用场景–王峰老师 360前端星计划学习笔记(六)NodeJS基础入门文章目录正则正则表达式的创建和使用创建正则表达式的两种方式正则表达式的常见用法 ...
PS学习笔记（05）
PS学习笔记(09) [2]马赛克背景找一张图片.然后新建图层,让前景色背景色恢复到默认的状态(黑.白) 在新建图层上填充黑色-->滤镜-->渲染->云彩像素化-->马赛克 ...
2017年前端工程师应该学习什么
作者:Artem Sapegin 编译:胡子大哈翻译原文:2017年前端工程师应该学习什么英文原文:2017 is the year that front-end developers shoul ...
2023年软考信息安全工程师备考学习笔记汇总
信息安全工程师分属"信息系统"专业,位处中级资格,2016年下半年,第一次开考信息安全工程师(中级)考试.目前每年考试一次.已开考六次,2016年11月12日,2017年5月20日 ...
C4前端云原生学习笔记——vue
C4前端云原生学习笔记文章目录 C4前端云原生学习笔记一.vue知识点 1.vue简介 2.开发工具 3.初识vue 一.vue知识点 1.vue简介官网:cn.vuejs.org 渐进式框架: ...
Severlet、Tomcat以及前端请求响应学习笔记
Severlet.Tomcat以及前端请求响应学习笔记一:概念 1.什么是Severlet和Tomcat? Severlet是Sun公司制定的一套标准.是使用java语言编写的服务器端程序,用于处理 ...

前端工程师ps学习笔记

前端工程师ps学习笔记相关推荐

最新文章

热门文章