Photoshop 网页设计 实例——火焰特效文字

Photoshop 网页设计实例——火焰特效文字

游戏网站的Banner以网络游戏的中的画面为背景，本案例是带有魔幻风格的战斗游戏，游戏名称采用了火焰特效，让玩家对游戏产生激情燃烧的感觉。文字整体色调与背景色调统一，加深了画面的浪漫、勇气和神秘感，如图1-70所示。

图1-70 游戏网站

操作步骤：

（1）新建一个【宽度】和【高度】分别为1100和800像素，黑色背景文档。使用【横

1-71所示。

图1-71 输入文字

（2）按Ctrl+Shift+Alt+E快捷键，盖印图层得到“图层1”。执行【图像】|【旋转画布】|【90度（逆时针）】命令，如图1-72所示。

图1-72 逆时针旋转画布

（3）执行【滤镜】|【风格化】|【风】命令，打开【风】对话框，设置默认选项。按Ctrl+F快捷键3次，重复3次上次滤镜命令操作，效果如图1-73所示。

图1-73 执行【风】命令

（4）执行【图像】|【旋转画布】|【90度（顺时针）】命令，将选项旋转。执行【滤镜】|【模糊】|【高斯模糊】命令，设置【半径】为4像素，模糊图像如图1-74所示。

图1-74 模糊图像

（5）按Ctrl+U快捷键，打开【色相/饱和度】对话框，启用【着色】选项，设置参数，如图1-75所示。

图1-75 对字体添加橘黄色

（6）按Ctrl+J快捷键，复制“图层1”，并选中“图层1副本”。按Ctrl+U快捷键，打开【色相/饱和度】对话框，设置【色相】1-40，如图1-76所示。

图1-76 对字体添加红色

（7）设置“图层1副本”【混合模式】为【颜色减淡】，将橘黄色文字和红色文字融合，如图1-77所示。

图1-77 呈现火焰效果

（8）按Ctrl+Shift+Alt+E快捷键，盖印图层为“图层2”。执行【滤镜】|【液化】命令，打开【液化】对话框，绘制火焰如图1-78 所示。

图1-78 绘制火焰苗效果

在【液化】对话框中，选择【工具栏】上一些工具，

如【向前变形工具】等在预览框中对文字进行涂

抹。【画笔大小】和【画笔压力】根据绘制火焰大小

而设定。

如果绘制过程中有不满意，可以使用【重建工具】

恢复原貌，或单击【重建整个图像】按钮

，重新设置。

（9）使用【涂抹工具】，在火焰上进行涂抹。设置【强度】为50%，【画笔大小】根据实际情况而设定，涂抹出燃烧效果，如图1-79所示。

，如图1-80所示。

图1-80 编辑文字

（11）选中“图层2”，按Ctrl+J快捷键，复制该图层。并将“图层2副本”置于最上方，设置【混合模式】为“滤色”，如图1-81所示。

图1-81 将火焰与字体融合

（12）选中“图层2副本”，单击【图层】面板下的【添加图层蒙版】按钮，对该图层添加蒙版。在蒙版处于选中状态下，使用【渐变工具】，在蒙版中创建黑白渐变，如图1-82所示。

图1-82 添加蒙版

（13）盖印图层为“图层3”，执行【滤镜】|【模糊】|【高斯模糊】命令，设置【半径】为50像素。并设置该图层【混合模式】为“叠加”；【不透明度】为50%，火焰周围颜色变红，如图1-83所示。

图1-83 绘制火焰周围透明火焰

（14）再次盖印图层为“图层4”，设置该图层【混合模式】为“滤色”；【不透明度】为50%，如图1-84所示。

图1-84 增加火焰发光效果

（15）执行【图层】|【新建调整图层】|【色相/饱和度】命令，设置【色相】1-21；【饱和度】1-52，如图1-86所示。

图1-85 设置火焰字整体颜色

盖印图层为“效果字”，打开【通道】面板，拖动“绿”通道到【创建新通道】按钮上，复制得到“绿副本”通道，如图1-86所示。

使用【钢笔工具】无法将火焰提取。通过【图层

样式】中“混合选项”提取主题，在去除背景时，

会将黑色文字部分去除掉。这里使用【通道】提取

图像，可以较些细微扣除火焰。

（17）仍选中“绿副本”通道，按Ctrl+L快捷键，打开【色阶】对话框，输入色阶为0；

1.00；95，如图1-87所示。

图1-87 调整色阶

（18）将前景色设置为白色，使用【画笔工具】，设置【硬度】为0%，将文字底部黑色擦出掉，如图1-88所示。

图1-88 擦除文字

（19）按Ctrl键，单击“绿副本”通道缩览图，载入该通道选区。回到【图层】面板，选中“火焰字”图层。按Ctrl+Shift+I快捷键，将选区反选后，按Delete键删除，如图1-89所示。

图1-89 提取主题

（20）使用【移动工具】，将火焰字放置到游戏网页背景文档中，放置合适位置，如图1-90所示。

图1-90 放置网页中