首页 > 代码库 > 页面制作学习笔记:D2.Photoshop切图
页面制作学习笔记:D2.Photoshop切图
一、什么是切图?
切图就是从网页设计稿中切出网页素材,比如一些小的按钮、小的图片、页面的LOGO、网页的背景图片等。
然后就是页面编码,引入图片资源
- 在HTML里通过 img 标签引入图片资源
<img src="images/avatar.jpg" alt="头像">
- 在CSS里面通过background属性引入图片资源
.icon{ background-image:url(../images/avtar.jpg); background-position:0 0 ;}
二、PS相关知识
- 将单位与标尺设置为“像素”
- 在PS中与切图相关的面板,与切图相关一般情况下打开5个面板,工具面板、选项面板、图层面板这三个面板默认打开,还需要打开信息面板、和历史记录面板,所有面板都在“窗口”菜单中打开、关闭。
- 设置好常用的面板,可以将当前的工作区保存下来,在窗口→工作区→新建工作区
- 工具面板:常用工具;选项面板:选择的当前工具的选项;信息面板:颜色信息、位置信息、尺寸信息;图层面板:对图层进行操作;历史记录面板:对当前文件操作的所有历史记录,可以回退到任意历史记录
三、与切图相关的几个工具
- 移动工具:选择图层、移动图层;点击选择工具→选项面板→“自动选择”打勾→选择“图层”
- 矩形选框工具:选出一个矩形框,在信息面板中查看尺寸信息
- 魔棒工具:抠出不规则图形,容差:设置取样时的一个范围;
- 裁剪工具+切片工具:裁剪工具:裁剪画布;
- 缩放工具:Ctrl++放大;Ctrl+-缩小;Ctrl+1:100%大小;Alt+鼠标滚轮;
- 取色器:取色
- 撤消上一步操作:Ctrl+Z;重复执行撤消操作:Ctrl+Alt+Z;
四、辅助视图
- 辅助视图在“视图”菜单下开启
- 一般情况下开启三个:“对齐”、“标尺”(快捷键 Ctrl+R)、“参考线”(快捷键 Crtl+;)(要显示参考线,需同时勾选“显示额外内容”)
五、其它内容
Sprite的补充说明:可以通过搜索CSS sripte或者图片精灵等关键字来了解更多,推荐阅读:《谈谈CSS Sprites(css精灵)》
页面制作学习笔记:D2.Photoshop切图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。