如何把设计稿转换成html,将设计稿转换成WEB页面职业者

最新推荐文章于 2024-04-13 09:56:04 发布
VIP文章 最新推荐文章于 2024-04-13 09:56:04 发布
阅读量997 收藏 1
点赞数
文章标签： 如何把设计稿转换成html

将设计稿转换成WEB页面职业者

互联网   发布时间：2009-04-02 19:37:09   作者：佚名   text-message.png 我要评论

网页制作Webjx文章简介：我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将

我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重

做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。

单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上

最低0.47元/天 解锁文章
程程哥
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
将设计稿转换成WEB页面职业者
09-27
网页制作Webjx文章简介：我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将
设计稿进行页面制作的流程和注意事项
09-25
现在，对于页面制作（估计每家公司的叫法都不大一样）这个职位，职责已经逐渐清晰了，通常需要负责的环节就是“还原效果图”，也就是将设计稿做成HTML页面。
蓝湖根据设计图生成html,蓝湖新功能｜ 一键生成整页代码，帮开发留住头发
热门推荐
weixin_35041325的博客
06-05 1万+
蓝湖 Sketch 插件更新啦！此次更新优化了插件的上传速度，还有配套惊喜功能【一键生成整页代码】上线！设计师更新 Sketch 插件后，上传移动端设计图，开发即可查看、复制使用设计图对应的整页代码，让开发效率起飞！惊喜功能 —— 【一键生成整页代码】蓝湖【一键生成整页代码】功能，能自动生成 HTML、Vue、React 等框架代码。能做到：代码高度还原整页设计部分组件识别，绑定相关事件目前支持移...
前端慌不慌？用深度学习自动生成HTML代码
机器之心
01-13 1万+
如何用前端页面原型生成对应的代码一直是我们关注的问题，本文作者根据 pix2code 等论文构建了一个强大的前端代码生成模型，并详细解释了如何利用 LSTM 与 CNN 将设计原型编写为 HTML 和 CSS 网站。 项目链接：https://github.com/emilwallner/Screenshot-to-code-in-Kera
可以转为HTML的设计工具,为设计者准备的10个HTML5 在线工具
weixin_29997523的博客
05-31 464
Online Sprite Box Tool照片压缩在今天非常流行，它带来很多好处，可降低带宽占用和提升加载速度。该工具使用 jQuery /CSS3 和Online Font Testing Tool一个体面的字体是任何网页Online Velocity Sketch Tool这是一个在线使用Online Pattern Generator Tool 是一个很酷的工具，可让网页该工具可以让你直观...
《Sketch-to-HTML：设计稿一键转为网页代码的神器》
gitblog_00028的博客
04-13 378
《Sketch-to-HTML：设计稿一键转为网页代码的神器》 项目地址:https://gitcode.com/Yootou-dev/sketch-to-html Sketch-to-HTML 是一个强大且创新的开源项目，它利用先进的计算机视觉和自动化技术，帮助设计师将他们的 Sketch 设计稿快速转化为高质量的 HTML 和 CSS 代码。这个项目的出现，大大缩短了设计与前端开发之间的流程，...
前端精确还原设计稿，从psd到html
qq_21747731的专栏
07-16 856
动态生成的元素做事件委托 $('.select ul').on('mouseenter',"li",function(e){ $(this).css({'backgroundColor':'#E8F3FF','font-size':'18px'}); }); $('.select ul').on('mouseout',"li",function(e){ ...
厉害了！微软AI使网页设计稿变为HTML
weixin_33923148的博客
12-28 640
微软在其AI.lab网站发表了Sketch2Code项目，并且于GitHub中开源，使用者只要在白板或笔记本中画出网页的接口设计，Sketch2Code就能透过影像辨识，将接口设计草稿转成HTML线框图，来帮助简化网页应用程序开发的流程。微软指出，用户接口设计需要许多创意以及时间，而在设计师绘制设计后，还要花费许多时间把草稿转为HTML线框图，以便在网页浏览器中开启，而这个过程需要花费一定的心力，...
网页制作:PSD模板切成HTML的正确操作
weixin_30408675的博客
02-12 239
其实标准的网制作完成的工作实际是：psd to html，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法： 1.打开fireworks将图片切割导出为html。 2.直接在dreamweaver之类的工具去拖拉布局，导入相关的图片,flash资源。 3.先在ps中完成切图后，在文本编辑器中看着效果图一步步的制作。 以上是大多被采用的方法，但都不好： 第一种方法最为不好，这样的代码...
我的日记本开发手记（5）—— 效果图转HTML
zhaoyang314的博客
07-05 1102
这一节，我们将图片转换成HTML文件。在PS中，按住Ctrl建单击图片对应图层，前面的小图标（如下图1），这样图片就被选中（如图2），然后再选择菜单图像->剪裁（如图3），结果图标就被裁剪了（如图4），然后单击菜单文件->存储为Web所用格式（如图5），在对话框中选择PNG-24（如图6），然后存在png格式图片到指定文件夹，这样一个小图片就做好了，最后我们的剪切图片如图7。 图1 图2 图3 图4 图5 图6 我们web文件结构为img文件夹（保存图片文件夹），css文件夹（保存css文件），j
一个通过智能算法将设计稿转换为前端页面的产品（design to code），是`低代码`平台的一个分支方向
07-05
一个通过智能算法将设计稿转换为前端页面的产品（design to code），是`低代码`平台的一个分支方向， 他的输入是设计稿产出是前端页面，中间无需值守即可自动完成。此项目可以一键将 Sketch、Photoshop 的设计稿转换...
一款APP，从设计稿到切图
02-26
另外，技术的更新是非常快的，我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了，所以，还是要灵活运用~我本身是一名GUI设计师，所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一...
前端基础（二十九）：图片 转 html标签 和 字符串
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
12-17 639
展示 源码 ul { list-style: none; margin: 0; padding: 0; &::after, &::before { content: ''; clear: both; display: block; } li { float: left; width: 2px; height: 2px; } } .
设计稿 自动html,简单的登陆页面PSD设计稿来演示转化为HTML页面的全部过程
weixin_30359265的博客
06-02 664
简单的登陆页面PSD设计稿来演示转化为HTML页面的全部过程，PSD设计图如下：实现步骤如下：1、分析PSD设计稿，思考页面整体大致结构和如何切割图片根据PSD设计稿，可以看出登录页包括背景图和登陆框，其中登录框包括登录图标、输入框和登陆按钮。因此整体html结构即为一个div和其多个子元素div，子元素div用于添加输入框和按钮等；同时可以把设计稿分割成背景图、登录框背景图和登录按钮。2、创建项...
设计图转换html文件,将PSD效果图转切成HTML的步骤
weixin_32865039的博客
05-30 3935
loading...一般情况下，网页设计制作完成的工作实际是：psd效果图 转成 html+CSS 的模板页面，一般情况下，我们会拿到美工的psd，不同的人会有不同的做法：1、打开fireworks将图片切割导出为html。2、直接在dreamweaver之类的工具去拖拉布局，导入相关的图片，flash资源。3、先在ps中完成切图后，在文本编辑器中看着效果图一步步的制作。以上是最常被采用的方法，但...
设计稿 自动html,神奇！微软用AI让网页设计手稿自动转成HTML页面
weixin_42459611的博客
06-02 821
微软在其AI.lab网站发表了Sketch2Code专案，并且于GitHub中开源，使用者只要在白板或笔记本中画出网页的接口设计，Sketch2Code就能透过影像识别，将接口设计草稿转成HTML线框图，来帮助简化网页应用程式开发的流程。微软指出，使用者接口设计需要许多创意以及时间，而在设计师绘制设计后，还要花费许多时间把草稿转为HTML线框图，以便在网页浏览器中开启，而这个过程需要花费一定的心力...
html语言怎么设计出来的,前端入门篇（一）：如何把设计稿还原成真实网页
weixin_30868873的博客
05-30 318
如果你对网页设计及开发感兴趣，但是对标题里出现的第一个名词就摸不着头脑，先不要方。本文对小白友好，零基础可读，保证你读完能了解网页开发的基本思路和流程，明白网页设计稿是怎样被开发实现的。一、什么是前端首先，所谓的前端是指什么呢？前端(front-end)是相对后端(back-end)而言的，是描述进程开始和结束的通用词汇。在计算机程序中，前端作用于采集输入信息，后端进行处理。而我们通常所说的「前端...
研发提效：通过设计稿自动生成前端代码
sys025的专栏
02-25 900
目前第一阶段的技术已经很成熟了，第二阶段还并不是非常熟，在生成代码之后，有时候还需要工程师去核查（小概率事件），不过对于一些常用组件，是可以做到自动化生成了。这时候的代码，还是静态代码。这里简单说就是，你需要通过布局还原算法，智能的识别设计稿里的对象，如何正确的成行成列以及样式的合理计算。
机械设计家用手摇面条机sw18可编辑非常好的设计图纸100%好用.zip
最新发布
05-01
机械设计家用手摇面条机sw18可编辑非常好的设计图纸100%好用.zip
rem布局html字体多大设计稿750,详解rem 适配布局
05-26
假设设计稿的宽度为750px，那么我们可以将根元素的字体大小设置为75px，这样1rem就等于10px，方便计算。以下是详细的rem适配布局步骤： 1. 设置viewport 在页面的head标签中添加viewport meta标签，用于设置设备的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值