포토샵 강좌/포토샵으로 파비콘 favicon 만들기 1

 
파비콘이란 ?

Favicon 은 즐겨찾기(Favorite) + 아이콘(Icon)의 합성어입니다. 바로 즐겨찾기 아이콘을 의미합니다.

처음 인터넷이 확산될 무렵엔 웹사이트의 개성(Identity)을 나타내기 쉬웠던 것은 바로 도메인 이름이었습니다.
쇼핑에 관한 웹사이트면 어떻게 하든지 Shop, 혹은 Shopping이라는 단어를 집어넣은 도메인을 먼저 확보해야했습니다.
그 다음은 웹사이트의 디자인과 Color가 웹사이트 혹은 회사의 개성을 표현할 수 있는 방법이었습니다.

요즘은 웹사이트 & 웹페이지 주소부분을 돋보이게 하기위해 이미지를 넣게 되었습니다. 

파비콘은 웹사이트 & 웹페이지를 상징하는 작은 이미지를 명칭합니다.
파비콘은 internet explorer 7.0 이상 사용저에게 권장 합니다.




포토샵 강좌/포토샵으로 파비콘 favicon 만들기 2    http://coolpunch.tistory.com/14
포토샵을 사용하지 않고 기존 이미지를 이용해 만들기    http://coolpunch.tistory.com/15

파비콘의 적용 예

 

 

 

위 이미지를 보시면 파비콘이 어떤건지 아실수 있을거에요  ^^
빨간색 원 그래도 모르시겠다면 화살표 까지 ㅎㅎ

그럼 파비콘에 대해선 이정도로 하고 원래 목표인 포토샵으로 파비콘 만들에 도전해 보겠습니다. Let' go

포토샵으로 파비콘 만들기

포토샵으로 파비콘 만들기에 압서 제가 사용중인 포토샵은 CS 5.1 입니다. 
CS5.1 기준으로 만들기 글을 적어 나가게 되겠지만 포토샵 기본 방식 자체는 변함이 없기애 다른 버전 사용 하시는 분들도 충분히 따라 하실수 있을 거에요 ^^

초보분들도 쉽게 따라 할수 있도록 기본적인 단축키 (cltrl+ c ,cltrl+ v ) 말곤 직접 클릭 아이콘을 사용 해서 하는방법으로 소개 하겠습니다.  

파비콘 만들기 기본을 제 쓰고 있는 파비콘을 바탕으로 제작 해보도록 하겠습니다, 

 

CP 어디서 보던 파비콘 ^^ 네 지금 부터 이것을 만드는 법을 적어 보겠습니다.

1-1. 포토샵 상단 메뉴의 File - New 선택
1-2. 위 이미지처럼 New 창이 열립니다. 
설정값으로 width 64 , Height 64 로 설정 합니다.   이미지처럼 똑같이 설정 하시면 됩니다.
1-3. OK 선택

 

위에 같은 작업 영역이 생겨납니다.  힌색 부분이 작업 영역 입니다.

포토샵 우측 메뉴중
2-1. 1번 표시된 뉴레이어 생성을 선택
2-2.  1번 작업을 완료 하면 2번 표시 처럼 layer1 이 생성 됩니다.

위작업에서 새로 만들어진 레이어에 원하는 색을 넣어야 되기에  위 처럼 항목을 설정 해봅니다.
3-1 . 우측 메뉴항목중 color  선택 사진에 보시면 RGB 색상숫자가 보입니다.  위 이미지 처럼 원하는 색상을 만들면 됩니다.



작업영역 전경색을 정해 봅니다.
4-1. 작업 영역 선택후  상단 메뉴 select-All 선택  (작업 영역인 힌색 부분에 점선이 테두리를 따라 움직이는게 보일겁니다.

전체영역이 선택되었으니 좌측 메뉴중 paint bucket tool 을 선택  페인트 통이 안보인다고 하실분들도 있을 겁니다.
그럴땐 Gradient tool 이라고 되어 있는 툴로 바뀌어 있을 경우 입니다.  페인트 통으로 변환 하기 위해서 마우스를 클릭후 조금만 있으면 선택하신 항목의 다른 메뉴가 위 사진 처럼 펼쳐 질겁니다.  그후 원하시는 항목을 선택 하시면 됩니다. 
5-1. paint bucket tool 선택
5-2. 힌색 작업영역으로 이동후 점선으로 움직이는 영역안을  클릭하시면 3-1 작업 하신 색상이 채워집니다.

지금 부터는 CP 라는 글을 넣어 보도록 하겠습니다.
6-1. 좌측의 메뉴중 T 라는 항목을 선택
6-2. 작업 영역으로 이동후 선택 하시면 글을 쓰실수 있습니다.
6-3. 글을 한번에 CP를 다 적진 않습니다.  글 위치가 차이가 있기때문에 저의 경우엔 한자씩 따로 선택후 작업 합니다.

참고 : 원하시는 글을 적으신후 글 쓰기 그만 하실때는 좌측의 다른 메뉴를 선택 하시면 글 쓰기 작업이 중단됩니다.

위 이미지는 글씨 크기와 색상을 변화를 줄수 있는 항목입니다.
7-1. ① 글씨 크기 ②글씨 색상 ③ C글자를 적은 레이어 ④ P 글자를 적은 레이어

참고 1 : 원하는 변화를 적용 하기에 작업하기 원하는 레이어를 먼저 선택하신후에 작업하셔야 됩니다.
예 : C 라는 글자를 변화 주기위해선 ③ 선택후 작업 하시면 됩니다.

참고 2 : 글씨를 원하는 위치로 이동 하기 위해선 좌측 메뉴중 화살표와 십자가 함께 있는 메뉴가 있을 겁니다. MOVE TOOL을 선택 하 원하시는 레이어 선택 그다음 작업영역에서 원하시는 위치로 이동 해주시면 됩니다,

위 이미지를 보시는 것처럼 파란색 바탕에 CP라는 글짜를 선명하게 볼수 있습니다. 
그럼 이제 만든 이미지를 저장해 보도록 하겠습니다.

8-1. 상당 메뉴인 File - save 선택

8-1. 항목을 하게 되면 위와 같은 창이 열리게 됩니다. 
이곳에서 저장은 jpg 이미지를 선택하면 됩니다.
Format 메뉴중 JPEG(*.JPG;*,JPEG;*,JPE) 항목을 선택 저장을 누르시면 지금 까지 작업하신 내용을 JPG 파일로 저장 하게 됩니다.

참고 : JPG 로 저장 하게 될경우 추후에 제작업 한마디로 글씨를 다르게 바꾸고 싶다거나 색상을 변화 주고 싶을때 변환을 줄수가 없습니다.  그럼 단순 이미지가 아닌 나중에 제작업 편하게 할수 있도록 하기 위해선 항상 PSD 포토샵 작업 파일을 함께 저장 해두시고 작업 하시면 언제 든지 원하시는 작업을 포토샵에서 할수 있게 됩니다.

이번 시간엔 파비콘 만들기 1으로 포토샵을 이용해 JPG 저장 까지 해봤습니다. 
다음 시간에 파비콘 만들기 2로 JPG 이미지로 파비콘 파일료 변환을 해보겠습니다.

쿨펀치의 세상리뷰 는 여러분의 소중한 댓글과 VIEW ON 클릭 구독 클릭이 큰힘이되어.
더 좋은 블로그를 만들 수 있게 하는 원동력이 됩니다.