PS切图(一)

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水平参考线。

时间: 2024-08-25 12:17:22

PS切图(一)的相关文章

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

系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方

网页设计中ps切图注意问题

最近工作中老是用到ps切图,然后高手说我切图做的不好,在此去网上找了点材料汇集起来,作为参考: 网页设计的切图,最好先用PS做出效果图,然后进行切图.   一.切图的原则:  1.图切的大小越小越好. 2.图切的数量越少越好. 那对于一整张图来说,同时达到这两个原则是相互矛盾的,所以一个网页差不多切成20-30个图就可以了,这样网页的加载速度是不会受影响的.  二.切图的技巧:  1.一行一行的切图.  2.背景的切成小条.  3.不能分开的不分好了,选行的时候要注意怎么样合理.  4.切图的时

页面制作部分之PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

前端技术-PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

ps切图

Ps切图快捷键m -----选框工具(然后按shift键不放是增加选框,按alt键不放是减小选框)v -----移动工具z -----放大工具(然后按alt键不放,就是缩小工具)空格键-----抓手工具(拖拉画布)注意:一直按住空格键c  -----切片工具F8 -----显示信息 ctrl+1-----100% 正常预览页面 ctrl+r-----隐藏/显示标尺 ctrl+h -----隐藏/显示参考线 按alt键滚动鼠标  -----缩放页面 吸管工具:测量项目上的颜色值: 文字工具(T):

ps切图保存所有切片为png

ps切图保存所有切片为png的步骤: 1. 切图完毕后 2. 点击‘文件’--‘保存为web格式’,弹出对话框 3. 选择左下角的缩放,缩放到一定的比例 4. 按住键盘shift 点选需要的切片(切片周围呈现橙黄色线框) 5. 点击右上角格式为‘png’ 6. 点击右下角'存储',弹出对话框 7. 选择‘选中的切片’保存到你所能找到的地方,over

Assistor PS切图

下载.net framework PS外挂:Assistor PS 使用指南-软件介绍与下载 标注.切图.圆角.自定义参考线.单位换算N合1神器-Assistor PS 一款APP从设计稿到切图过程全方位揭秘 免费了!切图标记外挂神器ASSISTOR PS深入解读(上) APP切图实例操作 UI基础教程 – 原生App切图的那些事儿 Assistor PS切图标记工具的详细教程与汉化 android APP UI设计图标注.换算

第144天:PS切图方法总结

一.切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方面,CC版本可通过脚本执行全自动切图,这样完全解放了切图人员的

ps切图保存的网页让它居中

魅力网络今天在给一学生做ps切图,我们一起复习一下网页的基础知识,当我们用ps切图直接保存网页,用浏览器打开默认是左对齐的,一般的网页都是居中对齐这样才看的好看,下面让河北魅力网络告诉大家方法.方法一:<body style="text-align:center" 在body后面加上 style="text-align:center" 这样就能保证内容居中了. 方法二:实用精简方法,直接在body头部中加<center>底部加</center

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松