谷歌新出的这款 Material Theme Editor 神器,让你做设计又快又好!
谷歌新出的这款 Material Theme Editor 神器,让你做设计又快又好!

一、Material Theme Editor —「一款强大的主题编辑器」在2018年5月份的 Google I/O 大会上,Google 设计团队一款叫做 Material Theme Editor 工具,可以帮助开发者更轻松地制作既符合自身品牌又符合 Material Design 风格的应用。这款全新的工具可以简化工作流程并提升团队工作效率!本篇文章主要是详细介绍这款工具如何使用,让大家快速熟悉和了解 Google 的这款工具,或许在工作中能够用的上。二、简介简单来说,这是一款能够在 Sketch 上快速生成:基于 Material Design 设计规范的控件库,并且让用户能够最大程度的自定义组件样式的插件!(Tips:只能进行符合 Material Design 规则的更改)三、下载下载链接:https://material.io/tools/themeeditor安装插件后,在 Plugins — Material — Open Theme Editor 中打开。四、Material Theme Editor操作面板这就是主题编辑器的操作面板了:这款主题编辑器有内置四套不同产品类别的主题,其中,Baseline 是 Material Design 基础设计组件主题,另外三个主题是 Google 基于 Material Design 设计语言创造出的不同产品类别的主题。五、Material Studies其实 Google 这次有基于 Material Design 语言设计创建了餐饮、旅行、新闻、购物、教育、金融等7款不同产品类别的主题,Google 称之为「 Material Studies 」,链接:https://material.io/design/materialstudies/aboutourmaterialstudies.html在这个网站中,Google 有向你呈现每个主题整体设计思路,从产品架构、布局、色彩、字体排版、图标、组件、动效、设计与品牌的结合度等维度,非常详细,大家可以去看一下,相信会有很多的收获!Material Studies 是为了向大家展示 Material Design 设计语言的灵活性,证明 Material Design 是可以创建出独特的以及富有表现力的产品的!让你了解 Material Design 并不是一个刻板不变的设计规范,而是能够基于其中的设计理念做非常多创造的设计体系!建议去看一下。六、Baseline——Material Design基础设计组件库好,我们打开第一个 Baseline (也就是 Material Design 基础设计组件主题),这个是最常用到的!打开后会进入 Sketch 界面,看右上角,内置了五个页面,分别是:Cover 封面Getting Started 入门介绍Material Theme 主题库(主要控件、字体、颜色以及示例界面展示)Material Components 组件(全部的组件展示)Symbols(Sketch 默认生成的组件库)现在,让我们来具体了解 Material Theme Editor 的四个功能。功能一:颜色 Color通过该插件我们能够快速对组件中的主色、次级色以及背景色进行全局替换,它还会根据(WCAG)2.0 的规范对你选取的颜色做可视性校准(WCAG是指:Web无障碍指南,能够帮助残疾人士「学习障碍、认知障碍、光过敏等患者」更方便地使用。)在颜色控制的面板左下角有三个色块,分别对应主色、次及色、背景色的调整。任意点开一个色块,会弹出另外一个操作面板,在这里可以选取颜色,「Custom」和「Material」 ,可以进行自定义,也可以在 Material 色板库里选取颜色。这里我有录制一段视频,可以帮助大家更了解具体每一个色块对应调整的组件:△ 视频链接:https://www.bilibili.com/video/av23926642可以看出:主色 — 应用程序栏、按钮、选中样式;次级色 — FAB、底部导航、滑块、单选/复选框;背景色 — 页面背景色。功能二:字体 Typography通过该插件,能够设置默认 Font Family,并且能够对每个字体层级设置字重,不过暂时不能修改字体大小,并且字体层级名称不能修改。△ 视频链接:https://www.bilibili.com/video/av23926503功能三:图形 Shape有「Curved」 、「Angied」两个选项,通过这个插件可以全局设置卡片、按钮等的四个角形式,可以自定义直角、圆角或「折角」的形状。△ 视频链接:https://www.bilibili.com/video/av23926276功能四:图标 IconographyMaterial Design 新推出了多种图标风格(填充,圆角,锐利,描边和双色),能够通过该插件快速下载不同图标风格的 Icons Symbol 以供使用。这里的功能和官方宣传介绍的不一样,并不是直接点击就可以进行切换,而是会自动为你下载 icon 的 sketch 文件。那难道不可以快捷更换 icon了吗?不,还是有办法的!△ 视频链接:https://www.bilibili.com/video/av23926183这是我在 sketch 中新建了一个页面,用组件设计了三个页面,当你点击任何一个组件的时候,右侧会出现快捷操作栏让你更改组件,分类很详细,点开「icon」可以看到五种风格的 icon 都在里面,选择就可以快捷替换了,而且还可以更改 icon 的颜色,还是很方便的。总结Material Theme Editor 这款主题编辑器的功能我已经介绍完了。总的来说,Material Theme Editor 还是一款让人比较惊喜的工具,会简化我们的工作流程并提升团队工作效率。它也表明 Material Design UE 设计工具已经全面转向 Sketch 了!

超过11, 000个免费图标,让你放心使用
超过11, 000个免费图标,让你放心使用

Icons8 有超过11, 000个图标,你可以非常容易的找到你需要的图标并免费使用它们。 找不到怎么办?只要你提出要求,我们的团队就可以为你免费制作你需要的图标! Icons8 独立的设计师团队创作...

Gravit Designer-矢量跨平台免费设计工具
Gravit Designer-矢量跨平台免费设计工具

Gravit Designer 是一款跨平台,完全免费,可在线使用的矢量设计工具。作为Ps和Sketch的综合产物,可以在一些轻量化的场景代替他们使用。Gravit Designer基于在线使用的优势,省去了平台之间的转换成本。官方网站:https://www.designer.io/hero    下载地址:https://www.designer.io/download    在线使用:https://designer.gravit.io    注:重新更新了链接,推荐爬山后浏览,网站不是很稳定

Adobe官方消息 XD CC 集成Photoshop免费用
Adobe官方消息 XD CC 集成Photoshop免费用

在图形化界面的设计软件中,Adobe推出的设计软件是目前使用率最高的,近日Adobe宣布了一个对设计师特别友好的消息,Adobe推出了图形化界面UX设计工具XD CC的免费计划,并向所有Adobe CC的各平台用户免费提供XD CC工具使用权,以及免费开放Typekit字体工具和Creative Cloud库访问权,同时Adobe还宣布XD CC软件更新。Adobe XD是2016年Max大会上推出的一款矢量化图形设计加上简单原型制作的软件,以抗衡当下另一款流行的界面设计工具 Sketch,与Sketch类似,可以根据不同的端口设计,提供许多丰富的设计尺寸选择。并且还自带了一些常用的UI Kits,比如 iOS、Google Material 等。这些工具可以帮助设计师快速从素材库选取内容搭建页面。如今Adobe XD已更新到CC版本,这次XD CC的更新包括改进PhotoshopCC和Sketch文件的集成整合、支持形状draganddrop操作,多重艺术剪切板黏贴功能以及密码保护设计规格等功能。重点来了:免费哦5月15日 Adobe 正式对外宣布,旗下的设计工具 Adobe XD CC 面向消费者免费开放,消费者无需订阅 Creative Cloud 即可免费使用 XD,包括使用 Typekit 以及 CC 库等原先需要订阅付费的高级功能。 XD CC 最大的优势在于可以导入 Sketch 项目,并可以与 Adobe Photoshop 无缝集成,从而快速开发出产品原型。当然 Adobe 更希望用户付费订阅 Creative Cloud,免费版 XD CC 仅提供了 2GB 的 Creative Cloud 空间,如果需要更大云空间存储则需要购买订阅。对于Adobe来说,XD显然是一个重要的选择。这也是公司推出的第一款主要新产品,也是其他公司正在尝试玩的市场,其中也包括Sketch等流行工具。尽管Sketch没有提供免费计划,但很难不把Adobe今天的举动看作是公司希望参加竞争的标志。这个免费计划涵盖了XD的MacOS和Windows版本,以及iOS和Android上的移动预览应用程序,它将包含应用程序的所有设计和原型功能。介绍视频1Belsky自由地谈到了竞争,并指出Sketch仅仅是MacOS,并且在他看来,没有哪个竞争对手能够与XD的表现相匹敌。现在MacOS和Windows用户可通过 Creative Cloud免费下载Adobe XD CC。Adobe 今(16)日宣布推出 Adobe XD CC 起步方案(Adobe XD CC Stater Plan),免费提供全面整合的 UX / UI 设计平台。免费的 XD CC 起步方案包含 Mac 与 Windows 使用的 Adobe XD、iOS 与 Android 系统使用的行动应用程序,以及让用户设计、建立原型和与同事分享使用者体验的服务。经由此次推出的方案和新功能与升级的推出,Adobe XD 成为唯一结合设计与建立原型功能与提供工业级效能的跨平台体验设计平台。Adobe XD 身为 Adobe Creative Cloud 的一部份,能够密切整合设计师的现有工作流程及 Photoshop CC 和 Illustrator CC 等最佳工具,有鉴于此一新兴领域的重要性,Adobe 同时宣布投入一千万美元成立设计投资基金,推动体验设计的创新。Adobe Creative Cloud 产品长暨执行副总裁 Scott Belsky 表示:「在设计产业,用户体验设计(UX)是成长最快的领域之一。全新的起步方案将协助实现 Adobe 的愿景,无论是新进艺术家或企业品牌,皆无需投入任何资金,即可拥有设计与提供优越数字体验所需的一切工具,探索迅速扩展中的使用者体验领域。」根据 Adobe 数据数据指出,87 的主管相信雇用更多使用者体验设计师,是企业的当务之急,因为他们对于开发世界级客户体验扮演重要角色。Adobe XD 起步方案提供免费使用的 Adobe XD,让专业人士与充满抱负的设计师、团队和学生免费使用 Adobe XD,从中学习、培养、以及应用他们的设计本领,可谓全球设计社群的里程碑事件。XD CC 起步方案还包括 Typekit,并且与 Creative Cloud Libraries 整合,便于用户在各种装置上分享与管理资源。为了协助伙伴、开发者及新创公司建立充满活力的生态系,Adobe 今日宣布投注一千万美元成立 Adobe 设计基金,以提供奖助金与股权投资。此基金将帮助设计师与开发者在体验设计的世界中实现创新,并且运用 Adobe XD 作为平台,支持第三方工具与服务的插件与整合。此一基金将扩展 Adobe 对设计社群的持续投资与合作,帮助开发者与设计师最大程度地利用 Adobe XD 以及其与 Creative Cloud 整合的工作流程。全球已有数百万名专业创意家和顶尖品牌使用此一流程。Adobe XD 同时推出一系列新功能与升级,包括节省时间的工作流程更新,帮助设计师缩短概念发想至制造原型的时间。Adobe XD 的新功能是根据设计社群的意见与使用者要求而改进的。最新的重要更新包括支持在全新 Adobe XD 内开启 Sketch 与 Photoshop CC 文件、发布与分享 Design Specs(Beta 版)的能力、以及与 Dropbox、Zeplin、Avocode 与 Sympli 等第三方工具的整合 。本月的更新包括:提升与 Sketch 及 Adobe Photoshop CC 的整合:自从今年初推出之后,Adobe 持续提升在 Adobe XD 内开启 Sketch 与 Photoshop CC 档案的功能。更新后,用户能够导入笔划与影像效果,更快速地在 Adobe XD 下载 Photoshop CC 档案,以及提供数项下载 Sketch 档案的拟真转换能力提升。以密码保护 Design Specs(Beta 版):用户能够以密码保护限制设计规格的存取。送出连结之前,使用者能够在「分享」跳出窗口内输入密码,确保独家设计的安全性。简易的转换符号拖放选项:将资源面板上的符号拖放至画板的另一符号上并覆盖,一举更新所有相同符号。贴至多个画板:复制一个图像,然后选择多个画板,将之贴至每个画板。此外,Adobe 运用一系列 Creative Jams,让设计师与大师级人物分享彼此的独特设计流程,提供学习与成长的机会。在本月更新中,Adobe 为设计社群释出一全球著名设计师开发的一系列免费 UI 工具与资源,这些设计师包括 Daniel White 、Ana Miminoshvili、Zhenya Rynzhuk、Steve Wolf 、以及创造 Creative Mints 的设计师 Mike。Adobe XD Starter 方案为免费提供,现已全面开放。Adobe XD 的试用者需要从 Creative Cloud 桌面计算机应用程序中升级平台版本,或是从 xd.adobe.com 网站启动。免费方案可搭配现有 Adobe XD 方案,开放个人、团队与企业使用。方法1通过Creative Cloud客户端下载XDMac版:https://pan.baidu.com/s/1b01hZS提取码:qijiWin版:https://pan.baidu.com/s/1bR549w提取码:qiji方法2通过Adobe官网下载链接:https://www.adobe.com/products/xd.html汉化包链接: https://pan.baidu.com/s/1zKQMWSTHZiG2wgWiCZQmgw 密码: qiji

Adobe Creative Cloud CC2017+破解补丁(补丁可支持2018)
Adobe Creative Cloud CC2017+破解补丁(补丁可支持2018)

Adobe Creative Cloud 2017可以将Creative Suite 桌面应用程序、Adobe Touch Apps 和相关服务进行整合,提供从构思到出版的完整体验。Adobe Creative Cloud 2017集成了您创作最伟大作品所需要的所有元素。它带给您最新、最棒的 Adobe 创意工具和服务。有了 Creative Cloud,您将能更高效地与团队及伙伴协同工作,并在创意社群内分享作品。Creative Cloud 将您需要的所有元素整合到一个平台,简化了整个创意过程。Adobe Acrobat Pro DC v2015.023.200566Adobe After Effects CC 2017 v14.1.0.576Adobe Animate CC2017 v16.0.1.1196Adobe Audition CC 2017 v10.0.2.276Adobe Bridge CC 2017 v7.0.06Adobe Dreamweaver CC 2017 v17.0.1.93466Adobe Illustrator CC 2017 v21.0.2.2426Adobe InCopy CC 2017 v12.0.0.816Adobe InDesign CC 2017 v12.0.0.816Adobe Media Encoder CC 2017 v11.0.2.536Adobe Muse CC 2017 v2017.0.1.116Adobe Photoshop CC 2017 v18.0.1.296Adobe Photoshop Lightroom CC v6.86Adobe Prelude CC 2017 v6.0.2.416Adobe Premiere Pro CC 2017 v11.0.2.47不需要多说,大家都知道的。在这里需要说明的是这个破解补丁,可以直接支持2018版,所以每次安装我都懒得再去找2018,直接通过在线升级,升级至2018然后再用这个破解补丁直接破解了。很好用哦。破解补丁下载:链接:https://pan.baidu.com/s/1ofKqwpWUmyNO_DExP73Kg 密码:lidn安装程序下载链接:https://pan.baidu.com/s/1MerYNIki0R8ItugRO4oFJA 密码:fkk8

Coffee Slice for Sketch
Coffee Slice for Sketch

Sketch智能切图工具。大清已经亡了,切图的事就不要人工来做了。简单切图功能:根据用户给出的目标容器尺寸,自动计算icon的描边属性、宽度,对icon进行缩放、贴边处理,添加切图图层,自动生成基于1...

velositey
velositey

Velositey是Photoshop的一款网页布局扩展插件,通过这款插件你可以快速搭建网页布局,布局包括头部、幻灯片、内容布局、页脚排版等等。

字由,设计师必备字体利器
字由,设计师必备字体利器

字由是为设计师量身定做的一款字体工具。字由收集整理了上千款精选字体,设计师可以通过收藏,搜索,标签,案例等快速找到心仪的字体,并在设计软件中无缝的使用这些字体。 字由还是一个字体爱好者的社区,我们精心...

protopie
protopie

无代码原型工具 轻松组合即可制作交互动效, 摆脱代码束缚体验感应式交互 轻松上手 无需任何代码知识就可制作高质量原型。ProtoPie顺应设计师的思维方式帮助用户快速打开交互之门。 传感交互 陀螺仪、...

MUGEDA——专业级H5交互设计平台
MUGEDA——专业级H5交互设计平台

Mugeda是专业级HTML5交互动画内容制作云平台,拥有业界最为强大的动画编辑能力和最为自由的创作空间,可以帮助专业设计师和团队高效的完成面向移动设备的H5专业内容的制作发布、帐号管理、协同工作、数...

Flinto-1.3.4
Flinto-1.3.4

flinto是一款用于App原型交互演示的工具,为UX/UI设计师,交互设计师,视觉设计师的交互演示提供简单快速的“傻瓜式”解决方案。

Sketch Measure 2.0
Sketch Measure 2.0

为团队协作提供有趣的标注插件, 一键自动导出离线标注文件.

掘金浏览器插件
掘金浏览器插件

掘金浏览器插件收录了各大设计内容站。每天都会更新当日最热门的设计图和优质文章。设计师每天只需打开这个看一次即可了解全网最热门的设计内容。

屏面H5
屏面H5

真正免费、强大的H5工具,帮助企业、个人快速制作手机端动态广告。 独家AI/PS直接导入功能,比传统工具制作速度提升3倍;76+1种动画在线生成,部分替代动画制作软件实现复杂动作;强大表单功能帮助企业...

PxCook 2.0 像素大厨
PxCook 2.0 像素大厨

PxCook是新一代的UI界面设计标注切图工具。自动智能分析PSD文档信息,只需通过简单的点、滑操作即可生成标注。同时实时检测PSD,一旦PSD更新,标注自动更新,无需再次标注。切图工具无需安装插件,...

Coffee Slice for Sketch
Coffee Slice for Sketch

Sketch智能切图工具。大清已经亡了,切图的事就不要人工来做了。简单切图功能:根据用户给出的目标容器尺寸,自动计算icon的描边属性、宽度,对icon进行缩放、贴边处理,添加切图图层,自动生成基于1...

RightFont 3.0 字体管理应用
RightFont 3.0 字体管理应用

RightFont 是一款适用于 Mac 的轻量字体管理 App,快如闪电,轻松应对海量的字体文件。 你还可用Dropbox,百度网盘等服务来同步并管理你的字体,简单快捷。新版本经过大量优化后,运行更...

teambition
teambition

UI中国官方使用协作工具|Teambition 是一个简单高效的项目协作平台,致力于改善人们的工作方式, 帮助企业解决项目进展过程中的任务管理、知识分享、文件共享、日程安排等需求。目前,已经有横跨 十...

交互动效神器Pixate
交互动效神器Pixate

Pixate 是新一代的移动交互设计软件,致力于帮助产品设计师不通过编写代码就能够实现移动端复杂的动画和交互设计工作。Pixate能够100生成原生的移动交互原型,能够让你针对不同平台改进产品交互体验...

标你妹啊—UI设计自动标注工具
标你妹啊—UI设计自动标注工具

标你妹啊—UI设计自动标注工具

Principle 1.0
Principle 1.0

Principle是前 Apple 工程师打造的一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台...

velositey
velositey

Velositey是Photoshop的一款网页布局扩展插件,通过这款插件你可以快速搭建网页布局,布局包括头部、幻灯片、内容布局、页脚排版等等。

Material Design Color Swatches
Material Design Color Swatches

Material Design的配色方案更是艳丽无比,与扁平设计风格更是相得益彰。如果你还在担心自己的设计作品配色的话,那么下面这套Material Design的配色版插件,将彻底让配色变的无比简单...

Sketch Measure 2.0
Sketch Measure 2.0

为团队协作提供有趣的标注插件, 一键自动导出离线标注文件.

为移动端方案设计演示而生的DEMOO
为移动端方案设计演示而生的DEMOO

飘:在移动互联网产品设计过程中,我们会在纸板或电脑工具上画出简单的线框图,用思维导图标注界面间的关系等,但往往,我们在不断反复的讨论中会因为一些理解上的误差,或是一些细节无法脑补还原,而影响方案的实施,影响项目的进度或质量。“朴素”的关系或原型图方案会带来一定的沟通理解成本,所以需要方案最终以一个模似真实的APP,可以满足的操作演示的同时,借此来讲述方案的各类关系与细节,验证操作体验等的可行性。在早期的软件设计时代,很多团队会借助像Flash、AE等动画工具,用动画的方式,输出一个模似真实的软件界面,来完成这类演示需求,但并不完全能满足模拟操作或快速修改,实现成本亦相当大,并不利于高速迭代优化的方案输出。当然,移动互联网时代,也有很多更轻便可以符合APP方案设计演示的工具,从QQ音乐5.0的设计之前,我们尝试了很多互联网国内外优秀的Demo演示工具,但很快发现,都因不坚持迭代更新、速度缓慢、功能臃肿或缺失等原因而遗憾放弃,难以满足团队的工作诉求,于是萌生了设计研发一个小而美,专门满足“简单、更捷、演示”APP设计方案的工具,拉起一个小团队,花两晚上输出了一个简单粗暴的版本,为QQ音乐5.x、全民K歌等多个项目的方案设计提供高效的支持。在过程中,也不断加入了一些团队的刚需功能,慢慢在公司内部散播开,被更多的项目团队采用,同时也收到了一些体验上的诚恳建议,一直没违背它“小而美”的定位,在更多团队的请求下,我们把工具在安全性和稳定性进行优化,本着互联网分享精神,在2015年圣诞节来临之际,送给互联网产品和设计团队一份礼物,分享奋斗在一线可爱有同样需求的人儿。Demoo – 为移动端方案设计演示而生!(这句话应有五毛钱的跑马灯特效)它是谁?Demoo基于web设计搭建,无需安装,在浏览器内可视化操作,简单便捷的创建方式,通过上传平面稿件,用手势或触点热区的方式把界面关系连接起来,加入连接转场特效,输出一份仿真APP的、可体验操作的设计方案,满足在电脑、会议投影现场及手机上体验操作,或分享给工作伙伴,直观清晰地理解设计上的细节,促进讨论沟通,同时还可授权给其他成员协同修改优化。基本功能创建项目,无需代码技能,做一个演示DEMO,弹指间只需四步:1. 新建原型 - 批量上传移动端稿件,在编辑区生成多个卡片;2. 设置划动手势或热区触点 - 输出界面间的关系和触发区域;3. 选择转场动画实现流畅的切换效果;4. 保存预览 - 输出DEMO进行分享、演示和讨论。更多细节功能1. 编辑区域给卡片排序、更名;2. 编辑区域双视图切换,并可放大、缩小卡片的显示尺寸,满足不同的编辑需求;3. 设置卡片顶、底部固定区域,让长稿件的中间部份满足上下滚动的体验;4. 设置APP icon和闪屏;5. 授权给其它用户编辑,协同办公。更多功能期待您来发掘…体验与分享演示提供演示DEMO二维码,用手机版QQ扫码,可高保真全屏体验APP效果;在电脑操作创建及预览,在会议现场投影演示讲述;参会成员可用手机版QQ扫码在手机全屏仿真体验与讲述者同步并参与讨论;万水千山总是情,体验再说行不行!http://isux.us/demoo

超实用!帮你在线创建图表/流程图的GLIFFY
超实用!帮你在线创建图表/流程图的GLIFFY

编者按:今天不到布 给同学们安利一个超实用的在线神器,可以创建流程图、UML图、线框图、BPNM、组织架构图、网站地图等各式图表,还有很多贴心功能,来一一感受下。之前写醍醐灌奶酪的时候,做了一张很大的图。可以说,当时写文查资料只占那篇文全部精力的一半,剩下一半则是作图 >

SKETCH绝佳搭配!30秒制作交互原型的次时代神器FLINTO
SKETCH绝佳搭配!30秒制作交互原型的次时代神器FLINTO

编者按:30秒出交互原型,5分钟搞定交互动画!今天Payshare 给大家安利一款超实用的交互原型制作神器,亮点有3:整体交互原型制作,与Sketch无缝配合,制作速度快快快到难以想象,内附一个教程,不到20秒效果就完成你敢信?来收!Flinto的前身是一款在线制作原型的工具,通过上传图片,添加热点配合相应的交互动作快速的生成整体原型通过网页或者手机端展示给客户观看,与之前介绍的Briefs非常相似,但Flinto是在线应用。随着移动设备的普及,Flinto也不断进化,团队开发出了Flinto for mac 版本,截止到现在的版本是Flinto 1.12任何工具的出现都是为了提高我们的效率。作为一款交互原型制作软件首先要满足:可以人机交互便于设计师与其他人员沟通减少开发成本Flinto的一些效果也许我们很难想象,以上的后面三个效果都是在极短的时间内完成的(极短

PS 参考线插件GUIDEGUIDE下载及使用说明
PS 参考线插件GUIDEGUIDE下载及使用说明

大家都知道,每次在PS里面拉参考线是一件很痛苦的事情,特别是要按照规定的宽度创建Grid的时候,而这回,Cameron Mcefee提供了一个插件“GuideGuide”,如其名,的确是非常方便的一款创建参考线的插件。今天为大家介绍一款非常实用的PS小插件GuideGuide,它提供了一个非常便捷的方式生成像素级别的辅助线(栏,行,中线……)想像一下在PS里面创建好一组多栏目的辅助线:页面多宽,分2栏目还是3栏,分栏里面又有多少个分栏……数学不好的同学估计手心都开始冒汗了。确实,在PS里面创建网格是个非常痛苦的事情,不少设计同学都是大概估算一下宽高来拉辅助线;或者画一个矢量图形,然后复制移动来分列。如果总的宽度有了变化之后,又将他们整体拉宽来重新分列。没耐心的人估计已经开始喊:“我是设计师,不是数学家”,有耐心的人会重新算过一遍之后再来,还有公式如下:(页面宽度 – (间隙宽度 x (分栏数 – 1) ))÷ 分栏数 栏目宽看起来是不是有点想暴走?设计个页面还要搞这么复杂的东西。实用的小工具GuideGuide来了为啥要把时间花在数学上,而不是省心一点,留出多一点时间来将设计做得更好呢?只要输入一些数字,GuideGuide就会利用PS里面的辅助线自动的在你的文档中划分好网格。当你用了之后就会由衷的觉得:很好很强大。而且,它真正的强大之处在于:支持选框工具–如果你的文档中有选框的话,它可以在选区内生成对应的辅助线。分栏与分列页面需要分栏和等比间隙?GuideGuide轻松搞定找到中点GuideGuide让你找到对象的中点变得易如反掌,只要画一个选区或者在图层面板(ctrl + 鼠标左键)创建一个选区,然后点击中点按钮,就可以立即创建中点线。然后将此列中的其他元素根据需要来对齐存储常用的划分为选项如果你经常用同一种网格划分方式,可以存储为选项方便以后随时调用发挥你的创造力GuideGuide有分栏,有边距,有中点…… 发挥你的想象力它可以做的更多划分导航当你要将一定宽度的导航划分为N等分的分栏的时候,是不是又要计算宽度了?现在不用烦恼了,用GuideGuide吧1.用选区工具画一个你导航宽度的选区2.输入你导航的分栏数以及他们之间的间距等边距矩形绘制当你想绘制一个与你当前元素等边距的矩形,是不是又要计算了?1.在图层面板(ctrl + 鼠标左键)创建选区2.在边距栏输入一个负数,然后点击图标,GuideGuide会自动输入四边等距的指数,然后回车创建辅助线3.根据新创建的辅助线绘制四边等距离的矩形基准线网格绘制利用GuideGuide便捷的行高设置,轻松创建整页的横向对齐基准线1.输入你想要的行高2.将你页面中的元素相应的对齐剩余像素分配在分栏的时候不是永远都能完美的等分,如果你要在一个10px宽度内分3栏,那么多余的像素怎么办?设置里面的剩余像素分配设置决定将多余的像素分配到哪里,默认是“右下角”官网下载地址:Download下载完毕后开启 Adobe Extension Manager 安装插件,然后打开PS在 windows > extensions 下面开启窗口

切图标记外挂神器ASSISTOR PS深入解读
切图标记外挂神器ASSISTOR PS深入解读

基本介绍与其他切图标记软件不同的是,Assistor PS是完全独立于 PS 本身的,说是一个外挂更加合适,旨在提高切图标记的效率及速度。虽然不是一个插件,但是它与 PS 是连通的,当你在 PS 选择一个图层在后,即可使用它的功能。如果你肯花点时间下载是试用,相信不会让你失望,甚至能可能让你觉得相见恨晚。主要功能如下:轻松创建标记文档,一键导出图层单位数值转换快速快速创建参考线(类似 GuideGuide)圆角矩形调整按照固定的间隔复制图层官方介绍视频(已 fanqiang 转到优酷):http://v.youku.comAssistor PS 适用于 PS 3.0 以上的版本,同时兼容 Windows 系统和 Mac 系统。看完视频,心急的同学可先直接前往它家的网站 http://witstudio.net/en/assistor/download 进行下载。想了解更加详细的功能介绍的及一些使用小技巧的,可以继续往下看。切图标记功能广大切图仔最关心最常用的功能抢先亮相,尤其是网页设计师和 UI 设计师,需要频繁和开发工程师打交道,如果不标记清楚,开发做出来的效果有时候简直能吓死人。「你骗人,设计稿根本不是这样的……」「你没标清楚,怪我咯……」「……」「乖,不哭」从此以后,我发誓,一定要弄出一个牛逼哄哄的标记图,让这傲娇的程序员无理反驳,无地自容……好了不瞎扯了,接下来给大家介绍这个切图神器各个界面的功能详解。Each Layer 选中此框可单独处理每一个图层,不选中则将已选择的图层视为一个整体进行处理分辨率单位设置 可选择输出数据的分辨率单位,如 px 以及安卓开发中常用的各种 Dpi 等颜色设置 切换标记颜色标记设置 设置标记环境标记数据输出 自动计算并输出所选图层的位置、大小、间距等信息引导框 为你所选的尺寸或者图层创建一个引导框一键切图 快速切出并保存所选图层数据提取 输出所选图层的数据信息复制全部 复制上面第八项的数据到剪贴板点开标记设置,我们可以看到下面的界面:输出设置 指定输出数据的的各种设置,如字体、小号、抗锯齿、颜色及加粗。分辨率单位设置小数/整数设定 选中则四舍五入输出整数颜色代码类型设置 RGB 或者 HEX,具体什么类型,看程序员的编码习惯字体单位设置 PT、PX、SP创建标记背景 有时候我们的标记可能与设计稿的颜色相近影响阅读,这时候添加背景可以使之更加清晰控制点设置 可以选中标记从所选图层的左上角、右上角等地方开始第一行选中则标记后自动链接图层。第二行选中则每次标记自动创建组标记坐标选择一个或者多个图层,点击标记坐标按钮即可标记。或者(Alt+1)。按钮右边的小三角形可以进入该功能的设置页面,可选择标记的格式及指定标记位置。有时候我们需要标记相对坐标,怎么做?先用选区工具选择一个区域,然后再开始标记即可标记大小同样选图层后点按钮标记。或者(Alt+2)。小三角形可以设置标记的格式及选择同时标记宽高还是标记其一。标记距离这里的标记有三种情况,快捷键(Alt+3)。小三角形可以设置标记的格式。选中两个图层,标记两个图层之间的距离利用选区工具拉个区域,标记该区域较长的边只选择一个图层,标记该图层与画布间的距离标记文字信息根据设置输出文字的相关信息。快捷键(Alt+4)。点击小三角形,可选择信息选项。分割线上部分为是否显示引导线,效果如下图,左边为显示引导线,右边为不显示。分割线下半部分则设置是否显示字体的相关信息,依次为字体族、字体样式、字体大小、行高、字体眼颜色、效果(阴影)。感谢大家的阅读,下篇文章我们将学习 Assistor PS 的其他功能,如引导框、一键切图、创建参考线、圆角矩形转换、按照固定的间隔复制图层等。近期发布。创建引导框为你选择的图层创建引导框。快捷键(Alt+Q)。点击旁边的小三角可设置引导框的大小。对于一些初级切图仔来说,这个功能可能没什么接触过。有时候我们需要为一些特殊图层创建引导框后再进行标记,具体作用及重要性,请看下面的例子。 错误的标记正确的标记这里我先是为每个环肥燕瘦的图标创建统一的引导框,大小为38px38px,然后再标记每个引导框之间的间隔。如果没有这个引导框,按照第一个标记,标出来的数据乱七八糟不说,开发同学在编码的时候还要量一下空白像素……一键切图吊炸天而且复杂到让作者凌乱的切图功能就藏在这个神奇的按钮下。此功能的工作原理大概是把需要切的图层复制到一个新窗口里面保存。具体使用步骤如下:选择你要切的图层如果需要对每个图层单独切出,请勾选 each layer点击切图按钮,或者快捷键(Alt+W),此时 PS 就像开了脚本的游戏,全自动啪啪啪地切了起来……(切图复制出来的新窗口大小等于图层的实际大小,包括该图层的样式,比如投影)当你使用选区工具拉出一个选区之后,将切出每个图层在该选区的切片,切片的大小和该选区的大小一致。假如你选了一个图层,但是这个图层在这选区里面是没有任何东西的,那你切出来的切片就是全空白的。(这里稍微比较复杂,有兴趣可以自己尝试动作操作理会下。)同样点击右边的小三角形,我们可以对功能进一步设置,使之更快更全自动。设置固定大小。有时候我们需要切包含透明像素的图层,比如上面标记的四个社交图标,可以设置38px38px,后再下进行切图。输出比例。这里可以选择输出比例,比如2x,50,安卓的 HDPI 等,Assistor PS会自动帮你计算并输出。自动保存设置。建议勾选 auto save 和 save and close,这样会自动保存切片并关掉新建的切片窗口。Path 设置保存路径。Suffix option 2x 勾选后会自动在2x切片的文件名加 2x。创建参考线相信很多人,尤其是 UI 设计师,网页设计师都用过 Guide Guide 来创建参考线, Assistor PS 包含了 GG 的大部分功能。创建水平居中参考线 如果没有选区,则创建整个画布的水平居中参考线。创建垂直居中参考线 同上。删除参考线参考线设置(详见下文)清除所有设置根据设置创建参考线参考线设置(这里不过多介绍,只给出翻译)单位转换器(附赠取色器)输入数值选择基本单位转换结果颜色编码取色器(可取屏幕任何位置的颜色!隐藏得太深了,我才发现……)圆角矩形转换可以把圆的换成方的把方的换成圆的。勾选 each corner 可单独编辑每个角。使用前请先在 PS 选择一个矩形。按照固定的间隔复制图层又是一个炒鸡实用的功能,具体效果请看例子:使用前:设置 Assistor PS 如下(列数3,行数3,列间隔50px,行间隔50px)使用后:不过建议大家用完稍微花点时间填充下数据,如下图:

PS抠图神器:KNOCKOUT 2.0汉化版下载及教程
PS抠图神器:KNOCKOUT 2.0汉化版下载及教程

午夜设计尸 Kockout 为Corel公司开发,是一款相当强大的Photoshop插件,该软件利用配合Photoshop滤镜使用,在图像输出上会简化许多,尤其是Kockout2.0版本处理完后不用存盘就可直接返回Photoshop下进行编辑,不但能够满足常见的抠图需要,而且还可以对烟雾、阴影和凌乱的毛发等轻松抠出,省时省力,即便是PS菜鸟,也能摇身一变成为抠图高手!网盘 下载地址→http://pan.baidu.com/s/1jGq40VO注意事项软件安装其实很简单,但是鉴于还是有部分同学安装失败,分享者午夜设计尸也做了全面说明:1、许多转发盆友反馈回来的信息:PhotoshopCS6以及64位系统、win8经测试都是可以用的,可能ps版本不同会存在安装差异;2、大部分盆友安装时会提示填2次目录位置,第一个是Knockout2.0的主程序目录,可自己填,运行KnockOut 2_P1.exe汉化时就是这个位置;第二个是你PS滤镜库目录所在,按照教程中填即可。建议大家卸载重装一次,我写教程前亲测几次都没有问题,所以当时纠结没写上去,抱歉了;3、安装时如果没有自动生成name以及Serial Number的,name是可以自己填的,Serial Number在解压后的文件夹的SN.txt里;4、安装主程序完毕后面是注册步骤,可以直接取消跳过,完成;5、注意使用前,必须将图片双击转换为普通图层方能进入Kconkout主程序,否则载入工作图层会跳窗;6、关于绿化版的非我提供,绿化版的解压到PHOTOSHOP 的滤镜目录中(即PluginsFilters 下,可能版本不同文件夹的名称会有差异),然后需运行文件夹中的绿化.bat成功后方能使用。7、许多盆友反馈,绿色版的无法绿化,根据我的经验可能是你ps目录有是中文命名的,建议不要使用中文命名目录,国外许多软件无法识别中文路径。安装教程1、解压之后,打开【knockout2.0安装】,点击Setup.exe安装;2、安装目录须设置为Photoshop目录下的/Plugins/Filters文件夹中;3、安装完成后,打开【knockout2.0汉化】,安装KnockOut 2_P1.exe,安装位置为你ps目录外面的【KnockOut 2.77】文件夹(此文件夹为knockout安装时自动生成的knockout根目录);4、再安装KnockOut 2_P2.exe,安装位置为Photoshop目录下的/Plugins/Filters文件夹;5、大功告成!KnockOut运行程序直接是打不开的,需在Photoshop在载入图片后滤镜 knockout2载入工作图层..中进入。抠图教程1、打开一张能给你初恋般感觉的妹纸图~双击背景层,转换为普通图层,(Knockout不能对背景层操作),考虑到害怕破坏原图,所以建议最好把要处理的图层复制一层预存;2、接着对复制的图层执行:滤镜Knockout载入工作图层;(这时PS会自动关闭,并开启Knockout2.0)3、用对象内部工具画出如图的选区,注意不要画到毛发的边缘上,可以留有适当的距离;(按住shift键为加选区;Alt键为减选区;Alt+为扩大选区)4、用对象外部工具画出头发外部的选区,这一步要细一些;(说明:对象内部工具画出的选区为保留部分,对象外部工具画出的选区外部为删除部分,两个选区之间部分为图像边缘)5、可以放大工作区细调选区,不同选区需切换工具;接着单击下面的“处理按钮”,进行抠图预览,并且可以指定不同的背景色。6、若果发现问题可以Ctrl+1回到原稿,进行修改;为了更好的观察,也可以再背景上放置一张位图(如图);7、确定没有问题,文件应用,自动回到PS,并自动生成抠好的妹纸;部分不满意细节可以在PS中用其他工具进行小调整,完成!8、So easy!妹纸抠得手了!盆友们来感受下~

Copyright © 2011 - 2020 UIYuan设计师交流平台, All Rights Reserved. 皖ICP备18024424号-2

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源,商业媒体及纸媒请先联系:service@uiyuan.com

UI园会员交流QQ群: 233748945 / 73425514