前端PS切图小技巧

切图,重要的是找精确像素!不要在用传统的切刀进行切割啦,拿到一副PSd图形的,可以使用这样两种方式:

(1)如果你的图层很多,你可以用“ctrl+点击想要的图片“直接选中你想要图片的图层,简单到位,然后将图层转化为智能对象(当然可以几个图层拼到一起),然后双击弹出点击确定,就ok了;

(2)对于大图,这个时候就有很多的东西存在,这里就使用,选区先选中你要切的图形,然后”编辑-合并拷贝-新建-拷贝“,就能建立一个完成整的图片切图的样子了,就ok了。

注意:这里的有几点说明:

(1)切图要拉好参考线,也可以用”F8“来查看像素的详细信息;

(2)常用的前端图片存储有三种:.png\.jpg\.gif    三者之间的区别,简而言之可以概括为:

.png 优:色彩单一的图形合适,不失真,缺:存储大小中等;

.gif 优:动图,存储非动图时占据内存小,缺:无柔光效果,对前边的图形失真严重;

.jpg 这里切图保存时,最好选择”web所用格式“其中重要的是设置品质 ,在不影响图像观看的情况下,可以压缩,特别是大图有真实色彩的图形最好选择这种格式。

一般,前端所用图形在200K左右,这样加载的时候有较良好的效果。

 

时间: 2024-11-25 06:53:10

前端PS切图小技巧的相关文章

PS切图小技巧

第一部分:一些快捷键 相对于设计和绘画,切图用到的ps并不多,以下我总结一些在切图中比较常用的快捷键,这些快捷键能答复的提高你的工作效率,并且看起来很酷. 自由的控制视图系列 自由的浏览图片:按住空格后,鼠标拖动自由的缩放图片:按住alt+滚轮切换到实际像素(100%):Ctrl + 1工作区类型切换:Tab 控制内容系列 通过画面上点选一个图层:Alt + 鼠标右键在画面上拖动一个图层:V 切换到移动模式 鼠标拖动复制拖动一个图层:移动模式下 Alt+拖动删除一个图层:选中要删除的图层 按下

前端PS切图技巧(二)

之前介绍了传统的切图技巧,主要用于切多张图片的时候,但很多时候我们可能只需要切一两张图标,如果还用传统的方法就会很繁琐,所以这次分享一种导出单个图标的方法. 没有psd文件的,我这里准备了一份,需要的可以去下载 psd练习文件 (和之前的一样) http://pan.baidu.com/s/1pL2dwL1 1 工具:一.二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法两个版本的软件都可以实现,三中的方法cc才能实现,所以建议大家下载photo

前端PS切图技巧(一)

UI给我们设计图的时候都会有一份设计原稿psd文件,有的公司可能UI会把需要的图标给切好,更多时候是需要我们自己来切的.而且,有的时候可能需要的东西UI没有切出来,你就要去是去找UI切好了再发给我们,这个过程就变得很麻烦,所以不如自己学一些切图方法  没有psd文件的,我这里准备了一份,需要的可以去下载 psd练习文件 http://pan.baidu.com/s/1pL2dwL1 1 工具:一.二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法

前端PS切图(笔记)

一 界面设置 预设WEB 1920*1080 自定义    *2000   72  RGB  背景:透明 自动选择图层  Ctrl+单击 视图>显示>智能参考线>标尺(Ctrl+R) 窗口   图层,历史记录,信息,字符 信息面板中  单位:像素    一.二颜色:RGB  文档尺寸 编辑>首选项>单位与标尺  单位:像素 保存  窗口>工作区>新建工作区>WEB切图 二 PS基本操作 1.简单工具 选区  单击选择   双选区,单击同时,shift加选区

【切图】切图小知识

最近在学习前端,所以萌生了对切图的学习,接下来分享下我的学习历程吧~ 1.切图其实并不是直译的就是将图片切开那么简单,那么切图到底是什么意思呢? 切图概念:切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面,有利于交互,形成良好的视觉感.通俗来讲,把一张设计图利用到切片工具 把自己所需的切成一张张小图,然后用DIV+CSS完成静态页面书写,完成CSS布局. 2.切图工具:主流是dreamweaver.photoshop软件,还有sketch.firework等,低端Q

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

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

前端技术-PS切图

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

网页设计中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首选