刘钢的博客 - 我是UED » 工具 http://www.iamued.com http://www.IamUED.com Wed, 18 Jan 2012 02:51:35 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 一些实用的视觉辅助工具[转] http://www.iamued.com/design/1653.html http://www.iamued.com/design/1653.html#comments Wed, 18 Aug 2010 03:48:28 +0000 RichieLiu http://www.iamued.com/?p=1653

导读：在视觉设计过程中，除了一些我们耳熟能详的软件以外，其实还有不少优秀的辅助工具能帮助我们解决实际学习和工作中的问题。这次，我便总结了部分这类型的辅助工具，与大家分享（自己能力有限，如有遗漏，敬请补充）。

————————————————————————————————

做为一名视觉设计师，又一次参与了广州ucd的活动。说实在，自己对这次的活动有点点小小的失望，可能是之前预告的内容与实际情况有些许出入吧。不过这次活动气氛倒是这几次以来最好的，可能mm来的比较多，大家都异常活跃的缘故吧。

几位嘉宾也做了自己精彩演讲，对于我这名已经在职场打滚的人而言无疑是实用之极。不过考虑到，这次到场的部分童鞋都还是在校学生，活动提到的部分内容可能对他们而言还是比较羞涩难懂的。同时，里面提高的部分工作技巧和工具，貌似对比较大型的网站才有实际操作的可能性。

而作为一名有一定资历的门户网站设计师，我也只是能对部分嘉宾提出的观点有较清晰的概念，不过这也不排除自己本身愚笨的可能性存在。那么，借写这篇博文的机会，也分享自己在平时视觉设计工作中一些常用到的部分辅助软件，这些辅助软件主要针对视觉设计师的工作范畴，常用的软件就不在此篇涉及的范围内了。

这里，简单的将这些视觉辅助工具分了个类别：分别是素材生成类，截图取色类，动画辅助类以及格式转换类。这些分类基本涵括了自己的网站视觉设计工作中，常用到的几个范畴了（如有更好的建议，欢迎各位补充～）

素材生成类

·在线生成矢量毛笔字 http://sf.kdd.cc/

在中国，毛笔字体字体是每个设计师应该学习的必修课，不过随着时代的发展，我们这方面的能力都退化了，而且字库里面的毛笔字显然也不能满足我们的视觉要求。这时候，可不试试这个快速毛笔字生成工具呢？内含十几款书法大家习作，相信总有一款适合你。

·在线位图转矢量文件 http://vectormagic.com/home

一般在学习和工作中，不免会碰到一大堆图片等着我们处理。特别是处理标志时，客户提供的标志基本上都是以图片为主，而且有时候由于图片过小，质量极差。这时候，将文件转换成矢量可能是我们首要处理的问题。当然，你也可以要求客户提供矢量标志素材（有时候客户只是销售人员，可能并不了解什么是矢量标志，沟通过程会比较麻烦）…也可以通过常用的设计工具完成这个转换过程。

不过从方便程度而言，我跟推崇这个在线转换的工具。

截图取色类

·Picpick

网页设计师平时工作免不了截取各种各样的图片。除了利用浏览器截取网页外，似乎还有很多东西需要我们收集起来。那么这款小巧的工具可能适合你，它可以执行截取全屏、活动窗口、控件、指定区域、手绘区域等操作。支持双显示器，内置多种输出模式。

同时别以为PicPick只能抓图，它还内置有图像编辑器，截图后可进行简单图像编辑。它提供一系列辅助工具，主要包括：取色器、调色板、放大镜、屏幕标尺、极座标和直坐标、白板等等，尤其对网页制作非常有帮助，可谓是网页设计师的全能工具箱。想具体了解请点击【详细】     

·QQ截图

别以为我写错了，其实qq截图是个强大的工具。除了带有简易的截图功能外，我最需要的还是其计算截取范围像素的功能。这能方便在写代码，迅速计算元素（div）与元素（div）之间距离，提高工作效率。

动画辅助类

·SWiSHMax3

快速解决动画创作设计的工具 高级的 Flash 创作设计工具提供给绘图设计者或网站的专业设计师，超过350种默认的媒体效果，超过180种立即可用的组件和向量图形，可导入图片、图形、声音效果和影片，还可导出简报到Flash影片、执行文件、GIF动画或图像顺序，另外全新的项目模板及精灵面版立即呈现设计成果…，简单易懂，创作令人惊艳的Flash动画与网站就是那么简单！

·硕思闪客精灵

方便学习优秀动画制作思路的软件。它的专业版不但能捕捉、反编译、查看和提取shockwave Flash 影片（.swf和.exe格式文件），而且可以将SWF格式文件转化为FLA格式文件。它能反编译一个FLASH的所有元素，并且能完全支持动作脚本AS3.0。

格式转换类

·IcoWorkshop图标制作

对于常用的图标而言，图像编辑软件都不能很方便的编辑它们。而IconWorkshop的推出为我们解决了这一难题。这一全功能图标编辑软件除了可以让你自由编辑创作各种XP样式图标外，还可以在各种图标文件间互相转换。

在工作的实践中，最常用到的是其将任何的图像格式轻松转换为图标格式，一般为ico格式。其兼容性较好，支持透明通道，适用于各电子杂志，网站站标，桌面图标的生成工作。

转自：http://drizzlep.blog.sohu.com/158082019.html

]]> http://www.iamued.com/design/1653.html/feed 2 Zen Coding初体验 确实爽 http://www.iamued.com/qianduan/1246.html http://www.iamued.com/qianduan/1246.html#comments Thu, 28 Jan 2010 12:21:33 +0000 RichieLiu http://www.iamued.com/?p=1246 一直听说Zen Coding 最近一直在研究前端最合适的IDE 所以也索性尝试了一下

ZenCoding项目地址：http://code.google.com/p/zen-coding/

先说环境 我是在MyEclipse > aptana 下面安装的Zen Coding

安装方法不难 建立一个项目 新建一个文件夹叫 script 然后把Zen Coding拷贝进去就可以了

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用 Aptana，下面的第一步可以跳过。

  1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如 果你使用Aptana，可跳过这一步)
  2. 在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding
  3. 在新创建的项目中创建scripts文件夹
  4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
  5. 安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项：

  • Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)
  • 官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失

试用了一下发现确实很爽

具体的看下面介绍

做一个简单的Demo

html:xxs

div#header>div#logo.left+ul#menu>li*5>a

两行代码下去 生成的结果

</p>
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p>
<p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></p>
<p><head></p>
<p>	<title></title></p>
<p>	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /></p>
<p></head></p>
<p><body></p>
<div id="header">
<div id="logo" class="left"></div>
<ul id="menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<p></body></p>
<p></html></p>
<p>

方便快捷 下面介绍一下选择符用法

这里是一个支持的属性和操作符的列表：

* E

元素名称(div, p);

* E#id

使用id的元素(div#content, p#intro, span#error);

* E.class

使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;

* E>N

子代元素(div>p, div#footer>p>span);

* E+N

兄弟元素(h1+p, div#header+div#content+div#footer);

* E*N

元素倍增(ul#nav>li*5>a);

* E$*N

条目编号 (ul#nav>li.item-$*5);

具体的还要等我用熟了再给大家介绍了

本文部分内容转自互联网

]]> http://www.iamued.com/qianduan/1246.html/feed 2