前端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下载
        地址：https://code.visualstudio.com/

    2.将计算机默认浏览器设置为chrome谷歌浏览器
    3.需要安装的几个插件
        1）chinese 中文版本
        2）open in browser 在浏览器中打开
        3）live server

    4.安装计算机远程控制软件（向日葵）
        下载地址：https://sunlogin.oray.com/