.NET培训
美国上市.NET培训机构

400-111-8989

热门课程

前端必备PS技巧

  • 时间:2017-04-14
  • 发布:.Net培训
  • 来源:网络

前端PS技巧有两大类:1 测量和取色 2 切图 1不用说,开发需要2,切图其实也是必备,说实话当我一开始知道前端需要自己切图的时候,我的内心是抗拒,但是后来我慢慢的发现,我是幸运的,切图真的是前端必会的技能。为啥呢,因为我们是前端,所以我们更清楚自己需要什么的图片。而且如果他们没有切出我们想要的图片或者有什么简单的改动,我们还得和UI沟通,改动,传文件,不仅效率低,而且神麻烦。你永远不知道一个项目会有多少改动,说多了都是泪,所以学会了切图,这都不是事儿!let's go.

1 下载工具PS

2 设置工具

打开PS首先准备我们需要的工具,PS博大精深,我们只需要用切图需要的工具就OK了。我们需要的一般有以下这些:

1 左边和上面的菜单栏:确定是存在的

2 信息面板:窗口--信息--右上角鼠标右键找到面板选项---标尺的单位改成像素

3 历史记录:窗口--历史记录(当我们有错误时,可以通过历史记录直接回到某个位置)

4 图层 :窗口--图层

5 标尺: 先打开一张图片(有图片标识才能用),找到视图--标尺 ,标尺可以拉出参考线,帮助我们切图 。

6 建立工作区: 窗口--工作区--新建工作区--起名字--保存工作区(保存工作区就是保存当前你对PS软件的设置,即使你关闭了PS软件,再打开还是你的设置,工作区可以建立多个)

我的设置如下图:

3 测量和取色

【测量宽高】工具:参考线,矩形选框,信息面板。

1 从标尺上拉出参考线(在标尺上按住鼠标左键不松往你想要地方拉,就会出现一根线,上下左右都可以,也可以不拉,拉了会更精确些,选框会自动吸附到参考线上)

2 找到矩形选框(切图一般都用矩形选框,没用过别的,选中你要测量的地方,选中的时候你可以看两个地方:1 鼠标位置有显示宽高 2 信息面板也有显示。不过当你松开鼠标,就只有信息面板有显示信息了,如下。

【取色】:取色器+吸管工具

1 点击取色器,会出现一个面板,这个时候把鼠标放在图片上会发现自动变成了吸管工具,不用专门去找,然后点击你想要取的颜色,面板上就出现你想要的信息。

(还可以用取色器检查你的按钮或者背景是不是是纯色)

【文字的测量和取色】:文字工具( 文字比较特别直接用宽高量可能量不准,所以优先用文字工具)

1 找到文字工具,点击你想要测量的文字,图层那边会自动移到文字图层的位置,看菜单上面,有你想要的字体大小和颜色以及字体的类型。

2 有可能你的文字不是单独的图层,这个时候就只能用选框和取色器测量了。

3 有可能你发现你看到的文字和你测出来的不一样,那就是文字图层加了别的效果,这个时候还是用取色器取。

4 切图 :切片工具

1 确定需要切的图(有的图是上线的时候从后端加载过来的,所以不用切)。

2 可以用iconfont图标的就用,不能用的小图标就用CSS sprite.

3 能弄出来就不要切图,图片影响加载速度。

4 切片工具--你要切的图--图层面板中,关掉不需要的元素----用切片工具选中图--导出切片(快捷键alt+shift+ctrl+s )或者(文件--脚本--存储为web所用格式)

5 选择图片要以哪种格式存储了,不同的格式会影响图片的质量和大小,自然也会影响到就加载速度,这里我推荐我最近读的不错的一篇文章,看完保证你收获满满: jpg,png等图片的区别

5 常用快捷键(快捷键是开发效率必备利器,多多练习)

放大/缩小:Alt+鼠标滚轮

拖动图片:长按空格键,鼠标会变成小手即可拖拽图片

取消选框:ctrl+D

选择图层: 1 移动工具: 1 勾选上方菜单自动选择和选择组/图层。这个时候点击图片任意位置,右边会自动切换到相对应的图层或者组。

2 在图片上选中某个图层:ctrl+鼠标右键。

导出切片:alt+shift+ctrl+s (文件--脚本--存储为web所用格式)

隐藏参考线:ctrl+h

复制文件:ctrl+c

新建文件:ctrl+N

粘贴文件:ctrl+v

关于切图,也是件麻烦事,现在出了很多切图,标注能插件也很方便,大家可以看这篇文章 解放你的双手(顺便说下,很多工具都是最新的

PS版本才支持,所以要去下载对应的,本人还未实践)

上一篇:程序员在 2017 年要面对的 7 种改变
下一篇:程序员薪酬大调查:学哪种语言最赚钱?
选择城市和中心
贵州省

广西省

海南省