前端工程师技能之photoshop巧用系列第一篇——准备篇
前面的话
photoshop是前端工程师无法回避的一个软件,这个软件本身很强大,但我们仅仅需要通过这个工具来完成基本的切图工作即可。本文将开始photoshop巧用系列的第一篇——准备篇
作用
我们为什么要去切图呢?这就需要说到项目流程。一个完整的项目流程是市场进行需求分析,产品做出项目原型,UI根据项目原型出设计图,前端根据设计图制作页面,后端进行数据相关工作,网站经过测试后上线。
我们常说的切图实际上就是要把UI制作的设计图切成网页需要的素材。具体到网页的哪些地方需要素材呢?主要包括两类:
【1】HTML中的<img>标签
<img src="img/xx.jpg" alt="">
【2】CSS中的background-p_w_picpath属性
{background-p_w_picpath: url(../img/xx.jpg);}
初始化
前端工程师在使用photoshop之前需要进行一些初始化设置,主要包括以下3个
【1】首选项设置 <ctrl+k>
编辑 > 首选项 > 单位与标尺 > 把标尺和文字的单位都改成像素
【2】面板设置(在窗口菜单下)
1、工具(可切换两列或单列布局)
2、选项(与当前选中的工具一一对应)
3、信息<F8>(颜色、位置、尺寸信息,一般结合矩形选框工具使用)
4、图层<F10>(图层操作)
5、历史记录(记录历史操作,常用于回退)
【3】辅助视图(在视图菜单下)
1、对齐<ctrl+shift+;> (开启对齐后,图层移动到另一个图层或参考线或文档边缘时会有自动吸附功能)
2、标尺<ctrl+R>
3、参考线<ctrl+;>(视图 > 显示 > 参考线)
[注意]需勾选显示额外内容,才能看到画布里的参考线和网格
常用工具
【1】移动工具<V>(常用于选择图层及移动图片)
在选区工具中的选项面板有图层和组两个选项,组一般指的是一个可能包含多个图层的文件夹,而图层仅指图层本身
[注意]移动工具对应的选项面板上的自动选择一定要勾选上
【2】矩形选框工具<M>(常用于选择一块区域并配合信息面板查看信息)
如果认真观察,会发现矩形选框工具右下角是有一个小三角的,鼠标点击后不松开会弹出多个选项,包括矩形选框工具、椭圆选框工具、单行选框工具和单列选框工具4种。
[注意]如果使用矩形选框工具的同时,按住shift按键,会生成正方形
一般地,使用矩形选框工具都是为了建立一个新选区,但实际上,也可以对选区进行如下操作
1、添加到选区: shift
2、从选区减去: alt
3、与选区交叉: shift + alt
【3】魔棒工具<W>(抠不规则的图)
[注意]容差是用来设置颜色取样时的范围,容差为0代表只选取当前的颜色值
【4】裁剪工具+切片工具<C>(裁剪图片)
[注意]裁切工具裁的是工作区,不管是多少图层都能裁切下来
【5】缩放工具<Z>(缩放画布)
【tips】常用的缩放快捷键
1、放大:
a、ctrl+加号
b、alt+滚轮上滚
2、缩小:
a、ctrl+减号
b、alt+滚轮下滚
3、显示为100%: ctrl+1
【6】取色器+吸管工具(取色)
1、填充前景色: alt+del
2、填充背景色: ctrl+del
3、切换前景色和背景色: X
4、默认前景色和背景色: D
【7】文字工具<T>(输入及编辑文字)
【8】抓手工具<空格>(移动可视区域)
抓手工具的实际快捷键是H键,单击H键,再点击鼠标左键不松开,图片会以适应屏幕大小的形式显示在屏幕中。当移动鼠标并松开左键后,屏幕会放大显示鼠标所在的图片区域
快捷键
除了上面提到的一些快捷键之后,还有一些常用的快捷键也是需要注意的
【1】单步撤销或前进: ctrl+z
【2】连续撤销: ctrl+alt+z
【3】回退到某一步: 点击历史记录面板上相应的步骤
【4】取消选择: ctrl+d
【5】变形: ctrl+t
【6】保存: ctrl+shift+alt+s
【7】合并图层: ctrl+e
【8】盖印所见图层: ctrl+shift+alt+e
[注意]对于一些工具来说,需要调用工具的尺寸大小,通用的快捷键是左中括号[和右中括号]
转载于:https://blog.51cto.com/zhanglida66/1921305
前端工程师技能之photoshop巧用系列第一篇——准备篇相关推荐
- 前端工程师技能之photoshop巧用系列第二篇——测量篇
前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇--测量篇 测量信息 在网页制作中需要使用photoshop测量的信息分为两类,分别是尺寸信息和颜色信 ...
- php 自动切图,前端工程师技能之photoshop巧用系列扩展篇自动切图
× 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文 ...
- 前端工程师技能之photoshop巧用系列扩展篇——自动切图
前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能 ...
- 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析...
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- java职业发展路线图_从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析...
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- 高性能网站建设指南---前端工程师技能精髓
题记:无意间在公司图书馆看到这本书,感觉内容写得很不错,很细很有条理.虽然自己并非前端工程师,然而也需要对此有所了解,供以后在架构设计.系统优化时考虑这些因素,特在此将对该书进行摘录,供不时之需.也希 ...
- web前端工程师技能总结
编辑器: 1 webstorm(建议版本10.0), 2 sublimeTEXT(建议版本3), 3 dreamweaver (建议版本CS6, CC2015) 浏览器: 1 firefox 建议 ...
- 读书笔记《高性能网站建设指南:前端工程师技能精髓》
只有10-20%的最终用户响应时间花在了下载HTML文档上.其余的80-90%时间花在了下载页面中的所有组件上. 规则1.减少HTTP请求 图片地图:将多个图片合并成一个,而后通过css定位显示不同的 ...
- 【前端重构技能天赋】(二)——Javascript、CSS篇
少叙闲言 承接上一篇,这篇是关于JS.CSS的一些优化,相信很多大家都非常了解了,并且实际上也都在这么做,但我想,很多人和我一样,只知道规范这么做,并不太了解到底为啥这么做,到底好处在哪了? Abou ...
最新文章
- mahout贝叶斯算法开发思路(拓展篇)1
- python批量处理excel文本改为数字_Python批量修改Excel中的文件内容
- pandas数据分析选则接近数值的最接优方案
- 京东壕掷27亿买下一座酒店 官方回应:以办公为主!
- bim webgl 模型 轻量化_BIM模型轻量化是什么?BIM模型轻量化原理
- 下载腾讯视频极速版_怎么退出腾讯视频登录
- 软件安全备考--PE文件
- 基于Java的线上诊疗系统毕业设计源码1617411
- 电脑如何调整照片尺寸大小?证件照尺寸大小怎么调?
- python 表格处理项目该如何分工_python 处理 Excel 表格
- 神兵利器——敏感文件发现工具
- 51nod_2369 奈芙莲的序列(动态规划)
- Mapping Spiking Neural Networks的论文汇总以及思考
- python试卷管理系统的设计与实现_在线考试系统的设计与实现毕业设计论文.doc...
- 为什么没有Realtek面板?
- Project Ara 手机,拼装的DIY手机
- python列表lambda表达式排序sort(key=lambda x:x[1])
- mysqlclient==1.3.7对应mysql版本_MySQL 5.7.30 的安装/升级(所有可能的坑都在这里)...
- 数据分析:销售数据分析如何做?这篇干货收藏备用!
- Vue组件间通信之$emit/$on
热门文章
- python没有return语句的函数将返回_为什么Python没有return返回值
- c语言程序输入n个数字排序,请问,C语言能人请进,用写一个程序,要求输入N个整数,按从小到大的顺序输出,就说说...
- 无废话Git——本地服务器提交撤销
- Java Web项目在Linux服务器自动化部署
- 代理ip网站开发_网站反爬虫策略,用代理IP都能解决吗?
- synchronized 分布式时为什么会失效_10张图,搞懂索引为什么会失效?
- Linux中Docker部署Tomcat
- MySQL 优化策略
- 容器安装java_在docker容器中安装Java(从宿主机向docker容器中拷贝文件)
- python通过函数类属性_函数作为类属性的赋值如何成为Python中的一个方法?