Quantcast
Channel: 字体设计 –优设网 – UISDC
Viewing all articles
Browse latest Browse all 241

PS教程:创建梦幻的霓虹效果文字

$
0
0

今天这个教程里,我们将运用到Photoshop里的蒙板、钢笔、混合模式等技术,创建一个梦幻迷离的霓虹文字效果,过程不难,简单几步就能完成,童鞋们可以试一下。

优秀文字效果教程推荐:
《PS教程:创建可爱的哆啦A梦风格字体》
《PS教程:创建可爱的毛茸茸条纹文字效果》
《PS新手教程:教你创建一枚巧克力奶油文字》

最终效果:

translucent-text-flatten-550x307

教程素材:

素材打包:微盘下载

Step 1

新建画布1400px * 782px,填充黑色,打开纹理素材,用矩形选框工具选出一部分纹理放到原始的文档中来,调整大小作为背景,高斯模糊之。

1 sel 550x555 Create Unique Neon Text Effect in Photoshop
 
1 gaussian blur Create Unique Neon Text Effect in Photoshop

设置图层的不透明度为60%:

1 blend 550x447 Create Unique Neon Text Effect in Photoshop

使用如下图所示的蒙版图层来遮掉部分内容:

1 mask 550x308 Create Unique Neon Text Effect in Photoshop

使用如下的色彩平衡调整图层来为纹理图层添加一些色彩:

1 col bal Create Unique Neon Text Effect in Photoshop
 
1 col mid Create Unique Neon Text Effect in Photoshop
 
1 col high Create Unique Neon Text Effect in Photoshop

经过以上两个调整,你应该在画布中看到如下效果:

1 effect 550x298 Create Unique Neon Text Effect in Photoshop

 

Step 2

现在使用本文开头下载过来的字体写入一串文本,颜色如下图黄色便签里面所示:

2 type 550x184 Create Unique Neon Text Effect in Photoshop

给文本添加如下混合样式:

斜面和浮雕:

2 bevel 550x394 Create Unique Neon Text Effect in Photoshop

描边:

2 stroke 550x394 Create Unique Neon Text Effect in Photoshop

内阴影:

2 inner shadow 550x394 Create Unique Neon Text Effect in Photoshop

光泽:

2 satin 550x394 Create Unique Neon Text Effect in Photoshop

颜色叠加:

2 overlay 550x394 Create Unique Neon Text Effect in Photoshop

渐变叠加:

2 grad overlay 550x394 Create Unique Neon Text Effect in Photoshop

外发光:

2 outer glow 550x394 Create Unique Neon Text Effect in Photoshop

投影:

2 drop shadow 550x394 Create Unique Neon Text Effect in Photoshop

效果如下:

2 effect 550x234 Create Unique Neon Text Effect in Photoshop

Step 3

复制一层该文本,按照图示将复制层轻微移动到边角处:

3 dup 550x210 Create Unique Neon Text Effect in Photoshop

重复以上复制移动的步骤,多复制几层,直到效果如下:

3 dup2 550x198 Create Unique Neon Text Effect in Photoshop

在复制的最后一个图层上应用如下色相/饱和度调整选项同时把文本变暗:

3 dup mer 550x323 Create Unique Neon Text Effect in Photoshop

效果如下:

3 effect 550x225 Create Unique Neon Text Effect in Photoshop

Step 4

现在需要给文本添加一定的高光。选择画笔工具,设置如下:

大小和硬度:

4 brush Create Unique Neon Text Effect in Photoshop

画笔的颜色:

4 brush color 550x387 Create Unique Neon Text Effect in Photoshop

在所有图层的上方新建图层,叠加模式设置为”叠加(overlay)”,使用设置好的画笔按照下图添加高光部分:

4 paint 550x200 Create Unique Neon Text Effect in Photoshop

我们还可以使用烟雾笔刷为文本添加一点烟雾效果:

4 cloud 550x219 Create Unique Neon Text Effect in Photoshop

最终效果如下:

4 effect 550x268 Create Unique Neon Text Effect in Photoshop

Step 5

现在要添加一些电线。使用钢笔工具勾勒如下路径:

5 path 550x442 Create Unique Neon Text Effect in Photoshop

使用5 px硬边的画笔为路径做描边处理:

5 sroke 550x317 Create Unique Neon Text Effect in Photoshop

做如下斜面和浮雕混合样式的调整:

5 bevel 550x394 Create Unique Neon Text Effect in Photoshop

电线的效果:

5 after bevel 550x326 Create Unique Neon Text Effect in Photoshop

为了实现电线缠绕着文本的状态,需要复制该电线多次,然后按照下图做一个位置和大小的调整:

5 effect 550x294 Create Unique Neon Text Effect in Photoshop

Step 6

就快完成了!现在需要做点使文本更优雅的小调整。添加如下调整图层:

可选颜色:

6 sel color Create Unique Neon Text Effect in Photoshop

6 blacks Create Unique Neon Text Effect in Photoshop

曲线:

6 curves Create Unique Neon Text Effect in Photoshop

大功告成!

translucent text flatten 550x307 Create Unique Neon Text Effect in Photoshop

原文地址:psdvault
优设网翻译:@写说说

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量66万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 


Viewing all articles
Browse latest Browse all 241

Trending Articles