티스토리 뷰
어두운 바탕에 들어가는 로고가 필요한 경우가 종종 있다.
JPG파일 형식은 색상만 기록되는 사진 포맷이라 내용물 외 바탕색을 투명하게 할 수 없지만.
모바일용으로 개발된 PNG포맷은 투명도도 기록되기 때문에 내용물을 살짝 투명하게하거나 아예 배경을 없애는 효과도 가능하다.
바탕없는 PNG파일을 만들고 살짝 활용해보자~
포토샵에서 [컨트롤+N] 을 누르시면 작업영역을 새로 만들 수 있다.
보통의 PC와 모바일에서 활용하는 설정은
단위는 Pixel, 해상도(Resolution)는 72로 한다.
일단 나는 대충 720X720사이즈로 만들기로 했다.
[#1]에서 정한 채우기색(앞)은 [알트 + DELETE] 키를 누르면 해당레이어에 이렇게 채워버린다.
반대로 배경색(뒤에 있는 흰색)은 [컨트롤 + DELETE] 키를 누르면 레이어(혹은 선택영역)에 채운다.
습관되면 계속 쓰게 되는 단축키다.
[#2]의 눈금이 달린 룰러를 마우스 왼클릭으로 눌러서 잡아끌면 이렇게 실선 가이드를 쳐놓고 작업할 수 있다. 룰러가 안보이시는 분은 [컨트롤 + R] 키를 누르시면 된다.
[#3]처럼 눈금자는 우클릭해서 픽셀단위로 바꿔놔야 작업하기 편하다.
난 상하좌우 100픽셀씩 눈금자를 쳐놓고 내용물을 담았다.
심볼, 텍스트 등을 활용해 자유롭게 로고를 만드시면 된다.
다만 어두운 배경에 쓰일 PNG를 만드시는 거라면 밝은 색상을 활용하는게 좋을 것 같다.
※ 로고 예제를 뭘로 만들까 고민하다가 급 한글사랑이 땡겨서 글자로 채웠다.(서체 : 윤고딕700시리즈)
내용물 채우기가 끝나면 [#1]의 눈깔모양을 눌러서 지워본다.
그럼 바탕이 투명한 내용물만 남게된다.
PNG파일은 여백 그대로 저장해도 되지만 이곳저곳에 쓰기 위해 여백을 없애고 타이트하게 맞추기로 했다.
기존의 100픽셀씩 뒀던 여백을 없애기 위해 [컨트롤 + 알트 + C]를 누르면 작업화면 사이즈를 줄이거나 늘일 수 있다.
앵커(Anchor)는 어딜 기준으로 이렇게 줄이느냐를 정해주는건데 그냥 놔두면 센터기준으로 상하좌우 100씩 줄게된다.
이렇게 줄어든다
기분굿
[컨트롤 + 쉬프트 + 알트 + S] 키를 누르면 웹용포맷으로 저장할 수 있다.
[#1]에서 타입을 PNG-24로 바꾸고 트랜스패런시를 체크해야 바탕이 투명하게 저장된다.
밑에 있는 세이브 버튼을 눌러 아무 이름이나 입력하면 [아무 이름.PNG] 파일이 생성된다.
※GIF와 PNG-8도 투명바탕은 가능하지만 둘다 색상이나 테두리 처리등의 정교함이 떨어진다(물론 용량은 매우 줄어든다)
포토샵에서 아무 배경그림이나 만들고 아까 만든 PNG를 불러오면 이렇게 깔끔하게 들어가진다.
지금 포스팅에도 얼마나 많은 한글 파괴가 있었는지 반성하면서 바라본다.
특별부록 : 티스토리 스킨 log by에 들어가는 로고 파일 만들기
스샷을 잘못떴다... 480X720으로 만들도록 하자..
아까 만든 로고를 불러와서 [컨트롤 + T]트랜스폼 모드로 사이즈를 변경해서 위엔 480X480안에 넣고 아래엔 240X240으로 넣는다. 화면처럼 가이드 선을 그어놓고 하면 굿.
※트랜스폼 모드중에 쉬프트키를 누른채로 사이즈를 변경하면 좌우비율을 그대로 유지해준다.
마찬가지로 바탕레이어 눈깔들을 눌러서 배경을 없애고 logo.png로 저장해서 스킨편집 모드로 업로드 하면 스킨에서 제대로 로고가 출력된다.