Tạo hiệu ứng văn bản neon phát sáng

Feb 5, 2026

Cách

Thông thường, đó là những hiệu ứng đơn giản nhất trông nổi bật nhất và văn bản neon là một dự án như vậy. Nó cũng dễ dàng hơn nhiều để tạo ra một hiệu ứng neon trông thực tế hơn bạn nghĩ. Trong khi toàn bộ hướng dẫn này chỉ sử dụng một hình nền, bộ não của bạn tự coi đây là một dấu hiệu neon thực sự, hoạt động - đó là sức mạnh của Photoshop CC. Lớp của lớp. Tìm hiểu thêm về Những điều tuyệt vời bạn có thể làm với các lớp của Photoshop ở đây .

Nhận Adobe Creative Cloud

Thực tế là toàn bộ dự án này được xây dựng từ đầu - từ phông chữ đến màu sắc của phát sáng, đến hoạt hình cuối cùng - có nghĩa là có rất nhiều phạm vi để sáng tạo. Bạn có thể chọn chính xác những gì bạn muốn mọi phần của hiệu ứng này trông giống như.

Neon tiếp tục là phổ biến. Khoe tông màu bão hòa chống lại một nền tối, tắt tiếng là một cách tuyệt vời để trình bày một trang đích , A. thiết kế logo hoặc một tiêu đề, và thật dễ dàng để tạo hiệu ứng công việc của bạn và lưu nó dưới dạng GIF với kích thước tệp thấp (giữ cho các tệp của bạn an toàn trong lưu trữ đám mây ). Hãy đi sâu vào cách tạo ra nó.

Tạo một phông chữ sẽ được hiển thị trên một trang web mới? Bạn cần một người tạo ra trang web và xuất sắc web hosting .

01. Bắt đầu tạo phông chữ

Use Photoshop's Pen tool to draw the letter 'a' — Sử dụng công cụ Pen của Photoshop để vẽ chữ cái đầu tiên của bạn

Tạo một tài liệu mới 550x550px trong Photoshop và đưa lưới lên bằng cách đánh cmd / ctrl + ' . Tạo một lớp mới và với công cụ bút, phác thảo chữ cái đầu tiên của bạn. Để lại những khoảng trống trong nhân vật, vì đây sẽ là một kiểu chữ kiểu neon. Khi bạn hài lòng, nhấn Stroke trong tab Paths để vẽ trong thư.

02. Làm việc thông qua bảng chữ cái

dollar and pounds signs in Photoshop — Đừng quên những nhân vật đặc biệt

Tạo càng nhiều ký tự như bạn muốn, với cây bút trên một lớp mới mỗi lần. Nếu bạn muốn, hãy thêm một số ký tự đặc biệt, chẳng hạn như ký hiệu tiền tệ, dấu chấm câu và các chữ cái có dấu. Thực hiện theo phong cách cơ bản giống như bạn bắt đầu, vì vậy phông chữ của bạn là gắn kết.

03. Di chuyển vào fontcreator

fontcreator trial — Có một bản dùng thử miễn phí về fontcreator có sẵn nếu bạn cần nó

Nếu bạn có FontCreator logic cao , Đây là phần mà bạn có thể biến các nhân vật của mình thành một phông chữ. Nếu bạn không, một bản dùng thử miễn phí có sẵn. Bằng cách dán từng nhân vật vào FontCreator, chúng ta có thể tạo một kiểu chữ có thể sử dụng cho Photoshop.

Làm việc theo cách của bạn thông qua fontcreator bằng cách nhấp đúp vào từng ký tự và dán trong công việc vẽ bút của bạn. Đảm bảo rằng mỗi chữ cái nằm trên cùng một đường cơ sở.

04. Kern văn bản của bạn

check your kerning — Luôn luôn kiểm tra kép kerning của bạn

Kerning là khoảng trống giữa mỗi chữ cái (để biết thêm thông tin, hãy xem chúng ta Thuật ngữ typographic. ) và tùy chọn Tự động kerning trong FontCreator tự nhiên không gian ra khỏi các chữ cái của bạn để phông chữ trông gọn gàng. Hãy thử tùy chọn này và đảm bảo mỗi chữ cái có vẻ tốt với nhau.

Khi nó hoàn tất, hãy xuất phông chữ của bạn và cài đặt nó vào máy tính của bạn. Điều này sẽ tự động thêm nó vào Photoshop CC.

05. Thiết lập tài liệu Photoshop

photoshop document palette — Sử dụng bảng màu đề xuất của chúng tôi hoặc tạo của riêng bạn

Tạo một tài liệu mới trong Photoshop. Trên một lớp mới, tạo một bảng màu bằng cách sử dụng một bàn chải lớn. Chúng tôi đã đi với # 501D26, # AF273D, # F74663, # FFDAE1, # 35E985 và # B2DCC4.

Sau đó tìm một hình nền phù hợp và kéo nó vào Photoshop. Tạo một lớp mới, điền vào nó màu đỏ đậm và trùng lặp. Đặt một lớp thành Multiply, và một để tô màu. Tạo một lớp độ sáng / độ tương phản và đặt thành -75 độ sáng. Sao chép này và che mặt trung tâm cho một họa tiết.

06. Nhập văn bản

default text in Photoshop — Nhập một số văn bản và rasterise nó

Lấy công cụ Type và chọn phông chữ của bạn (nếu bạn không tạo phông chữ sớm hơn, chỉ cần đặt trong mỗi chữ cái riêng lẻ). Đánh vần văn bản của bạn, trước Ctrl + nhấp chuột phải lớp và chọn loại rasterize.

07. Tạo một ánh sáng rực rỡ

add a bevel in Photoshop — Cung cấp cho văn bản của bạn một chút sâu sắc hơn với một vát đáng yêu

Ctrl + Nhấp chuột phải lớp, và đi đến các tùy chọn pha trộn & gt; Ánh sáng ngoài. Ở đó, đầu vào độ mờ 50%, chênh lệch 5% và kích thước 63px. Bây giờ, bạn có thể thấy văn bản neon của bạn bắt đầu trông thực tế hơn rất nhiều. Chọn một màu sáng.

Nhấp vào Bevel và Chạm nổi, vẫn trong tùy chọn Layer Styles. Chọn Độ sâu: 250%, Kích thước: 5px, Soften: 2px. Sử dụng các chế độ tô sáng và bóng để thêm độ sâu hơn một chút vào văn bản và phát với các tùy chọn này cho đến khi bạn tìm thấy sự pha trộn phù hợp.

08. Chơi xung quanh với bóng tối

drop shadow in Photoshop — Đừng làm rối tung ánh sáng bên ngoài của bạn với bóng thả của bạn

Đối với bóng bên trong, chọn cùng một màu sáng bạn chọn cho ánh sáng bên ngoài. Tất cả bạn sẽ cần chỉnh sửa ở đây là kích thước, tùy thuộc vào mức độ lớn của văn bản. Thay đổi điều này và để lại tất cả các giá trị khác ở 0.

Khi văn bản neon sẽ nằm trên tường một chút, chúng ta sẽ cần một cái bóng thả tinh tế, nhưng không quá nhiều như chúng ta không muốn thỏa hiệp với ánh sáng bên ngoài. Sử dụng độ mờ thấp và cung cấp cho cái này một khoảng cách và kích thước nữa.

09. Thắp sáng nó lên

string added to text in Photoshop — Đảm bảo rằng chuỗi theo sau tất cả các ký tự

Chuyển đến lớp văn bản, Ctrl. / Nhấp chuột phải và chọn Sao chép kiểu lớp. Nhấp vào lớp động vật, Ctrl. / Nhấp chuột phải và chọn Dán kiểu lớp. Nhấp đúp vào biểu tượng FX và xoay màu hồng sang màu xanh lá cây để có một chút tương phản với văn bản.

Lấy công cụ Pen và tạo một chuỗi thông qua văn bản neon và các động vật mà bạn đã tạo. Đảm bảo rằng nó theo dõi tất cả các ký tự, sau đó đột quỵ với # 808080, với bàn chải 2px được chọn với khoảng cách 1%.

10. Thêm một bóng thả

add a drop shadow in Photoshop — Cho chuỗi một vát và một chút bóng đổ

Chuyển đến các tùy chọn Blending cho chuỗi bạn vừa thực hiện. Đi đến Bevel để tạo cho nó một hình dạng tinh tế, và cũng cho nó một bóng rơi tinh tế. Các biến ở đây phụ thuộc vào kích thước và hình dạng của chuỗi bạn đã tạo, vì vậy chỉ cần thử nghiệm để xem những gì hoạt động.

11. Tạo phiên bản 'TẮT'

flickering effect in Photoshop — Bây giờ tạo một bản sao không phát sáng để bạn có thể tạo hiệu ứng nhấp nháy

Chúng ta hãy tạo một lớp văn bản không phát sáng, vì vậy chúng ta có thể làm động một nhấp nháy trên một số chữ cái. Sao chép lớp văn bản, sau đó ẩn kiểu phát sáng bên ngoài. Đặt bóng bên trong thành # 808080, sau đó thay đổi độ sáng của lớp này thành -50, sử dụng Hue / Saturation ( cmd / ctrl. +. U. ).

Trên lớp văn bản phát sáng, lấy công cụ marquee và chọn một vài chữ cái bạn muốn tắt nhanh trong hoạt hình. Tạo các bản sao của lớp này, với các chữ cái này được che dấu cho đến khi bạn có đủ các lớp để tạo một hình ảnh động.

12. Hoạt hình thiết kế của bạn

export animation as a gif in Photoshop — Xuất khẩu như một gif hoạt hình và bạn tốt để đi

Chuyển đến phía trên bên phải của Photoshop và chọn Chuyển động dưới dạng tùy chọn không gian làm việc. Dòng thời gian hoạt hình sẽ xuất hiện ở dưới cùng; Ở đây, bạn có thể xác định các lớp nào được hiển thị hoặc ẩn trong một thời gian dài mà bạn muốn chúng được.

Tạo các khung hình mới dọc theo dưới với nhiều chữ cái khác nhau hoặc phát sáng hoặc không phát sáng, tùy thuộc vào lớp có thể nhìn thấy hay không. Đặt thời gian của mỗi hoạt hình của từng lớp bằng cách sử dụng mũi tên nhỏ trên mỗi khung hình. Lưu dưới dạng GIF bằng cách sử dụng Lưu cho Web.

Bài viết này ban đầu được xuất bản trên web thiết kế web, tạp chí thiết kế web sáng tạo - cung cấp hướng dẫn chuyên gia, xu hướng tiên tiến và tài nguyên miễn phí. Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

40 ví dụ phải xem về kiểu chữ động học
Cách tạo hiệu ứng gõ hoạt hình
Tạo kiểu chữ 3d của riêng bạn

Tạo hiệu ứng văn bản neon phát sáng

01. Bắt đầu tạo phông chữ

02. Làm việc thông qua bảng chữ cái

03. Di chuyển vào fontcreator

04. Kern văn bản của bạn

05. Thiết lập tài liệu Photoshop

06. Nhập văn bản

07. Tạo một ánh sáng rực rỡ

08. Chơi xung quanh với bóng tối

09. Thắp sáng nó lên

10. Thêm một bóng thả

11. Tạo phiên bản 'TẮT'

12. Hoạt hình thiết kế của bạn

Cách - Các bài báo phổ biến nhất

Cách tạo một sinh vật tưởng tượng siêu thực

Bắt đầu với nền tảng hoạt hình Greensock

5 mẹo cho CSS siêu nhanh

Tạo biểu đồ màu đơn giản

Tạo hiệu ứng văn bản lung lay với JavaScript

Lấy đầu xung quanh phản ứng với năm yếu tố này

trồng cây ở Houdini

Tạo kết cấu có thể chớp tuyệt vời trong Blender

Thể loại