使用 Photoshop 切片工具 进行 切图 , 要先进行切片操作 , 然后才能导出指定的切片 , 操作起来很繁琐 ;
上图中是App设计中底部导航栏，开发希望每一个图标都能显示成相同大小，为此设计师往往需要费很大的精力去调整切图。摹客新增自定切图尺寸功能可以帮助你快速完成此类工作。接下来就给大家介绍一下摹客的新功能 —— 如何利用摹客 PS 插件快速实现自定切图尺寸~
Figma 是一个基于浏览器的协作的UI设计工具，其以轻量、便捷、跨平台使用、协同便捷的特点，迅速吸引了广大UI/UX 设计师们的喜欢。但是设计师经常遇到反复切图、交付开发等问题，所以借此机会分享一篇关于 Figma 切图的必要知识点和交付经验。
切图是很多UI设计师的一项日常工作。平时做完设计图，要将设计稿切成便于制作成页面的图片，并标注好尺寸和间距，交付给前端来完成html+css布局的静态页面，有利于交互，形成良好的视觉感。
是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手 点击下载
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环。不过，切图工作究竟谁来做？这个问题我们在各大论坛也屡见不鲜：前端工程师认为设计师出了设计稿，那么相应的切图也应该一并交付；设计师则认为前端工程师给的要求太多太杂，不如他们自己动手来得专业。
emmm，这位产品小兄弟，说好只加 3 个页面，最后硬是让产品加了 6 个页面，差点凑齐七个小矮人了，后面的 UI 稿就像这样（考虑到公司利益，本文采用网上案例作为参考）：
我这里推荐的是摹客，摹客是设计+协作（All in One）的一站式云平台，为产品开发团队提供高保真设计、设计稿交付、全流程协作和设计规范管理。
摹客 Figma 插件的上线，完美解决了 Figma 本地化支持极度缺失、自身交付能力弱以及团队协作费用昂贵等问题。自插件推出以来，越来越多的用户选择将 Figma 设计稿上传到摹客进行团队协作，目前在Figma插件社区中，已经有1.5k的小伙伴安装使用摹客~
随着移动互联网的快速发展，用户的需求也在不断地增大，这对产品经理还有设计师的考验是越来越大。市场环境的变化让我们深信为快不破，但是一个产品的产出需要各个环节的紧密配合，但往往在产品输出过程中，由于分工不明确导致的形形色色的问题，其中的一大痛点就是产品经理，设计师和工程师之间面临着协作难，工作效率低的问题。以前，设计师需要一遍遍的手动切图配合工程师一次次的改图，如今借助着万能的sketch标注插件，提前下班再不是梦！！
之前说的Figma使用弊端或者对比Sketch不足的一点是导出给到开发很不方便，因为会涉及到网页打开速度等一些问题，使得很多设计师止步于此。
互联网的疯狂开展，让企业对开发人员的需求缺口越来越大，以至于呈现年薪40万前端职位，关键是：竟然仍是招不到人，够悲催的吧；而另一端，越来越多的人认识到这是一块大金矿，张狂地涌入互联网. 这其中，许多人将前端视作开启互联网作业的进口。在许多人眼里，前端就是切切图，很简略的，只需能够将视觉规划师的PS（photoshop）图转换成网页就能找到工作。而我，几年前不小心踏入互联网职业，也被许多人问及，前端开发简略吗？我能做前端吗？ 面临这样的问题，还有许多问及前端问题的人，我真是不好说。今日自己拙见，给前端人员列一
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
前不久在 掘金 上看到一篇文章，前端 PS 切图方法，图文详细，相信每个前端都经过这种最原始的切图手法，不禁想起自己以前刚入门那会懒得切图，直接QQ截图，现在想起来真是初生牛犊不怕虎，怎么方便怎么来。。。
很多小伙伴期待的“图表组件”上线了，本次新增了“柱状图”和“饼状图”，更多图表组件会在后期版本中陆续上线~另外新增的页面和组件备注功能，对产品经理非常友好！
JOOX Music 是腾讯面向海外市场发布的音乐 App，目前在其发布的五个国家和地区均是排名第一的音乐服务应用。JOOX Music 从2014年发布至今，经历了大小数十个版本的迭代，功能不断的完善和丰富。而它的体积在 v3.5 版本时达到了有点惊人的 124MB！而东南亚是 JOOX Music 的主要发行地区，这里的网络环境相对较差，存在大量老旧的小容量 iOS 设备，而 App Store 的下载也不太稳定。因此，对 JOOX Music 的裁包大作战已势在必行。
设计交付对于UI设计师来说是一项必要的工作流程，设计交付影响着界面的最终实现和各尺寸适配效果。那么如何做好从设计到开发的交付呢？本文就教一教大家，如何用工具帮助完成从设计到开发的完美交付。
sketch是一款轻量、易用的矢量设计工具。尽管如此，在使用过程中有些功能还是未能满足，亦或者在设计或开发流程中有些工作还略显繁琐，所幸sketch有提供API供我们开发一些插件来解决使用过程中遇到的问题。本着能用工具解决就用工具解决的懒癌患者原则，我们这个课程就来学习如何开发sketch 插件。
终于找到你，我梦寐以求的PS切图插件。曾几何时，设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦。为什么这么说呢？开发要的那么多尺寸，我到底该怎么切图？iPhone的版本已经不少了，更别提安卓那一堆的尺寸，真是让人欲哭无泪！
在UI设计中我们常常使用Ai来进行矢量图的绘制，然后导入Ps中进行设计、排版和导出。
一.背景 前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案 1.使用photoshop将文本图层单独导出成图片; 2.直接引入改字体的字体库.ttf文件 首先第一种方案的缺点,使用图片代替文字,制作和维护的成本很高,前期切图,合并雪碧图比较繁琐,后期修改和维护更是麻烦.同时使用图片,会带来更多的宽带消耗.用户体验方面,用户无法进行文字的选择,复制等操作,体验也不好. 第二种方案,解决了上述的一些问题,但是由于汉字数量太大,导致中文字体文件也较大,通常都会有几M
说下热模块更新这个时常被谈到的问题，工作中也比较常见到、面试中也比较常问到的问题。 git仓库：webpack-demo 1、HMR HMR(Hot Module Replacement)也就是热模块更新，是用来干什么的呢？就是你可以实时的更新某个状态而浏览器不重新刷新。 举个具体的例子可能就理解了啊，比如我们现在要把一个div块的颜色从白色改为黑色，最直接方便的办法是怎样？不是去编辑器里面改代码，然后等浏览器refresh这样去看效果；而是直接打开调试着工具，改一下它的颜色就可以看到效果了。 使
前端与移动开发基础大纲所处阶段主要内容技术要点学习目标第一阶段： HTML5 + CSS3HTML51、 浏览器与浏览器内核2、语法及使用、3、 常用标签4. 语义化5、 表单元素6、 HTML 、7 新增标签可掌握的核心能力： 掌握 HTML5 常用标签； 掌握 CSS 语法及使用技巧； 掌握CSS3新增选择器； 掌握CSS3新增样式属性； 掌握 DIV+CSS 布局方式； 掌握常见网页布局技巧； 掌握企业级、电商级网页开发基本的流程、规范； 掌握语义化、模块化、兼容性的PC端网页开发； 掌握 Pho
蓝湖不是一个独立的应用，而是以插件的形式出现在应用中，支持Sketch、ps以及Adobe XD 。
Ghost：https://github.com/PeterCxy/ghost-diaspora
http://www.cnblogs.com/jikey/p/4259360.html
UI标注软件现在是设计师（UI、PM、前端等）必备的一款软件。设计稿是UI设计师日常工作中的产出物之一，当然，做出了高保真设计稿并不意味着你的工作结束了，因为你还得与下游的开发工程师进行对接。
从我上大学开始正式认识前端这个岗位到现在已经整整过了六年，这六年于我而言就像是观赏了一场盛大的游园活动。无数各式各样的框架、模式、开发思路如同花车一般从眼前掠过又走远。留下了一地残乱的余烬和破碎的思考。
优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面、交互代码的能力。根据对100家互联网名企对Web开发工程师的招聘要求分析，企业要求主要有两部分，一个是核心要求，一个是辅助要求，核心要求包括：语言技术：JS基础和核心/HTML5/CSS3、框架技术：JQuery、AJAX、Bootstrap、AngularJS、通讯协议技术：HTTP协议、服务端开发技术、交互技术：UI交互设计、客户端技术：微信开发技术、html5、JS、SDK开发、Android、iOS、Web App开发技术。辅助要求有1-3年Web工作经验(近80%的企业)、学历及相关专业、文档规范写作能力、团队合作能力、责任心。
2个月前，写过一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》总结过一些移动web中有关手机适配的一些思路，当时也是因为工作的关系分析了下网易跟淘宝的移动页面，最后才有那篇文章的总结，可惜的是因为项目的关系，这两个月来几乎没有机会做移动类项目的工作，所以那些理论一直没有得到真正的实践。这次因为公司有一个app需要做一个推广的下载页面，虽然简单，但也值得一试那篇文章里提到的适配方法，所以本文的内容就是介绍该文中提到的淘宝的做法：《lib-flexible弹性布局方案》。（注：该文中提到的网易的做法跟淘宝的做法其实是大同小异，你访问http://3g.163.com/touch/看下页面源码顶部的JS就能明白了。相较于淘宝的做法，淘宝的方法更能称之为一个方案，网易的做法代码质量实在不敢恭维，所以从本文的角度，推荐淘宝的lib-flexible）
在很久很久以前的公元1993年，位于美国的伊利诺州诞生了一位名为NCSAMosaic的孩子。它便是传说中的微软IE、网景以及后续众多网页浏览器的鼻祖。可惜在当时只有少数的幸运儿才可以使用它。
参考 【CSS】PhotoShop 切图 ③ ( PhotoShop 切图插件 - Cutterman | 下载、安装、启动、注册、登录 Cutterman - 切图神奇 插件 | 使用插件进行切图 ) 博客 , 下载并安装 Cutterman 插件 , 在 Photoshop 中选择 " 菜单栏 / 窗口 / 扩展功能 / Cutterman - 切图神器 " 功能 ;
当界面设计定稿之后，设计师需要对图标进行切片，提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求，直接影响到工程师对设计效果的还原度，并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度地还原设计图，起到事半功倍的效果。
浏览器 Chrome 镜像 浏览器相关插件 IDE Sublime Text 3 及相关插件 代码版本控制 Git Github Windows下的客户端 用了Github的客户端的命令行，就会发现msysgit，cgywin里的Git之类的命令行都是浮云。 图片查看 Photoshop Picpick 轻量级的查看图片软件支持：查看psd格式；量色；测距离等。 一键切图 cutterman 是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出we
工程师规范 - 开发准备 了解产品和设计 参加需求、交互、视觉会议，了解产品设计和项目成员。 了解产品面向的设备和平台。 了解产品对兼容性的要求以及是否采用响应式设计等。 了解产品要使用的技术（WEB技术、桌面技术、APP技术、模板语言、混合模式等）。 提出疑问和见解 在交互或视觉会议中结合技术要求，提出疑问和见解。 提出可能存在的问题（技术实现问题、性能问题等），协商解决方案（如优雅退化）并达成共识。 提出已有新技术可能在产品中的应用场景，协助产品创新。 技术调研和培训 是否需要技术调研，提出可能存在的风
转眼就到了2018年的最后一个月，小伙伴们是不是都在奋力拼搏做年底的冲刺呢？摹客也没有放慢脚步，不断地优化，给大家带来一个又一个的惊喜。那么，让小摹来带大家看看12月摹客iDoc更新了哪些特色功能：
摘要 如何成为一名优秀的切图工程师？百度资深研发工程师潘征与大家分享自己的工作心得。 ROLE移动端酷炫运营页 2014年开始，我在我们部门负责移动端酷炫运营页面，也就是俗称的H5的研发工作。 这些酷
回看近年的前端发展，不管是之前的散装前端时代，还是后来插件化、模块化的演进，亦或是现如今如火如荼的前端工程化迭代，发展速度实在是太快了，各种框架层出不穷，这些难免会让我们这些学习者眼花缭乱，满腹疑团。
这篇文章主要写一下整体思路和大的框架,样式和布局留到自己重做的时候再写出来巩固一遍.
话说，以前的前端工程师在入行时都当过「切图仔」或「切图女」。曾经，「切图」作为前端一门基础且必备的技能，不知何时开始已经不再提起。很多面试官在招聘时都忽略了PS的存在，其实在国外一位优秀的前端工程师是包揽设计工作的，PS玩得可溜呢。
目前（2016-06-19）px转rem 的工具已经不少了。下面介绍几个转换的方案。
作为一名野生的前端开发，自打本猿入行起，就未经过什么系统的学习，待过的团队也是大大小小没个准儿：
前几天发了“前端工程师都能做什么”这篇文章， 此文的末尾有这样一句话：“...毕竟，无限可能嘛...” 有同学留言给我， “可是新手往往望着无限可能而不知所措” 这句话我当时回复的是，“请先从切图开
本次更新，摹客RP新增了“跨项目复制粘贴页面”功能，可以快速复用其它项目中的内容；另外摹客协作平台对图钉评论和交互模式也做了优化～
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
