【前端GUI】—— 前端设计稿切图通用性标准

最新推荐文章于 2022-03-17 19:16:07 发布
最新推荐文章于 2022-03-17 19:16:07 发布
阅读量937 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34235864/article/details/86151694
版权
本文总结了前端设计稿切图的通用性标准，包括切图资源尺寸需为双数，LOGO切图为方形，同一类型图片尺寸一致，动效图层处理方式等，旨在提升设计稿到前端实现的效率和准确性。
摘要由CSDN通过智能技术生成

【前端GUI】—— 前端设计稿切图通用性标准

前言：公司在前端组和视觉组交接设计稿切图的时候，总会因为视觉组同事们对前端的实现原理不清楚而出现各种问题，在用的时候还得再次返工，前端组同事们一致觉得应该出一份《设计稿切图通用性标准文件》，这里是我结合资料做出的一份总结。

   1、切图资源尺寸必须为双数

 

   2、LOGO类图片以方形切图输出

 

最低0.47元/天 解锁文章
柳柳Elena
关注
网页设计及切图规范
11-21
网页布局设计相关内容，颜色设计，设计及切图规范。常用技巧包括图片装饰（圆角，外发光，阴影，透明度 渐变，旋转，透视，等）。切图时注意事项， 图片格式选择等。
c1c1开发小组——自编辑词典前端代码.zip
最新发布
04-18
前端开发：根据设计稿进行页面切图，将页面的设计转化为代码，然后使用HTML、CSS和JavaScript等技术语言进行页面的搭建和开发，同时关注页面的交互效果、动画效果等。 前端测试：测试页面的兼容性、响应式布局、用户...
前端ui设计稿
qq_27009517的博客
02-28 6149
每个设计师都有「像素级还原」的设计追求，我总结了工作几年还原设计稿的几点经验。全文10059字，阅读时长约21分钟。 前言 UI设计师作为展示产品形态的执行层。产品上线前走查视觉与交互还原是必经环节，设计师可能都遇到过一个问题，作图时连一像素的分割线都纠结好几次，但是开发完的效果却不尽人意，UI验收不通过。然后前端这边委屈的想拿出藏在键盘下的四十米大刀找你来血拼。。。 我们经常会听到身边的设计师与开发哥的一些对话，关于对齐，大小，间距等设计还原问题经常会讨论很久。甚至有时会觉得，几个像...
前端之设计稿二三事
Guan'Blog
06-22 1178
导语: 前端作为web项目开发流程中的一个环节，在实际开发过程中，必定要和ui/交互设计师进行沟通协调，以便保证设计稿能够完全代码化，并且是设计师希望的效果。所以，在这里我总结了一些前端开发需要注意的设计稿的一些东西。 目录 设计稿为750px的原理 常用中文字体英文名称 设计稿和代码化的区别 设计稿为750px的原理 很多前端都不知道为什么设计稿的宽要750，这次我就解释一下通用的说法。 手机像素其实是逻辑像素（pt），通常情况下，1pt=2px; 设计稿上面的单位一般都是物理像素（px），c.
超全面的切图规范指南
weixin_34417635的博客
01-08 1057
设计师的切图输出物是是体现一个设计师专业水准的重要标准，同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。 如何输出具有全局把控和细节专注的高段位切图，应该是所有设计师一直需要追求的能力。 设计切图的原则 设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中，首先应该保证切图输出...
前端设计规范
方糖的博客
01-10 1019
项目目录结构规范 JS代码规范 HTML代码规范 CSS代码规范 百度前端设计规范
前端切图要点
abcd2923的博客
06-07 221
前端切图要点 1.对于需要透明背景的小图标（如logo） 移动工具选取图层，Ctrl+左键点击缩略图（载入选区） Ctrl+C复制图层，Ctrl+N新建图层，其中背景颜色设为透明 Ctrl+V粘贴到新建图层，存储为web格式（Alt+Shift+Ctrl+S） 2.对于需要作为背景的大图片（如轮播图） 矩形工具测量图片大小，Ctrl+N新建图层 移动工具直接把图片拖到新建图层，选取自己想要的部分 3.对于不在一个图层上的小图标（如小工具logo） Ctrl+左键选中想要的图层，右键，点击转为智能对
前端AI切图小技巧(心得)
09-22
本文将详细介绍如何利用Adobe Illustrator (AI) 和 Photoshop (PS) 进行高效、精准的切图操作，帮助前端开发者更好地实现设计稿与网页之间的转换。 首先，我们要明白为什么在AI中进行切图不如在PS中方便。虽然AI是...
rem.js
jiao512的专栏
05-28 109
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWi...
静态网页源码+设计稿
06-26
初学前端时写的静态网页。HTML、CSS。内含网页的设计稿，源码。没有涉及到JS的哦~~设计稿是psd格式，可以顺便学一下切图哒~~(∩_∩)
UI设计师作品展示前端模板1tA.zip
08-31
UI设计师作品展示前端模板1tA.zip漂亮的前端后台静态代码，适合选用二次开发，bootstrap结构，自适应手机电脑，非常棒的代码。
网页设计PDF
02-13
网页设计的概述、流程介绍、风格介绍等等。
切图的一些规范和要求
11-22 246
1.相同的局部页面，DIV和CSS要完全一致，因为后台代码是引用关系。 (1).对于可能复用的DIV,宽度尽量自适应。 2.简化DIV结机构 (1).能够一层DIV，绝对不要用2层。 (2)菜单的当前状态，尽量在这种一层搞定，不要都加新类来表示当前状态。 (3)大部分clear可以采用: .clearfix:after {display:block;clear:both...
前端高度还原设计稿
浮游的博客
06-10 5056
以前前端都是拿到psd设计图，需要自己用ps切图，需要自己在psd上面一个个去量设计的大小和间距，而现在一般都是要求设计师把设计稿直接上传到蓝湖上面，通过蓝湖的标注来写出前端代码。要做到还原设计稿，主要要解决下面这三个问题： 元素大小 元素与元素之间的间距 元素在页面的位置 字体 元素大小 先关注设计图是PC还是移动端，移动端看设计稿是以375px为标准还是以750px宽为标准的设计稿，pc端基本上尺寸1440px，再来说下元素大小的问题，对于图片类的来说我们就要获取图片在蓝湖中的正确大小，这一般来说百
前端切图步骤图
热门推荐
weixin_40667613的博客
01-18 1万+
一、使用Photoshop打开设计稿，一般是psd文件。（图1） 图1 二、当有参考线时，先按ctrl+H隐藏参考线。（图2） 图2 三、先思考哪些需要切成png格式图片，哪些需要切成jpg格式。（图3-1、图3-2） ps：图3-1、图3-2圈出的是需要切成png格式的区域，一般png都是一些小图标，或者带透明度的图片 图3-1 图3-2 四、隐藏图层，便于切出png格式图片 1，步骤1：（...
前端切图系列教程
旅途
08-12 3798
前端切图系列教程 闲来无事，捣鼓捣鼓一下前端开发人员，如何利用UI设计提供的设计原稿psd文件，从中提取（切图）全部图标或者几个图标，在此贴下博友的佳作链接： 前端开发人员也要会的切图技巧(一) 前端开发人员也要会的切图技巧(二） 前端开发人员也要会的切图技巧(三) ...
设计图资源站点--前端
qq_14861367的专栏
08-09 503
不错的设计图资源站点： http://www.zerotheme.com/ http://sc.chinaz.com/ http://588ku.com/ http://www.nipic.com http://www.cssmoban.com/
超全面的前端切图技巧读这篇就够了
weixin_44828588的博客
03-17 3371
相信每个前端都经历过用PS手动切图的原始手法，有时候偷懒，还会直接用QQ截图，现在想想真是初生牛犊不怕虎😅 当时就在想，如果能有一款神器，帮我解放切图这种“体力活”该多好！ 于是，它来了👇 摹客，前端必备开发神器 摹客作为新一代的产品协作设计平台，快速简单的智能标注和自动切图功能，将原本枯燥的体力活进行了极大的削减，而它所拥有的“绝技”却远远不止这些：
前端自动化流程：从切图到灰度发布
流程始于项目的启动，包括切图，这是从设计稿中提取素材的步骤，尽管不是每个前端开发者都需要掌握，但它仍然是一个重要的技能。接着，创建项目骨架，这涉及到编写模版（如HTML、Jade、Haml），脚本（如JavaScript、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>