一键100%还原设计图样式的神奇工具

最新推荐文章于 2022-08-09 12:14:58 发布
最新推荐文章于 2022-08-09 12:14:58 发布
阅读量648 收藏 3
点赞数
分类专栏： 工具 文章标签： 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43499985/article/details/105816788
版权

一键生成样式的神奇工具—pxcook！！！

相信做前端的小伙伴们都有一个令人头疼的设计图（UI设计师），特别是要求100%还原设计稿的，这里我将给大家介绍一个比较神奇的工具，可以助你一臂之力。

当然这里肯定先给你们你个链接自行下载
很强大有木有！
这里你只需要将UI设计师给你的设计稿上传到pxcook中，然后打开，选择相应的工具，就可以开始有趣的cv环节了，当然，对于初级人员，还在纠结用什么css属性才能布局的情况，奉劝止步，先打好基础，再当个cv工程师喽！

2020年4月28日 By superjpg

superpng
关注
专栏目录
前端页面还原 photoshop+CSS+html(一)
weixin_43742704的博客
06-13 690
根据ps做出来的设计图，进行Html页面的步骤。 logo 使用h1标签实现 ，作用： 使网站更容易被搜索引擎识别，更好的优化网站。 行高(line-height)和容器(height)高度一致时，文字可以垂直居中。 padding 使用场景：内容和容器之间有间距时 使用padding内填充 给元素增加padding值后会增加在网站页中的实际占位 需要在width 和height 减去pad...
我的期末网页设计HTML作品——咖啡文化网页制作
weixin__BJ050106的博客
08-19 953
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
让前端泪流满面的设计还原工具
aimeeth的博客
10-26 1369
在以前，要做好设计还原其实非常繁琐，我自己也用过又换过不少工具，但多少总有些地方难以磨合。直到今年年初，开始接触并使用了一款叫做摹客协作平台后，我才领略出了这一套神级设计还原的方法论！ 话不多，就三点：设计标注、素材交付、还原跟进！ 要知道我们的最终目标是让前端工程师将我们的设计进行还原，所以核心的部分归根结底还是他们在操作。而在这大半年的使用过程中，我发现摹客的整个协作流程非常符合我们和前端工程师的工作配合。 而具体如何利用这款工具帮助自己实现设计还原，还得跟着方法论来。 一、让前端泪流满面的
前端之还原设计稿篇
进击的你的博客
02-26 1389
最近来了个有设计感的产品，经常扣设计稿细节，因为研究了一些能更好还原设计稿的东西。 1.Chrome浏览器默认显示最小字体为12px，但是用scale可以把字体设置得更小。 目前来看其实即使缩小也很有可能达不到设计稿的效果，折中的方案是：太小的文字直接用图片 参考资料： https://blog.csdn.net/weixin_36210698/article/details/85219282 https://blog.csdn.net/im_dogg/article/details/93.
html还原ui,前端如何百分百还原美工图?
weixin_29208327的博客
07-04 1932
不知道你是怎么量的，我简单说下我的思路吧。首先美工图如果是psd，那么想避免误差拿到尺寸最好就是用ps(除非有标注……)。ps建议装最新的cc2015，对前端切图相当友好~装好以后打开设计稿做预处理：把各个需要独立切开的组件扔进一个组里(便于导出)，然后裁切一下页面边缘(避免有超出设计页面的东西导致测量误差，这个我一般习惯用工具栏里的裁切工具，选中后有个设置比例的下拉列表，选择宽高分辨率，然后直接...
前端精确还原设计稿，从psd到html
qq_21747731的专栏
07-16 951
动态生成的元素做事件委托 $('.select ul').on('mouseenter',"li",function(e){ $(this).css({'backgroundColor':'#E8F3FF','font-size':'18px'}); }); $('.select ul').on('mouseout',"li",function(e){ ...
前端高度还原设计稿
浮游的博客
06-10 4875
以前前端都是拿到psd设计图，需要自己用ps切图，需要自己在psd上面一个个去量设计的大小和间距，而现在一般都是要求设计师把设计稿直接上传到蓝湖上面，通过蓝湖的标注来写出前端代码。要做到还原设计稿，主要要解决下面这三个问题： 元素大小 元素与元素之间的间距 元素在页面的位置 字体 元素大小 先关注设计图是PC还是移动端，移动端看设计稿是以375px为标准还是以750px宽为标准的设计稿，pc端基本上尺寸1440px，再来说下元素大小的问题，对于图片类的来说我们就要获取图片在蓝湖中的正确大小，这一般来说百
【HTML学生作业网页】基于HTML+CSS+JavaScript仿南京师范大学泰州学院（11页）
HTML网页设计
08-09 426
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
Autohotkey window 下宏键盘、宏命令开发入门
dicha7140的博客
04-19 1710
???? ???? ???? ???? 我的AHK下载地址：https://github.com/dragon8github/Pandora/raw/master/pandora.exe AutoHotKey 下载：https://autohotkey.com/download/ 国内自制的ahk网站：https://www.autoahk.com/ 推荐下载installer 官方网站：h...
GitHub 项目精选（2022.5.18更新）
u012199290的博客
05-18 9818
写在前面 看到这个项目的同好们如果有推荐的 Github 项目或是觉得有用、有趣的网站等都可以发起 issue 或 PR。 友情链接： ruanyf / weekly GrowingGit / GitHub-Chinese-Top-Charts 有趣项目 chrislgarry / Apollo-11 阿波罗 11 号。 YunYouJun / air-conditioner ❄️ 云空调，便携小空调，为你的夏日带去清凉！ 网站: https://ac.yunyoujun.cn/ 类似网.
网络变量(NetworkVariable)探究(三)
gxb02的博客
09-13 667
第三部分 基于网络变量的复杂数据传输 在上一篇文章中，我们通过LabVIEW和VC#演示了网络变量通信。可以看到，在分布式系统管理器中创建网络变量时，可以为网络变量分配多种数据类型，这为我们实现各种类型的数据传输提供了便利。然而，这里仍然存在很大的局限性，设想我们有如下应用，在学生信息管理系统中存储了学生的基本信息和各门课程的成绩，举例如下： 学生信息表 序号 信息名称 信息值 信息类型 1 姓名 张三疯 字符串 2 年龄 20
如何还原像素级别的设计稿 切图工具 Photoshop操作
bingqingsuimeng的专栏
03-18 6562
前端重构项目外包做了也有一年左右了，分享一下还原设计稿的一些经验。 为什么要还原像素级别的设计稿 前端重构和美工是两个级别的，一个就在于精准还原设计稿而另一个是自我感觉怎么好怎么来。 而比较高端的项目是分三块的，由专业的设计师做设计，由前端工程师切图做页面，再由后端工程师开发功能整合到系统上。术业有专攻，每一个环节都会有很高的水准，组合成一个各方面都非常专业的网站，为客户的业
推荐一款页面开发神器，视觉还原可以如此简单
weixin_34376562的博客
03-26 341
作为一名前端工程师，经常因为做出的页面和UI设计稿之间存在一些偏差，导致和UI同学反复沟(si)通（bi），这个过程很让人沮丧是不是？？其实要避免这种情况很简单，一款chrome插件就可以很方便帮助工程师和设计师做UI走查。它的原理是在当前页面上叠加了一层设计稿，可以自由拖拽拉伸，调整透明度等等，页面和设计稿之间的差异一目了然有木有？在方便自己的同时也希望可以方便到更多人，推荐给大家一起使用。 废...
CSS第五天学习总结—— PS切图
weixin_52819925的博客
07-31 244
常见的图片格式 序号 格式 特点和常用的用途 1 jpg JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片 经常用jpg格式的 2 gif GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果, 实际 经常用于一些图片小动画效果 3 png png图像格式，是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景. 如果想要切成 背景透明的图片 ,请选择png格式. 4 p
前端如何还原设计稿？
Finit的成长空间
05-08 6008
画方框，包括文字和图片，从大到小，不断细分。 将方框用HTML标签表示，注意语义化。 用css样式调整布局字体等，注意抽出复用的部分。
c 如何确定一张jpg的宽高_万字长文！如何做到99%精准还原设计稿？ - 优设网
weixin_39941859的博客
11-03 271
UI设计师作为展示产品形态的执行层。产品上线前走查视觉与交互还原是必经环节，设计师可能都遇到过一个问题，作图时连一像素的分割线都纠结好几次，但是开发完的效果却不尽人意，UI验收不通过。然后前端这边委屈的想拿出藏在键盘下的四十米大刀找你来血拼。。。我们经常会听到身边的设计师与开发哥的一些对话，关于对齐，大小，间距等设计还原问题经常会讨论很久。甚至有时会觉得，几个像素的间距是不是有必要这么纠结？1. ...
记一次完整的等比例还原设计稿的响应式页面
x先生的博客
02-14 1897
项目新的迭代周期里面有样式优化的任务，决定借此机会重构页面布局，实现等比例还原设计稿、并响应多种设备的页面，上一版时间比较紧凑，忽略了等比例还原，这次补上。 等比例还原实现思路： 实际像素/实际设备宽度 = 设计稿像素/1920 看到这个公式就知道，需要通过rem来实现了 使用rem就需要设置html的font-size， 根据上面的公式： var viewport = document.doc...
前端UI设计稿对比工具 - chrome+webpack插件
Quiet-Night的博客
03-14 3067
（切图仔）前端开发者一大重要的职责就是将 UI画稿转化为实际可用的页面，效果图的还原度在相当大的程度上决定了 UI 和 PM的满意度 一般情况下，拿到设计稿后，懒散点的可能直接看图软件打开，肉眼测距就开搞了，负责点的会打开 PS或者更正规的 Photoshop，力图精确到 px，这两种方法各有利弊，前者的还原度大概率堪忧，后者耗时耗力，能把眼睛看瞎，最后都不一定能过得了设计师的像素眼 鄙人不才，恰...
QQ手机版5.0：创新‘一键下班’功能设计解析
"QQ手机版5.0‘一键下班’设计小结" 在移动应用设计中，用户界面的简洁性和易用性至关重要。QQ手机版5.0的“一键下班”功能正是针对这一理念进行的设计，旨在解决强迫症用户对未读消息小红点的困扰。在产品开发过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值