前端Day05笔记

一、PS软件初识

1.使用PS软件的原因？

方便测量设计图中元素的大小、颜色等信息

2.打开设计稿的几种方式？

1）双击设计稿打开

2）将设计稿拖入PS软件中

3）PS软件左上角点击文件--打开--找到设计搞的位置打开

3.PS常用操作汇总

1）打开标尺显示

菜单栏点击视图--下拉选择标尺，点击打开标尺栏（ctrl+r）

2）将单位改成像素

菜单栏点击编辑--下拉选择首选项--常规--单位与标尺，将单位中的标尺和文字改成像素

3）调整界面，使其符合前端开发的需要

菜单栏点击窗口--下拉选择侧边栏显示，常用窗口预设：字符+信息+图层

4）放大与缩小设计稿

alt+滚轮可以放大/缩小；

ctrl+键盘的加减号（+-）放大或缩小；

ctrl+alt+0 还原设计稿的大小为100%

5）撤销操作

快捷键ctrl+z可以撤销前几步；

菜单栏点击窗口--下拉选择历史记录浏览器没有工具栏，可以直接选择退回到之前的某一步，越往上翻记录时间点越早，最上方就是初始的设计稿

6）查看/更改文字信息

左侧工具栏点击文字工具，再选择文字图层，可以在字符处看到文字相关的信息，另外，如果电脑中没有安装对应的字体，需要另外下载字体安装对应的文字包（一般UI会给到我们，不需要自己去找）

具体安装方法：右键点击文字文件--安装；或者将该文件放入C盘--windows--fonts

7）拖拽整张设计稿

左侧工具栏点击抓手工具，之后长按设计稿进行拖拽；或是按住空格键进行拖拽

8）新增/删除辅助线

新增辅助线：点击X轴或Y轴标尺不松开拖到需要的位置，在拖动时按住shift键可按1px为最小单位新增辅助线

删除辅助线：菜单栏点击视图--下拉选择清除参考线即可清除所有参考线

9）查看元素大小等信息

左侧工具栏点击矩形选框工具，选择想要查看的区域，即可在信息栏处看到元素的宽高等信息

10）抠图

左侧工具栏右键点击裁剪工具切换到切片工具，选择要抠的图，菜单栏点击文件--存储为web所用格式，再选择一种格式存储；如果需要一次性抠多个区域，可以按ctrl+alt拖拽形成多个选择区域

4.什么是px？

px就是像素单位，一个像素单位就是一个格子，例如宽1像素，高1像素就是一个格子；宽2像素，高2像素就是四个格子

5.什么是图层？

单独的颜色、文字、图片都可以是一个图层，一个设计稿是由不同的图层组成的，可以在移动工具下点击自动选择，如果选择的是图层，那么在设计稿中点击想要操作的部分会自动选择对应的图层；如果选择的是组，那么会自动选择对应的组

6.几种图片格式介绍

1）jpg（等同于jpeg）

不支持透明，不支持动画，清晰度比png格式低，占用存储空间小

2）png

支持透明，不支持动画浏览器没有工具栏，清晰度高，占用存储空间大

3）gif

支持动画

4）wbmp（jpg和png结合体）

清晰度比较高，占用存储空间较小，但兼容性可能有问题

二、vscode软件安装及插件

1.vscode下载

地址：

2.将计算机默认浏览器设置为chrome谷歌浏览器

3.需要安装的几个插件

1）chinese 中文版本

2）open in browser 在浏览器中打开

3）live server

4.安装计算机远程控制软件（向日葵）

下载地址：