PS特效文字:超逼真動態霓虹燈字教程

2022-01-31 PS教程自學Photoshop


內容提要:
編按:
這的確是一款值得讀者學習的霓虹燈特效字。編輯推薦這款特效字的理由有兩點:一、它的霓虹燈效果做得很逼真,靜態效果步驟也很詳細;二、它同時是一個典型的幀動畫案例,可以讓讀者學習、鍛鍊自己的幀動畫製作能力。
如果不了解幀動畫特點,讀者估計對教程中每個字母及其光暈都要單獨建立圖層感到疑惑。幀動畫,為了方便動畫編輯,都需要不同的圖像,或同一圖像的不同部件位於不同的圖層。
這也是這篇教程多次運用「動作」的原因。不同對象都需要獨立圖層,因此同樣的效果就必須重複進行製作。這個時候,動作就可以幫讀者減輕勞動。

編按:
       這的確是一款值得讀者學習的霓虹燈特效字。編輯推薦這款特效字的理由有兩點:一、它的霓虹燈效果做得很逼真,靜態效果步驟也很詳細;二、它同時是一個典型的幀動畫案例,可以讓讀者學習、鍛鍊自己的幀動畫製作能力。
       如果不了解幀動畫特點,讀者估計對教程中每個字母及其光暈都要單獨建立圖層感到疑惑。幀動畫,為了方便動畫編輯,都需要不同的圖像,或同一圖像的不同部件位於不同的圖層。
       這也是這篇教程多次運用「動作」的原因。不同對象都需要獨立圖層,因此同樣的效果就必須重複進行製作。這個時候,動作就可以幫讀者減輕勞動。

案例:超逼真霓虹燈字

效果:


步驟:
       (1)打開背景素材,如圖1。


圖1
       霓虹燈一般只在夜晚工作,所以這個場景顯然太亮了。我用色階工具把它變暗點,如圖2。


圖2
       再給一點冷色,如圖3。


圖3
       (2)OK 現在這個背景符合我的要求了,如圖4。既然我們不再需要修正背景圖,最好把它們都合併起來,因為到後面會有非常非常多的圖層,儘量保持圖層的簡潔明了。


圖4

  (3)輸入大小為50的ADOBE默認黑體。最好是英文,筆畫越簡單越好。中文顯然不好處理。這裡非常重要,我的霓虹燈GIF不是所有的字都一起變化,而是單獨的。有時這個字是亮的,有時相反。所以我們必須要讓每個字母單獨成為一個層。這裡我只輸入一個字母,然後複製N層,你需要幾個字母就複製幾層。然後用移動工具把它們均勻的排列開來。如圖5。


圖5
       (4)把字母修改成你需要的,再將每個字母按排列位置給相對應的層重新命名,如圖6。這個很重要,以後找起來方便啊,對不對?


圖6
       (5)單擊最上面的圖層,按住Shift鍵再單擊最下面的字母圖層,右鍵把全部字母格柵化。現在字母還要調整一下,它們的透視跟磚牆顯然不一致。保持所有字母層處於被選中狀態,用自由變換工具調整透視。如圖7。注意到磚牆上的橫向縫隙嗎? 它就是參考線。


圖7
       (6)下面的工作會非常的繁瑣,我希望你會有跟我一樣的耐心來完成。
       霓虹燈沒有直角,也就是說它們轉彎的地方都帶有一定的圓弧。而這裡的字母不符合這個要求。下面我要把這些字母處理一下,讓它們尖銳的直角變得圓滑一點。選中第一個字母,高斯模糊5。然後挨個按CTRL+F給同樣的處理。如圖8。


圖8
       最後應該是圖9這樣。


圖9

(7)現在的字母還不是我想要的,它們的邊緣應該非常清晰,因為我要用它們的選框來描邊做霓虹燈的燈管。它們需要銳化,執行「濾鏡-銳化-USM銳化」,如圖10。



圖10
       (8)邊緣還是有點虛,繼續銳化一次,覺得滿意後把全部字母都處理一遍,做起來很簡單,你只需要給每個字母按兩次CTRL+F。效果如圖11。


圖11
       (9)下面開始做霓虹燈的燈管。在此之前還有工作要做,建立N個組,把字母放入各個組裡,重新按字母排列命名組的名字。再把填充不透明度減低,讓後面的工作好做點。如圖12。

圖12
       (10)按CTRL鍵單擊字母圖層的圖層縮略圖載入選區,在字母組裡新建一個圖層,進行7像素的描邊,任何顏色都可以,如圖13。每個字母都做一次。


圖13
        (11)圖14是完成後的效果。接著我還要處理這些燈管,你注意到了,霓虹燈沒有封閉的,它有開始和結尾的地方,就是說有空隙。我要模擬這個。其實很簡單,用橡皮擦一下就行了。但是兩頭好像要稍微粗點。擦出一個口子,然後用畫筆把燈管頭描粗點,就這麼幹。



圖14

  (12)接下來我用圖層樣式模擬熄滅時的燈管效果。很簡單,內陰影加浮雕幾乎可以完美的模擬這個效果。如圖15。


 

內陰影

 


斜面和浮雕
圖15


       (13)後面簡單了,複製圖層樣式,給所有的燈管都黏貼一次,把後面的字母先隱藏掉,當前我們暫不需要它們,ok,效果如圖16。


圖16
       (14)繼續按住CTRL鍵單擊每個組裡的燈管圖層縮略圖載入燈管選區,在對應的組裡新建一層填充淡藍色。如圖17。


圖17


        每個字母都要操作一次,效果如圖18。這個我打算用來製作發光的燈管,只是發光,還不包括周圍的光輝。


圖18

 (15)繼續深化這個效果,複製每一個淡藍色的字母。在新的每個淡藍色字母層裡載入選區,收縮2個像素,羽化1個像素,填充白色,模擬燈管的高光。這個過程非常繁瑣,不過也有捷徑,打開動作可以錄製,錄製方法:
       打開界面右側(如果界面是默認的話)的「動作」面板,如果沒有,在「窗口」菜單裡把它找出來。
       單擊「創建新動作」按鈕創建一個動作,並開始錄製(類似於錄音機似的播放,暫停,的按鈕,很好懂地)。
       然後進行你想要錄製的操作(載入選區——收縮選區2像素——羽化選區1像素——填充白色——取消選區),操作完成單擊「停止」按鈕就可以了。
如圖19。


圖19


       (16)單擊其他組中複製的淡藍色圖層,單擊動作面板下方「播放選定的動作」按鈕播放剛才新建的動作就可以了,淡藍色圖層就會被剛才新建的動作處理一遍,達到你想要的效果,如圖20。


圖20


       (17)現在我要整理一下圖層欄。選擇那些加了圖層樣式的層,也就是我準備用來做熄滅時的燈管的層全部拉出來放在一個單獨的組內,如圖21。我們不用再去理睬他們了,因為不管是燈亮著還是熄滅,他們都應該在那裡。


圖21


       (18)字母組裡現在清淨多了,一個發光的燈管層,一個藍色的我要用來做光暈的藍色描邊層,還有一個白色的字母。把所有圖層顯示,當前效果如圖22。


圖22


       (19)隱藏白色文字,我要開始做光暈了,很簡單,高斯模糊就行了,當然要改下模式。顧忌到工作量的龐大程度,我新建一個動作來錄製過程,像剛才給燈管加高光那樣,我只需要製作一個就行了,後面用動作來完成。單擊藍色描邊層,高斯模糊8.5,感覺有點淡,複製一層。(然後Ctrl+E合併)合併之後把模式改為「濾色」。完了,單擊動作面板下的停止按鈕,停止錄製。注意藍框裡錄製的動作,如圖23。

圖23

(20)接下來你直接可以按播放鍵重複後面的工作了,完成的效果如圖24。


圖24


       (21)這裡開始做投射到牆上的亮光,現在那些白色的字母派上用場了。打開隱藏的白色字母,按住Ctrl鍵滑鼠左鍵單擊所有的白色字母層(將它們選中),(使用移動工具)往右邊稍稍移動一些距離,如圖25。霓虹燈不是貼在牆上的,它跟牆之間還有不遠也不近的距離。所以牆上的光跟霓虹燈會有些透視效果。


圖25


        (22)開始做牆上的光。新建一個動作,進行錄製。單擊某白色字母層,按住Ctrl鍵單擊圖層縮略圖載入選區,填充跟發光燈管一樣的藍色。取消選區,高斯模糊63像素;(模糊後)複製一層(增強光效果),(按Ctrl+E)合併(兩個圖層)之後把模式改為「顏色減淡」。停止錄製,ok了~用錄製好的動作完成後面所有的字母改造工程。藍色框內是我錄製的製作流程。如圖26。

圖26


(23)把這些經過嚴重高斯模糊的光暈圖層移到最上面,現在效果更逼真了,如圖27。



圖26


       (23)把這些經過嚴重高斯模糊的光暈圖層移到最上面,現在效果更逼真了,如圖27。


圖27


       (24)靜態圖完成得差不多了。還有地板,當霓虹燈亮起來的時候地板上也有點光。複製牆上的光暈,逐個移到地板上。減低填充不透明度,差不多到70%就行了。效果如圖28。這裡還有個問題,我感覺熄滅時的燈管顏色太亮了,好像還通著電一樣。


圖28


       (25)(把光暈等圖層隱藏,)用色階(把燈管)稍微調暗點。注意也用動作錄製,便於快速高效地完成後面的工作。如圖29。

圖29


       (26)靜態圖完成了,如圖30。

圖30


        (27)開始GIF製作。
        首先頭腦裡有個概念,我想讓它們以什麼樣的次序開閉。我的思路是這樣的:P,V還有J還有中間的A運轉正常,R字估計不行了,偶爾會亮一下,而且亮度會經常變化。O字閃個不停。最後一個A還好點,亮的時間比較長,偶爾會閃一下。
打開時間軸,除了R字以外全部點亮,因為它只是偶爾量一下。(單擊「複製所選幀」按鈕,)複製一幀;然後再單擊(時間軸)下面的「過渡動畫幀」按鈕增加25幀。現在一共有27幀。如圖31。

圖31


        編輯註:PS CC版本中,打開「時間軸」面板,首先需要設置是「創建視頻時間軸」還是「創建幀動畫」,如圖32。讀者需要選擇「創建幀動畫」。

圖32


        (28)接下來幾乎不用我來說明了,只要你按著你想的思路來開關各個幀就行了。比如我要在第二幀裡讓O字閃一下,就單擊圖層欄的眼睛狀圖標關閉光暈,到第三幀的時候它會自動亮起來。或者我打算讓R在第5幀開始慢慢的暗下去。單擊第五幀,將R組的不透明度降低,然後單擊「過渡動畫幀」按鈕,設置過渡方式為「上一幀」,要添加的幀數為3或4。如此,R就會從100%不透明度,經過3或4幀後不透明度降低到剛才設定的值,視覺效果看起來就是亮度逐漸降低了。
        通過上述方式按設想的效果進行幀的設置,最終動畫效果如圖33。



圖33

本文配套的素材,請在QQ群:306738421下載。


相關焦點

  • PS+AI教程!教你繪製酷炫舞動的霓虹燈字特效
    今天帶給大家一個繪製酷炫多彩的動態霓虹燈字效的教程,從如何用AI繪製火箭、星球、做字體變形,到Photoshop添加霓虹效果、讓畫面動起來的技巧
  • PS+AI教程:酷炫多彩的動態霓虹燈字效!
    編者按:今天的教程,@ChloeRowe林雅諾 會教同學們如何用Photoshop+Illustrator 製作一個酷炫的動態霓虹燈字效,用AI
  • AI+PS教程:酷炫多彩的動態霓虹燈字效!
    用Photoshop+Illustrator 製作一個酷炫的動態霓虹燈字效,用AI繪製火箭、星球、做字體變形,以及用Photoshop
  • PS與Ai結合製作閃動的霓虹燈字效果
    來源:美工隊長 ID:HFDSMG我們平時在做一些電商專題的時候經常需要用ps製作霓虹燈字的效果,來襯託氣氛,這裡就給大家分享一篇
  • PS教程:為海報文字添加圖層特效
    收錄於話題 #ps5、現在我們單擊內陰影樣式,將其混合模式設置為正片疊底,顏色為綠色#309837,不透明度85%,角度90度,不勾選使用全局光,距離設置為15像素,阻塞25%,大小為31像素,等高線和雜色為默認值,如圖所示:
  • 【教程】超逼真的動霓虹燈海報設計製作
    很久沒發動態教程,今天來一篇效果特別酷炫的,手把手教你打造迷濛漂亮的閃爍霓虹燈效果。
  • 教你繪製酷炫舞動的霓虹燈字效(PS+AI教程)
    5.25. 選擇路徑並改變文字的顏色。(可以選擇你喜歡的顏色,教程的顏色只是做參考哦~)30. 40. 之後添加新的幀。打開帶有霓虹燈效果的環形。記住時間裡設置無延遲喲~42.
  • 3DMAX教程:3DMAX結合Vray製作霓虹燈字
    支持微信公眾號+小程序+APP+PC網站多平臺學習來源:3D學苑大家好,今天我來跟大家分享一下如何在3Ds MAX裡面製作霓虹燈字。現在我就來跟大家分享一下製作這種字體的具體步驟。第二步,刪除不需要的線段,留下單一的點及線段。
  • PS教程:霓虹燈字體教程
    618好課狂歡,優惠不等人,早買早便宜特推超級會員限時瘋狂搶購點擊了解支持微信公眾號+小程序+APP+PC網站多平臺學習哈嘍大家好,我是愛知趣小艾老師,今天給大家帶來一個霓虹燈字體教程好了,今天的教程就到這裡了,如果有喜歡的小夥伴記得點讚哦。看完後你有什麼感想...評論區留下你的想法厲不厲害?
  • 教程 | 如何製作酷炫的霓虹燈字體LOGO
    黑夜裡總有很多霓虹燈閃爍,非常好看,照亮城市的一角。香港的霓虹燈
  • 《QQ》文字特效設置教程
    18183首頁 手機QQ 《QQ》文字特效設置教程 《QQ》文字特效設置教程 來源:網絡
  • Ps教程之文字特效製作,教你打造時尚文字裂痕效果!
    一張圖片再怎麼完美,少了文字的搭配,就總感覺少了一些東西似的,當然不同的圖片,不同的環境,甚至不同的設計,需要使用的文字效果當然也是不一樣的,在以往的文章裡面,有很多的小夥伴留言,說關於裂痕的文字效果怎麼做,那麼接下來,我們就一起來學習一下,以下的方法是適用於很多種文字效果的哦~我們一起來看看效果圖吧,非常簡單。
  • 超級詳細,霓虹燈字製作教程
    1、建一個1920*546像素的畫布2、導入背景素材,因為霓虹燈多數出現在晚上,所以我們要加上一層深藍色蒙版,讓場景變暗,增加一些冷色調
  • 視頻特效文字製作 如何做生鏽文字?PR製作生鏽文字特效教程
    這陣子想法挺多的,但是一到周末就懶得動,也不知道這懶惰的狀態幾時才能結束呢~      今天要介紹的視頻特效文字製作教程,是在PR裡面製作生鏽文字效果哦,製作完成的鏽體文字可以直接應用到視頻上去,也可以單獨製作成自己的文字logo哦,怎麼製作呢?一起來看看吧!      公眾號回復【666】獲取教程所用軟體安裝包連結,然後來看看小編的製作效果吧!
  • PS教程:綠色霓虹燈字效
    支持微信公眾號+小程序+APP+PC網站多平臺學習來源:設計軍團先來看看最終的效果圖吧:
  • ps技巧:給照片製作特效(樹葉飄落)
    今天我們的ps課程是製作特效。大家會覺得很難,但是並不是這樣的。大家跟著小編的教程走,反覆練習就很快學會啦。接下來我們就開始進入今天的學習吧!樹葉出現6.接下來我們讓樹葉飄落動起來,這時候我們就要選擇我們的動態模糊工具。
  • 時尚酷炫抖音風,霓虹燈字應該這麼做!【三分鐘課堂-05期】
    沒錯,今天我們會一起學習極具動感時尚風的「霓虹燈字」效果!你還等什麼!趕緊看視頻一起動手練習起來吧!首先,這個酷炫的霓虹燈字效果,我們可以將它拆分為兩個部分:燈牌文字&發光效果】回顧今天的霓虹燈效果,其實我們主要是掌握文本框的各項參數設置,以及文字效果的使用。
  • Photoshop文字特效怎麼做
    Photoshop文字特效怎麼做  在學習Photoshop時,很多人都不知道Photoshop文字特效怎麼做,在這篇photoshop教程中,將學習如何使用圖層樣式功能製作一種漂亮的塑膠效果,把這種效果運用在文字特效的製作中,製作一款效果非常逼真的塑料文字特效。關於Photoshop文字特效怎麼做的疑問,下面將做詳細的解答。
  • PS教程:印章文字,通過PS製作一款印章文字
    喜歡可👆點擊上方藍字關注我們!
  • PS教程:利用PS製作綠色霓虹燈字效
    鍵入文字,字體顏色如圖柵格化文字,雙擊文字層,打開圖層樣式。選擇和使用以下設置。