태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

오늘 포토샵 강좌는 연필툴에 대해서 배워보겠습니다. 포토샵에서 연필툴은 보통 편집시에는 잘 사용하지 않는 툴이지만 꼭 필요한 툴이기도 합니다.

웹을 구성하는 여러가지 이미지들 중에 "아이콘"이 있습니다. 이 아이콘을 만들때 꼭 필요한 툴이 연필툴입니다. 포토샵에서 "도트 그리기"란 말을 많이 들어 보셨을 거에요. "점"을 하나씩 찍어서 이미지를 표현한다는 말을 쉽게 "도트"라고 말하는데, 몇 개의 점으로만 작고 귀여운 이미지들을 표현하는 하는 것을 말합니다. 이 도트를 찍는 것이 바로 연필툴입니다.

"브러시툴로 만들면 되지" 하시는 분들도 계실거에요. 그래서 오늘은 브러시와 연필툴의 차이점을 비교해 보고, 연필툴을 이용해 간단한 아이콘을 만들어 보도록 하겠습니다.

 

● 픽셀의 이해

브러시툴과 연필툴을 비교하기전에 먼저 이해하셔야 할 것이 바로 "픽셀"이란 개념입니다. 가끔 제가 "픽셀"이란 단어를 쓰는데 이 픽셀이 정확히 무엇인지 잘 모르셨을 거에요.

디자인학에서 이미지(형태)를 구성하는 가장 작은 최소의 단위를 "점"이라고 하며, 이 각각의 점들이 모여서 우리 눈에 보이는 하나의 이미지(형태)로 보여지게 됩니다. 웹상에서 이 점을 "픽셀"이라고 말하는데 비트맵(Bitmap)방식에서 쓰이는 더 이상 쪼갤 수 없는 최소의 단위를 일컫는 말입니다. 비트맵(Bitmap)방식을 쓰는 대표적인 프로그램이 오늘 배우는 포토샵(Photoshop)입니다.

포토샵_연필툴

픽셀의 이해

위 그림을 보면 알 수 있듯이 픽셀의 형태는 정사각형으로 표현되며, 이 픽셀수가 많을수록 이미지의 해상도가 높아집니다. 보통 디카에서 "화소"란 말은 해상도의 기준을 말하는데 이 화소가 곧 픽셀을 의미한다고 이해하시면 됩니다.

"픽셀"은 px로 표기한다는 것은 다 아실테지요?

 

● 브러시툴과 연필툴의 비교

똑같은 1px이라고 해도 브러시툴과 연필툴은 표현하는데 있어 서로 다릅니다. 브러시툴과 연필툴 각각 1px을 찍어 비교해 보겠습니다.

1. 브러시툴의 1픽셀 : 브러시툴의 경우 1px을 찍었을때 주변에 다른 명암의 점이 함께 표현됩니다. 포토샵은 서로 다른 두가지 이상의 색상이 있을때 각 색상의 경계를 부드럽게 처리하기 위해 비트맵(Bitmap) 방식을 사용합니다. 때문에 브러시툴을 쓸 경우 1px을 찍더라도 확대해서 보면 아래처럼 경계부부분에 명암이 들어가게 됩니다.

포토샵_도트

1픽셀의 도트_브러시툴

2. 연필툴의 1픽셀 : 연필툴은 위 브러시와는 다르게 경계를 부드럽게 처리하지 않고 픽셀수 만큼 점을 찍어주게 됩니다. 이미지가 작은 아이콘을 만들때는 픽셀수가 작기때문에 경계를 선명하게 처리되야 되므로 연필툴을 사용하게 됩니다. 도트를 찍을때는 이런 점을 고려해 명암의 처리를 할때 픽셀수를 계산해서 찍어줘야 합니다.

포토샵_도트

1픽셀의 도트_연필툴

아래 이미지는 원형브러시를 선택해서 각각 연필툴과 브러시툴을 비교한 화면입니다. 확대한 화면에서 보면 위에서 설명했듯이 경계부분에서 확연히 차이가 나는 것을 볼 수 있습니다.

포토샵_도트

연필툴과 브러시툴의 비교화면(원형브러시60px/확대500%)

 

● 연필툴로 하트아이콘 만들기

아이콘은 보통 크기100px이하의 크기로 제작하게 되는데 원하는 이미지를 미리 스케치한 후 스케치한 이미지를 보면서 명암을 넣을 곳등을 미리 머리속에 픽셀수를 계산해 주는 것이 편리합니다.(아이콘의 경우 명암으로 이미지를 나타내기 때문에 명암의 조절이 아주 중요한 포인트!!)

1px로 하나씩 찍으면서 이미지를 만들기때문에 작업창의 화면은 크기에따라 200%이상으로 확대를 한 후 도트를 찍어주셔야 합니다. 이미지가 크고 복잡하거나 3~4가지 이상의 색상으로 제작 될 경우는 미리 스케치 레이어를 만들어 이미지를 스케치 한 후 그 위에 도트를 찍는 것이 편리합니다.

1. 새 파일 열기 : 크기 10px*10px의 새 파일을 만듭니다. 하트를 미리 스케치한 후 명암을 넣을 부분을 머리속에 그려 보세요.(이미지가 간단하기 때문에 바로 도트를 찍어도 무방)

2. 작업창 확대하기 : 작업창이 너무 작기때문에 작업창을 400%이상 확대합니다.(참고로 예스비™ 는 1000%로 하였습니다. 그 이상/이하 확대하셔도 됩니다) 툴창에 돋보기를 선택하고 확대를 하거나 단축키인 Ctrl + Space Bar를 누르고 작업창을 마우스로 클릭을 하면 클릭시마다 작업창이 확대됩니다.

3. 가이드선 만들기 : 작업창에 양 사이드를 보시면 자(Rulers)가 보입니다. 이부분에 마우스를 대고 좌측 마우스를 클릭하면 점선이 생성됩니다. 클릭한 상태에서 움직이면 선이 함께 움직입니다. 이미지를 제작하기 쉽게 가이드선을 만들어 주는 도구입니다. 좌측 룰러(Rulers)에 마우스를 대고 가이드 선을 꺼내서 가운데 5px부분에 옮겨 놓습니다. 가이드선을 중심으로 좌우 한 쪽씩 하트를 찍어 줄 거에요.

포토샵_도트찍기

가이드선 꺼내기

포토샵_도트찍기

가이드가 그려진 모습

4. 아웃라인 도트 찍기 : 한쪽부분에 외곽선만 하트 모양을 찍어 줍니다. 하트니까 색상은 당연히 빨강이겠죠?(반쪽만 아웃라인을 잡아 주셔야 해요!) 반대편도 대칭으로 찍어 줍니다.(아웃라인만 찍어도 하트모양이 완성 되어야 됩니다.)

포토샵_도트찍기

한쪽만 외곽선 찍기

포토샵_도트찍기

양쪽 모두 도트를 찍은 모양

5. 중심 채우기 : 이제 가운데 부분에 색을 채워 줍니다.

포토샵_도트찍기

내부에 색채우기

6. 명암 찍기 : 하트 모양은 완성이 됬지만 명암이 없으니 밋밋하죠? 명암으로 입체감을 주는 도트를 찍을 거에요. 명암은 하이라이트(Highlight)그림자(Shadow)를 표현해 주어야 합니다.

포토샵_도트찍기

하이라이트 찍기

하이라이트와 그림자를 찍을때 기본이미지를 벗어나면 안되요! 하트 모양이 깨지면 원래의 크기로 봤을때 하트로 보이지 않을 수도 있어요.

포토샵_도트찍기

그림자 찍기

 

。하이라이트(highlight)- 빨강보다 밝은 핑크나 흰색으로 찍어주는데 이미지가 너무 작기 때문에 흰색에 가까운 핑크색을 선택해서 윗 부분에 찍어 줍니다. 빛이 반사되는 부분을 찍어주는 거에요.

。그림자(Shadow)- 기본색인 빨강보다 어두운 다크레드 계열의 색상을 선택하고 하이라이트의 반대편 아래 부분의 한쪽 외곽에 찍어 줍니다.

 

7. 완성하기 : 이 부분까지 되셨으면 작업창을 원래의 크기대로 축소를 해서 이미지를 확인해 봅니다. 작업창을 축소할때는 Alt + Space Bar를 누르고 마우스 클릭하면 반대로 작업창이 축소 됩니다. 머릿속에 그려진 대로 명암이 잘 찍어 졌으면 이쁜 하트가 완성 되셨을 거에요. 만들어진 이미지를 원하는 이미지파일로 저장하면 완성.(저장하실때는 원본파일인 psd 파일을 따로 저장하시는 것 잊지 마세요.)

하트_포토샵도트

완성된 모습

어때요? 깜찍하고 이쁜 하트아이콘 너무 간단하죠? 스킨의 불릿으로 사용할 수도 있고, 조금 더 크게 제작해서 블로그 아이콘으로 사용할 수도 있습니다. 꼭 만들어보세요^^&

Tip Tip Tip

작업창 확대 단축키 : Ctrl + Space Bar를 누르고 마우스 클릭
작업창 축소 단축키 : Alt + Space Bar를 누르고 마우스 클릭
가이드선 만들기 : 룰러(Rulers)에 마우스를 대고 클릭상태에서 끌어오면 가이드선을 만든다. 가이드선의 갯수는 제한이 없다.

 

팁박스의 단축키는 자주 사용하는 것이니 꼭 익히시기 바랍니다. 오늘 강좌를 따라 해보시고 다른 이미지들도 위의 순서에 따라 제작해보세요. 이제 블로그를 대표하는 아이콘정도는 만드실 수 있겠죠?(너무 무리인가요?) 걱정은 금물~! 다음시간에 도트 강좌를 한번더 올려 드릴거에욧! 예스비™의 포토샵강좌는 알라딘 창작블로그 "웹디자인과 블로그팁"에 연재됩니다. 강의료라 생각하시고, 추천과 믹시 많이 눌러 주세요^^&

 

이 글이 링크되어 있는 곳:

블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.

 

posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • 최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool