psd切图

  打开UI设计师给你的PSD文件,我们以下图为例,截产品超市前面的购物车

1、按v选择移动工具,然后在上面的选项栏中勾选自动选择,在再右边选择图层

2、这时候用鼠标选中产品超市前面的购物车,就能在右边的图层看到,选中的购物车的图层就已经被选中了

3、按住alt,再点击上图“图层144副本2"前面的眼睛,这时就只显示购物车图层了,其它图层都已经暂时影藏了。

4、按m选择 矩形选框 工具,再把购物车选中

按ctrl+shift+c进行复制

5、按ctrl+n新建图层,这时新建的图层的大小会自动生成你前面复制的购物车的大小

然后ctrl+v,黏贴,然后在右边的图层中把背景的给隐藏,就是把背景前面的眼睛给取消勾选

6、点击 文件->存储为Web和设备所用格式,在弹出的框中的右上角选择存储格式为png格式

在点击有下角的存储就完成了。

这时用图片工具打开放大可以看到生成的购物车的图标就是背景透明的了

时间: 2024-10-16 23:40:31

psd切图的相关文章

psd切图转换为div+css格式

先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY,里面所用到的HTML标记进行重置为0 PSD转div css网页切图示例 第一步:先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY里面所用到的HTML标记进行重置为0.你也可以先用*重置为0然后在根据BODY中所使用的标记进行重置.如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了. 复制代码 代码如下: *{ margin:0px; padding:

web第八天,PS切图与float浮动

一,PS工具 1,组成 菜单栏(上)  工具栏(左)  辅助面板(右) 2,图片常见格式 jpg : 色彩丰富,比较适合做照片格式 png : 可以做透明的图片 gif : 动图 psd : 是设计图的源文件 3,PS的简单操作 ①,alt+鼠标滑轮: 放大缩小图片 ②,辅助面版 : 图层,:历史记录, 信息(查看图片宽高) ③,标尺 : 最好先调出来,视图->标尺 ④,参考线 : 可以从标尺上拖拽出来,也可以拖拽回去,也可以视图->清除所有参考线 ⑤,撤销 : ctrl+z,辅助面板中的历史

【原】PSD图标素材的全自动切图方法,适用于IOS、安卓、web前端等领域

原地址:http://www.cnblogs.com/wengzilin/p/3775410.html 屌丝个人开发者经常遇到的尴尬问题是,自己不会设计UI素材又请不起专业的美工.最好的方式是去网上下载符合自己需求的素材修修改改直接用上.但是,在这个过程中会发现很多下载下来的素材是PSD格式的,很多图标资源以图层的方式共存于一个PSD文件中.最傻的办法是新建一个图层,把需要的某个图标土层复制过去然后再保存.这种图的掉渣的方式确实影响工作效率,程序员岂能浪费时间在这种事情上?本文采用一种全自动的方

前端切图,把psd文件做成一个网页

马上要去报到上班鸟,好激动,过年假期玩傻了,作业还没完成,希望不会被劝退!!! 关于切图作业,先缕缕大致步骤: 1.拿到psd文件,先分析,对页面的结构有个大致了解,最好可以动手画画草图: 2.根据分析切图.生存图片: 3.写出页面中所有的元素的HTML代码: 4.编写CSS代码: 5.进一步完善,优化,测试浏览器兼容等问题:

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

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

前端PS切图小技巧

切图,重要的是找精确像素!不要在用传统的切刀进行切割啦,拿到一副PSd图形的,可以使用这样两种方式: (1)如果你的图层很多,你可以用“ctrl+点击想要的图片“直接选中你想要图片的图层,简单到位,然后将图层转化为智能对象(当然可以几个图层拼到一起),然后双击弹出点击确定,就ok了: (2)对于大图,这个时候就有很多的东西存在,这里就使用,选区先选中你要切的图形,然后”编辑-合并拷贝-新建-拷贝“,就能建立一个完成整的图片切图的样子了,就ok了. 注意:这里的有几点说明: (1)切图要拉好参考线

前端开发工程师必备JS技能-切图

/******************************************** 学习时间:2015年12月21日 学习者:易天曦 学习目的:掌握切图技巧 学习目标:1.学会从网页设计师的PSD文件中提取素材 2.对PS有一定的了解 3.对审美有一定的提高 *******************************************/ 学习内容: 1.网页设计中初始化尺寸参数和一些快捷键. 2.选择和移动元素. 3.常见的Web切图界面设置.

web切图的几个快捷键及总结

  自由的控制视图系列 自由的浏览图片:按住空格后,鼠标拖动 自由的缩放图片:按住alt+滚轮 切换到实际像素(100%):Ctrl + 1 工作区类型切换:Tab 控制内容系列 通过画面上点选一个图层:Alt + 鼠标右键 在画面上拖动一个图层:V 切换到移动模式 鼠标拖动 复制拖动一个图层:移动模式下 Alt+拖动 删除一个图层:选中要删除的图层 按下 Delete 合并多个图层:选中要合并的图层 按下 Ctrl+E 选区内填充颜色:Alt+Delete (前景色) Ctrl+Delete(

推荐一款UI设计师的标注切图的利器

有请PxCook 像素大厨闪亮登场!!! PxCook 像素大厨可以将标注和切图完美的结合起来,一起搞定! 也许你知道这款软件,但是肯定有不知道的小伙伴们,那么下面就让我给大家介绍下: 1.手动标注:PxCook支持多种图像格式(psd,png,bmp,jpg等)的读取,并可手动创建距离.区域.颜色.文本.坐标点等标注. 2.智能标注:提供PSD文件解析与Sketch插件支持,自动识别各图层尺寸及文本样式等,标注更快捷! 3.自动吸附:标注过程中可以针对图像内突出颜色进行自动吸附. 4.软件设置