❶ 给设计图做切图的详细方法
我用的摹客的PS插件，很快就能完成UI标注和切图，大概步骤如下：
1.安装摹客的PS插件，安装好之后在PS的“窗口>扩展功能”找到摹客插件，选择并打开：
用摹客切图，还支持：
1. 切图压缩：在右侧面板中选中切图
2. 切换平台和选择倍率：iOS、Android、Web
3.自定义切图尺寸
❷ web网页界面如何给前端标注，切图
1、开发经常用到的格式： PNG、SVG、JPG、PDF、WebP
2、我们内部团队实用的是蓝湖，一键压缩切图，告别了二次加工，高效。
❸ web前端 ps切图很深奥吗为什么看教程很简单，但是有些资料说的很高大上
我的威T062929
❹ 网站前端切图是什么意思，主要做什么
我们做网站的时候是要根据程序化来进行实现的，特别是做一个精品网站的时候，首先第一步就是设计网站，网站设计好之后即是切图，切图完就要加入div+css实现效果图，以及flash动画等功能了，切图完成之后才到下一步开发程序，这就是从前端的设计、切图到网站程序开发的一个过程。
网站的好坏，前端很重要，这是我们重视的一部分，前段必须把div+css做好，不能有多余的代码程序在里面，前端要是没有做好，往后的程序很影响seo的推广，这是很多企业做网站的时候忽略掉的问题，我们应该一手抓，俗话说的好，赢在起跑线上，只有系统化的前端div+css，设计，切图功能实现之后才有后面的程序制作，很多网站前端div+css做的乱七八糟的，不说兼容性行不行了，就是网络蜘蛛来获取页面的时候都很排斥的，所以说，切图是一个精品网站必备的，重中之重，不可忽视。
我们经过美工的设计页面，从每一张图片的整合到功能的实现都是切图来做的，切图人员必须具备有细心的品性，要严格要求每一步的到位，否则将会给后面的程序带来麻烦，一个精品网站的建设是要分为四个大的步骤进行的
第一、网站设计
第二、网站切图+div+css+功能美化
第三、网站程序制作
第四、后台的调用
❺ 关于Web表单设计的经验分享
表单在UI设计中的出现场景还是比较多的，尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计，就想把自己学到的一些关于表单设计的知识点分享给大家～
一、什么是表单？
表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情，体验差，导致信息采集不成功甚至带来利益的损失。
二、表单的构成
表单通常由标签、输入域、操作按钮、这三部分构成。
标签
标签我们可以把它理解为标题，告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。
标签按所填信息的必要性分为必填项和非必填项，一般我们会在必填项的标签内容加上＊号。＊号的的摆放位置有下面两种情况：
1.当标签与输入域居中对齐时，建议把＊号放在标签左侧。
因为＊号比较显目，用户往往第一眼会先看到它，然后按照用户从左往右的阅读习惯，视觉落点分别为文字标签、输入域。考虑到表单的填写效率，＊号位于左侧的表单阅读起来会更加顺畅。所以当标签与输入域居中对齐时，把＊号放在标签左侧会更好。
2.当标签与输入域左对齐时，建议把＊号放在标签右侧。
由于人们纵向的阅读习惯，视线会成F型。＊号在左侧还是在右侧并不会对用户视觉落脚点造成太多困扰，另外考虑到对齐的形式，＊号放在标签右侧会更好。
输入域
输入域是录入用户各种类型信息的重要交互区域。输入域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等等。
不知道这些输入域的区别的小伙伴可以去ant design官网学习一下，传送门：
https://ant.design/components/overview-cn/
因为输入域是录入信息很重要的交互区域，在设计时我们应该考虑用户输入的多种场景去设计。我们可以将用户的输入过程分为输入前、输入中、输入后。根据每一种场景中细化我们的设计。比如在输入中：我们要考虑光标的设计、输入文字信息的设计，信息提示等，在输入后：我们要考虑信息输入错误应该给予怎样的视觉反馈等。总之考虑得越细致，越能提高信息录入的成功率。
操作按钮
操作按钮是在用户填写完表单各项内容后，所要进行的操作动作，来完成或者结束当前操作流程。操作按钮分为全局操作按钮与局部操作按钮。全局操作按钮控制整个表单，比如提交、发送等操作按钮。局部操作按钮是对某一范围的内容起作用，比如编辑、删除操作。
三、表单设计常见问题
1.标签采用哪种对齐方式更好？
在我们的实际项目中，通常会因为文案的长短不一，导致我们不知道该采用哪种对齐方式。标签的处理原则就是要要尽量对齐，采用哪种对齐方式应考虑具体的制约因素和目标来定。
左对齐
当标签采用左对齐的方式的时，因为文字标签的长度不统一，导致标签与输入框的间距是不可控的。这就会造成设计的通用性不强，以及横向空间的浪费。
如果采用左对齐的形式，就要尽量去保持文字标签的长度一致，比如通过字距的调整让文字标签的长度保持一致或者通过留足留白空间，这样设计上会更统一。以为例，采取左对齐形式，但是它留足了文字标签与输入域之间的距离，让表单看上去更统一和谐，不足的就是造成了部分空间的浪费。
顶对齐
采用顶对齐的形式，会让标签和输入域垂直显示，纵向布局的信息呈现效果会更好，从而提高用户填写的效率。顶对齐因为垂直排布，会造成纵向空间的浪费，但在横空间上比较节省，比较适用于横向宽度较窄的页面。
▵顶对齐
右对齐
右对齐跟左对齐一样会因为标签长度不可控。导致设计的通用性不强，以及横向空间的浪费，但节约了纵向空间。
▵右对齐
在这几种对齐方式中，用户浏览信息的速率顶对齐>右对齐>左对齐。顶对齐形式适合简易表单、右对齐与左对齐表单适合复杂表单。
2.操作按钮应该用哪种设计形式比较好？
对于全局的操作按钮会用常规的按钮样式，全局按钮分为主按钮与次按钮。
主按钮
主按钮是界面中比较重要的功能操作按钮，比如提交、保存等一些正向的操作。主按钮在视觉层级上最高，能够引导用户很快的找到核心的操作并点击。主按钮通常是纯文本或图文结合的面性形式。图文结合的形式能吸引用户注意，也帮助用户理解该按钮的操作含义。
次按钮
次按钮的层级相对于主按钮层级要弱一些，通常采用线性形式。在一个页面中可以出现多个次按钮。
对于局部操作按钮的设计形式可以是文字按钮、图标按钮，也可以是图标＋文字的形式。至于应该应用哪种形式就要结合具体端场景去考虑。
图标按钮
图标按钮就是用图标来代表该操作的含义，能够直观的表达按钮的功能。在设计的时候我们需要注意图标是易于理解的、是用户熟悉的。图标按钮的设计通常都会配上悬浮框设计，也就是当用户鼠标停留在该图标按钮上会出现对该按钮的文字释义的悬浮框。以微信公众号为例，当鼠标停留在编辑图标那时会出现黑色的悬浮框对其进行解释，让用户理解此按钮的意义，让用户放心操作。
在web设计中，由于按钮的种类与使用场景比较多，建议局部的操作按钮使用线性图标，让它的层级相对其他按钮要弱化一些。
文字按钮
文字按钮通常出现在列表的操作项中。文字的颜色通常是品牌色或者蓝色，因为蓝色在用户的认知中通常是可点击的。
图标＋文字 按钮
图文结合的按钮相对于纯文字按钮会更加直观，也能更吸引用户注意。
3.输入框应该设计几种状态？
考虑的状态越多，设计就会越细，能够及时的反馈信息给用户，从而提高表单填写效率。在考虑输入框的设计状态时，遵循及时反馈的设计原则去考虑。
为了避免用户填写完所有信息后，才反馈有错误，会造成时间浪费，表单填写效率低。通常会把输入框线变成红色，同时出现红色的说明文案，来引起用户的注意。
▵及时反馈错误信息
在设计中我们还需要考虑自动校验的成功与警告状态。颜色通常为绿色与橙色。
输入框到底应该设计几种状态我们也需要根据我们表单的复杂情况去考虑，对于简单的表单设计过于细化的状态是没有必要的。
写在最后的话
表单设计看起来简单，但实际在设计过程中还是有大量的点值得我们去学习与研究的。在这次做表单的过程中，觉得作为设计师我们不应该去挑活，不要觉得表单设计是一个很小的设计就不动脑的照着别人的设计规范抄一遍。像这种看似枯燥但又很重要的模块设计，我们在前期开始设计之前可以从交互层去考虑，再从视觉层面去考虑怎样的表单设计能让用户填得舒心又高效。在看别人的设计规范比如ant design的组件规范时，我们可以去留意他们的设计细节，比如表单上下之间的间距留的是多少？有什么规律吗？按钮的上下边距与左右边距有什么关系吗？通过这些思考，然后去观察总结，并转化为自己的小技巧，到下一次设计表单的时候，我们就会做得很好了。
往期解析
UI设计－首页解析
详情页设计技法解析
轻松get文字标签设计技法
Get点9切图方法（内附切图神器）
❻ PS-前端切图教程（切jpg图和切png图）
转发自： PS-前端切图教程（切jpg图和切png图） - xing.org1^ - 博客园 (cnblogs.com)
———————-------------------------------------------------------------------- PS切图步骤说明 ————————————————————————————————
一共分两大项：切jpg图、切png图。
我用的是PS CC 版本，教程中用到的除了界面和摆放位置不一样外，其他应该和低版本的都一样了。
一、 切JPG图
1．打开ps导入图片的步骤是铁定的了
2．选择左边工具栏里的“切片工具”
事先自己没用过或上一次ps工具使用时没有使用过“切片工具”的，打开ps工具栏里默认是“裁剪工具”的图标
你可以鼠标左键点住“裁剪工具”不松手，他会在右边展开（我这是工具栏在ps界面左侧的情况下）这一组的所有工具，在里边选择“切片工具”即可
我图中之所以框选了两个工具，是因为后期还要用到“切片选择工具”，这里先认识一下他的位置在哪。
3．用“切片工具”切出想要的范围，框选范围就像平时用qq的截图工具一样。
如下，我需要这个小图标，我就框选了他。
框选中：
框选后：
如果你框选好了松开了鼠标，他还是这种黄色的边线，你把“切片工具”移到附近，他还能调整框的大小范围。
但是如果你框选了好几个了，想改前边已经框选好的：
像如上这样，要知道，ps切片工具最近一个选区的切片是用黄色框包裹的，其他前边切得都是蓝色边线，这时候你再用“切片工具”去调整蓝色边线的选区是动不了的。
这就要用上“切片选择工具”了
4．“切片选择工具”调整范围：
切片选择工具就在“切片工具”的下边，寻找方法见上解。点击选择要调整的切片蓝线，待其变成黄色后，调整范围。
切片选择工具只能选择并调节范围，不能切片。
5．切好后保存
保存方法：文件——存储为web所用格式【快捷键ctrl+shift+alt+s】
在弹出的【存储为web所用格式】对话框中，下拉选择框选择JPEG格式
按需求更改质量（低、中、高、非常高、最佳。这五个模式）
点击存储后弹出【将优化结果存储为】的对话框
选择存放位置、设置文件信息——
一般存储时，ps会自动建立一个images文件夹，你要找到刚才自己设定的位置中，找images文件夹，在她里边才有你刚才切好的图。
命名文件名
“格式“——仅限图像
在“切片”那里，可以选择是存储全部切片还是只存储选中的切片，
一般默认就存储全部切片就好了，有时候只需要一小块切片时，可以选择存储选中的切片，他会只保存一张你当前切得图，这样省的自己去一大堆切片中捡出来自己要用的了。
二、 切PNG图
切透明图的核心理念是，你要把不需要的背景图给隐藏掉，只让需要的留下来，底部背景变成像马赛克那样的样式。
1．打开ps拖进来你要切的psd或者tif文件，
一定得是带图层的。
2．先选择移动工具
3．并在顶部选项栏里勾选自动选择，
4．下拉框里选择图层
若没有选项栏或者图层栏的：
在菜单栏点击窗口——选项。打了对勾后就能调出工具对应的选项面板了。
5．然后用“移动工具”点击你不需要的背景图，ps会自动选中该背景所在的图层，
6．你在图层面板中，把对应这层的左边小眼睛关掉就好了，让背景图先隐藏起来。
有时候设计会有好几层，他为了光效或者其他效果做了好几层不同透明度的背景叠加在你要切的东西后边，
你就用移动工具（快捷键v【英文输入法下按v就可以锁定移动工具】）点击它然后关掉它，有几层就多做几步，直到你不需要的背景全部隐藏掉。
但是良心的设计一般会把背景都放到一个图层中，你找到一层背景，所有的都和他在一个组里边，你把组的小眼睛关掉即可
7．然后切片工具切出你要的那个图标
8．保存：文件-存储为web所用格式(ctrl+shift+alt+s)
9．选择png-8/png-24格式，看你对图标的要求了
PNG8”是指8位索引色位图，“PNG24”是24位索引色位图；
png8：
每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，
例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小；
png24：
每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多大1600万；
所以“png24”所展示的图片颜色会更丰富，图片的清晰度也会更好，图片质量更高，当然图片的大小也会相应增加，
所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片；
这是二者的区别，根据自己的需求选择吧。
10．然后就是一定要勾选透明度，其他默认设置就好。
Png-8的透明度位置
Png-24的透明度位置
11．”保存全部切片“或者“保存选中切片”
这里还要说明一个问题，有时候一个页面中，我用切片工具选出好几张png图标准备切，然后保存的时候也选择png格式都没问题，
但是到了选择保存位置这个对话框里，选择的是“保存所有切片“，
最后保存出来的图片，只有最后切得那张或者说切片工具选中的那张是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的图，还是建议，一张一张“保存选中切片”比较好。
或者你的图标与白色底差别大的话，你也可以不计较，让他保存成jpg后再去ps中魔棒抠图也好，不过这样比较麻烦不是。
有的说，背景图和图标每分图层咋办？那咋办？找设计吧。要不你自己选取工具扣吧，扣好了另存为png也是一种办法
三、 其他技巧 ：
1．Ctrl+ +号放大图片，
2．ctrl-缩小
3．按住空格，鼠标图标变成抓手工具，移动页面
四、重磅彩蛋！！！还有一个吊炸天的方法——针对单一小icon切成png的
“移动工具”点击图标，选中图标所在的图层；
右击该图层，选择“转换为智能对象”；（ps这时候没反应，不要大惊小怪，是你看不到而已）
接着再次在这个图层上，右击——“编辑内容”
对话框点击确定
ps就自动生成一个新的文件，只有那个icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有没有！
以下是图解：
这是点击一个小图标
选中图标后的图层面板
右键点击该图层选择“转换为智能对象”
没转换前的图层样式：
转换后的图层样式：
所以别说“我转换了ps没反应”这样的话了，是有的，你不仔细看看不到
接着再右击——“编辑内容”
点击“确定”
看，他就新建了一个“形状8”的页面，放的是我的png的小图标，
最后你保存为png也好，“存储为web所有格式”也好，自由发挥吧。
这个方法可能只能保存一个图标，
有的人说我好几个图：例如文字+图片都有咋弄？
那就切图呗！
那还要纠结的话那就合并图层吧！
❼ UI界面设计规范有哪些
一、字体
iOS的字体：
中文字体：苹方 / PingFang SC
CSS：Font-Family：PingFang SC
英文、数字：Helvetial
Andioid的字体：
中文字体：思源黑体 / Noto Sans Han
英文、数字：Roboto
二、规范
1、iPhone界面尺寸
三：小结
iPhone的主流设计尺寸：750x1334 px
1242x2208 px
Andioid的主流设计尺寸：720x1280 px
1080x1920 px
❽ UI设计师在完成界面设计后，切图都改切哪些
网页设计好后的切图是将设计稿切成便于制作成页面的图片，并完成html css布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具，把自己所需的切成一张张小图，然后用DIV CSS完成静态页面书写，完成CSS布局。
设计好的网页都需要切图，主流的是dreamweaver、photoshop软件，还有sketch、firework等，低端QQ切图，网页切图等。切图为后端编程者带来方便，提高效率，让网页稿有了交互性，实现平时看到的各种各样的功能，画面浏览速度快，有利于优化。
(8)web切图规范扩展阅读：
一般我们从设计师那得到的都是psd文件，里面有几十或者上百个图层，一般会根据内容分好文件夹，有文字有图片，有的只在特殊情况下显示的，这时候就需要根据自己的需要导出不同的图。
切图的时候也会有许多考虑，比如把哪些内容压缩成一张图片，什么时候用透明背景PNG，什么时候用CSS Sprite（把琐碎的小图比如按钮、logo复制到一张透明背景的图上然后保存为一张图，再用background position去提取。）文字是切成图片，还是复制到HTML里。
一般情况下都不会把文字切成图，除非用到比较特殊的字体或者变形等等，然后即使是photoshop保存为web格式导出的图，有时候尺寸也是很大的，特别是PNG，这时要使用一些专业压缩工具进行二次压缩。
当然有些有前端经验的设计师会把切好的图片发给你，这样就可以直接开始写HTML和CSS了，但是建议还是尽量自己切，掌握熟练的切图技巧也是一个前端应该有的技能。
参考资料来源：搜狗网络-切图
搜狗网络-静态页切图
❾ UI设计师如何进行切图
切图是设计师交付给开发的产物之一，设计稿完成后，设计师需要将其切成便于制作成页面的图片。设计师切图时就需要用到切图工具，比如摹客，可以自动切图（支持Sketch、Adobe XD、PS的设计稿），设计师只需在设计稿上进行切图标记，上传至摹客即可，无需手动，开发可以自主下载和使用。
如何切图？其实很简单：（以PS切图为例）
Step 1.安装并打开插件
插件安装好后打开PS，在“窗口>扩展功能”找到摹客 插件，选择并打开。使用摹客平台账号登录。
Step 2.标记切图
在完成的设计稿上，选中需要切图的图层或编组，点击“标记切图”。将在名称前增加“-e-”，“标记切图”变为“取消切图标记”，则标记切图完成。
Step 3.上传至摹客
标记切图后，一键将设计稿上传至云端项目中，开发工程师就可以自主下载切图，只需在右侧面板中选中切图，点击即可下载。
除了自动切图，还有更多亮点功能：
1. 切图压缩：在右侧面板中选中切图
2. 切换平台和选择倍率：iOS、Android、Web
3. 下载选中切图，一步到位。
摹客还支持Sketch、Adobe XD的自动切图，下载插件即可：
下载地址：
摹客：https://www.mockplus.cn/download/idoc-ps/?hmsr=
Sketch：https://www.mockplus.cn/download/idoc-sketch
adobe XD：https://www.mockplus.cn/download/idoc-xd