eddie.Yang's creative » photoshop

Photoshop在网页设计中制作文字效果的2种方法

eddie — Wed, 20 May 2009 06:05:00 +0000

上次我介绍了在Photoshop加强网页设计中的细节,很多朋友都觉得讲的不够多,并且一些朋友很想了解如何在Photoshop制作一些文字的特别效果(还有一位朋友问我在photoshop如何生成艺术字,这在Word才有).

其实在现在的网页设计中,比较常用的文字效果并不多,实现的方法也很简单.所以接下来的内容我希望能对网页设计中的新手有所帮助.

我这篇教程将围绕2个关键字:“渐变”,“阴影”.

1.更有质感的字

我们先看图片里这个LOGO,它显得更有质感,文字有一张向外伸展,不会死板地贴在网页上.如果你仔细观察,你会很容易发现文字的brightkite都使用了色彩“渐变”.是的,文字的颜色都不是单色填充,而是“渐变”.”渐变”为什么看起来更有质感呢?这是因为这里模拟了大自然光照中的效果,即高光部分在文字的上方,而低光在下.同时也不要忽略了另一个细节,就是文字的“阴影”,.

那到底要怎么做呢?

留意图中的2跟3,如果你还不懂如何添加渐变.请在图层面板中双击”图层名”右边的空白处,或是点击下图中的第2个按钮(在图层面板下方)打开样式面板.

“渐变叠加”,然后按下图设置.渐变的颜色选择2个同色系但是有”深浅对比”的颜色.例如例子中,一个浅绿跟深绿.这样才能模拟光照效果.

好了,剩下阴影.还是一样在样式面板左侧点”投影”,然后按下图设置:

再看其他使用了这个方法的网站设计:

2.凹陷的字

照例我们看一个例子:

ALEX BUGA网站的LOGO,我觉得是凹陷字体的典范.而这样的字体效果很明显有一种凹陷在背景里的感觉,甚至文字像是刻在石头上一般. 如果你已经完成了第一个文字效果,那么接下来的内容对你是相当简单的.

1.首先输入文字,颜色填充为较背景更深的颜色,例子中为#4e3400

2.添加”内阴影”样式,设置如下图:

3.添加”斜面和浮雕”样式,设置如下:

作品完成. 该效果需注意:

字体颜色选择与背景色要搭配
第2部的内阴影设置时,”大小”与”距离”可以根据你的文字大小来调整
添加内斜面只为增强白色的光照效果,可以选择不加

接下来看一些使用”凹陷”效果的网站设计:

额外赠送

在这里推荐一个下载英文字体很好的网站,而且是全免费的:www.dafont.com.

同时也在最后说明一下,虽然字体的效果可以有很多种,但是也要注意使用的场合,不是什么地方,什么类型的网站都适合我上面介绍的方法.有时候就是不加修饰的字体,也可以做出很好的效果.

Photoshop网页设计中加强像素化细节的3个小技巧

eddie — Thu, 07 May 2009 12:26:41 +0000

在网页设计中细节的处理十分重要，我个人也经常观摩外国佬的网站，发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里分享给大家的小技巧很简单，但是却可以很好滴增强整个网站的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。
并且你会留意到这些技巧都围绕一个词，就是“像素化”，简单地说就是一些1px，2px的小线。
好吧，我们开始。

1.像素分隔线

第一个介绍的是分隔线，请看下图，为Pixel2Life.com的导航栏。

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

上图放大300%效果

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

选取铅笔工具（不要选错为画笔）,大小调为1px
选取一个较背景色更深的颜色，如图中的深蓝色，按住Shift画出一条直线
选取一个较浅的颜色，再画一条直线。OK

PS.画线过程可以放大画布（Z）以便观察。
怎么样，效果比单色的分隔线要好很多吧？接下来再看一些使用这个分隔线技巧的例子：

clearspring.com

tutorial9

2.像素边缘

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

接下来是加上后的：

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

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

3.像素阴影

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

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

也就是把距离与大小调为“1”。
接下来我们看看一些使用该技巧的例子：

总结一下

以上这些技巧都是我自己看来学来的，在这里希望需要的人可以学会它。这些1px的线很多人会说，用户根本就不会去注意，就是瞪大眼都看不到。是的，这的确没错。但是我认识很多好的设计，能经得时间与多人的考验，那都是很多细节来构成的。这些细节尽管你觉得看不到，但是它却为成功的设计打下坚实的基础。

这15个Photoshop快捷键,你掌握了吗

eddie — Wed, 18 Mar 2009 12:19:53 +0000

网络上有许多关于Photoshop快捷键的文章,在这里我只是把我觉得不错并且很实用的快捷键进行整理，并且随着使用Photoshop时间的增长也会对该文进行不断的更新与修正.希望这些对你多少有帮助.如果你有任何不明白,请记得留言给我.

1.切换字体

在字体面板当字体名被选中情况下,按”向上”或”向下”方向键就可以快速切换字体.

2.调整字体大小

按住Ctrl+Shift+鼠标移到”字体大小”框里,然后向左右方向移动鼠标,字体大小将以10单位递增.
而单独按”向上”或”向下”方向键也可以以1单位调整字体大小.

3.缩放到100%(实际像素)

在左侧工具栏双击或右击”缩放工具”就可以缩放画布到100%.
Ctrl+1 或 Ctrl+Alt+1

4.展开或收起所有图层

按住Ctrl+点击图层组左侧小箭头就可以展开/收起所有图层

5.隐藏图层

点击图层左侧小眼睛并保持鼠标不放,向上/向下移动即可隐藏/显示那些图层
按住Alt再点击某一个图层(组)的小眼睛,即可隐藏除该图层(组)外的其他图层

6.切换混合模式

按Alt+Shift+”+”或”-”(加减号)就可以快速切换图层的混合模式

7.锁定透明像素

按住”/”就可以锁定透明像素

8.切换视图模式

按Tab键可以在视图中去除工具栏
按F键可以切换3种视图模式(标准-带菜单的全屏-全屏)

9.切换工具栏中的列表

按住Shift+工具快捷键就可以切换,例如油漆桶快捷键是G,按Shift+G就可以切换油漆桶/渐变

10.复制图层

选中某个图层,按Ctrl+J就可以复制并新建这个图层

11.填充为前景/背景色

Alt+Backspace(删格键) 用前景色填充图层
Ctrl+Backspace(删格键) 用背景色填充图层
Ctrl+Alt+Backspace(删格键) 用白色填充图层

12.以中心点为基点进行变形

当你按Ctrl+T对图形进行大小变形时,按住Alt+Shift+拖动就可以以图像中心点为基点进行变形

13.在对话框中增加”复位”按钮

在对话框中,按住Alt键,”取消”按钮就会变成”复位”,这样你就可以复位你调整的数值

14.拖动阴影

当我们在图层样式增加”阴影”时候,先别点”确定”,这时候可以在画布中移动你的阴影

15.快速描边路径

首先选择路径,然后选中画笔工具,按回车键,路径描边完成了

16.拖动画布

除了抓手工具的H键外,也可以按住”空格键”然后进行画布拖动

你有其他好用的快捷键吗？

发这篇文章首先是把我觉得实用的快捷键分享给大家，其二也是希望有志之士可以补充，可以把你觉得不错的或经常使用的Photoshop快捷键分享给大家.

wlsy:使用Ctrl+Shift+i进行选区”反选”
暴:选择多个图层,按Ctrl+G可以进行编组

你的Photoshop CS4很慢很卡？赶快升级到11.01

eddie — Mon, 09 Mar 2009 13:44:43 +0000

为什么要升级到11.01？

Photoshop CS4相比CS3有很多很不错的改进，例如很多人都喜欢的“画布旋转”功能.
但是有不少的人反映CS4的运行速度,画笔的速度比起CS3实在是太慢了，而且对图像进行移动的时候很卡.在Adobe的官方论坛对CS4的声讨更是不绝于耳.
终于在09年2月24日Adobe发布了Photoshop CS4的第一个升级11.01,而这个升级文件最让人欣喜的就是针对CS4很慢很卡的修正.
而经过我自己的安装测试,CS4的速度的确有了提高（虽然我觉得还是没有CS3快）.

11.01到底更新了什么？

• 解决了很多会导致软件运行变慢的问题
• 可以正常使用Wacom手写板的钢笔旋转
• 正确识别插件引入的3D纹理
• 改善了自动混合图层的图像质量
• 解决了以往因为粘贴格式化文本导致的软件冲突
• 解决了损坏字体导致的软件冲突（我遇到过很多次）

我也要升级

升级发布页面
 直接下载地址

设计按钮必备-Photoshop按钮源文件大搜集(100+)

eddie — Wed, 18 Feb 2009 06:10:42 +0000

按钮（button)是网页中实现人机交互的关键功能之一，如果缺少了按钮，那么互动将无从谈起。
设计一个漂亮，吸引人的按钮并不容易，特别是对于Photoshop新手来说。
今天eddie从deviantart为大家搜集了这12个Photoshop的按钮源文件，利用这些源文件，再加上自己需要的文字，就可以轻松设计制作属于你自己的按钮。同时我们也可以从这些PSD文件中学习到制作按钮的技巧，提升自己的Photoshop技术。

注：欢迎转载，但请注明出处为eddie.Yang’ creative.谢谢

Photoshop制作一个水彩画效果的网站导航栏

eddie — Sat, 07 Feb 2009 08:37:41 +0000

今天为大家带来的这个教程是教大家怎么用PHOTOSHOP制作一个像Web Designer Wall这个网站的水彩画风格的导航栏（菜单栏。首先我会教大家用PHOTOSHOP制作出导航所需要的图片文件，然后再第2个部分教程中我会教你怎么样用CSS制作这个导航栏。OK,废话不多说，我们开始吧：
转载请注明来自eddie yang’s creative
预览图：

1.笔记本纸张图片

首先我们要找一张那种带穿孔的笔记本纸张的图片素材。eddie推荐一个找这种素材的网站是stock.xchng.当然deviantart也是一个不错的选择。在这个教程，你就先用我给你的这张图片吧。

2.水彩画效果

首先在photoshop中打开我们的素材图片，按住Ctrl点击纸张图层载入选区，然后新建一个组，并点击图层面板下面的小按钮创建图层蒙版。这样做使我们后面使用画笔时颜色只会出现在蒙版区域内。

新建一个图层，选一个很浅的粉红色（或者其他你喜欢的浅颜色），选择画笔工具（B），在上方面板把画笔大小调为100px,不透明度为10%。然后在纸张上方随意画上一些粉红色。

重复这个步骤直到效果差不多

3.增加一些细节

找一些咖啡污渍的素材图片，放在纸张图层上面，在图层面板把混合模式调为“整片叠底”。

接下来我们还可以用一些现成的笔刷来添加一些污渍与水迹的效果。可以从splatter与watercolor这里下载到合适的笔刷。

接下来再添加一些素描的素材上去来丰富细节的部分。你可以从我提供的网站寻找素材，或是直接从vector illustration 这里下载。

在纸张右上角做一个三角形的选区，然后选取灰色，选择渐变工具在选区画一个渐变。这样使得右上角的纸好像被折过后的效果。

4.手写字体

如果你没有合适的手写字体，我也推荐你去Dafont与 Urban Fonts去找。（这2个网站都是免费并且资源相当多。）
接下来添加你想要的文字吧。如图

5.一个在水里泡过的RSS图标

首先我们去找一个RSS图标。选择橡皮擦工具，然后选择一个上面你用过的笔刷，把不透明度调为10%后在图标边缘轻轻擦。
然后你还可以选择灰色，在图标上加一些灰色让RSS感觉有点脏。

6.铅笔风格的边框

铅笔风格的边框可以在Adobe Illustrator中很轻松的画出来。先画一个图形或是路径，然后打开画笔面板。
选择木炭画笔并把大小调为0.25pt.

7.结束

这就是最后的成果啦，你的呢？
如果你还想花更多时间在细节上面，你还可以增加一些纸屑，透明胶带，小贴纸等等。

转载请注明来自eddie yang’s creative
Download PSD File
原文链接:http://www.webdesignerwall.com/tutorials/design-watercolor-effect-menu/