สร้างเอฟเฟกต์ข้อความนีออนที่เร่าร้อน

Feb 8, 2026
วิธีการ

บ่อยครั้งที่มันเป็นผลกระทบที่ง่ายที่สุดที่ดูโดดเด่นที่สุดและข้อความนีออนเป็นหนึ่งในโครงการดังกล่าว นอกจากนี้ยังง่ายต่อการสร้างเอฟเฟกต์นีออนที่ดูสมจริงกว่าที่คุณคิด ในขณะที่การสอนทั้งหมดนี้ใช้เพียงหนึ่งภาพพื้นหลัง แต่กลอุบายสมองของคุณในการมองว่านี่เป็นสัญญาณนีออนที่ใช้งานได้จริง - นั่นคือพลังของ Photoshop CC สไตล์เลเยอร์ เรียนรู้เพิ่มเติมเกี่ยวกับ สิ่งที่น่าทึ่งที่คุณสามารถทำได้ด้วยเลเยอร์ของ Photoshop ที่นี่ .

ความจริงที่ว่าโครงการทั้งหมดนี้สร้างขึ้นจากรอยขีดข่วน - จากตัวอักษรเป็นสีของเรืองแสงจนถึงอนิเมชั่นในที่สุด - หมายความว่ามีขอบเขตมากมายสำหรับความคิดสร้างสรรค์ คุณสามารถเลือกสิ่งที่คุณต้องการทุกส่วนของเอฟเฟกต์นี้เพื่อให้มีลักษณะ

นีออนยังคงเป็นที่นิยม การแสดงโทนเสียงอิ่มตัวกับพื้นหลังที่มืดมิดแล้วเป็นวิธีที่ยอดเยี่ยมในการนำเสนอ หน้าลงจอด , ออกแบบโลโก้ หรือส่วนหัวและง่ายต่อการเคลื่อนไหวงานของคุณและบันทึกเป็น GIF ที่มีขนาดไฟล์ต่ำ (เก็บไฟล์ของคุณให้ปลอดภัย การจัดเก็บเมฆ . ลองดำน้ำเป็นวิธีการสร้างมัน

การสร้างแบบอักษรที่จะแสดงบนเว็บไซต์ใหม่หรือไม่ คุณต้องการ สร้างเว็บไซต์ และยอดเยี่ยม เว็บโฮสติ้ง .

01. เริ่มสร้างแบบอักษร

Use Photoshop's Pen tool to draw the letter 'a'

ใช้เครื่องมือปากกา Photoshop เพื่อวาดตัวอักษรตัวแรกของคุณ

สร้างเอกสารใหม่ 550x550px ใน Photoshop และนำกริดขึ้นมาด้วยการกดปุ่ม cmd / ctrl + ' . สร้างเลเยอร์ใหม่และด้วยเครื่องมือปากกาวาดตัวอักษรตัวแรกของคุณ ปล่อยให้ช่องว่างในตัวละครเนื่องจากนี่จะเป็นแบบอักษรสไตล์นีออน เมื่อคุณมีความสุขกดปุ่มจังหวะภายในแท็บพา ธ เพื่อวาดในจดหมาย

02. ทำงานผ่านตัวอักษร

dollar and pounds signs in Photoshop

อย่าลืมเกี่ยวกับตัวละครพิเศษ

สร้างตัวละครให้ได้มากเท่าที่คุณต้องการด้วยปากกาบนชั้นใหม่ในแต่ละครั้ง หากคุณต้องการเพิ่มในอักขระพิเศษบางตัวเช่นสัญลักษณ์สกุลเงินเครื่องหมายวรรคตอนและตัวอักษรเน้นเสียง ทำตามสไตล์พื้นฐานเดียวกันกับที่คุณเริ่มต้นดังนั้นแบบอักษรของคุณจะเหนียวแน่น

03. ย้ายไปที่ fontcreator

fontcreator trial

มีการทดลองใช้ FontCreator ฟรีหากคุณต้องการ

ถ้าคุณมี FontCreator ตรรกะสูง นี่คือส่วนที่คุณสามารถเปลี่ยนตัวละครของคุณให้เป็นแบบอักษร หากคุณไม่ได้ทดลองใช้ฟรี ด้วยการวางอักขระแต่ละตัวลงใน fontcreator เราสามารถสร้างแบบอักษรที่ใช้งานได้สำหรับ Photoshop

ทำงานในแบบของคุณผ่าน FontCreator โดยคลิกสองครั้งที่ตัวละครแต่ละตัวและวางในงานปากกาวาดของคุณ ตรวจสอบให้แน่ใจว่าตัวอักษรแต่ละตัวอยู่บนพื้นฐานเดียวกัน

04. Kern ข้อความของคุณ

check your kerning

ตรวจสอบ Kerring ของคุณอีกครั้งเสมอ

Kerning เป็นช่องว่างระหว่างตัวอักษรแต่ละตัว (สำหรับข้อมูลเพิ่มเติมลองดูที่ของเรา อภิธานศัพท์การพิมพ์ ) และตัวเลือก Auto-Kerning ภายในตัวอักษรที่มีลักษณะช่องว่างตามธรรมชาติของคุณเพื่อให้ตัวอักษรดูเรียบร้อย ลองใช้ตัวเลือกนี้และตรวจสอบให้แน่ใจว่าตัวอักษรแต่ละตัวดูดีด้วยกัน

เมื่อเสร็จแล้วให้ส่งออกแบบอักษรของคุณและติดตั้งลงในคอมพิวเตอร์ของคุณ สิ่งนี้จะเพิ่มลงใน Photoshop CC โดยอัตโนมัติ

05. ตั้งค่าเอกสาร Photoshop

photoshop document palette

ใช้จานสีที่แนะนำของเราหรือสร้างของคุณเอง

สร้างเอกสารใหม่ใน Photoshop บนเลเยอร์ใหม่สร้างจานสีโดยใช้แปรงขนาดใหญ่ เราไปกับ # 501D26, # AF273D, # F74663, # FFDAE1, # 35E985 และ # B2DCC4

จากนั้นค้นหาภาพพื้นหลังที่เหมาะสมและลากเข้าไปใน Photoshop สร้างเลเยอร์ใหม่เติมสีสีแดงเข้มและซ้ำกัน ตั้งหนึ่งชั้นเพื่อคูณและหนึ่งเป็นสี สร้างเลเยอร์ความสว่าง / ความคมชัดและตั้งค่าเป็น -75 ในความสว่าง ทำซ้ำสิ่งนี้และหน้ากากศูนย์กลางสำหรับบทความสั้น ๆ

06. ป้อนข้อความ

default text in Photoshop

พิมพ์ข้อความบางอย่างและ rasterise

คว้าเครื่องมือประเภทและเลือกแบบอักษรของคุณ (หากคุณไม่ได้สร้างแบบอักษรก่อนหน้านี้เพียงแค่วางในตัวอักษรแต่ละตัว) สะกดข้อความของคุณก่อน Ctrl + คลิกขวา เลเยอร์และการเลือกประเภท Rasterize

07. สร้างเรืองแสง

add a bevel in Photoshop

ให้ข้อความของคุณลึกซึ้งยิ่งขึ้นด้วยมุมเอียงที่น่ารัก

Ctrl + คลิกขวา เลเยอร์และไปที่การผสมตัวเลือก & gt; เรืองแสงด้านนอก ที่นั่นป้อนความทึบของ 50% การแพร่กระจาย 5% และขนาด 63px ตอนนี้คุณสามารถดูข้อความนีออนของคุณเริ่มต้นดูสมจริงมากขึ้น เลือกสีสดใส

คลิกที่ Bevel และ Emboss ยังคงอยู่ในตัวเลือกสไตล์เลเยอร์ เลือกความลึก: 250%, ขนาด: 5px, นุ่ม: 2px ใช้โหมดไฮไลท์และเงาเพื่อเพิ่มความลึกให้กับข้อความมากขึ้นเล็กน้อยและเล่นกับตัวเลือกเหล่านี้จนกว่าคุณจะพบการผสมที่เหมาะสม

08. เล่นกับเงา

drop shadow in Photoshop

อย่าทำให้การเปล่งประกายด้านนอกของคุณยุ่งเหยิงด้วยเงาของคุณ

สำหรับเงาด้านในให้เลือกสีสดใสที่คุณเลือกสำหรับเรืองแสงด้านนอก ทั้งหมดที่คุณจะต้องแก้ไขที่นี่คือขนาดขึ้นอยู่กับว่าข้อความมีขนาดใหญ่แค่ไหน เปลี่ยนสิ่งนี้และปล่อยให้ค่าอื่น ๆ ทั้งหมดที่ 0

เนื่องจากข้อความนีออนกำลังจะนั่งอยู่นอกกำแพงเล็กน้อยเราจะต้องมีเงาที่ลดลงเล็กน้อย แต่ไม่มากเกินไปเพราะเราไม่ต้องการประนีประนอมด้านนอกเรืองแสง ใช้ความทึบแสงต่ำและให้อีกระยะทางและขนาดนี้

09. สว่างขึ้น

string added to text in Photoshop

ตรวจสอบให้แน่ใจว่าสตริงดังต่อไปนี้ผ่านตัวละครทั้งหมด

ไปที่เลเยอร์ข้อความ ctrl / คลิกขวาและเลือกรูปแบบคัดลอกเลเยอร์ คลิกที่ชั้นสัตว์ ctrl / คลิกขวาและเลือกสไตล์เลเยอร์วาง ดับเบิลคลิกที่ไอคอน FX และเปลี่ยนสีชมพูให้เป็นสีเขียวเพื่อความแตกต่างเล็กน้อยกับข้อความ

คว้าเครื่องมือปากกาและสร้างสตริงผ่านข้อความนีออนและสัตว์ที่คุณสร้างขึ้น ตรวจสอบให้แน่ใจว่ามันดังต่อไปนี้ผ่านตัวละครทั้งหมดแล้วจังหวะด้วย # 808080 พร้อมแปรง 2px ที่เลือกด้วยระยะห่าง 1%

10. เพิ่ม Drop-Shadow

add a drop shadow in Photoshop

ให้สตริงที่มีมุมเอียงและเงาเล็ก ๆ

ไปที่ตัวเลือกการผสมสำหรับสตริงที่คุณเพิ่งทำ มุ่งหน้าสู่การเอียงเพื่อให้มันเป็นรูปร่างที่ลึกซึ้งและให้เงาที่ลดลงเล็กน้อยเช่นกัน ตัวแปรที่นี่ขึ้นอยู่กับขนาดและรูปร่างของสตริงที่คุณสร้างขึ้นดังนั้นเพียงแค่ทดสอบเพื่อดูว่าใช้งานได้อย่างไร

11. สร้างรุ่น 'ปิด'

flickering effect in Photoshop

ตอนนี้ทำสำเนาที่ไม่เรืองแสงเพื่อให้คุณสามารถสร้างเอฟเฟกต์กะพริบ

มาสร้างเลเยอร์ของข้อความที่ไม่ได้ส่องแสงดังนั้นเราจึงสามารถเคลื่อนไหวกะพริบบนตัวอักษรบางตัว ทำซ้ำเลเยอร์ข้อความจากนั้นซ่อนสไตล์ด้านนอกเรืองแสง ตั้งค่าเงาด้านในเป็น # 808080 จากนั้นเปลี่ยนความสว่างของเลเยอร์นี้เป็น -50 โดยใช้เว้ / ความอิ่มตัว ( cmd / ctrl + ยู .

ในเลเยอร์ข้อความที่เร่าร้อนคว้าเครื่องมือปะรำและเลือกตัวอักษรสองสามตัวที่คุณต้องการปิดตัวย่อในภาพเคลื่อนไหว สร้างการทำซ้ำของเลเยอร์นี้ด้วยตัวอักษรเหล่านี้ปิดบังจนกว่าคุณจะมีเลเยอร์เพียงพอในการสร้างภาพเคลื่อนไหว

12. เคลื่อนไหวการออกแบบของคุณ

export animation as a gif in Photoshop

ส่งออกเป็น gif เคลื่อนไหวและคุณดีที่จะไป

ไปที่ด้านบนขวาของ Photoshop และเลือกการเคลื่อนไหวเป็นตัวเลือกเวิร์กสเปซ ไทม์ไลน์อนิเมชั่นจะปรากฏที่ด้านล่าง; ที่นี่คุณสามารถกำหนดว่าเลเยอร์ใดที่แสดงหรือซ่อนอยู่ในเวลาที่คุณต้องการให้พวกเขาเป็น

สร้างเฟรมใหม่ตามด้านล่างด้วยตัวอักษรต่าง ๆ ไม่ว่าจะส่องร่องหรือเปล่งประกายขึ้นอยู่กับว่าเลเยอร์สามารถมองเห็นได้หรือไม่ กำหนดเวลาของภาพเคลื่อนไหวของแต่ละเลเยอร์โดยใช้ลูกศรเล็ก ๆ ในแต่ละเฟรมเช่นกัน บันทึกเป็น GIF โดยใช้บันทึกสำหรับเว็บ

บทความนี้ได้รับการตีพิมพ์ใน Web Designer นิตยสาร Creative Web Design - เสนอแบบฝึกหัดผู้เชี่ยวชาญแนวโน้มที่ทันสมัยและทรัพยากรฟรี สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

  • 40 ต้องดูตัวอย่างของการพิมพ์จลประดา
  • วิธีการสร้างเอฟเฟกต์การพิมพ์ภาพเคลื่อนไหว
  • สร้างแบบอักษร 3 มิติของคุณเอง

วิธีการ - บทความยอดนิยม

วิธีการถ่ายภาพหน้าจอบน Mac

วิธีการ Feb 8, 2026

(เครดิตภาพ: Creative Bloq) หากคุณต้องการจับภาพทั้งห..

เคล็ดลับการพัฒนาภาพ: เล่าเรื่องด้วยงานศิลปะของคุณ

วิธีการ Feb 8, 2026

(เครดิตภาพ: Simon Baek) การพัฒนาภาพคืออะไร? มันคือ�..

เปลี่ยนสี Photoshop: 2 เครื่องมือที่คุณต้องรู้

วิธีการ Feb 8, 2026

ข้ามไปที่: เครื่องมือเปลี่ยนสี ..

วิธีการสร้างแอป AR

วิธีการ Feb 8, 2026

หน้า 1 จาก 3: สร้างแอป AR: ขั้นตอนที่ 01-10 ..

5 วิธีในการเพิ่ม SEO ของเว็บไซต์ของคุณ

วิธีการ Feb 8, 2026

SEO: มันเป็นงานที่สกปรก แต่มีคนต้องทำและถ้าคุณต..

ทาสีกระต่ายซุกซนในสีน้ำ

วิธีการ Feb 8, 2026

เมื่อมีการศึกษาสัตววิทยาสัตว์และสัตว์ป่ามีความหลงใหลในฉันเสมอแล�..

ฝึกฝนเครื่องมือสะพาน

วิธีการ Feb 8, 2026

เครื่องมือบริดจ์คืออะไร? หากคุณยังใหม่ก�..

ทาสีไพ่ทาโรต์ดั้งเดิม

วิธีการ Feb 8, 2026

เมื่อฉันได้รับไพ่ทาโรต์แรกของฉันฉันหลงเสน่ห..

หมวดหมู่