photoshop
Photoshop在网页设计中制作文字效果的2种方法
上次我介绍了在Photoshop加强网页设计中的细节,很多朋友都觉得讲的不够多,并且一些朋友很想了解如何在Photoshop制作一些文字的特别效果(还有一位朋友问我在photoshop如何生成艺术字,这在Word才有).
其实在现在的网页设计中,比较常用的文字效果并不多,实现的方法也很简单.所以接下来的内容我希望能对网页设计中的新手有所帮助.
我这篇教程将围绕2个关键字:“渐变”,“阴影”.
1.更有质感的字
我们先看图片里这个LOGO,它显得更有质感,文字有一张向外伸展,不会死板地贴在网页上.如果你仔细观察,你会很容易发现文字的brightkite都使用了色彩“渐变”.是的,文字的颜色都不是单色填充,而是“渐变”.”渐变”为什么看起来更有质感呢?这是因为这里模拟了大自然光照中的效果,即高光部分在文字的上方,而低光在下.同时也不要忽略了另一个细节,就是文字的“阴影”,.
那到底要怎么做呢?
留意图中的2跟3,如果你还不懂如何添加渐变.请在图层面板中双击”图层名”右边的空白处,或是点击下图中的第2个按钮(在图层面板下方)打开样式面板.
“渐变叠加”,然后按下图设置.渐变的颜色选择2个同色系但是有”深浅对比”的颜色.例如例子中,一个浅绿跟深绿.这样才能模拟光照效果.
好了,剩下阴影.还是一样在样式面板左侧点”投影”,然后按下图设置:
再看其他使用了这个方法的网站设计:
2.凹陷的字
照例我们看一个例子:
ALEX BUGA网站的LOGO,我觉得是凹陷字体的典范.而这样的字体效果很明显有一种凹陷在背景里的感觉,甚至文字像是刻在石头上一般. 如果你已经完成了第一个文字效果,那么接下来的内容对你是相当简单的.
1.首先输入文字,颜色填充为较背景更深的颜色,例子中为#4e3400
2.添加”内阴影”样式,设置如下图:
3.添加”斜面和浮雕”样式,设置如下:
作品完成. 该效果需注意:
- 字体颜色选择与背景色要搭配
- 第2部的内阴影设置时,”大小”与”距离”可以根据你的文字大小来调整
- 添加内斜面只为增强白色的光照效果,可以选择不加
接下来看一些使用”凹陷”效果的网站设计:
额外赠送
在这里推荐一个下载英文字体很好的网站,而且是全免费的:www.dafont.com.
同时也在最后说明一下,虽然字体的效果可以有很多种,但是也要注意使用的场合,不是什么地方,什么类型的网站都适合我上面介绍的方法.有时候就是不加修饰的字体,也可以做出很好的效果.
people also love:
Loading ...
好文，好沙发。
抢的真快啊…
比较喜欢做渐变和透明度的效果。
沙发没了，板凳也没了…
典型的我喜欢的那种国外风格，发现我越来越崇洋媚外了……
呵呵 我也差不多 只是不敢说出来
可是国外的分格国人不太习惯~
有一部分吧.但是我觉得有些东西主要是国内的大网站用的少..
教程很详细，但我觉得高光渐变也是一种很常用的手法，对小字号，我们可以用像素字，总之，要与网页的主题风格融合
呵呵 改天你也写一篇教学嘛
我最近也开始留意像素字,挺好玩的
我的水平还差着呢，今天在太平洋电脑网看到你这篇文章了，太牛了
呵呵太平洋连个链接都不给我
非常棒 刚好在找这个效果，准备长期关注此博客 嘿嘿..
十分欢迎啊 呵呵
讲的太好了 只能支持一下了
很好很专业
我就没这水平了，一般都用在线工具凑合一下
呵呵其实很简单 你可以打开PS自己试一试
确实不错啊，讲得也很详细，晚上回家得好好琢磨琢磨！
这是我博克，欢迎回访
http://sites.google.com/site/wsaelel/
google site建的啊?呵呵不错
[...] text-shadow早在CSS2中已经存在,但是能支持它的浏览器一直只有Safari,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用阴影增加文字的质感而不用使用图片来替换. 目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的. 接下来看看text-shadow的语法: [...]
只适合英文字母，汉字就没这么漂亮了吧…
还好吧 雅黑已经相关不错
如果你使用mac os的话效果就更好了