완전 리얼 3D 네온사인 효과 Neon Sign Effect – 포토샵 실전 강좌

포토샵 실전 아홉 번째 강좌입니다. 이번에는 포토샵을 이용해서 진짜 같은 네온사인 효과를 배워보겠습니다. Add a Layer Style을 사용해서 제작하며, 단순 그로우로만 제작하지 않습니다. 수치 입력이 많으니 잘 따라와 주세요~! 포토샵으로 텍스처 공부하시는 분들은 한 번 따라 해보세요. 스마트 오브젝트로 진행하기 때문에 언제든지 텍스트 수정과 컬러 수정을 해서 다양한 곳에 사용할 수 있습니다.

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

핵심 요약

이벤트 배너나 웹, 앱 배너에 Gif로 사용하면 좋습니다. ^^

GIF 사용법은 나중에 포토샵 기초 강좌에서 다루겠습니다.

우선 네온 서체를 아래 다운 경로를 통해 설치해주세요.

폰트 다운 : https://www.1001fonts.com/beon-font.html#license

​

네온사인 효과 작업 순서

1. 배경 깔기 – #131927
2. Beon 체로 텍스트 입력 – 300px 원하는 텍스트 삽입
3. 스마트 오브젝트를 두개로 만들기 (New Smart Object via Copy 사용) – 각 Vertical, Horizontal로 레이어 이름 변경
4. 각 스마트 오브젝트에 마스크 후 – 가로 줄, 세로 줄 마스크 (영상 참고)
5. 가로, 세로 느낌의 스마트 오브젝트 레이어 각각 3개로 복제 Cmd + J (Ctrl + J) 후 레이어 뒤에 번호 01~3 기입
6. 레이어 Fill 0%로 만들고 3개로 복제 후 그룹화
7. 순서에 맞게 이펙트 입히기​

효과 입히기 Vertical부터! 복잡하니 잘 따라오세요.

Vertical 01 레이어

Bevel and Emboss 수치 입력

Bevel and Emboss – Contour 수치 입력

​

Inner Shadow 수치 입력

컬러 핵사 값 : #acc1ff

Inner Glow 수치 입력

컬러 핵사 값 : #517dfd

​

Drop Shadow 수치 입력

​

Vertical 02 레이어

Bevel and Emboss 수치 입력

Bevel and Emboss – Contour 수치 입력

​

Vertical 03 레이어

Bevel and Emboss 수치 입력

Bevel and Emboss – Contour 수치 입력

​

Inner Glow 수치 입력

컬러 핵사 값 : #517dfd

​

Outer Glow 수치 입력

컬러 핵사 값 : #2d447f

​

이렇게 입력하면 거의 끝났습니다. 아래처럼 보여야 잘 따라오고 있는 거예요. 복잡하죠?! 원래 고퀄을 위한 길은 험합니다..

이제 Horizontal 레이어에 효과 적용할 건데 이제부터 아주 쉬워요.

Vertical에 입력한 효과를 복제해줍니다. 단, 순서에 맞게요. Vertical 01 -> Horizontal 01, Vertical 02 -> Horizontal 02 이런 식으로요.

복제 방법은 레이어 옆 fx 부분을 Option(Alt) 키를 누른 채 드래그 앤 드롭해줍니다. 그리고, 일부 수치만 변경하면 끝입니다.​

효과 입히기 Horizontal

Horizontal 01 레이어

Angle: 0 / Altitude: 60

​

Horizontal 02 레이어

Size: 16

Angle: -36 / Altitude: 42

​

Horizontal 03 레이어

Angle: 18 / Altitude: 58

Horizontal도 완성하면 이런 식으로 완성됩니다.

디테일 컷입니다. 아주 디테일하죠?

포토샵으로 네온사인 효과 만들기 완성입니다.

도움이 되셨다면, 좋아요 와 공유 부탁드립니다. 유튜브를 구독하시면, 최신 강좌를 가장 먼저 볼 수 있어요~! : )