PS for 前端

逆熵柯里化
• 阅读 1873

前提

之前真的对PS一点都不懂,因为上一周突然被仍了一份psd文档,让我根据那份psd文件写一个web页面和一个移动端页面。当时因为时间紧急,只能求助公司的设计同事。但是我相信很多公司前端是根据psd来开发的。所以,简单的切图还是要会的。

界面设置

1、菜单 -》视图 -》勾选【标尺】& 【显示 -》智能参考线】
2、菜单 -》窗口 -》选择(图层、字符、信息、历史记录),一些默认打开的面板,可以通过鼠标右键点击关闭。
2.1、设置信息面板:
切换到信息面板 -》点击 -》选择面板选项
PS for 前端

第一颜色模式、第二颜色模式选择【RGB颜色】、标尺单位选择【像素】、勾选文档尺寸、保存。
PS for 前端

3、菜单 -》编辑 -》首选项 -》单位与标尺 -》把标尺和文字的单位均改成【像素】
PS for 前端

4、菜单 -》窗口 -》工作区 -》新建工作区 -》保存,这样一来就不用每次都设置一遍。在PS右上角,可以去切换工作区。

PS for 前端

定位图层

1、选择移动工具 -》勾选自动选择 -》选择图层 (如下图)-》点击psd文件 (如下图)
PS for 前端      
PS for 前端

除了图层选项,还有组选项。
选了图层,会定位到点击点所在的图层;选了组,会定位到点击点所在图层所在的组。

2、选择移动工具 -》不勾选自动选择 -》选择图层 (如下图)-》按住ctrl去点击psd文件
注意:如果没有勾选自动选择的话,单用移动工具点击psd文件,不能定位到点击点对应的图层或组。

3、图层和组的关系:
组包含图层,一个psd文件可能包含很多图层,为了便于管理,会将一些相关性强的图层包含进一个组。

快捷键

隐藏/显示参考线:ctrl + ;
增加垂直/水平参考线:鼠标移动到垂直或水平方向上的标尺,按住左键分别拉取垂直和水平方向上的参考线
放大/缩小psd:ctrl + +,ctrl + -

切图

前端开发人员需要的切图技巧一
前端开发人员需要的切图技巧二
前端开发人员需要的切图技巧三
切图视频

点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
4年前
前端面试之常见手写代码
为什么要写这类文章作为一个程序员,代码能力毋庸置疑是非常非常重要的,就像现在为什么大厂面试基本都问什么API怎么实现可见其重要性。我想说的是居然手写这么重要,那我们就必须掌握它,所以文章标题用了死磕,一点也不过分,也希望不被认为是标题党。作为一个普通前端,我是真的写不出PromiseA规范,但是没关系,我们可以站在巨人的肩膀上,要相信我们现在要走
Easter79 Easter79
3年前
sql中join的理解
前言为什么会突然写这个blog呢?因为之前有只青蛙小姐姐问我,能不能教她join,当时上大学老师怎么教她也不会。然后本来想面对面交流给她说明,后面阴错阳差,就延误到了现在。所以我想,我可以提前准备好我想说的东西,记录下来,顺便自己也回忆下join(ps:为什么我需要回忆?因为之前的公司都是面向互联网的、高并发的业务,用join的话,很容易导致数
Wesley13 Wesley13
3年前
NGINX 设置缓存时间
设置缓存原因一般的web项目,如果是前后不分离,采用模板生成页面的话,可以灵活控制js,css等静态文件的版本号。来避免浏览器缓存的问题但是目前是前后分离了,虽然前端发版都每次指定了版本号,但是发现有时候发版的时候,还是因为浏览器缓存导致了查看页面有时候出点小问题。因此为了避免浏览器缓存可能导致的问题,因此严谨一点NGIN
Stella981 Stella981
3年前
CSS从大图中抠取小图完整教程(background
相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上。起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片素材不会利用,只能用ps切图,切成单个的再用。。。其实,这是一个非常简单的技术,就是因为想象的太难了,才一直找不到问题的关键。要想实现CSS抠图,只需要用到一个属性:bac
Wesley13 Wesley13
3年前
MySql+Socket 完成数据库的增查Demo
     需求:利用MySql数据库结合前端技术完成用户的注册(要求不使用Web服务技术),所以Demo采用Socket技术实现Web通信.第一部分:数据库创建数据库采用mysql5.7.18,数据库名称为MyUser,内部有一张表user.字段有Id,UserName,Psd,Tel!(https://oscimg.o
Stella981 Stella981
3年前
NodeJs学习一NodeJs初识
一、前言按照惯例,先扯淡,就因为这货,现在才有了各大公司招聘的全栈工程师,正是因为它,让以前只会写前端的人也能写起后端服务器代码来了。所以呢,你招一个会NodeJs的前端,它都能把后端干了,一个人干了两个人的事,你说哪个公司不想要。但是我还是要同情一下前端的兄弟们,真是苦了你们了,以前你们只是写页面就完了,现在还得写后台,再加上各种前端框架,什么
Wesley13 Wesley13
3年前
Java后端学习路线
自学/学习路线这样的一期我想写很久了,因为一直想写的全一点硬核一点所以拖到了现在,我相信这一期对不管是还在学校还是已经工作的同学都有所帮助,不管是前端还是后端我都墙裂建议大家看完,因为这样会让你对你所工作的互联网领域相关技术栈有个初步的了解。你们也知道敖丙我是个创作鬼才,常规的切入点也不是我的风格,我毕业后主要接触的都是电商领域,所以这一期我把目前所了解
Stella981 Stella981
3年前
Sketch 和 PS中的设计图如何实现“自动切图”?
切图是很多UI设计师的一项日常工作。平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成htmlcss布局的静态页面,有利于交互,形成良好的视觉感。但有的认为前端自己会切图是最好,不建议把切图的事情丢给设计师做。这样中途会损耗结构讲解的开销(比如网页层级,细节重构方案等),毕竟最后css是前端去码,怎么切最合适要自己
Wesley13 Wesley13
3年前
MongoDB聚合查询
ps:以前都在iteye写博文,现在工作换了,转战前端,基本告别了java和python,看这边氛围还不错,就把那里的博客迁移过来了~~~出于对性能的要求,公司希望把Mysql的数据迁移到MongoDB上,于是我开始学习Mongo的一些CRUD操作,由于第一次接触NoSQL,还是有点不习惯。先吐个槽,公司的Mongo版本是2.6.4,而用的jav
Wesley13 Wesley13
3年前
Android中对应用程序的行为拦截实现方式概要
这次是真的好长时间都没有写博客了,主要不是因为工作上的事,主要还是这个问题真的有点复杂,实现起来有点麻烦,所以研究了很长时间(大约有一个月的时间)。但是幸好最后问题搞定了~~一、问题场景想实现360手机卫士那样可以拦截应用请求系统的一些权限(比如:位置信息,通讯录等)二、目的公司开发的app需要使用音频权限,但是总是被360那样的安全管家所拦
【万字长文】前端性能优化实践 | 京东云技术团队
从一个假死页面引发的思考:作为前端开发,除了要攻克页面难点,也要有更深的自我目标,性能优化是自我提升中很重要的一环;在前端开发中,会偶遇到页面假死的现象,是因为当js有大量计算时,会造成UI阻塞,出现界面卡顿、掉帧等情况,严重时会出现页面卡死的情况;