Photoshop界面设置

  • 新建文件Ctrl+N,其中【预设】-【web】,【宽度】-【1920】,高度不定。【背景内容】-【透明】,也可存储为预设。

  • 移动设置(V)

    建议不勾选【自动选择】,选择【图层】,当我们选中某一个位置时,按住Ctrl,在PSD大图上单击相应位置,右下方图层列表会自动跳到相应的图层。也可以在图层列表中,按住Ctrl,并单击该图,PSD大图上会形成选区。

  • 视图设置
    勾选【视图】-【智能参考线】和【标尺】,不勾选【窗口】-【库】和【颜色】

    调整右侧

    点击属性,关闭。

    勾选【窗口】-【信息】和【字符】,并关闭段落和属性。

    将信息和字符都拉到右侧,如下图

    设置信息中单位为像素,颜色模式为RGB模式


    在【编辑】-【首选项】-【单位与标尺】中单位设置为像素

    最后,完成设置,存储为工作区,保存当前设置。【窗口】-【工作区】-【新建工作区】

Photoshop基本操作

简单工具操作

  • 移动工具(V)
    当按住Ctrl,选中多个图层,如下图:

    菜单栏下方显示属性,包含对齐方式

  • 选区工具(M)
    选区工具+ - x框。

    单行、单列选框工具都是1px。

    重要的【shift键】,选框时,按住shift,可成正方形选框或者正圆。(注意先放鼠标,再放shift键)

    重要的【Alt键】,设置圆心,鼠标点击某个位置,并按住Alt键,再拖动。(可配合shift键画正圆)

    shift 键又等价于选区工具+,Alt键等价于选区工具-
    shift+M在之间切换。

  • 套索工具(L)
    也是选区的,选择不规则图形。

    多边形套索工具,在每条边的顶点单击一下,最后一个点双击,或者在起始点处单击,就能闭合多边形了。(注意鼠标箭头带圆圈表闭合)

    磁性套索工具,根据颜色边界来进行判断。

  • 快速选择工具(W)
    单击时,会把相同颜色的区域选择出来,还可以拉动再选择。
    [键 缩小快速选择工具的画笔, ]键 放大画笔。同时也可以在菜单栏下方设置,如图

  • 裁剪工具(C)
    选择裁剪工具,单击画布时,会发现整个画布周围多了一些小的可控角。可控制裁剪区域面积。点击对勾,确认裁剪。保存-导出

    用选框工具选中区域后,再单击裁剪工具(围绕选区,生成最小裁剪矩形),按下回车键,进行选区裁剪。

  • 其他快捷键
    按住空格键----------------抓手工具
    Ctrl和+ ---------------------放大
    Ctrl和- ----------------------缩小
    Ctrl和D ---------------------删除选区
    Alt和Delete ----------------前景色填充
    Ctrl和Delete ---------------背景色填充

图层的原理及其操作

图层相当于一层层玻璃,每层上都画了不同的图案,然后眼睛从上往下看。

参考线及其操作

【视图】-【新建参考线】或Alt -> V -> E或Ctrl+R。

选择当前图层,再拖动参考线,它会自动吸附到边缘。
【视图】-【显示】-【网格】
Ctrl+; 关闭参考线 Alt->V->E->H水平参考线。

PS切图(一)的更多相关文章

  1. 页面制作部分之PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  2. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  3. 前端技术-PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  4. 学习笔记2:前端PS切图

    前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...

  5. PS切图保存后的背景图为透明

    1.若想PS切图保存后的背景图为透明,那么则需要在如下图中所示的修改即可,切图后[文件]——>[存储为web格式]——>[PNG-24]: 2.要想在css中的背景图片为相通,则先剪切一个 ...

  6. 前端PS切图

    http://www.imooc.com/learn/506    慕课网地址 Tools Tools  Photoshop 快捷键 l  移动工具 V l  选取工具 M l  套索工具 L l  ...

  7. ps切图插件

    ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用

  8. 两种ps切图方法(图层/切片)

    两种Ps切图方法 一.      基础操作: a)    Ctrl++ 放大图片,ctrl - -缩小图片 b)    按住空格键space+,点击鼠标左键,拖动图片. c)    修改单位,点击编辑 ...

  9. 2018年设计师都在用的PS切图插件--摹客iDoc

    终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...

  10. 前端菜鸟起飞之学会ps切图

    由于之前只顾着追求效率,没有学习过PS,但其实这是前端开发人员需要学会的技能之一,曾经看过一个大佬的前端经验分享说他在招聘时遇到不会切图的会直接pass掉,可见前端开发人员学会切图是多么重要.通过观看 ...

随机推荐

  1. javascript的变量作用域--对比js、php和c的for循环

    为什么要写这篇文章呢?主要是给自己提个醒,js的水很深,需要小心点儿才能趟过去,更何况自己不是专业人士,那就得更加小心了. 看下面的js代码: <!DOCTYPE html> <ht ...

  2. ASP.NET Core 中文文档 第三章 原理(12)托管

    原文:Hosting 作者:Steve Smith 翻译:娄宇(Lyrics) 校对:何镇汐.许登洋(Seay) 为了运行 ASP.NET Core 应用程序,你需要使用 WebHostBuilder ...

  3. JavaScript实现图片轮播组件

    效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...

  4. C#委托的一次"甜蜜"接触

    委托是个说烂了的话题,但是依旧有好多人不知道为什么要在C#中使用委托,最近有朋友也问到我这个问题,所以举例些场景,以供那些知道怎么声明委托.怎么调用却不知道为什么要用的朋友一些参考,当然也是希望验证下 ...

  5. git 出错误“值对于Uint32太大或太小”

    提交git代码的时候报的错误 这是因为修改的东西太少的原因,应该多修改一些就可以提交了 例如:只是删除了一个空格或者一个字符就提交git代码的话就会提示这个错误 解决方法:多多的改变一下代码,比如增加 ...

  6. 货架工程项目之js dom实现项目工程进度图

    笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...

  7. Delphi_03_Delphi_Object_Pascal_基本语法_01

    这次是一个基本语法的第一部分,包括变量.变量初始化.常量.运算符.字符串等内容. { 本程序演示 Delphi Pascal 的基本语法 1.变量及变量的初始化 2.常量 3.运算符 3. 4. } ...

  8. Python 历遍目录

    Automate the Boring Stuff 学习笔记 01 使用 os 模块的 walk() 函数可以实现历遍目录的操作,该函数接收一个绝对路径字符串作为必选参数,返回三个参数: 当前目录—— ...

  9. 使用visualvm远程监控JVM LINUX服务器配置方法

    (1)首先要修改JDK中JMX服务的配置文件,以获得相应的权限: 进入$JAVA_HOME所在的根目录的/jre/lib/management子目录下, a. 将jmxremote.password. ...

  10. 在js中为图片的src赋值时,src的值不能在开头用 破浪号~

    <img id="aa" src="~/Content/Manager/no01.png" /> document.getElementById(& ...