ps图层与切图

一、图片格式为png

1.shift+按住鼠标左键,拉出参考线。

2.使用切片工具切出图片

3.导出图片:文件-储存为web所用格式-预设(png-24)-选中需要导出图片-点击储存-切片(选中用户的所有切片)-保存(保存在桌面上)

二、图片格式为psd

   1.新建一个文档

2.图层中找到需要的图层-复制图层-文档设置为新建图层的文档-确定

3.文件-脚本-将图层导出文件-浏览(你需要存储的位置)-文件名前缀-仅限可见图层-文件类型(png-24)-运行

三、westorm

  1. 解析模式分为:标准模式、混杂模式、准标准模式。taby快捷键
  2. html---结构,决定网页的结构和内容(是什么)
  3. css---表现(样式),设定网页的表现样式(是什么样子)
  4. Javascript(js)行为,控制网页的行为
  5. <head  "UIF-8">支持中文模式
  6. 有开始标签就有结束标签,列:<body></body>. 标签都是成对出现的除了个别标签,列:<hr>、<br>。
  7. 注释(选中+Ctrl+/)
时间: 2024-12-15 18:21:17

ps图层与切图的相关文章

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

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

第144天:PS切图方法总结

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

ps切图详解-web前端(转)

网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选项设置 编辑->首选项->单位与标尺,选改为像素. 1.2 面板 在"窗口"菜单下开启: 工具(默认已开启) 选项(默认已开启) 图层(默认已开启)

页面制作部分之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首选

页面制作学习笔记:D2.Photoshop切图

一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 <img src="images/avatar.jpg" alt="头像"> 在CSS里面通过background属性引入图片资源 .icon { background-image:url(../images/avtar.jpg); background-posi

CHUTTERAN对界面切图的好处和教程

在目前主流的界面设计切图工具中,ui设计师们都比较喜欢使用Cutterman工具进行切图,因为这款切图工具是国内研制的,一方面体现中国设计师的爱国,另一方面,这款切图工具自身的功能使用起来非常方便,并且有个平台的切图方式. 新版cutterman的插件新功能如下: IOS: 如果你是为Iphone界面设计,请使用ios标签,它能够为你生成符合ios系统的单/双倍图 Android: 如果你是为Android设计界面,请使用Android标签,它能够生成符合Android系统的各种DPI分辨率图片

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

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

PS切图篇

一.PS界面设置 1.新建(ctrl+n) 初始化尺寸参数 预设:自定 宽度:1920px 高度:自设(如:2000px) 分辨率:72像素/英寸 颜色:RGB/8位 背景内容:透明 存储为预设 2.移动工具设置 快捷键:V 作用:选择和移动图层 2.1选择图层 自动选择不用勾选,将后面设置为图层 windows系统:Ctrl键+单击鼠标左键 苹果系统:command+单击鼠标左键 2.2显示/隐藏图层 点击图层前面的小眼睛 显示/隐藏所有图层: 在小眼睛那里选中一个图层右键点击->显示/隐藏所