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

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

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

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

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

 

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

 

最低0.47元/天 解锁文章

200万优质内容无限畅学
柳柳Elena
关注
从像素到代码：AI 驱动的 UI 生成正在“终结”前端切图仔，还是重塑设计与开发的协作边界？
码觉客的博客
04-23 663
AI 驱动的 UI 生成，确实在冲击着传统意义上“前端切图仔”的工作模式，自动化了部分基础、重复的劳动。但这并不意味着前端开发者的末日，恰恰相反，它像一把筛子，正在筛选出那些真正具备工程思维、架构能力、复杂问题解决能力和用户体验意识的开发者。与其恐慌被“终结”，不如主动拥抱这场变革。利用 AI 提升基础效率，将更多精力投入到那些更具创造性、更能体现专业价值的领域。未来的前端开发者，将不再是孤立的“像素实现者”，而是连接设计、技术与用户的“体验工程师”和“协作枢纽”。边界正在重塑，新的价值高地正在浮现。
九宫格切图工具：纯前端实现的图片处理神器
最新发布
08-16
九宫格切图工具是一款为前端开发者和网页设计师设计的实用工具，它简化了图片处理流程，提高了工作效率，同时提供了良好的用户体验和灵活性。通过纯前端技术实现，这款工具易于使用和扩展，适应了现代网页设计和开发...
网页设计及切图规范
11-21
网页布局设计相关内容，颜色设计，设计及切图规范。常用技巧包括图片装饰（圆角，外发光，阴影，透明度 渐变，旋转，透视，等）。切图时注意事项， 图片格式选择等。
前端之设计稿二三事
Guan'Blog
06-22 1255
导语: 前端作为web项目开发流程中的一个环节，在实际开发过程中，必定要和ui/交互设计师进行沟通协调，以便保证设计稿能够完全代码化，并且是设计师希望的效果。所以，在这里我总结了一些前端开发需要注意的设计稿的一些东西。 目录 设计稿为750px的原理 常用中文字体英文名称 设计稿和代码化的区别 设计稿为750px的原理 很多前端都不知道为什么设计稿的宽要750，这次我就解释一下通用的说法。 手机像素其实是逻辑像素（pt），通常情况下，1pt=2px; 设计稿上面的单位一般都是物理像素（px），c.
超全面的切图规范指南
weixin_34417635的博客
01-08 1141
设计师的切图输出物是是体现一个设计师专业水准的重要标准，同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。 如何输出具有全局把控和细节专注的高段位切图，应该是所有设计师一直需要追求的能力。 设计切图的原则 设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中，首先应该保证切图输出...
前端切图实战（PSD设计稿转化为前端）
a631278993的博客
08-19 2680
课程来源：https://www.imooc.com/learn/668 一：读设计稿 划分：头部、尾部、公共部分、大概分多少块、logo的重用、列表有哪些、各部分用什么技术实现等等。 二：建立项目目录 三：编写重置样式 不同的标签有着默认的样式，不同浏览器对标签的解析各不相同，重置css样式可以让标签在不同浏览器下产生相同的效果。...
前端界面设计
https://github.com/he-ze-xi
08-22 2282
目录1.设计一个爱好展示静态网站1.效果2.代码展示 自己写过的一些前端界面设计Demo整理。 1.设计一个爱好展示静态网站 1.效果 2.代码展示 工程截图： index.html代码： <!DOCTYPE html> <html lang="en" dir="ltr"><!--dir表示文字的排列属性是，ltr表示左到右的排列方式--> <head> <meta charset="UTF-8"> <
一款APP，从设计稿到切图
02-26
另外，技术的更新是非常快的，我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了，所以，还是要灵活运用~我本身是一名GUI设计师，所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一...
前端设计规范
方糖的博客
01-10 1058
项目目录结构规范 JS代码规范 HTML代码规范 CSS代码规范 百度前端设计规范
前端切图要点
abcd2923的博客
06-07 257
前端切图要点 1.对于需要透明背景的小图标（如logo） 移动工具选取图层，Ctrl+左键点击缩略图（载入选区） Ctrl+C复制图层，Ctrl+N新建图层，其中背景颜色设为透明 Ctrl+V粘贴到新建图层，存储为web格式（Alt+Shift+Ctrl+S） 2.对于需要作为背景的大图片（如轮播图） 矩形工具测量图片大小，Ctrl+N新建图层 移动工具直接把图片拖到新建图层，选取自己想要的部分 3.对于不在一个图层上的小图标（如小工具logo） Ctrl+左键选中想要的图层，右键，点击转为智能对
静态网页源码+设计稿
06-26
初学前端时写的静态网页。HTML、CSS。内含网页的设计稿，源码。没有涉及到JS的哦~~设计稿是psd格式，可以顺便学一下切图哒~~(∩_∩)
rem.js
jiao512的专栏
05-28 134
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWi...
切图的一些规范和要求
11-22 270
1.相同的局部页面，DIV和CSS要完全一致，因为后台代码是引用关系。 (1).对于可能复用的DIV,宽度尽量自适应。 2.简化DIV结机构 (1).能够一层DIV，绝对不要用2层。 (2)菜单的当前状态，尽量在这种一层搞定，不要都加新类来表示当前状态。 (3)大部分clear可以采用: .clearfix:after {display:block;clear:both...
前端高度还原设计稿
浮游的博客
06-10 5534
以前前端都是拿到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：（...
WEB前端基础——网页页面设计
2401_83569888的博客
01-13 1169
1 不重逢X StudioAI歌手3 永不熄灭的火焰4 怪诞心理学5 忒修斯的船6 晨光里有你查看全部>AI 免费写歌音乐开放平台云村交易所用户认证
前端切图系列教程
旅途
08-12 3848
前端切图系列教程 闲来无事，捣鼓捣鼓一下前端开发人员，如何利用UI设计提供的设计原稿psd文件，从中提取（切图）全部图标或者几个图标，在此贴下博友的佳作链接： 前端开发人员也要会的切图技巧(一) 前端开发人员也要会的切图技巧(二） 前端开发人员也要会的切图技巧(三) ...
设计图资源站点--前端
qq_14861367的专栏
08-09 526
不错的设计图资源站点： http://www.zerotheme.com/ http://sc.chinaz.com/ http://588ku.com/ http://www.nipic.com http://www.cssmoban.com/
超全面的前端切图技巧读这篇就够了
weixin_44828588的博客
03-17 3542
相信每个前端都经历过用PS手动切图的原始手法，有时候偷懒，还会直接用QQ截图，现在想想真是初生牛犊不怕虎😅 当时就在想，如果能有一款神器，帮我解放切图这种“体力活”该多好！ 于是，它来了👇 摹客，前端必备开发神器 摹客作为新一代的产品协作设计平台，快速简单的智能标注和自动切图功能，将原本枯燥的体力活进行了极大的削减，而它所拥有的“绝技”却远远不止这些：
提升前端效率的自动PS切图动作
在前端开发和设计工作中，切图是将设计稿转换为Web可使用的图片资源的过程。这个过程往往包括将设计图按照不同的尺寸和分辨率进行切割，以适应不同的屏幕和设备。手动切图虽然可以做到精细控制，但效率低下且容易...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值