奢侈品商城网站建设方案,网站留住访客,做网站便宜还是app便宜,pageadmin模板制作教程前言#xff1a;当设计师通过photoshop工具设计完设计稿导出psd文件时#xff0c;我们前端工程师该如何进行切图转换成网页的所需的图片呢#xff0c;接下来讲讲如何利用photoshop工具快速简洁的切图#xff0c;因为ps工具用到的行业很多#xff0c;涉及到的各个行业…前言当设计师通过photoshop工具设计完设计稿导出psd文件时我们前端工程师该如何进行切图转换成网页的所需的图片呢接下来讲讲如何利用photoshop工具快速简洁的切图因为ps工具用到的行业很多涉及到的各个行业所以有一些快捷的面板可以隐藏掉。前端工程师只显示适合面板和元素就可以了。 目标自己能够使用photoshop从设计师提供的psd中获取网页前端开发过程中所需要的资源 一首先先了解大致了解一下当前流行的设计稿尺寸以及工具如下对应表 渠道UI 设计工具 基础尺寸 app安卓 sketch 720px 微信IOS sketch,ps 640px pc ps 1920px,1600px.1024px.. 基于Photoshop设计会输出psd文件用ps进行切图 。 二ps切图原则 前端网页切图应用尺寸单位一般px像素RGB的颜色模式,屏幕显示一般是RGB 三ps合适的预设 文件-新建--初始化预设设置1920x200072分辨率8位色图背景透明色 然后保存起来。后续可以选择新建模版视图/显示/智能参考线以及视图/字符这两个都要选上编辑/首选项/单位与标尺【标尺像素文字像素其他默认不用改动】 ps界面中有菜单栏、属性栏、工具栏、面板、工作区 面板选择图层、历史记录、信息、字符. 这四个点击信息面板那一个小三角打开面板选项/标尺单位像素两个像素模式RGB颜色文档尺寸选上然后确定信息面板坐标改为像素颜色改为RGB。比如面板显示信息当我们点击该图片时对应的信息高宽等都可以直接显示。很方便 加上辅助智能参考线标尺等首选项设置为像素 四前端切图快捷工具 1:ctrl 隐藏参考线 显示参考线 2:导出切片altshiftctrls文件-存储为web所用格式 3:移动工具任何时候按v就可以回到移动工具 4:移动工具快捷键v 5:选框工具快捷键m 五推荐的压缩图片网站 png 图片推荐用tinypng压缩超级无损。 https://tinypng.com/ ?结束。thx.若有不懂可以联系本文作者我啦。 转载于:https://www.cnblogs.com/susuila/p/6021930.html
