做前端开发的需不需要PS

记得在之前的老东家做某一个系统开发,当时正在做界面开发,发现界面还需要添加几个图标,于是把这个需求反馈给了项目经理。过了十几分钟,项目经理跑过来告诉我:产品部的UI设计人员(当时我们的UI设计人员全部调整到产品部)需要向他们产品经理汇报这个任务,你在邮件里边简单描述下你的图标需求然后发送给产品经理再抄送给我和UI设计人员。我听了当时蛋碎满地,几个图标设计不到半个小时的事情,非搞得花上一天时间才搞完!经过这蛋碎的经历,我觉得对于一个做界面的开发人员来说,懂些PS技术还是有必要,一方面提升开发效率,另一方面做出来的界面也更好看(当然,会点PS技术,有时候还可以帮美女PP图)。下图就是使用PS的“历史记录画笔工具”以及“滤镜“->”模糊”下的高斯模糊功能实现的。

前端开发需要的PS技能是切图

本来打算一篇内容把常用工具和切图一起分享,但为了直观展示操作,本篇内容添加了很多图片,所以已经容纳不了切图功能的介绍。切图功能的介绍还是再开一篇单独介绍吧。本篇主要介绍PS的常用配置以及工具栏中经常使用的几个工具。最后还介绍了PS使用过程中的几个小技巧。

PS之前的准备工作

1.关闭不必要的窗口。打开PhotoShop,在开始P图或者切图之前,通常我们需要关闭不必要的窗口,仅仅保留在切图过程中用到的窗口。窗口的打开或关闭都可通过“窗口”菜单控制。一般网页设计需要用到的几个窗口是:信息、字符、图层、历史记录。

2.设置面板信息。有些时候我们在移动鼠标或者选择区域时,想知道鼠标位置或者选择区域的大小。选中“信息”窗口,打开“面板选项…”。

设置面板的第一颜色信息、第二颜色信息的模式为“RGB”颜色,设置鼠标坐标的标尺单位为“像素”,勾选“文档尺寸”,这些设置后面都会用到。设置完成后,我们用“选择工具”在工作区选择一个区域,信息窗口中就显示了鼠标的坐标、区域的长和宽、以及RGB颜色。

3.设置单位与标尺。选择菜单“编辑”->“首选项”->“单位与标尺”,把标尺、文字单位都改为像素。

4.智能参考线和标尺。打开“视图”->“显示” 菜单,勾选“智能参考线”。选中“视图”菜单,勾选“标尺”(ctr+R)。

5.保存工作区。界面菜单设置后,我们肯定不希望第二次打开还得重新设置。打开菜单”窗口“->”工作区“->”新建工作区“,新建一个工作区域。下次再设计切图时可直接使用新建的工作区。

常用工具

1.选择工具(快捷键M)。在工具栏中选中“选择工具”,在图层上选择一个区域,然后右键点击选中区域,选择”填充…“,弹出填充窗口,我们可以使用前景色、背景色或者其他颜色填充选择区域。

选择工具包含有矩形、椭圆、单行、单列选取工具。选择了“选择区域”工具后,上面菜单多了几个按钮,分别表示区域叠加、减消、区域交集。这几个按钮实现不同的选取功能,都可以使用快捷键Shift(叠加)和Alt键(减消)。如果是画椭圆和矩形,按住shift键时可画正方形和圆。但必须先放开鼠标左键,再放shift键才能画成功。

2.套索工具(L)。包含套索工具、多边形套索工具、磁性套索工具。功能使用和“选择工具”相似。选择了一个区域后,可按Shift键叠加新的区域。按Alt减减去某些区域。

3.快速选择工具(W)。包含“快速选择工具”和“模板工具”。功能使用和“选择工具”相似。选择了一个区域后,可按Shift键叠加新的区域。按Alt减减去某些区域。

4.选择工具、套索工具、快速选择工具的内容填充。前面介绍的选择区域、套索工具、快速选择都是选择某个区域。区域选择后,可填充颜色。右键选择区域,选择“填充“菜单。弹出的界面选择”内容识别“。选择区域自动按周围的颜色填充。

5.裁剪工具。裁剪工具用于剪切出仅仅我们需要的内容。在使用其他的区域选择工具后,把菜单切换到裁剪工具,可直接裁剪之前选择的区域。

6.污点修复工具。包含污点修复工具和修补工具,污点修复工具自动取画笔周边的颜色进行融合,例如下图有一条黄色横线想去掉,可通过污点修复工具去掉。单击鼠标不放,从头拖到尾。修补工具,选择一个区域,用其他地方的内容填充。

一些小技巧

1.图层自动定位。在使用“移动工具”时,菜单栏多出了下面的“自动选择”和“图层(或者分组)”两个菜单。这两个菜单的功能类似于Visual Studio中的选中文件和解决方案目录文件的联动。右边的选项一般我们选择“图层”,而左边选项建议不勾选“自定选择”,在需要定位的时候按住Ctrl键,左键单击图像窗口的图片即可让“图层”窗口的图层自动定位。

2.前景色、背景色填充。前面介绍的几个选择工具,有些时候我们选择了一个区域想用前景色或者背景色填充,怎么办?photoshop为我们提供了填充快捷键,使用Alt+Delete填充前景色,使用Ctrl+Delete前冲背景色。

3.调整图形尺寸。如要调整一个圆的尺寸,我们知道可以使用Ctrl+T,自由变换尺寸。但有些同学不知道怎样以圆心为中心点调整,其实很简单,按住Shift+Alt键,再拖动圆形。这样图形的调整就是按照圆心调整。另外, 如果我们想画正方形或者圆,在画图之前按住Shift就可画出正方形或者圆。

做一个会使用PS的前端开发的更多相关文章

  1. 三、Brackets:一个好用的Web前端开发编辑器

    前言 如果你以前在使用 Dreamweaver 或 Zendstudio 编写HTML,CSS代码,那么你可以尝试使用这个编辑器.他的界面简洁,舒服. 介绍 免费.开源.跨平台的前端开发环境(只是前端 ...

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

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  3. 前端开发利器webStorm

    这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim ...

  4. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  5. 学web前端开发有前途吗

    web前端开发现在如此火爆,可以说是引领了IT培训行业的一个潮流,那么web前端开发都要学些什么知识呢?为什么这么火有前途吗?现在行业很需要这种人才吗?还是大家盲目跟风,随大流,下面小编对web前端做 ...

  6. PC端和移动端在前端开发上的一些区别,前端里移动端到底比pc端多哪些知识

    (1)———————— 前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何?我做过几年的web前端开发,就简单谈谈自己的感受吧.首先来看看PC端和移动端在前端开发上的一些区别: ( ...

  7. AngularJS + CoffeeScript 前端开发环境配置详解

    AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...

  8. 极客Web前端开发资源大荟萃#001

    每周极客都将总结本周最精彩的素材提供给大家,希望可以带给你更多地灵感和帮助!极客#GB课程库#现已上线,无论你是初级.中级.还是正在进修的高级前端工程师.这里都将帮助你得到更多更高效的学习.原文:极客 ...

  9. Visual Studio 2015 前端开发工作流

    Visual Studio 2015 CTP 5,全称为 Visual Studio 2015 Community Technology Preview 5,意为社区技术预览版,之前的版本为:Visu ...

随机推荐

  1. Android内存泄漏分享

    内容概述 内存泄漏和内存管理相关基础. Android中的内存使用. 内存分析工具和实践. 以下内容不考虑非引用类型的数据,或者将其等同为对应的引用类型看待--一切皆对象. 内存泄漏概念 不再使用的对 ...

  2. Expert 诊断优化系列------------------冤枉磁盘了

    现在很多用户被数据库的慢的问题所困扰,又苦于花钱请一个专业的DBA成本太高.软件维护人员对数据库的了解又不是那么深入,所以导致问题迟迟不能解决,或只能暂时解决不能得到根治.开发人员解决数据问题基本又是 ...

  3. 剑指Offer面试题:25.二叉搜索树与双向链表

    一.题目:二叉搜索树与双向链表 题目:输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向.比如输入下图中左边的二叉搜索树,则输出转换之后的 ...

  4. 【Java并发编程实战】-----“J.U.C”:锁,lock

    在java中有两种方法实现锁机制,一种是在前一篇博客中([java7并发编程实战]-----线程同步机制:synchronized)介绍的synchronized,而另一种是比synchronized ...

  5. springboot之HelloWorld

    简介 为了简化开发Spring的复杂度,Spring提供了SpringBoot可以快速开发一个应用,这里就简单介绍下SpringBoot如何快速开发一个J2EE应用 HelloWorld 首先在gra ...

  6. [CORS:跨域资源共享] 同源策略与JSONP

    Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...

  7. rem单位和em单位的使用

    今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧! 一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智. 接下来就是rem ...

  8. iOS-大神们的博客收集

    唐巧的技术博客 http://blog.devtang.comOneV's Den http://onevcat.com破船之家 http://beyondvincent.comNSHipster h ...

  9. jQuery 2.0.3 源码分析 事件体系结构

    那么jQuery事件处理机制能帮我们处理那些问题? 毋容置疑首先要解决浏览器事件兼容问题 可以在一个事件类型上添加多个事件处理函数,可以一次添加多个事件类型的事件处理函数 提供了常用事件的便捷方法 支 ...

  10. php继承多态

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...