본문 바로가기

Design LAB

[포토샵강좌] 포토샵으로 한RSS 피드버튼 만들기

반응형
오늘 소개할 팁은 아주 간단한 포토샵 팁입니다. 제목에 적은대로 포토샵으로 한RSS 피드버튼 만들기입니다.

제가 이렇게 두개로 만들어야 하겠다고 생각한 것은 한RSS에서 기본으로 제공하는 피드버튼이 매우 한정적이고 제 블로그 모양과도 맞지 않기 때문입니다.

한RSS에서 자체적으로 제공하는 피드버튼은 5개뿐이다.


제가 사용하고 있는 RSS피드의 버튼은 아래와 같이 두개입니다. 하나는 피드버너용, 하나는 한RSS용입니다.


눈치가 빠르신 분들은 아시겠지만 제가 사용하고 있는 한RSS피드버튼은 기존에 배포된 RSS피드 버튼을 제가 수정해서 만든 아이콘입니다. 피드아이콘이 두개다 보니까 헷갈리길래 하나는 HanRSS라는 글씨를 넣어서 직접 만들었습니다.

아래는 제가 사용하고 있는 피드버튼처럼 한RSS피드버튼을 만드는 방법에 대해 설명하고 있습니다. 기본적인 포토샵능력만 있으시면 충분히 따라 하실수 있는 수준이며 조금의 응용력말 발휘하신다면 다른 아이콘에도 충분히 적용하실 수 있을겁니다.

기본적인 기능만 사용하기 때문에 포토샵버젼은 크게 상관이 없습니다. 전 포토샵 CS3를 이용했습니다. 따라가세요~

아래 피드버튼은 예전에 저장한 것이라 저작권여부를 제가 알지 못합니다. 혹시 문제가 된다면 포스팅을 수정 혹은 삭제하겠습니다. 댓글로 알려주세요.

1. 원본파일 불러오기

이번 강좌에 사용할 원본은 아래와 같습니다. 예전에 받아놓은 이미지라서 출처가 어디인지 모르겠네요. 원본은 작업하기 편하게 큰 이미지가 좋습니다. (가로, 세로 200px 이상)





2. Rounded Retangle Tool로 테두리 그려주기

그다음 할 일은 글자가 들어갈 테두리를 그려주는 것입니다. 왼쪽의 툴바에서 Rounded Retangle Tool을 선택합니다.

테두리가 둥근정도는 위의 Radius에서 조절할 수 있습니다. 원본이미지의 사이즈에 따라 여러번 그려보면서 적당한 값을 지정합니다. 저는 20px로 그렸습니다.




사각형 안의 색을 흰색으로 맞춰줍니다. Layer패널에서 색부분을 더블클릭하여 흰색으로 맞춰줍니다. (아래 이미지를 참고)



3. Layer Effect로 Rounded Retangle(테두리가 둥근 사각형)에 Drop Shadow(외부 그림자) 주기

원본이미지와 경계를 주기 위해서 Layer Effect를 줘 보겠습니다. Layer Effect에서 Drop Shadow를 선택합니다.


우리가 필요한 건 한쪽으로 쏠린 그림자가 아닌 테두리이므로 Distance값을 0으로 줍니다. 나머지 SpreadSize는 작업창을 보면서 적당히 조절합니다.


아래와 같은 이미지가 완성되었습니다.



4. 텍스트(HanRSS) 삽입하기

그 다음에 할일은 HanRSS라는 글자를 적어주는 것입니다. 이미 만들어 놓은 사각형 안에다 Text툴을 클릭하면 사각형안으로 들어가버리므로 (파워포인트 처럼) 다른곳에 쓴 다음 옮겨주는 것이 좋습니다.

폰트는 그냥 고딕체, 색상코드는 Han부분은 ff9900, RSS부분은 999999를 이용했습니다. 물론 다른폰트, 다른색으로 하셔도 상관 없습니다.


















5. 두 레이어(사각형 and 텍스트) 위치 및 크기 조정하기

그런다음 두레이어의 크기를 Free Transform (Ctrl + T) 기능을 이용하여 크기및 위치를 적당하게 조절해 줍니다. 두 레이어를 한꺼번에 이동시키고 싶으면 아래처럼 Layer 패널에서 Ctrl + 클릭을 이용하여 두레이어를 모두 선택후 이동시켜주면 됩니다.




6. 테두리 Crop하고 리사아즈 하기

은 아이콘으로 만들었을때 여백은 보기가 않좋으므로 Crop툴로 잘라내버리고 자신의 블로그에서 사용할 사이즈로 리사이즈 해줍니다.














작업창에서 오른클릭하여 Image Size를 선택하거나 Ctrl + Alt + I를 눌러 리사이즈 해줍니다.


완성작입니다.

참 쉽죠잉? 다른곳에서 퍼온 한RSS피드버튼이 맘에 안드신다면 저처럼 직접 만들어 보아요~

반응형