设计切图 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

PS-前端切图教程（切jpg图和切png图）

ps：多日后的补充说明部分看了文章的设计师，来找我说怎么切图。sorry？在我的理解，这就是切图啊，但是他们所指的“切图”是，怎么把设计图制作成html页面。...认为前端是切图的，（也确实是这么叫的，本人情感上很不愿意听前端被叫做“切图的”）所以也会误认为我的这篇文章是写给设计师的。...不过，作为一个设计出身的前端来说，摸ps就和摸键盘一样了 PS切图步骤说明一共分两大项：切jpg图、切png图。...二、切PNG图切透明图的核心理念是，你要把不需要的背景图给隐藏掉，只让需要的留下来，底部背景变成像马赛克那样的样式。 ? 1．打开ps拖进来你要切的psd或者tif文件，一定得是带图层的。...有的说，背景图和图标每分图层咋办？那咋办？找设计吧。

17.6K5 0

【CSS】PhotoShop 切图 ③ ( PhotoShop 切图插件 - Cutterman | 下载、安装、启动、注册、登录 Cutterman - 切图神奇插件 | 使用插件进行切图 )

文章目录一、 PhotoShop 切图插件 - Cutterman 1、下载 Cutterman 插件 2、安装 Cutterman 插件 3、启动 Cutterman 插件 4、注册 Cutterman...插件账号 5、登录 Cutterman 插件账号二、使用 Cutterman 切图 1、导出选中图层 2、导出按钮背景 3、导出图层部分内容一、 PhotoShop 切图插件 - Cutterman...---- 使用 Photoshop 切片工具进行切图 , 要先进行切片操作 , 然后才能导出指定的切片 , 操作起来很繁琐 ; 这里推荐一个 PhotoShop 切图插件 Cutterman ,...切图工具下载页面 : https://www.cutterman.cn/ps/cutterman 在下载页面 , 下载该软件 , 现在 4.3 收费了 ; 找了一个之前的 3.5 版本 , 还是免费的...; 文件名字 , 就是图层名字 ; 上述 png 格式的图片 , 是透明背景 ; 该操只需要一键操作 , 即可完成切图工作 ; 使用切片工具 , 先要选中切片 , 然后选择 " 菜单栏

4.4K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

Sketch 和 PS中的设计图如何实现“自动切图”？

切图是很多UI设计师的一项日常工作。平时做完设计图，要将设计稿切成便于制作成页面的图片，并标注好尺寸和间距，交付给前端来完成html+css布局的静态页面，有利于交互，形成良好的视觉感。...但有的认为前端自己会切图是最好，不建议把切图的事情丢给设计师做。...总之，切图对于设计师设计创作、程序员写代码来说，其实不是件难事，但是似乎成为了件苦差事？ UI设计师：“因为不愿切图，被人事劝退。” ? 程序员：“被人蔑称切图仔该怎么怼回去……” ?...看到这里，小编只想替各位UI设计师和程序员说：“你才是切图仔，你全家都是切图仔！” ? 到底手动切图是有多恼火？...点击下拉框选择设计稿所属的项目。 ? 点击上传所选或全部上传便会将设计稿资源一键上传至iDoc，设计师和开发可登录摹客iDoc查看标注与下载切图等等。 ?

2.4K2 0

维图PDMS切图软件

维图PDMS切图软件WT-DRAW 快捷高效一键出图智能图纸 PDMS属性完整传递到CAD二维图纸中，实现智能图纸，可在后期深度加工图纸快速出图自动批量出图，无需人工干预。...利用专利技术做到一键出图，批量出图，可提高出图效率95%以上专利技术尺寸标注和标签是我们出图的主要工作，自动出图的关键技术在于计算机如何自动处理文字和几何尺寸不重叠和规则排布 CAD图纸不依赖...用户可随意定义图层，颜色，线型，图框，字体等管道平面布置图依据SH/T3052-2014，SY/T0003-2012 制图标准，自动输出管道平立面图需要使用的可以联系我邮箱18502742902

1.5K0 0

Photoshop切图学习

前端开发中，之前都是Designer给我们切好图，给出readline，所以我们前端工程师基本不自己动手切图，现在换了新的公司，需要我们自己手动切一些图。...2.如何快速从一个大图中切出需要的那个小图(Sign in按钮) 通过上述方法，我们制作了一个简单的放大版的登录按钮，现在要裁剪下来，给前端开发使用。...所以要了解如何从一张很大的图（就是说有很多图层构成的图）切出那个小图（当前就是制作好的登录按钮）步骤： a.新建一个photoshop文件然后直接将选中的登录按钮拖放到新的文件上。

1.6K3 0

photoshop 切图技巧

切图介绍当在前端开发或者某些图片需要切下来的时候，可以使用photoshop的切图功能。从京东页面截取了一下素材页面 ? 下面先看看切图工具 ? 知道了切图工具之后，先来切单张图片来看看。...使用切片工具批量切图那么下来看看切片工具在哪里 ? 可以看到这有切片工具和切片选择工具，其中切片工具是拿来定位需要切的图像，而切片选择工具是用来选择的，当需要删除某些切片图像，则可以使用。...框住需要切的图片还可以拖动来调整大小，但是有时候怎么拖动都不够准确的话，可以双击切片范围，填写需要切片的范围大小，如下： ?...再切多一个图像看看 ? 再切个购物车的图像 ? 好了，下面来看看如何导出切图 ? ? 进入该界面之后，就要每个切图都点击之后设置一下格式，如下： ? ? ?...从上面的操作就已经可以批量多张切图了。

2K4 0

ps切图技巧原

然后换成你要修改的颜色 4、保存 5、回到多个图层的文件名下，图层已改变颜色，这种情况下多个图层都改成同一个颜色，如果我们需要只改变其中一个图层的颜色，把不需要改变颜色的图层锁定即可 6、最后按ps cc 智能切图即可...，关于智能切图，请见我写的另一篇关于智能切图的文章 (adsbygoogle = window.adsbygoogle || []).push({});

1.4K2 0

之什么叫切图？

今天有人在我公众号里留言，问我“什么叫切图？是不是按着图片切。。。”？我没有直接回复他，而是决定把这个问题拿到这里用一篇文章来回答。...严格来讲，切图，是网页制作的一部分；网页制作，是前端开发的一部分。切图，从操作形式上，是用图片编辑软件，对UI设计图的一种图片编辑操作，就是“图片另存为”。另存为什么呢？...我不打算把下面的文章写成教程，因为切图的教程已经太多了。咱们这样，随便在网上找一张UI设计图，然后我结合我的工作经验，来讲一讲切图的过程。随便百度“网页设计图”，就它了，这是缩略图， ?...拿到UI图，先要分析需求，需求不明就要从设计分析功能，搞懂了功能和需求之后，才能开始切图。所以，切图绝对不是简单的按着图片的印儿，往下切那么简单。...“静态页面练习小组”里的同学，你们也要从功能，从需求的角度去看待网页设计图。其实，网页设计图，它不是一张好看的图。它其实是一个网站的工程图纸。

3.8K8 0

前端如何优雅切图

前端切图历史悠久，或许那时候不叫前端，叫页面重构师。之所以页面重构师要自己动手切图，是因为面对多种多样的页面效果，UI设计师不知道每一张图的需求，常常会引发流血冲突，带来不可挽回的生命危险。...切图能体现页面重构师的经验和能力，如果你拿到手的是psd文件，那么你可以看看“存储为 Web 和设备所用格式”的切法。...前端技能之切图 - github -xiangpaopao 但毕竟切图是个体力活，其中有大量重复工作，而且还有Retina图，图切多了人都傻了。。。...Slicy Slicy还能切二倍图，但是作者在twitter上声明不会支持 3x… ?...Retinize Cutterman Cutterman 是个国产的切图工具，广告语就叫“最好用的切图工具”。

1.4K3 0

5款前端切图工具大比拼：谁是最强切图神器

前端切图是前端工程师们还原设计稿的过程中必不可缺的一环。不过，切图工作究竟谁来做？...摹客前端工程师和设计师关于切图的纷争，往往是因为设计师无法根据前端工程师的需求完成切图，比如图片没有压缩或合并，命名不规范等，这样前端拿到切图仍然需要重新处理。...有了摹客，设计师只需对需要切图的位置进行标记，并不需要指定格式，大小或者压缩率等信息。开发可以按照自己的需求快速完成切图设置并下载。此外，切图伴随设计稿一起交付，也会减少前端出错的几率。...不过随着设计协同工具的兴起，切图已经成为了设计协同过程中的一环，Cutterman单一的切图导出功能显然有点跟不上发展的脚步。...易用的前端切图功能搭载设计协作平台，可以让前端工程师在自行下载切图的过程中，更好地理解设计稿和设计师的意图，还原设计稿，从而实现效率最高化。

4.9K3 0

切图工具插件介绍

本文作者：IMWeb moonye 原文出处：IMWeb社区未经同意，禁止转载切图工具切图插件这里的插件都是ps的插件，比较小巧，易于安装和适用，并且很灵活 cutterman 是一款运行在...在线切图软件这里介绍的都是一些免费的软件，付费的还是挺贵的，用不起。他们可以上传一些小的psd文件（估计20M左右，上传40M的页面会挂掉），在线帮忙切图，生成html和css。...psdtoweb 号称是目前为止最自动化的切图软件，对源文件要求也不多，整个过程操作非常easy，最大可以上传80MB文件。...专业的切图网站 psd2html是一个在线的网站，承接任务，人工切图的。没试过，应该很专业，人家也很贵啊，还不如自己切。土豪们随意。小结自动化高的软件，在定制上就少。...是自己切图好还是由软件切好自己来重构，没具体比较。个人更倾向前一种。使用好一个小的插件就能够很好的提升效率切图软件是小的比较灵活实用，大的在处理能力上还是有所限制。

1.9K1 0

切图工具插件介绍

本文作者：IMWeb moonye 原文出处：IMWeb社区未经同意，禁止转载切图工具切图插件这里的插件都是ps的插件，比较小巧，易于安装和适用，并且很灵活 cutterman 是一款运行在...在线切图软件这里介绍的都是一些免费的软件，付费的还是挺贵的，用不起。他们可以上传一些小的psd文件（估计20M左右，上传40M的页面会挂掉），在线帮忙切图，生成html和css。...psdtoweb 号称是目前为止最自动化的切图软件，对源文件要求也不多，整个过程操作非常easy，最大可以上传80MB文件。...专业的切图网站 psd2html是一个在线的网站，承接任务，人工切图的。没试过，应该很专业，人家也很贵啊，还不如自己切。土豪们随意。小结自动化高的软件，在定制上就少。...是自己切图好还是由软件切好自己来重构，没具体比较。个人更倾向前一种。使用好一个小的插件就能够很好的提升效率切图软件是小的比较灵活实用，大的在处理能力上还是有所限制。

2.6K8 0

设计师一定喜欢这样的标注切图工具

对于设计师来说，标注和切图是工作中非常重要的一部分。最早的标注切图都是由设计师手动进行，不仅浪费时间精力，还极容易遗漏出错。随着设计流程不断被简化，越来越多的标注切图工具应运而生。...摹客作为新一代的产品协作设计平台，快速简单的智能标注和自动切图功能，完美地解决了产品开发流程中标注和切图的难题，更是凭借多种“独门绝技”，成为许多设计师日常工作中必不可少的工具之一。...切图下载更自由如果问一个设计师，在设计稿交付过程中，最讨厌的一项工作是什么，答案一定是切图。开发需要对应不同平台尺寸的切图，因此设计师也需要交付多套切图。...每当设计稿发生变动，切图的流程又需要重来一遍。摹客的自由切图功能，帮助设计师大大提升了设计稿交付的效率。...那么除了众所周知的“一键下载选中切图或所有切图”功能外，摹客还有哪些独有的切图技巧是你不知道的呢？ ?

1.3K5 0

安卓的切图规范

Android UI 切图命名规范、标注规范及单位描述很多UI设计师做APP切图都会有两套，一套是Android的，一套是IOS的。IOS我这边暂不作讲解，因为我本人也不是开发IOS。...（PS：本人有时拿到UI切图，看到名称确实是不知道这个图是用来干嘛和放在哪里的，还得跑过去问UI。。所以，一个好的命名规则可以让我们开发节省不少的时间。）...自动切图工具推荐摹客iDoc 在这里向UI设计师，前端推荐一款好用的国产自动切图神器-摹客iDoc，一款更快更简单的产品协作设计平台，智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理，从产品到开发...特色点： UI设计师 ①完成设计一键上传 ②支持Sketch、PS、XD的设计原稿和设计图 ③标注和切图自动生成，再不用手工做产品经理 ①多种批注样式，更好的表达想法和意见 ②快速制作交互原型，支持多种动画特效...还可显示百分比标注，一次选择多个图层并智能标注 ②自动获取切图，可下载多个或全部切图 ③各种平台适配自动呈现 ④一键查看页面中的重复元素 ⑤样式代码自动导出 ?

2.7K2 0

ps切图必知必会

前言对于前端切图,相信很多小伙伴都不会陌生,但是对于新手,有时却很棘手,想着我本是来写代码的,你给我一张图干嘛的, 有时,或许你总奢望着UI设计师,把所有的图都给你切好,你只管撸码的,然而事实并非如此...,有时候呢,设计师给我们的图,也并非是一成不变,往往也需要作一些调整,更改,完美的将UI设计图,进行还原实现产品经理的意图,是前端小伙伴职责所在,那么熟练简单的ps操作,就很重要了,虽然我们不是设计者,...将原型设计图进行还原,承接UI,最终实现产品经理意图,实现静态页面效果展现从UI设计师那拿到psd文档,进行切图,抠图,测量,简单的图片处理操作(更改字体,吸字体颜色等操作),利用web技术(html...减少冗余的代码 gif操作图如下所示: 因微信图片大小上传问题,可点击下方阅读原文进行查看总结本篇主要是围绕着ps切图,抠图,从ps切图与前端的关系开始,如何使用PS工具软件对文件操作,无论设计稿是...以及最后把多张图片合成一张雪碧图,也就是css sprite,以及使用利用背景定位,嵌入到网页中去以下是本篇提点概要前提条件(ps软件) 为什么要进行切图,PS与前端的关系,将UI设计师给出的材料(

4.8K2 0

PS-前端切图教程

PS切图步骤说明一共分两大项：切jpg图、切png图。我用的是PS CC 版本，教程中用到的除了界面和摆放位置不一样外，其他应该和低版本的都一样了。...一、切JPG图 1．打开ps导入图片的步骤是铁定的了 2．选择左边工具栏里的“切片工具” 事先自己没用过或上一次ps工具使用时没有使用过“切片工具”的，打开ps工具栏里默认是“裁剪工具”的图标你可以鼠标左键点住...但是如果你框选了好几个了，想改前边已经框选好的：像如上这样，要知道，ps切片工具最近一个选区的切片是用黄色框包裹的，其他前边切得都是蓝色边线，这时候你再用“切片工具”去调整蓝色边线的选区是动不了的。...点击存储后弹出【将优化结果存储为】的对话框选择存放位置、设置文件信息—— 一般存储时，ps会自动建立一个images文件夹，你要找到刚才自己设定的位置中，找images文件夹，在她里边才有你刚才切好的图...未经允许不得转载：肥猫博客 » PS-前端切图教程

1.6K3 0

一线UI设计师对APP切图尺寸换算指导

工作后，很多同学还是会问到app切图尺寸的问题。今天分享android和iOS的换算分析，希望能帮到工作中的你。 1.在Android的显示模式为mdpi的时候，1dp等于1px。

1.3K14 0

据说，攻城狮也可以像设计狮一样切图了？

通俗的说，切图就是把设计稿切成一片片的，然后前端攻城狮经过div+css功能最大限度的还原设计图，也就是要把零碎的图片整合成一张完整的图片。...那为什么要切图，UI设计狮做完设计稿后交给攻城狮撸代码不就完事了？...以一句话来描述其重要性，切图是实际开发过程中必不可缺的一步，切图资源的输出将直接决定最终产品的效果。既然这么重要，到底是谁负责切图呢？是UI设计狮还是开发攻城狮？...从此解放你的双手，告别手工，让攻城狮也可以像设计狮一样切图。下面带领大家一起来尝鲜摹客idoc亮点功能。自动切图针对不同的场景，切图的规范也会不一样。...UI设计狮只需要在设计稿中标记需要切图的元素，在导入到摹客idoc中后，即可下载各种倍率的切图，方便适配各种平台。

7592 0

切图仔最后的倔强：包教不包会设计模式 - 结构型

什么是结构型模式结构型模式主要用于处理类和对象的组合，对应思维导图： ? 2. 外观模式: Facade Pattern 对接口二次封装隐藏其复杂性，并简化其使用。...“单一职责原则”：面向对象设计中鼓励将不同的职责分布到细粒度的对象中，Proxy 在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念遵循“开放-封闭原则”：代理可以随时从程序中去掉...图片预加载目前一般的网站都会有图片预加载机制，也就是在真正的图片在被加载完成之前用一张菊花图（转圈的gif图片）表示正在加载图片。...结语及参考至此，结构型设计模式已经讲(水)完了，其中享元模式值得单独拿出来写一篇博客。 ?...参考文章 JavaScript 设计模式精讲 Javascript设计模式理论与实战：享元模式 Easy patterns: Flyweight Composite design pattern Javascript

1.2K2 0

如何利用Photoshop进行快速切图

在UI设计中我们常常使用Ai来进行矢量图的绘制，然后导入Ps中进行设计、排版和导出。 ...准备使用Photoshop CC 2015版准备好要切的图片 ? 第一种方法 Ps自带切图首先打开图层，找到要切图的部分 ? ? 选中要切图的图层 ?...接下来介绍另外的切图神器！！第二种方法摹客iDoc PS插件摹客iDoc PS插件是一个Ps扩展，可以方便的导出移动端和网页的切图，并生成多种大小格式，并且是免费的！...标记切图选中需要切图的图层或编组，点击「标记切图」。将在名称前增加“-e-”，「标记切图」变为「取消切图标记」，此时切图操作便完成了。 ?...上传设计稿标记完成切图之后，一键将设计稿上传至云端项目中，提示完成后便可在云端查看到刚才上传的设计稿。下载切图选中需要导出的切图，可以一键选择“下载选中切图”或“下载全部切图”。 ?

1.4K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭