实用:前端小白的切图技巧
我一开始是不会切图的,面试的时候心里也没有底气,但是之前也知道一点切图的知识,只是没有那种疯狂的天天做切图,所以一直也不敢说自己会熟练的切图,经过近一个月的切图经历之后,今天来分享一下纯纯的小白切图基础。
切图工具Photoshop
安装好PS之后,先要调整工作区域的布局。
1.选择“窗口”——把“信息”,“属性”,”字符”,“段落”,“图层”,“历史记录”面板打开,其他的可以先关闭了,在切图的工作中其他的基本用不到。如下图所示:
2.调整好面板之后,选择“窗口”——“工作区”——“新建工作区”,将当前的工作布局保存起来,并命个名,之后下次打开的时候就会直接出现你调整好的工作布局,而不会重置。就算有别人弄乱了你的面板也可以直接通过“窗口”——“工作区”——选择你之前保存的工作布局。
文字
1.各方面字体颜色一定要通过PSD文件选中图层来确定,不能直接在图片上选取颜色。可以通过文字工具选中然后看信息板上的信息。或者直接双击文字图层前面的图标“T”,便能将文字全部选中,可以查看文字基本信息及复制粘贴文本内容。
2.字体的加粗,要看三方面,看字符加粗,字体大小,字间距。浑厚要加粗,锐利不需要,字体大小一定要看清楚。
图片
1.切图一定要拉参考线,计算精确的像素大小(现在发现一个快速测量的办法,因为设计师一般也是以整数为主,所以用矩形选框工具一拉,就能看到大小,误差几个像素一本都能猜到)
2.小图标,如果有蒙版可以新建图层合并来处理,创建sprit图,可以拉好参考线,自己清楚像素大小,不要有白边。
3.保存图片时,PNG用24,JPG用品质非常高(80)。
4.文件中只有一个图层,(需要先复制图层新建文件)单独图层选择裁切就可以按图层实际大小来保存,主要在有阴影效果的图层实用。
5.上面的情况也可以先将图层转化为智能对象然后选择整个图层,用选框工具选中图层,再新建文件(ctrl+n),这时可以看到新建的文件的大小是按该图层的实际大小的新建的,最后ctrl+v就可以将图层复制到新文件中,保存即可。
6.如何知道矩形圆角半径(选中图层–选择圆角矩形工具–在工作区上方会有显示半径及具体的矩形大小,不用去猜了,不过经过实践,发现上面显示的半径会太大,不如猜的一般5px更符合实际大小)
快捷键
1.选中图层用ctrl+鼠标左键,快捷键(文字T,移动V,吸管I,矩形选框M,),按住h,同时移动鼠标可以快速选择相应区域并局部放大。
2.ctrl+ +放大 -缩小
3.ctrl+r出现标尺
4.ctrl+h隐藏所有的参考线
5.v鼠标移动工具,h,鼠标移动文件,t文字工具,i吸管工具
其他
1.自动化切图,文件–脚本–图层保存为文件(这个时候要注意之前的保存为web格式文件时是保存了所有切片,而不是仅用户切片,不然会导致一直搜索过滤图层,半天没反应,而且一直谭警告窗,要一直点)
一般网站文件目录
PSD切图(项目文件目录)
project:
-admin(后台)
-static(所有资源)
-css(所有子文件都可以分子文件夹,方便管理,层级不建议太多)common.css/reset.css/yemian.css
-images(可以按页面主题来)
-js(预定义的,引入的,common.js)
-font
-pulgs
-前台页面
-其他单独文件
学习web前端(系统课程,项目实战,就业指导,快速就业)到知海匠库http://www.zhihaijiangku.com
转载于:https://www.cnblogs.com/zhilelele/p/8493528.html
实用:前端小白的切图技巧相关推荐
- 写给前端小白的切图技巧(实用)
我一开始是不会切图的,面试的时候心里也没有底气,但是之前也知道一点切图的知识,只是没有那种疯狂的天天做切图,所以一直也不敢说自己会熟练的切图,经过近一个月的切图经历之后,今天来分享一下纯纯的小白切图基 ...
- 实用形ps切图技巧,图片格式及其相关
写在前面 之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...
- 【学习笔记】前端开发调试工具与PS切图技巧
[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理 ...
- Photoshop快速切图技巧
作为一名前端开发,"切图"是必不可少的工作.在切图这种"低级"工作中,除了向设计师学习各种复杂技能,有没有一种低门槛.高效率的切图方式呢?今天就让博主这个从小就 ...
- web切图怎么做_web前端人员自行切图教程
web前端人员自行切图教程 发布时间:2018-10-18 09:01, 浏览次数:360 , 标签: web Web前端切图总结: * 前期资料准备阶段: * 获取最终版 PSD格式文件. * 安装 ...
- 搭建直播平台前端界面初步切图
搭建直播平台前端界面初步切图 我们先来看下初步的成果图 首页 直播房间页 搭建直播平台前端界面初步切图帅气的小伙伴们,有发现什么共同的特点了吗? 没错,就是它们的头部导航栏都是一样的,而vue中一个很 ...
- 超全面的前端切图技巧,读这篇就够了
工欲善其事,必先利其器! 相信每个前端都经历过用PS手动切图的原始手法,有时候偷懒,还会直接用QQ截图,现在想想真是初生牛犊不怕虎,怎么方便怎么来~ 当时就在想,如果能有一款神器,帮我解放切图这种&q ...
- web前端人员自行切图教程
Web前端切图总结: 前期资料准备阶段: 获取最终版 PSD格式文件. 安装PS软件,并打开该PSD文件. 获取页面设计需求文档或工单文件,了解需求后,开始准备进行切图. 用到的快捷键总结及常识知识: ...
- ps切图后 JAVA开发_photoshop操作之前端PS操作切图和合并sprite
今天给大家介绍一下关于前端相关PS操作之切图和合并sprite,首先给那些已经学习完HTML/CSS基础知识,想模仿做一个静态页面,但缺少对ps了解的新手同学,那么下面我们一起来看一下吧. 一.准备工 ...
最新文章
- Eclipse执行import命令导入maven项目时报错:Add a version or custom suffix using Name template in Advanced set...
- iOS UUID配合keychain的替换方案实现
- 天天说常识推理,究竟常识是什么?
- 浅谈云计算三个层次SaaS/PaaS/IaaS
- 【设计模式】第四章 工厂模式
- 【Flink】Flink连接prometheus报错 IOException :Response code formxxx/metrics/job/rule
- 系统相机裁剪比例_从照相到摄影你只差这5个技巧!人像裁剪这4大原则你一定要了解...
- LeetCode(860)——柠檬水找零(JavaScript)
- android调试+及JNI相关
- OVM 免费虚拟化软件迭代时间调整,提高产品稳定性!
- 阳光沙滩博客系统后端api
- mysql修改时间为东八区,mysql时区设置为东八区
- Java汉字按照拼音排序
- java杨辉三角奇数_杨辉三角中的奇数与偶数
- 《个人助手》新模块——数据手袋
- 如何实现在退休时有足够的钱供老年任性花费?(复利年金通胀综合案例)
- Upload java coed in Ubuntu(在Linux 16上,上传代码)
- day06 代码实现邮件自动发送
- 树莓派利用python控制57步进电机
- 【面试题】8.Redis相关