组件方式开发 Web App全站-2（设计稿标注和切图，回滚1）

最新推荐文章于 2024-04-01 09:46:37 发布
最新推荐文章于 2024-04-01 09:46:37 发布
阅读量849 收藏
点赞数
分类专栏： 前端组件化入门 文章标签： web app ui ui设计 手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33936481/article/details/69359513
版权

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
双倍分辨率
这里写图片描述
手机端UI设计元素尺寸一般都为偶数
这里写图片描述
距离转换成百分比
这里写图片描述
切片工具！=切图；
也就是说我们需要使用图层的方式来切图;
元素有透明背景，则需要存为：PNG-24；
切图，选区，新建图层，去掉背景，保存web格式；
正片叠加的图层不要合并，先转成正常，然后调低透明度

侠客岛的含笑
关注
专栏目录
组件方式开发 Web App全站j教程视频
04-15
组件方式开发 Web App全站j教程视频，我也在学习中，讲课方式很幽默，内容清晰，强力推荐小伙伴去学习。
设计稿自动标注工具
03-11
设计稿自动标注间距字号，生成前端相应的代码 一步到位
web切图怎么做_切图提效：让你的设计一天顶两天
weixin_29911569的博客
12-23 227
编辑导语：设计师们对于切图一定不陌生，切图虽然并不复杂，但是需要精心的优化才能在使用的时候得心应手。本篇文章中，作者以切图为出发点，结合了自己的工作经验，为大家总结了节省时间，提升效率的方法，让你的设计能一天顶两天。切图是设计师将设计稿交付开发非常基础的一环。它主要解决的是开发童鞋无法用代码去实现的东西，比如一个素材、一个图标、一幅插画、一段特殊字体等等。虽然它很简单，但是依然有很多提效优化的空间...
探索Canvas Highlighter：一款创新的Web绘图标注工具
gitblog_00030的博客
04-01 475
探索Canvas Highlighter：一款创新的Web绘图标注工具 canvas-highlighterA lib for text highlighting by using Canvas.项目地址:https://gitcode.com/gh_mirrors/ca/canvas-highlighter 是一个开源的JavaScript库，它为HTML5 Canvas元素提供了一种直观且灵...
web前端人员自行切图教程
xinxiaoyong的博客
10-18 1万+
Web前端切图总结： 前期资料准备阶段： 获取最终版 PSD格式文件。 安装PS软件，并打开该PSD文件。 获取页面设计需求文档或工单文件，了解需求后，开始准备进行切图。 用到的快捷键总结及常识知识： 2.1.复制图层：CTRL+J。 2.2.取消选择：CTRL+P。 2.3.新建PSD图层：CTRL+N。 2.4.合并图层：CTRL+E。 2.5...
2-2 标注简介.mp4
最新发布
04-11
组件方式开发 Web App全站\第02章 前端开发简介及标注与切图
2-4 切图（一）.mp4
04-11
组件方式开发 Web App全站\第02章 前端开发简介及标注与切图
2-5 切图（二）.mp4
04-11
组件方式开发 Web App全站\第02章 前端开发简介及标注与切图
2-1 前端开发内容介绍.mp4
04-11
组件方式开发 Web App全站\第02章 前端开发简介及标注与切图
webapp设计尺寸规范
09-24
webapp设计尺寸规范，好的规范，铸就明天的你
根据PSD登陆页面设计稿切图制作HTML网页全过程
遇见更好的自己
02-16 2万+
切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时，网上切图相关的文章是不少，但是大都是讲怎么使用切片工具把一张图片分割成多张图片，然后存储为Web使用格式，并且都比较简单和零碎，并不能满足我的要求。因此只能自己不断尝试，今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”，希望能帮助到大家。 实例: 下面通过一个简单的登陆页面PSD设计稿
5个有用的webAPP界面设计工具
01-27 712
我们都知道移动HTML5带UI的开发框架层出不穷，常见的有Sencha Touch、jQuery Mobile前者效果较好，收费，学习成本高；后者效果一般，但兼容性好，免费，学习成本低，会jquery的同学上手快。其实还有一个夹在两者之间的框架叫Kendo UI。...
pc端页面适配（个人理解）
热门推荐
曲小强
01-10 3万+
目也pc端有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。 适配目标： 1.在不同分辨率的电脑上，网页可以正常显示 2.放大或者缩小屏幕，网页可以正常显示 对于宽度的适配 首先设置html,body{width:100%;overflow-x:hidden;} 然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于1200...
webAPP学习设计：页面模式的设计。
m0_37727198的博客
08-08 4727
学习webAPP视频，逐步实现阅读界面。 内容总结：首先实现下边栏模块。 先设置好dom模块的架构，在设置css样式。 知识点1：设置背景色可以利用两层div,一层是背景色，一层是内容框，覆盖并存。 <div class="bottom-nav-bk bottom_nav"></div>             <!--下边栏内容div--> &lt...
Web设计规范----控件、组件
weixin_33834075的博客
03-24 654
什么是控件？什么组件？ 组件控件分类可以根据组件控件属性进行分类，也可以根据组件控件的功能进行划分。一般按功能划分，例如表单类就可以划分为：单文本输入，多文本输入、日历时间选择器、下拉选择列表、单选多选等。 控件（Control）：单一元素组合而成。 组件（Component）：组件为多个元素组合而成。 组件控件和功能分类的目录（移动端） 一、导航类 导航的作用有哪些？...
Web前端—前端高效开发之“一键切图”教程
一片藍天下
03-04 1万+
作为一名Web前端人员，工作中难免都会要接触切图这一块，那么如何把图快速切好且又不浪费时间呢？相信很多人切图都是先把图片放大再使用矩形工具或切片工具来切图，这样其实好麻烦且有时不一定切得精准，下面笔者将介绍两种快速切图的方法—— “一键切图”。          方法一：如果你的photoshop版本是CC 或CC2014及更高版本的，那么你可以在你的photoshop中安装一款叫
WEB UI设计总结
喜欢就好
02-09 7866
1：UI的本意是用户界面，由用户与界面组成，包括用户与界面之间的交互关系，可分为用户研究，交互设计，界面设计。分为以功能为主的网站和一用户为主的网站，学习网页设计，确定频幕分辨率很重要，，频幕分辨率用来确定计算机频幕上显示多少信息的设置，以水平和垂直像素来衡量，显示分辨率就是频幕上显示的像素个数，频幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。分辨率不同，网页展示给用户的效果就不一样2：...
产品经理进阶（一）Web APP UI一致性设计
IT全栈 华强工作室
12-23 3901
前言 做前端开发一段时间后，你会不会发现自己在持续的做着页面重复开发的工作，后面甚至干脆是Ctrl+C、Ctrl+V操作。你可能会说，那就使用组件啊！的确，通过抽取公用视图，创建子组件的方式确实可以提升代码复用度。上面是回答是基于你做程序员开发某个产品模块功能点的时候做出的。当你的问题思考提升一个层次，从前端框架设计角度思考的时候，会不会思考这样的问题：对于交互样式比较固定的业务系统，能否基于UI一致性、UI设计规范进行规范的交互方式、页面及组件样式设计，简易高效的进行界面搭建？通过搭建可视化、所见即所得的
iOS APP设计流程：从原型到切图
"一款APP，从设计稿到切图" 在设计一款APP的过程中，从项目立项到最终的切图输出，涉及到一系列的步骤和技术工具。以下是对这个过程的详细阐述： Part1 项目立项 在项目立项阶段，产品经理通常会通过原型来呈现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值