前端所需的photoshop笔记

学前端记录的笔记之 PS
我是在b站刷的视频，简单记录了一下
web前端学习

项目流程(为什么前端要学Photoshop)

• 确定需求并进行分析

  • 产品经理或老板根据原始需求设计出原型图(UI)，不断修改确保满足客户需求

• 根据原型图设计出psd格式的原型稿(UI)

  • psd是ps的专属格式，psd格式的文件能够反映出一个页面的所有元素，包括文字字体、图片大小、颜色等所有信息

• 把页面的psd进行切片转为前端工程师所需要的图片(ui或前端)

• 实现页面，完成页面功能(前端)

• 后端，完成服务器端程序开发以及数据库开发

• 测试:对功能进行测试、集成测试、压力测试、性能测试、回归测试、自动化测试、云平台测试

• 运维:上线以及维护

photoshop简介

• photoshop是adobe公司的用于图片制作的专业软件，主要构建位图

• 位图：由很多个像素点构成的一种图片格式，每个像素点都是一个很小的小方块，一个像素点可以表达一种颜色

photoshop新建画布

1. 分辨率:72或300
   1. 72是web所使用图片的常规分辨率，如果太大，图片体积会增大很多，所以为了保证网络传输速率，决定使用72
   2. 300是照片常用的分辨率，要保证足够的清晰度。
2. 颜色模式
   1. RGB:以红绿蓝为三原色，并通过三种颜色的不同程度的混合形成了丰富多彩的其他颜色。按照饱和度(每个三原色饱和度范围0-255)来分的话，一共能表达256 256 256种颜色，常见模式
   2. cmyk:印刷模式
   3. lab模式:photoshop专属模式，可以和rgb以及cmyk之间进行切换
   4. 位图:只有黑、白两色
   5. 灰度:只有黑白灰三种色系
3. 背景色:透明色(常用)、黑白色

photoshop工作区

菜单栏

• 窗口-工作区，复位基本功能，可以将工作区复位到初始的位置

• 窗口，信息，可以看到鼠标光标所在的颜色和位置信息

photoshop图层

• 概念
  • ps会把图片拆成多层图像的一个结合体，即一个完整的图片是由多个图层协助形成的效果
• 操作
  • 新建图层
    • ctrl+shift+n
  • 删除图层
    • 选中图层，按delete键
  • 复制图层
    • ctrl+j

photoshop基本工具

• 选区工具

  • 键盘上按住M可以快速切换选区工具

  • 选中后可以通过油桶工具上色

  • 左上角可以选择选取方式(单个多个，增加选区减少选区，交叉选区)

  • 反向选择，直接右击

  • 一般新建一个图层再进行上色

  • 基础选取没有的形状可以使用套索工具

• 套索工具

  • 套索工具，专门用于实现不规则形状的选区
  • 套索工具:方便，但受鼠标移动影响准确度不高
  • 多边形套索工具:精确度比套索工具高，但是操作繁琐，效率不高
  • 磁性套索工具:自动识别颜色相近的区域，精确度稍微高点
  • 要实现更高精确度的选取，使用魔棒工具

• 魔棒工具

  • 可以快速的选择某个颜色区域，精度较高

-------------------------------------去水印--------------------------

• 印章工具
  • alt抓取颜色
  • 松开alt，点击就能覆盖颜色
• 污点工具:
  • 可以让附近色彩更和谐正常过渡，不会有明显色差

---

• 标尺

  • ctrl+;：隐藏或显示参考线

• 快速选择

  • ctrl+T:快速选择图层中的图
  • 选中后可以右击翻转或者调整

• 钢笔工具

  • 可以用标尺来确定是否画的直线
  • 钢笔工具可以画一些线条
  • 按住不放就能出现锚点，然后可以拖拽来改变弯曲度
  • 按住alt可以从曲线切换直线

• 切片工具

  • 概念:提取psd原型图里的页面所需要的所有图片的过程，就叫切片

  • 切片流程

    1. 理解原稿(理清各个图层间的关系)

    2. 知道要切哪些东西(有没有层级关系)

       1. 图片是否透明，还是白色背景
       2. 使用移动工具可以选中图层

    3. 利用切片工具，进行切片，把每张图片切一下

       1. 先切第一层
       2. 切完第一层后隐藏，切第二层

    4. 切完后存储为web所用格式

       可以直接存储，切片下拉框选择所有用户切片

       透明的要注意使用png格式存储

       存储要注意设置背景不可见

雪碧图

• 概念
  • 将多个小图片集中在一张大的图片(常用于网页页面图标)
• 作用
  1. 页面只需要加载一张图片
  2. 减少网络流量需求，间接提高了页面的加载速度
• 使用
  • 用ps手动制作雪碧图(所有小图标竖着排列)
• 优化
  • 如果小图标太多，可以借助第三方网站来帮助我们制作
  • 例如: CSSsprites： https://css.spritegen.com
• 注意:只需要小的图标

PXCOOK

用于提取页面的信息，字体、距离

• 使用
  • 创建项目
  • 将psd拖进去
  • 然后就可以在设计视图使用工具进行信息查看
  • 也可以在代码视图直接查看代码