Tag Archive for 'design'

HTML颜色图表

http://fred.oracle1.com/~fred/pages/colors.html

做网站配色的好工具。

 

 

 

 

10+设计资源和灵感的必备网站

原文地址 http://www.cnbeta.com/articles/67747.htm

在这个互联网,并不是的有人都掏心掏肺让你可以真正学到东西。所以,找到一个有高质量,有内容的资源和灵感网站并不是一件容易的事。自从自己学习网页设计以来,收集了不少网站,这里,分享10+必备设计资源和灵感的网站,或许,会有你一直寻找,但并未真正找到的:

1. CSS Globe – 你可以不看A list Apart,但这个我想是必备的。这样的说法多少有些争议,毕竟ALA是受大部分人推崇的。不过,这个网站总能收集到你需要的CSS技巧、JS教程、用户体验,甚至WordPress资源。

cssglobe.gif

2. Smashing Magazine – 估计她的名声之大到了可以不用介绍的地步。以收集出名。当然,我是在夸奖,这个网站的质量无可质疑,可以说是篇篇精品,涉及CSS/JS/平面设计等。

sm.gif

3. Nettuts – 关于CSS/JS/PHP,各种关于网页设计和网页功能实现的技巧,有时候,即使你不认识CSS或者PHP,这个网站的文章都会让你实现某个功能/效果,所有讲解都非常详细。

nettuts.gif

4. Web Designer Wall – 跟Nettuts相似,内容没有Nettuts多,不过,绝对每篇精品,大多为作者自己写的,原创性比较高。主要关注网页设计与平面设计。

wdw.gif

5. Noupe – 又一个相对比较多收集内容的网站,貌似是因为一个关于Wordcodess教程系列而出名,不过,其内容远远不及这些,关注的内容大多关于网页设计的技巧。

noupe.gif

上面介绍的都是综合性比较强的,下面介绍一些内容比较专注的网站,你想找到的,这里都有相关的顶尖资源在这里,他们要做的就是顶尖的内容:

6. Fonts500 – 500种字体,还怕找不到你想要的?不过,都是英文字体。一般情况下,需要比较特别的中文字体,都需要自己制作。

font500.gif

7. ColourLover – 有没有总听人说,这个主题的配色很sofish? 对,颜色可以建立一个品牌,就像一个商标一样,给网站找一套合适的配色可以让你的品牌更深入人心,而ColourLover可以帮到你。

colourlover.gif

8. LogoPond – 主题像你的衣服,而LOGO就像你的脸孔,一个成功的LOGO总是让人印象深刻,不需要多华丽,但至少要有自己的特色。看看LogoPond吧,她会给你灵感。

logopond.gif

9. CSS Mania – 像A List Apart一样,她备受推崇,她被视为灵感的汇集地。当然,并没有那么神圣,但CSS Mania总能带来漂亮的、独具创意的网站,让你耳目一新。

cssmania.gif

10. ZCOOL -这个对于国内的设计师来说,可能相对比较熟悉。提供PNG/PSD/ESP/AI等素材,主要关注平面设计,还有JS以及一些的酷站。个人在图片素材上,经常在上面淘宝。

zcool.gif

11. Web Design List – 最后,让我们来个大集合吧,你还想要什么呢?JS/CSS/XHTML/IE Hack/Blog程序/等,关于标准化网页设计的内容,这里有很多权威的链接提供给我。

list.gif

5 个充满想象力的 Web 调色板

Web 设计离不开调色板,现成的调色板多不胜数,不管是 Windows 标准色板,还是 Web 标准色板,还是 Pantone 色板,它们虽然准确,完整,但缺乏想象力,下面要介绍的 5 个调色板(或者说调色板生成工具)可以激发你的设计想象力。

Kuler
Kuler 是 Adobe 实验室出品的调色板生成工具,完全基于 Flash。你可以创建自己的配色方案,也可以浏览,搜索别人的方案,这些配色方案可以下载为 Adobe ASE 格式并被 Adobe Creative Suite 中的程序调用。

Color Hunter
Color Hunter 是一款基于 flickr 图库的调色板工具,它最有趣的地方是,可以根据 flickr 中的图片,自动生成该图片的色板,你可以通过 Tag 搜索图片,也可以上载本机中的图片。

Color Palette Generator
和 Color Hunter 一样,Color Palette Generator 也是根据图片生成调色板,但比 Color Hunter 简单,但简单的东西可能更好用,你只需要提供任何一幅图片的 URL 地址,该工具会立刻为你生成一个色板。

Color Palette Generator

ColorJack
ColorJack 会显示一个色表,将鼠标指针放在某个颜色上,会显示基于该颜色的配色主题,你可以将生成的配色方案输出到  Illustrator, Photoshop, 或 ColorJack Studio。ColorJack 的其它工具包括 Color SphereColor Galaxy,这两种工具使用不同的用户界面生成配色方案。

ColorJack

Daily Color Scheme
Daily Color Scheme 你可以看到来其它网站的各种各样的配色方案,如 9Rules Logo 配色方案。你可以将这些方案以各种格式下载到 Photoshop, Illustrator 一类的程序。
Continue reading ’5 个充满想象力的 Web 调色板’

A free new web template

Last week, I designed the new web template under GPL lisence. You can download and codeview at here.

gimp技巧:怎么制作水晶按钮

今天根据一些资料自己总结了一个用gimp制作水晶按钮(Aqua button)的方法,当然使用图层与朦板结合的方法加上gimp标准的虑镜或者自己/别人写的虑镜可以制作出更棒的效果,注意,若是转载请著名出处哦 ^_^

  1. 系统:ubuntulinux hoary,gimp 版本: 2.3.3 开发者版本(不过推荐使用最新稳定版本
  2. 先看看最终效果

  3. 先按照我的这篇gimp文章创建一个如图所式黑底白前景色的新层

  4. 新建第二个图层,添加图层朦板,并把上一层复制到朦板中,此时可以利用图案填充等工具得到如下效果(当然你可以选择自己需要的颜色或者图案)

  5. 再新建一图层,用黑白渐变填充这个图层

    然后把这个渐变图层的模式设置为:遮蔽,此时关闭掉步骤 2 中的图层视图可以得到如下效果

  6. 接下来就是再新建一个图层制造如下图所式的光照效果:
    • [ 图像 ] – 选择 -收缩 – 2px
    • 使用选择矩形区域工具
    • 按住 Ctrl 键从当前选区减去 80% 的选取
    • 以 白色 填充
    • [ 图像 ] – 选择 – 无
    • [ 图像 ] – 虑镜 – 模糊 – 高斯模糊(IIR) – 2px
    • 设置这一图层的模式为: 遮蔽

  7. 最后再加上边框或者投影,添加背景图层,就得到了最终效果,如果不清楚,我这里还有一个 .xcf 格式的源文件 可以下载使用gimp仔细研究一下。