动威9号-Flex、Flash技术探讨

网页设计师做好准备了吗？

Mon, 09 Aug 2010 13:05:26 +0000

恍恍惚惚也入行将近3年，从最初的意气风发，到如今反到越发沉寂。
体会到了这个行业的不容易与辛酸。
看到了别人统计出了如下几点，到还觉得赞同：
1、你做好被否定的准备了吗？
记住身为设计师的你，很多工作上的事情都很平常和普通，没有必要心灰意冷，更不要去抱怨，把一些烦恼的事情当成我们工作中上班、下班一样。

2、发自内心的去听取别人的意见
客户不一定说的都对、老板也不一定，包括你自己很多时候都不一定对，既然这样，我们为什么不多听下别人的意见呢？发自内心的去听，不代表你一定要接受，设计师要懂得包容，心胸狭窄、自以为是，对你的人生事业发展没有任何好处。

3、学会分析别人的否定
一个幼儿园老师问一个小朋友，桌子上面有两个苹果被你姐姐拿了一个还有几个，那个小朋友天真的回答，一个都没有，老师惊讶的问，怎么会没有呢？小朋友回答道，我姐姐一定会两个都拿掉 .....这是一个笑话，我们在设计作品的时候，客户有时候提的意见只能泛泛的讲，你要去分析客户讲的与作品之间的联系，不要客户一提意见就对客户产生敌意，那样你是无法听进去的，也就是做一个明白人，要懂得话里的意思，知道客户内心深处所喜欢的。

4、随时自我否定
《论语·学而》里面不是有句话叫吾日三省吾身吗？圣人姑且这样，我们呢？自我否定是需要一个人有足够的乐观积极的心态，如果你想成为大师，记往永远不要去抱怨别人、永远不要整天发牢骚，遇到任何事情首先应该找自己主观的原因，而不要找客观的原因。

Tags - 网页设计师

企业网页设计流程教程

Tue, 03 Aug 2010 13:18:25 +0000

说到网页设计，有很多的人都会不屑的说，那还不简单，不就是拼图吗？
其实也可以这么说，因为这中间有这么一个类似的过程，但是就有拼图拼得好看的人，以及拼图拼得不怎么好的人。
但是在做网站之前，我们需要做的事情很多。
首先，我们会得到客户需求，当然客户没有需求那就最好不要做，因为他自己都没想的东西，看来是不怎么需要的。
需求搜集来后，我们有可能得到的是仿某某网站，这时候你就要注意了，千万别仿，因为客户只是因为某个元素才喜欢那个被仿的网站的，并不是我们的产品放在那网站上就好看。我们要挖掘出客户的喜欢点。
然后就是网站草图了，无独有偶，我在做网页设计的时候也是喜欢先画草图（这点和文子老师的很像，但是我喜欢更精细点的草图）。
接下来就是素材收集和素材的制作了，一般客户给的素材都很丑，除非是一家专业的设计公司做出来的企业VI，那拿过来用会很轻松，但是大部分订单都是需要对素材进行编辑的。
网站效果图可以开始了吗？不，你得再思考一下目前的这些工作是不是有意义，是不是能够一击命中，概率是多少，这个步骤就是和同事们一起讨论的时候了。

顺便给一个著名网页设计师“文子”的视频教程：

其中有很多地方过于基础，其实看一下第一部分就可以了，后面的关于图片以及构成的部分太过于文子老师的风格化，毕竟人人都有自己的风格才是对的。
Tags - 网页设计

网页设计应细化到1像素

Thu, 29 Jul 2010 01:02:07 +0000

常常的网页设计都由PS来完成平面效果，然后再抠出元素组成HTML，最后镶嵌到程序中。
而一个网页的成功与否，在于它的细节。
有多细，我给的定义就是1PX（1像素）。
入行初期，对于细节这东西掌握不好，现在再去看那些网页，虽然有的还在用，但是都很是丑陋。而且现在还在运行的网站，都是当初歪打正着，细节处理得很好的。
下面就是对细节方面的研究：

1.像素分隔线
第一个介绍的是分隔线，请看下图，是一个导航栏。

留意图中红圈圈中的线已经按钮之间的分隔线，这些线看起来有一种凹进去的感觉，形成一种很好的分隔线的感觉。接下来我把这张图放大，我们看看其中原理。

我们可以看到这些分隔线，都是有2条相邻的1px直线构成的，并且一条颜色较背景色更深，一条较浅。接下来，看方法：

选取铅笔工具（不要选错为画笔）,大小调为1px
选取一个较背景色更深的颜色，如图中的深蓝色，按住Shift画出一条直线
选取一个较浅的颜色，再画一条直线。OK
PS.画线过程可以放大画布（Z）以便观察。怎么样，效果比单色的分隔线要好很多吧？

2.像素边缘
首先我们看一张没有加“像素边缘”的原图：

接下来是加上后的：

看出来区别了吗？没关系，接下来请看放大下的图片：

可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇，而有一种灯光反射（高亮）的效果。使得白色块的边缘更加突出。而方法跟第1个技巧是一样的，就是用铅笔工具画1px的线。需要注意颜色的选择，一般选择比背景色更浅的颜色，才能制造高亮的效果。

3.像素阴影
这是3个技巧里面最容易实现的，但它一样特别实用，甚至经常会用到。照例我们先看图片

可以看出在有阴影下，文字立体感得到加强，特别在文字的背景较复杂，比较多噪点时使用该技巧会使文件比较突出。而加上阴影方法很简单，只需双击图层名称，添加“投影”的图层样式。然后按下图设置参数：

也就是把距离与大小调为“1”。

国内目前的设计风格已经从以前的韩国风格开始转换为欧美风格，都极力的使用最简洁的元素来表现效果。
而欧美风格也再变化，也不再一味的求简，现在也注重丰富的颜色和结构。
以后说不定，全球都会有统一的风格也说不定，起码，wordpress的模板全球通用。
期待
Tags - 网页设计 , 设计细节

今天做了个typecho主题

Mon, 26 Jul 2010 14:05:35 +0000

无意间发现了typecho这个轻量级PHP博客系统。
把玩了一下，除了和wordpress很像以外，程序执行效率方面都比wp要快。
或许是轻量级的原因，但是程序的设计理念都很不错。
所以就制作了一套主题，这套主题考虑因素太多不适合一般用户使用，也就没传到typecho共享。
主题截图如下：

Tags - typecho主题 , 风格

PS打造酷炫字体光芒效果

Sun, 25 Jul 2010 14:39:05 +0000

我们可以用PS制作出非常多的酷炫效果，而且很惊艳的那种。当然，或许多年以后这已经不再算什么。
这次主要是运用了光影对比，产生一种强烈的落差，来达到酷炫的效果。

步骤如下：
1、新建：600x800px 分辨率72 色彩模式：RGB
2、利用渐变工具，进行渐变：前景色：#633b07 背景色：#2a0f03
如图：

3、新建图层，利用排版文字工具输入字体 “V”在文档中间，设置透明度为40%。
如图：

4、接下来，我们来完成文字“V”的图层样式吧

得到效果：

5、接下来，周边放点小字母“”LAO HEI来装饰下：
当然了，小字也要图层样式，透明度改成30%，

6、我们继续来设置周边小字的图层样式：

7、用画笔工具，前景色白色，在底部点一下，如下图：

接着，按ctrl+T，自由变换，调整成如图：

8、还是用画笔画出下面效果，不过这次是在中间部位：

还是用自由变换来调整得到下面效果：

9、把这图层设置成“叠加”，得到下图：

这样效果不是很明显，我们可以复制几个图层，来得到更好的效果：

继续利用画笔工具：

10、还是设置成叠加模式，我们开始复制和移动这个图层力的圆达到这样的效果：

11、现在最重要的是开始装饰周边了，还是利用画笔工具，按F5来设置画笔：

12、使用笔刷搭配过后的效果：

13、我们还是使用画笔工具：

用ctrl+t进行变形，如下图：

14、形状成我这样子就差不多了，接下来，我们继续装饰：

以上的效果只能是叠加才能达到这个效果，切记！

15、这一步也灰常重要的，我们要用色彩平衡来调整颜色，具体参数如下：

16、大体效果已经差不多了，我们再把所有图层复制一遍，合并成一个新的图层，使用滤镜来完成最后的效果：

就是如此了，很是详细了。

Tags - ps酷炫字体 , 光芒效果

手机UI中天气图标制作PS教程

Sun, 25 Jul 2010 14:12:09 +0000

每次打开android手机就可以看见当天的天气，而其中的天气图标很是好看。
那是如何制作的呢？
下面我就来试试：
1、新建图层，命名为“太阳”。选择形状工具，按住shift同时拖动鼠标，画出一个正圆形，并填充金黄色；设置图层样式：外发光（相关参数酌情调整）

2、在之上新建图层，右键图层菜单选择“创建剪贴蒙版”；用边缘虚化的画笔（柔角65、100等）绘制高光部分，颜色选用柠黄色和白色

3、选择形状工具中的圆角矩形，酌情设置圆角参数，然后绘制细长的矩形（太阳周围的光芒）。之后依次进行复制，旋转180度，旋转90度、旋转45度等操作，达到一定的密度。如下图：

4、Ctrl+单击之前的“太阳”图层得到选区，然后创建图层蒙板，光芒的末端同样用图层蒙版做渐隐处理。双击光芒图层，设置渐变叠加效果为径向渐变，颜色从白过渡到橙黄色。至此太阳部分绘制完毕

5、接下去绘制白云。用椭圆形状工具拉出一个圆形，如图设置图层样式：

6、将此样式保存起来。另建图层，同样用圆形工具拉出一个个圆形，然后应用样式。如图所示：

7、这种方法替代了用“涂抹工具”和“加亮变暗工具”来绘制白云，操作起来比较容易上手。接下来所要做的就是把这些零碎的“白云图层”合并为一个图层，然后略微应用高斯模糊和水平方向的动感模糊。最后使用图层蒙版，用黑色柔角画笔略微“擦去”白云下方的一些部分，让其变的透明缥缈一些。这些都完成后，复制一份白云放置在“太阳”下方，图标就完成啦。

Tags - 手机ui , 天气图标 , ps教程

平面设计的要素

Tue, 20 Jul 2010 15:27:11 +0000

平面设计总的来说需要注意三点：结构、元素、思想。
但是网上也有设计师认为更加应理解为：构图、构成因素、概念。
其实也是对的，更加的贴切平面设计。

在这设计成果可以粘贴的世界，想来点独特的东西一般都很难。
因为人们的习惯根本不易改变，你想要WIN XP的用户完完整整的去热衷ubuntu，还是放弃吧。
所以现在的设计大多都是建立在一个模式之上再去做的，毫无新意。
起码内地是如此。
Tags - 平面设计

关于网页设计中的用户体验：用户所保持的惰性

Fri, 16 Jul 2010 09:41:32 +0000

关于网页设计中的用户体验：用户所保持的惰性

1，使用公共的模式，减少用户学习所浪费的时间。
2，适合的设计隐喻（这个是什么呢？就是指，我们设计的意图，让用户理解这个设计其中的巧妙含义）。
3，不能让用户过多的思考，不能让用户等待（就像一个页面的加载，加载的时候用一个loading的提示，比如一个转动的gif图片等等，来做一个合理的过渡效果，免得用户不耐烦，把页面给关掉了）。
4，不能让用户过多的点击与操作（人用键盘和鼠标是会累的，要不然，网络游戏也不会出现游戏外挂了。所以我们在做网站的时候，尽量不要做过多的操作点。）。

总的来说，我们要简化操作，简化用户逻辑。这是很难的，但是却是最好的用户体验的前提。
Tags - 网页设计 , 用户体验

上一个名片设计

Fri, 09 Jul 2010 14:31:58 +0000

今日，为公司画名片设计，结果爆掉了无数的方案，最后却做了个自己喜欢的留作后用。

Tags - 名片设计

用PS来制作漂亮的天气图标

Thu, 08 Jul 2010 16:37:08 +0000

天气图标在网站啊，手机上，以及小应用上都有过很多漂亮的例子。
今天手贱，也想做一个，如是乎开始了。
先上天气图标的效果图：

先制作一个图层样式吧：

建一个选区并填黑，滤镜--渲染--分层云彩，并命名为“云”

按刚刚做的那个图层样式做个“云”的蒙板

然后再叠加

看，出现了纹理了吧
然后在手绘几坨火焰，这就需要慢慢画了，如果是数位板那就很好搞。反正1像素到2像素的画笔涂来涂去即可。

然后把火焰加到圈圈里面啦，调整下位置。看起来像不像那回事？

Tags - ps , 天气图标