나만의 파비콘 만들기

 포토샵으로 파비콘 만들기 

 

파비콘 만들기

우선 질문!
Q : 파비콘이란 무엇인가요?

A :파비콘(영어: favicon, 'favorites + icon') 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

자신의 블로그의 의미를 아이콘으로 함축하여 나타내는 것입니다.

저는 제 닉네임인 [흑심을 품은 밤]에 맞춰서 만들었습니다.
어두운 밤에 빨려들어 가는 듯한 느낌을 만들고 싶었는데 아이콘이다 보니 배경이 없는 게 어울릴 듯하여 배경은 제거하기로 합니다.

 

본격적으로 만들기 시작!

1. 언스플래시 에서 필요한 사진을 구합니다.
(영어로 검색해야 합니다.)
우주 느낌을 얻고 싶어서 universe를 검색하여 사진을 구했습니다.

 

사진 앤디 홈즈 에 Unsplash 얻고 싶은 우주 사진을 다운로드합니다. (unsplash는 저작권 무료로 쓸 수 있습니다.)

 

2. 배경 가운데 넣을 입체 구 모양으로 만듭니다.

물방울 효과 [도비마스터님]

새 [레이어1]에서
[타원 선택 윤곽 도구]로 타원을 그린다.
그라디언트 흰색/검은색
쉬프트 누르고 사선으로 그린다.
[레이어1] 오버레이(overlay)로 변경
[레이어1]에 혼합 옵션 내부그림자(Inner shadow) 적용
[내부 그림자](Inner shadow)
Opacity 40~50%
Angle : 132º
Distance : 5px
Size : 5px

드롭 새도(Drop Shadow)
조정하면서 확인

ctrl + D 선택 영역 해제

새 [레이어2] 추가

브러쉬 하얀색 강도(Hardness) 50%
빛 모양 넣어주기

Ctrl + 레이어1 클릭 원형 선택
원본 복사하여 새 [레이어3]에 원 생성

레이어3에 구형 효과를 주기위해
필터(Filter) > 왜곡(Disort) > 구형화(Spherize)
양(amount) 조절

물방울 효과 [도비마스터님] 도비마스터님의 영상을 참고하여 입체효과를 주었습니다.

3. 구 모양만 떼어줍니다.

배경과 그림자 효과가 빠지니 구 느낌이 안납니다.

4. 품었다는 느낌을 위해 왜곡된 효과를 추가합니다.

Dispersion Effect: Photoshop Tutorial  Photoshop Tutorial님
2:36부터 유화, 왜곡 느낌을 위해 참고한 영상.
필터 > 픽셀 유동화(Liquify)

Dispersion Effect: Photoshop Tutorial  Photoshop Tutorial님 빛 효과와 안쪽에 다른 사진에 왜곡을 준 뒤 합성해서 느낌을 좀 더 살려주기로 합니다.

배경도 멋있게 넣었는데 아이콘이다보니 없는 게 나을 거 같아 빼버렸습니다.
우주 모양만 그대로 사용하는 것보다 훨씬 이뻐보입니다.

닉네임을 안 넣는게 이뻐 보이지만
넣는다면 어떻게 넣을지는 좀 더 고민해봐야겠습니다.

이렇게 해서 완성입니다!

포토샵으로 작업하셨다면 .ico로 변경해주셔야 합니다.
파비콘은 .ico 파일만 업로드 할 수 있어서 변형할 수 있는 주소를 남겨놓았습니다.
(ico converter)

 

파일이 엄청 작아져서(도트화) 디테일이 다 묻혀버렸네요.
아이콘으로도 이쁘게 쓰고 있어서 만족합니다.

다른 ico 변환 사이트

이 사이트에서 하면 화질이 거의 깨지지 않습니다.

 

 

마무리

간만에 합성이랑 튜토리얼 영상보면서 만들어봤는데 색감이 잘 뽑힌 것 같아 기분이 좋네요.

 

관련글

 

 

 

 

도움이 되었다면 공감 눌러주세요~