포토샵으로 새 글 알림 아이콘 만드는 방법 - 포토샵 타임라인 기능

포토샵으로 새 글 알림 아이콘 만드는 방법

만드는 방법은 매우 간단하다. 기본적으로 티스토리 블로그에서 자체적으로 제공하는 새 글 알림 아이콘은 너무 밋밋한 느낌이 있다. 그렇다고 네이버 블로그의 새 글 알림 아이콘 또한 특별하지 않다. 티스토리 블로그와 네이버 블로그의 새 글 알림 아이콘의 차이는 Gif 확장자로 반짝이는 새 글 알림 아이콘이라는 차이가 있다.

기본적으로 여러 제작 도구가 있지만, 포토샵의 타임라인 기능을 활용해서 움직이거나 반짝이는 새 글 알림 아이콘을 만들 수 있다. 프레임을 어떻게 나눠서 만드느냐에 따라서 전혀 다른 느낌의 이미지가 제작된다.

1. 네이버 블로그의 새 글 알림 아이콘

타임라인을 통해 네이버 블로그의 새 글 알림 아이콘의 형태를 확인할 수 있다.

그나마 네이버 블로그는 반짝이는 아이콘으로 제작되었는데, 티스토리 새 글 알림 아이콘은 그마저도 없다. 따라서, 이런 경우에는 다른 곳에서 새 글 알림 아이콘을 새롭게 저장해서 적용하거나, 직접 포토샵을 통해서 제작하는 방법을 활용할 수 있을 것이다. 내 경우에는 내가 꾸미고자 하는 블로그의 색상을 적용해서 새 글 알림 아이콘을 제작했다. 제작 방법은 매우 간단하다. 먼저 각 픽셀에 맞게 새 글 알림 이미지를 그려준다.

나는 18x18px의 이미지를 제작했으나, 조금 더 작게 꾸미고자 한다면 14~16px도 괜찮을 것이다. 그다음에 각 프레임마다 다른 색상을 적용해준다. 부드러운 그러데이션 효과를 주고 싶다면 약간의 명도 차이만 주면 될 것이다.

타임라인의 프레임에 각 레이어에 맞는 이미지를 적용하고 시간 간격을 설정한다.

2. 타임라인으로 움직이는 이미지 제작하는 방법

위와 같이 포토샵을 통해서 내가 원하는 새 글 알림 아이콘을 제작했다. 각 레이어에 맞게 이미지를 그리고 그룹화한다. 그다음에 타임라인으로 새롭게 프레임을 생성한 다음, 각 타임라인 프레임마다 레이어를 켜주면 해당 타임라인 개별 프레임에 적용된다. 그다음, 프레임에 맞게 시간 간격을 설정해야 한다.

여러 개 선택할 수 있으며, 한 번에 시간 간격을 수정해준다. 일반적으로 네이버 블로그의 새 글 알림 아이콘의 시간 간격은 첫 번째 프레임이 0.5초의 시간 간격이 설정되어 있고, 나머지는 0초로 시간 간격이 설정되어 있지 않다. 그래서 그대로 적용했다. 이렇게 각 프레임에 맞게 설정을 완료했다면 플레이를 통해서 어떻게 표시되는지 확인해보고 Gif로 저장해준다. 새 글 알림 아이콘을 저장할 때는 투명한 배경 이미지로 제작한다.

이 과정을 모두 진행하면 아래와 같이 새 글 알림 아이콘이 제작된다.

결과물

일반형태

네이버블로그 아이콘

티스토리 아이콘

이렇게 제작한 새 글 알림 아이콘 이미지를 티스토리 블로그에 적용하기 위해서는 아래와 같이 스크립트를 적용한다. 적용 위치는 일반적으로 </body> 위에 스크립트를 작성한다. 각 스킨 구조에 따라서 일부 코드를 수정해야 한다. 변경되는 이미지 파일 이름은 아래 이미지 이름과 같게 변경하거나, 아래의 스크립트를 변경해서 적용해야 한다.

$('img[alt="N"]').each(function(){ $(this).replaceWith('<img src="./images/new_icon.gif" alt="새 글 알림 아이콘" title="새 글 알림">'); }); $('img[src*="new_ico_1"]').each(function(){ $(this).replaceWith('<img src="./images/new_icon.gif" alt="새 글 알림 아이콘" title="새 글 알림">'); });