页面制作学习笔记:D2.Photoshop切图基础知识
一、什么是切图?
切图就是从网页设计稿中切出网页素材,比如一些小的按钮、小的图片、页面的LOGO、网页的背景图片等。
然后就是页面编码,引入图片资源
- 在HTML里通过 img 标签引入图片资源
<img src="data: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切图基础知识的更多相关文章
- 前端开发工程师 - 01.页面制作 - 第1章.Photoshop切图
第1章--Photoshop切图 工具.面板.视图 什么是切图? 1. 从设计稿(.psd)中切出网络素材,如按钮.图标.logo.背景图等 2. 编写代码,在代码中使用图片,生成静态页面 --给网页 ...
- 页面制作部分之PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 学习笔记:APP切图那点事儿–详细介绍android和ios平台
学习笔记:APP切图那点事儿–详细介绍android和ios平台 转载自:http://www.woofeng.cn/articles/168.html 版权归原作者所有 作者:亚茹有李 原文地址 ...
- 使用Photoshop切图的三种方式
PhotoShop切图的三种方式 1. 原始切图 (1)选择工具栏中的切片工具 (2)找到要切片的元素,在右侧的图层框中,使元素背景隐藏,然后用切片工具选择需要切片的元素 (3)导出为web常 ...
- tensorflow笔记(一)之基础知识
tensorflow笔记(一)之基础知识 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7399701.html 前言 这篇no ...
- 《Programming Hive》读书笔记(两)Hive基础知识
<Programming Hive>读书笔记(两)Hive基础知识 :第一遍读是浏览.建立知识索引,由于有些知识不一定能用到,知道就好.感兴趣的部分能够多研究. 以后用的时候再具体看.并结 ...
- php面试笔记(5)-php基础知识-自定义函数及内部函数考点
本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而函数相关的考点 ...
- php面试笔记(3)-php基础知识-运算符
本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而运算符相关的考 ...
- photoshop切图
1.首先需要用photoshop把psd源文件打开,看看源文件的整体布局.源文件是分层的,方便切图的层次. 2.切图的工具叫做"切片",在左侧面板可以看到.右击可以看到" ...
随机推荐
- 解决一次git问题
由于特殊原因,工作中不能使用sourcetree,今天遇到了一个问题记录一下解决办法,后续还是得好好去廖雪峰大神那里学习一下git的命令行操作呀 You have not concluded your ...
- 【Mac】【问题】
[一]export: `PATH;': not a valid identifier 可能是环境变量配的有问题 一般是~/.bash_profile 多了空格或是多了$符号之类的
- 记录一下最近的解决的坑爹bug
最近解决的bug长得都很别致啊,记录一下 一 :天气插件引用报403 项目里有一个天气插件引用一直报403 后来确定原因是headers里缺少referer源,无法访问资源的服务器,再后来又发现项目引 ...
- sourcetree,创建工作流报错:Fatal: Not a gitflow-enabled repo yet. Please run 'git flow init' first.-》解决办法
1.打开项目下.git/config文件,或者如下图操作: 2.打开config文件以后,删除所有 [gitflow *条目并保存文件 3.关闭并重新打开sourcetree 4.仓库->Git ...
- 为wordpress后台登陆添加算术验证码
对于新建站(个人博客-柠檬https://ninmong.com)的站长来说提高后台的安全性,是一件非常重要的事,添加验证可以起到很好的效果,废话少说,贴代码 //后台登陆数学验证码 function ...
- linux运行进程实时监控pidstat详解
- Log4Net 常见错误提示(不断更新中)
1. 无法识别log4中的节点,如:<section>等 解决办法:在configrition中直接申明log4 <configSections><!--必须为第一个节点 ...
- 转载aaa
前言 对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高,有时候看到特别好的博客想转载下载,但是不能一个字一个字的敲了,这时候我们就想快速转载别人的博客,把别人的博客移到自己的空间 ...
- ELK原理与介绍
为什么用到ELK: 一般我们需要进行日志分析场景:直接在日志文件中 grep.awk 就可以获得自己想要的信息.但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如何归档.文本搜索太慢怎么办 ...
- 微信小程序 wx.request
onLoad: function () { var that = this console.log('https://free-api.heweather.com/s6/weather?locatio ...