经常上网的朋友一定看到过很多制作精美的网站,欣赏羡慕之余是否自己也想动手一试呢?当然想!可是很多朋友可能会觉得不知从哪里入手。其实,所有美观的网页都有一个共同的特点,就是非常注重细节。把握好细节,就把握好了整个页面的基础。很难想象一个细节很糟糕的网页整体效果却很不错。
这篇教程就是向你讲述了一个细节的制作——破碎的文字,步骤非常简单。掌握了它,未必能够制作出漂亮的网页来,但必定会为你的网页增色不少。好,开始动手了。
运行Photoshop,选择菜单命令“File→New”新建一个尺寸为400×240像素,背景为白色的空白文件。
选择文字工具(快捷键为T),在文件窗口中单击,并输入“Welcome to My Site”一段文字。拖动鼠标,选择它们,在属性栏上设置这段文字的属性:颜色为红色,字体为Arial Black(或者其他较为粗重饱满的字体),大小为60磅。
设置好后的文字如图所示。

在Layers面板上,可以看到Photoshop自动在背景层的上方为文字建立了新的图层。如果觉得文字的位置较偏,可以将文字与背景进行对齐。选择背景层为当前图层,再单击文字图层左侧的小方框,使之出现链状图标,表示该图层已与背景层链接在一起了。选择移动工具(快捷键为V),在属性栏上单击水平居中和垂直居中按钮。

这样文字就位于背景的正中央了。如果要移动文字,别忘了解开文字图层与背景图层的链接,方法是再次单击链状图标,使之消失。在文字图层上面单击右键,选择“Rasterize Layer”选项,将文字图层像素化,为后面的操作做好准备。
再新建一个尺寸为40×40像素,背景为透明的空白文件。选择铅笔工具(快捷键为B),在属性栏上设置其属性,将笔刷直径设为1像素,透明度为100%,注意不要选择Auto Erase选项。然后在新文件上随意涂画一番,越随意越好。笔者涂画的结果放大到400%后如图所示。

在这里,由于涂画是随意而为,有很大的随机性,每个人的结果都不尽相同,导致最后的作品也各不相同。
选择菜单命令“Edit→Define Pattern”,在弹出的对话框中为我们自定义的这个图案命名,比如“划痕”。
然后按下确定按钮。回到写有文字的那个文件窗口,在Layers面板上单击底部的新建图层按钮,在文字图层上方新建一个空白图层Layer 1。选择菜单命令“Edit→Fill”,在对话框中选择使用Pattern填充,并在列表中选择我们刚才自定义的图案“划痕”,其他选项保持默认,然后单击确定按钮。文件窗口中一下子变得混乱不堪,而这正是我们要达到的目的。

在Layers面板上,按住Ctrl键单击图层Layer 1,将其轮廓作为选区载入。选择下面的文字图层,按下Delete键将被选取的部分删除,然后按下Ctrl+D键取消选取。这时图层Layer 1的使命已经完成了,将其拖动到面板底部的垃圾桶上删除。最后的结果如图所示。

文字变得破碎斑驳了,是不是有点岁月沧桑的感觉呢?再配合变化多样的背景,我们可以制作出更加丰富多彩的效果。还不赶快来尝试一下.