ps切图（1）——界面设置

如需在线视频学习，请搜慕课网爱米老师！

该内容适合ps小白。

学习工具ps cc 2015

第一节：ps界面设置

打开ps，通常会显示一个软件默认界面，但是该界面上显示的部分功能与我们切图是没有多大关系的，并且部分与我们切图相关的功能也没有干脆地给我们显示出来，因此，我们需要设置并保存一个适用于切图的ps界面。

1. 新建设置

介绍网页设计中的初始化尺寸参数，以及一些相关的快捷键

>>> 点击菜单栏中的“文件”，然后点击“新建”，然后文档类型选择“自定”，宽度和高度的单位设置为“像素”，宽度值和高度值设置为实际需要的网页大小（老师介绍时，宽设置为1920，高2000），分辨率值设置为72 单位像素，颜色模式RGB 8位，重点背景色设置为“透明”，然后点击“存储预设”，最后一路确定。新建就OK啦。

>>> “新建”快捷键：ctrl + n

2. 移动工具设置

介绍移动工具针对网页前端的设置属性及其快捷方式

移动工具有什么作用呢？通常我们需要选中一个图层（或者组），然后使用移动工具移动它。

具体怎样操作呢？

方法1：:首先选中“移动工具”，然后再到图层面板中找到并选中我们需要的图层，然后点击图层左侧的那个眼睛，观察一下是否是要移动的图层，确定后按住鼠标左键移动。如果图层嵌套很多，要找到需要移动图层是不是很费时呢？

方法2：首先还是选中“移动工具”，然后选中“自动选择”，并将”自动选择”的属性值选择为“图层”，最后到工作区中单击鼠标左键，软件会自动识别并选中相应的图层，在右侧的图层面板中可以看到被选中的图层，如果是我们需要的图层，那么按住鼠标左键移动。这种方法比前一种方法确实快多了哈。

方法3：首先选中”移动工具“，然后不选中“自动选择”，但要将”自动选择”的属性值选择为“图层”，然后将先按住ctrl键（windows操作系统）不放，然后单击鼠标左键，查看图层面板中被选中的图层是否是我们需要的，如果是，那么就按住鼠标左键移动。

上面三个方法介绍了如何移动图层，其实我们也可以移动组哈，聪明的你如果现在正在使用ps进行实战操作，那么将前面三个方法中的图层改为组就是组的三个移动方法了哈。

另外要注意的是：移动的时候不要选择空白的区域，当我们不需要使用移动工具的时候可以直接点击图层面板中的空白区域，取消对任意图层的选中，可以在图层面板中看到先前高亮的区域现在全都不高亮了。

>>> 非文字编辑状态下 “移动工具”快捷键：v

3. 视图设置

介绍针对前端在视图方面的设置以及设置中的技巧和优势

（1）>>> 点击菜单栏中的“视图”，然后点击“显示”，然后选中“参考线”和“智能参考线”(老师说智能参考线在切图方面会有大用，好期待啊)；

（2）>>> 点击菜单栏中的“视图”，然后选中“标尺”，标尺的快捷键 ctrl + r （俺今后就直接用ctrl +r）;

（3）设置界面右侧的面板，我们只需要四个部分：信息、字符、图层、历史记录四个面板，其余的都关闭。

关闭和打开我们需要的面板：

>>> 点击菜单栏中的“窗口”，将我们不需要的“库” "颜色“ 关闭，打开我们需要的”字符“ ”信息“ ”历史记录”

>>> 回到界面，将界面右侧面板中的”路径“ ”通道“ ”属性“关闭，将”历史记录“拖动到”图层“后面，将“字符”和“历史记录”拖到界面右侧的最上面，关闭”段落“。

>>> 两个常用的历史记录快捷键：前进一步 shift + ctrl + z 后退一步：alt + ctrl + z

设置信息面板：

>>> 单击”信息“面板右上角的图标，单击”面板选项“，然后将”第一颜色信息“、”第二颜色信息“都选择为”RGB颜色“，将”鼠标坐标“选择为”像素“ ，然后在状态信息中选中“文档尺寸”；

鼠标坐标右侧的宽高信息是十分重要的，这对设置绝对定位或固定定位有帮助。当我们拉选区的时候，它会直接显示选区有多大，注意，这里的选区大小指的是图层中所有选区所形成的图形区域的最外围边界宽高。

老师讲的下面这个技能非常有用哟！！！大家千万要记住。该技能在后面的裁剪中也十分有用！！！

当需要获取某个内容的宽高时，首先使用操作移动工具的方式选中该内容对应的图层，然后在图层面板中，按住ctrl键不放，单击图层，此时软件就会自动为我们选中的内容形成一个选区，我们可以在信息面板中看到该内容的宽高。

>>> 又有两个非常常用的快捷键，大家一定要记住，因为很常用：

ctrl + d 撤销选区

按住键盘空格键不放，然后按住鼠标左键不放，可以拖动整个文件。

接下来要做的工作是：
>>> 点击菜单栏中的“编辑”，然后点击“首选项”，然后点击“单位与标尺”，将“标尺”和”文字’的单位改为像素，然后单击确定。

操作完上面的内容之后，那么我们视图设置的流程就只剩下最后一步了，这一步相当重要哟！！！！
>>> 点击菜单栏中的“窗口”，然后点击“工作区”，然后单击“新建工作区”，然后在”名称“输入框中键入”web切图“,然后选中”键盘快捷键“和”菜单“，最后点击”存储“

存储的目的是当我们点击“窗口”，然后点击工作区，然后点击“基本功能" 然后点击”复位基本功能“ 之后，我们之前针对前端切图所做的视图设置信息都不见了，如果每次切图都去设置这些内容，是不是很麻烦呢？因此当我们创建了一个工作区，并进行相应设置储存之后，那么我们就可以在菜单栏>窗口>工作区下面找到我们之前储存的那个工作区，这时候，打开这个工作区，然后点击复位该工作区，这样我们之前设置的界面又回来了，是不是很方便啊。

第一节完。

ps切图（1）——界面设置相关推荐

ps切图基础（慕课网切图篇学习）
一.PS切图基础 1. PS界面设置 1) 新建设置: Ctr+N(新建快捷键) 预设选定web或自定义,宽1920,高2000像素,背景透明,分辨率72像素/英寸,RGB颜色 8位. 在设置好参数 ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
ps切图后 JAVA开发_2018年设计师都在用的PS切图插件--摹客
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...
两种ps切图方法（图层/切片）
两种Ps切图方法一．基础操作: a) Ctrl++ 放大图片,ctrl - -缩小图片 b) 按住空格键space+,点击鼠标左键,拖动图片. c) 修改单位,点击编辑 ...
ps切图详解以及上传至蓝湖
ps切图详解以及上传至蓝湖介绍普通切片切图选择图层切图接下来是强烈推荐的上传蓝湖切图方式小结介绍我是一名前端开发工程师,随着工作环境的改变,遇到过公司没有ui设计师,或者ui设计师只为我 ...
前端编程中利用PS切图还原设计图
一. PS 切图 1.1. 常见的图片格式序号格式特点和常用的用途 1 jpg JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们**产品类的图片** 经常用jp ...
PS切图 - （快捷键）操作方法
PS快速切图 - 动作(Shift + F8) PS切图 - (快捷键)操作方法动作快捷键: 选中你需要切图的图层: Shift + F8 就会直接切图(以图层的边缘为准): 然后,保存就好. @2 ...
ps切图的零散小知识
关于ps切图的零散小知识认识多种图片文件格式选择测量的工具 ctrl+D可以取消选区,或者点击旁边一下也可以取消选区 ctrl+R可以调出标尺,也可以在视图->标尺打开标尺 (调出的时候需要 ...
前端ps切图，图文教程，详细。
写在前面:本文主要内容是目前我所知道的切图技巧结合网上的资料,写出来分享一波.图文教程,多图!! BB:很多人都会说,切图这个活倒底分给UI还是分给前端.虽然好的UI会给我们把图切好,但是他们切的图不 ...
ps切图与版心页面布局注意问题
版心是页面内容的展示区域有具体宽度 width:px: 左右居中 margin{0 auto} Ps切图方式方式一矩形选框工具选中区域 > ctrl+c > ctrl+n > c ...

ps切图（1）——界面设置

ps切图（1）——界面设置相关推荐

最新文章

热门文章