展开

关键词

工具插件介绍

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 工具 插件 这里的插件都是ps的插件,比较小巧,易于安装和适用,并且很灵活 cutterman 是一款运行在 photoshop中的插件,能够自动将你需要的图层进行输出,以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个的繁琐流程。 在线软件 这里介绍的都是一些免费的软件,付费的还是挺贵的,用不起。 他们可以上传一些小的psd文件(估计20M左右,上传40M的页面会挂掉),在线帮忙,生成html和css。 专业的网站 psd2html是一个在线的网站,承接任务,人工的。没试过,应该很专业,人家也很贵啊,还不如自己。土豪们随意。 小结 自动化高的软件,在定制上就少。 是自己好还是由软件好自己来重构,没具体比较。个人更倾向前一种。使用好一个小的插件就能够很好的提升效率 软件是小的比较灵活实用,大的在处理能力上还是有所限制。

43410

工具插件介绍

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 工具 插件 这里的插件都是ps的插件,比较小巧,易于安装和适用,并且很灵活 cutterman 是一款运行在 photoshop中的插件,能够自动将你需要的图层进行输出,以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个的繁琐流程。 在线软件 这里介绍的都是一些免费的软件,付费的还是挺贵的,用不起。 他们可以上传一些小的psd文件(估计20M左右,上传40M的页面会挂掉),在线帮忙,生成html和css。 专业的网站 psd2html是一个在线的网站,承接任务,人工的。没试过,应该很专业,人家也很贵啊,还不如自己。土豪们随意。 小结 自动化高的软件,在定制上就少。 是自己好还是由软件好自己来重构,没具体比较。个人更倾向前一种。使用好一个小的插件就能够很好的提升效率 软件是小的比较灵活实用,大的在处理能力上还是有所限制。

1.1K80
  • 广告
    关闭

    开发者专享福利,1988元优惠券限量发放

    带你体验博客、网盘相册搭建部署、视频渲染、模型训练及语音、文字识别等热门场景。云服务器低至65元/年,GPU15元起

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    5款前端工具大比拼:谁是最强神器

    不过随着专业工具的发展,工作从几年前的“刀耕火种”,进化到了如今的“一键到位”,设计师和前端工程师之间的“纷争”自然也逐渐消散。 那么近年来崛起的多款前端工具中,又有哪些能称得上是真正的“神器”呢?我们一起来盘点一下。 如果没有设计工具,也可以直接将设计文件拖到网页端打开,查看和复用相关代码信息,下载等。单从功能来看,Avocode一定是一款值得体验的好产品,不过昂贵的收费也让不少设计师望而却步。 不过随着设计协同工具的兴起,已经成为了设计协同过程中的一环,Cutterman单一的导出功能显然有点跟不上发展的脚步。 推荐指数:★★★★ 小结 通过对上述五款工具的分析可以看出,单机导出的方案已经逐渐被市场淘汰,使用协作平台完成设计交付已经成为没有争议的主流,因此建议产品设计研发团队的同学们可以尽量多去体验协作平台的交付功能

    88430

    PS-前端教程(jpgpng

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

    11.3K50

    Photoshop学习

    前端开发中,之前都是Designer给我们好图,给出readline,所以我们前端工程师基本不自己动手,现在换了新的公司,需要我们自己手动一些。 也可以在工具栏中直接设置图片的x,y坐标和width、height值。 c).如果文字不是居中显示的话,我们可以选中文字的图层,然后点击 T字区域。工具栏会显示文字设置。 选中文字和按钮背景的图层: 然后工具栏如下图所示: 可以设置水平对齐和垂直对齐方式。 2.如何快速从一个大图中切出需要的那个小(Sign in按钮) 通过上述方法,我们制作了一个简单的放大版的登录按钮,现在要裁剪下来,给前端开发使用。 所以要了解如何从一张很大的(就是说有很多图层构成的)切出那个小(当前就是制作好的登录按钮) 步骤: a.新建一个photoshop文件 然后直接将选中的登录按钮拖放到新的文件上。

    9830

    photoshop 技巧

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

    21140

    PDMS软件

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

    13000

    ps技巧 原

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

    32820

    前端如何优雅

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

    36930

    之 什么叫

    今天有人在我公众号里留言,问我“什么叫?是不是按着图片。。。”?我没有直接回复他,而是决定把这个问题拿到这里用一篇文章来回答。 严格来讲,,是网页制作的一部分;网页制作,是前端开发的一部分。 ,从操作形式上,是用图片编辑软件,对UI设计的一种图片编辑操作,就是“图片另存为”。另存为什么呢? 我不打算把下面的文章写成教程,因为的教程已经太多了。咱们这样,随便在网上找一张UI设计,然后我结合我的工作经验,来讲一讲的过程。 随便百度“网页设计”,就它了,这是缩略图, ? 大家在之前第一件事就是确定前端规划,否则命名就会很low。 具体的如何制定适合自己的前端开发规范,我会在“一对一视频教学”中给予详细讲解。 拿到UI,先要分析需求,需求不明就要从设计分析功能,搞懂了功能和需求之后,才能开始。 所以,绝对不是简单的按着图片的印儿,往下那么简单。

    76080

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

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

    38150

    ps必知必会

    前言 对于前端,相信很多小伙伴都不会陌生,但是对于新手,有时却很棘手,想着我本是来写代码的,你给我一张干嘛的, 有时,或许你总奢望着UI设计师,把所有的都给你好,你只管撸码的,然而事实并非如此 ,不过快捷键使用可能存在差异) 为什么要进行,PS与前端的关系 ? 都可以取消上一次的矩形选框) 裁切工具(切片工具),可实现 吸管工具(取色器,吸字体,吸背景色) 橡皮擦(可对你进行过ps的操作,进行擦除) 横排文字(更改文字) 手抓(整体移动图片),空格键(按住不放 减少冗余的代码 gif操作图如下所示: 因微信图片大小上传问题,可点击下方阅读原文进行查看 总结 本篇主要是围绕着ps,抠,从ps与前端的关系开始,如何使用PS工具软件对文件操作,无论设计稿是 psd文档还是png图片,利用ps软件的工具栏和快捷键,都可以实现快速的,对于切出来的,保存格式也有所认识,以及如何抹掉图片中文字,添加前景色,和后景色,等简单的处理,以及从网页中抠的很多办法,

    23320

    安卓的规范

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

    60820

    ps cc 2014 智能

    ps cc 新增了智能,对于web 前端来说是不小的福音,大大提高效率,图片设计好并正确命名后好的图片就自动保存在生成的一个assets 文件夹中 1、首先在ps 编辑> 首选项> 增效工具中选中启用生成器 后面的5是50%的质量) @2x Retina图片的输入,在图层前加200%即可,如200% logo@2x.png 等所有的名称加上图片格式后 ,保存后就可以在ps 文件同级找到assets文件夹,好的图片静静的躺在那

    31640

    前端|点击按钮div变色

    1.9K10

    灵活运用PS技巧

    前言 话说,以前的前端工程师在入行时都当过切仔或女。曾经,作为前端一门基础且必备的技能,不知何时开始已经不再提起。 现在大部分的前端工程师都说,这个让设计师去吧,这个图标这样这样,那个背景抽离出来,要这层不要那层。说多了感觉会被设计师拿刀砍死,就像下面那样。。。 ? ,使用ctrl/cmd + +/-缩放到想要的视图大小 每次操作执行时,使用c切片工具对目标进行裁剪 每次操作结束时,使用ctrl/cmd + shift + alt + s保存 很多技巧都是靠平时积累 ,快捷键靠多记多用,用得多自然会顺手 遇到难以分离的图层,最好问问设计师实现原理是怎样的,再一步一步解锁图层 不要老是吐槽设计师得不好切成自己不想要的,想要规范的自己动手来 需要细心,1px 在这里推荐一个PS第三方增强工具:像素大厨(必须下载了PS才能使用),如果不需要只需要量取一些标注信息,使用它更快更方便,轻量级的应用,值得一用!

    30440

    VUE实战—商品展示(7)

    上次我们通过设计评价组件这个过程,了解到了组件设计中的良好的习惯,比如,文件夹如何支撑组件,图片,组件路径的存放于设置。

    36100

    如何利用Photoshop进行快速

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

    34830

    安卓点九

    一般来说点九越小越好,因此通常尺寸都要小于控件尺寸,但这并不意味着不会出现尺寸大于控件尺寸的情况,在这种情况下,会根据伸缩线来进行缩小。 从实验的结果得到三个结论: 1.图拉伸时,仅伸缩区会被拉伸。 2.收缩时,首先伸缩区会被收缩。 光学边界也叫做视觉边界,下图是一个带有投影的蓝色按钮。在视觉上,此图形的外轮廓是蓝色按钮所占区域,而不是实际所占区域。光学边界线标注的位置为投影的位置,表示此区域在视觉上不可察觉。 .9放到 ldpi 的效果 和 xxdpi 的效果 参考 点九你知道怎么吗? -UI 中国-专业用户体验设计平台 https://www.ui.cn/detail/285877.html 点九完全解析<附官方工具>-UI 中国-专业用户体验设计平台 https://www.ui.cn

    13710

    相关产品

    • 设计协作平台

      设计协作平台

      腾讯自研的产品设计研发一站式协作平台,支持在线导入预览Sketch设计稿、自动生成设计标注切图,灵活调用图标库、素材库,支持多种插件上传,让产品设计更轻松高效。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券