콩바구니의 그림일기 ::

[포토샵] 초간단 리터칭. 그림같은 사진 만들기 (만화배경용)

강좌 2007/07/11 14:39

들어가며...
- 야자와 아이의 만화를 보면. 사진을 그림같이 리터칭한 배경이 자주 나옵니다. 오늘은 포토샵으로 그런 느낌의 배경을 만들어볼까 합니다. 무척 쉽습니다.
- 이랬던 사진이
- 준비물은 적당한사진 한장과 포토샵CS3입니다. 다른버전도 상관없습니다.

시작하기

배경그림으로 사용할 사진을 포토샵에서 열었습니다.

레이어변환

Background 레이어를 스마트 오브젝트로 변환합니다. 하지만 꼭 변환할 필요는 없습니다. ^^
스마트 오브젝트로 변환한 모습입니다.

그레이스케일로 바꾸기

~~아래의 버튼을 (Gradient Map) 사용하여 사진을 흑백으로 바꿉니다.~~
~~대화창이뜹니다. 금냥 OK눌러주세요.~~
~~컬러사진이 사진이 그레이스케일 로 되었습니다.~~

흑백사진으로 바꾸기

(Threshold) 버튼을 이용하여 사진을 흑백으로 만듭니다. _{(앗. 가만생각해보니 윗단계의 (Gradient Map) 은 굳이 할필요가 없는것이였네요.. ㅠㅠ 그부분은 안하셔도 상관없습니다.})
대화창에서 값을 적당히 조절하고 OK버튼을 누릅시다.
흑백 이미지로 보입니다.

아웃라인 치기

레이어를 하나 만듭니다. Ctrl-Shift-L 누르면 만들수 있습니다.
단축키 W 를 눌러서 Magic Wand 를 선택합시다. 옵션은 아래그림과 같아야 합니다.
아웃라인 레이어를 선택합니다.
Magic Wand 로 휜색부분을 클릭하면 그림안의 모든 휜색영역이 선택 되어집니다.
단축키 M 를 눌러 Marquee Tool 을 선택한후 선택영역을 우클릭하면 Strok 가 보입니다. 그것을 눌러주면 아래의 대화상가 뜹니다. 적당히 수치를 입력합니다. Location 은 OutSide 가 좋습니다.
아까 생성했던 조절레이어 Threshold를 더블클릭하여 조절창을 부른후 적당히 값을 높여줍니다. 이 작업을 몇번 반복합니다.

정리하기

아까 생성했던 조절레이어를 쓰래기통에 버려줍시다.

마무리

마지막으로 Posterize 를 실행합니다. 수치는 적당히 줍시다.
완성입니다. ^^

Posted by 콩바구니

TAG 강좌, 리터칭, 만화배경, 포토샵, 포토샵 강좌

받은 트랙백이 없고 , 댓글이 없습니다.

트랙백 주소

http://kongbaguni.tistory.com/trackback/533

댓글을 달아 주세요

RGB 와 CMYK

강좌 2006/03/14 13:15

..

RGB

빛의 3원색인 Red,Green,Blue 의 혼합으로 색을 표현합니다.
아래는 포토샵의 RGB슬라이더입니다.

이 슬라이더에서 알수 있듯.
RGB 는 255의 3제곱인 16,581,375 즉. 천육백오십팔만천삼백칠십오 가지의 색상을 표현할수 있습니다.

어째서 255일까요?
컴퓨터에서는 색상정보를 저장할때. 이를 16진수로 변환하여 저장하기 때문입니다.
컴퓨터에서 16진수는
0~9,a,b,c,d,e,f 의 16가지 문자로 수를 나타내며.
이 16진수를 사용하면 단 두글자로 255까지의 수를 저장할수 있습니다.
ff-> 255. af ->175, 39->57 이런식이죠.
음... 그런데 FF 가 256 이아니라 255가 되는이유는.. 모르겠네요..ㅜㅜ

10진수 를 사용하여 색상을 표현하면
한가지 색상 값을 저장하는데 232 123 032 9바이트의 문자가 필요합니다.
16진수를 사용하변 e8 85 20 의 6바이트로. 10진수 사용할때보다 3바이트의 용량 절약 효과가 있습니다.

가로 300픽셀 세로 300픽셀의 그림을 압축이 안된 비트멥 방식으로 그림을 저장한다고 칩시다.
참고로 비트멥 방식의 그림파일 구조는 대략 다음과 같습니다. (정확하지는 않지만.. 대략적인 구조입니다. 조금 틀릴수도 있으니 양해바랍니다..)

머리: 파일의 종류가 무었인지 알려줍니다.
본문 (색상정보가 저장됩니다.)
시작- FF FF FF / 00 00 00 / AD 00 AA /AS 00 DA ............ -끝
시작- AA DD FF / 00 00 AD / ...................................... -끝
..
..
..
파일 끝

10진수로 저장하면. 300*300*9 해서 전부 810,000 바이트의 용량을 차지하게 됩니다.
16진수로 저장하면. 300*300*6 해서 전부 540,000 바이트의 용량을 차지합니다.
물론 파일로 저장하면 색상정보만 저장되는게 아니고. 이파일이 어떤 파일인지 알려주는 부분
픽셀을 뿌릴때 시작점과 끝점을 나타내는 데이터 . 파일의 끝을 알리는 데이터등이 있어서 실제 파일의 용량은 여기서 몇바이트가 더해집니다.
그리고 그림을 압축한다면. 중복되는 색상은 이뒤로 같은색이 몇개 있다. 라고 표현하는식으로 저장하여 용량을 더 줄이기때문에. 어떤 그림이냐 에따라 용량의차이가 나게 됩니다.
손실압축을 사용하면(JPG) 비슷한색을 묶어서 같은색으로 분류하여 저장하기때문에 (이 묶는 범위를 조절하여 퀄리티를 조절합니다) 용량을 더욱 많이 줄일수 있습니다.
아무튼.
16진수로 저장하는것이 여려모로 이득이 많기때문에. 그렇게 하는것이고.
그리하여 컴퓨터 RGB파렛트는 255의 3제곱근 만큼 색을 표현할수 있게 되는것입니다.

CMYK

인쇄에 쓰이는 색상환으로. Cyan, Magenta, Yellow ,blacK 를 사용합니다.
사이안. 마젠타. 옐로우 만으로 이론상 검정색을 표현할수 있지만.
보다 선명한 검정을 뽑기위해 검정색을 따로 사용합니다.

정확한 계산인지는 모르겠으나..
포토샵의 CMYK 슬라이더에 따르면 100의 3제곱근인 1,000,000 즉 백만가지 색상을 표현할수 있군요.
black 은 인쇄시 선명한 블랙을 표현하기위한 색이므로. 계산에서 제외했습니다만..

RGB가 CMYK보다 더 많은 색상을 표현할수 있음을 알수 있습니다.

CMYK 로 하면.. 대체로 형광색 계열의 색이 표현이 안됩니다. 형광색 계열이 인쇄가 안된다는군요..
(RGB출력이 되는곳도 있다고 합니다만.. - 형광잉크를 사용하여 RGB에 가까운 색상을 내는것이겠지요.)

정확한 범위는 아닙니다만.. 대략 이정도 위치의 색이 인쇄가 안된다고 보시면 됩니다. 이 범위는 또 그때그때 달라요..
포토샵에서 CMYK로 작업할시 이 인쇄가 안되는 색상범위의 색을 찍으면 자동으로 인쇄가 되는 비슷한 색으로 변환해줍니다.

Posted by 콩바구니

TAG RGB 와 CMYK, 색상환, 포토샵

받은 트랙백이 없고 , 댓글이 없습니다.

트랙백 주소

http://kongbaguni.tistory.com/trackback/319

댓글을 달아 주세요

스타일시트: 포지션의 이해

강좌 2006/01/11 21:11

어쩌다보니 HTML 강좌를 쓰게 되었네요. 뭐 전문가가 아닌지라..(만화가 지망생이라구요..ㅠㅠ) 글이 좀 허접하더라도 이해해주세요 ㅎㅎ

스타일시트에서 해당 테그의 포지션을 잡는방법에는 여러가지가 있는데요..

absolute (절대좌표)
fixed (고정좌표)
inherit (상속좌표)
relative (상대좌표)
static (정적좌표)

이중에서 제가 자주 사용하는것이 절대좌표인 absolute 와 상대좌표 relative 인지라... 그 두가지만 설명할게요.. (나머지는 저도 잘 몰라요..)

style="positon:absolute"

가장 많이 쓰이는 절대좌표입니다. 여기에서 좌표지정에 사용되는 테그는 다음과 같습니다.

top: html 문서의 상단에서 아래로 향하는 좌표입니다.
left: html 문서의 왼쪽에서 오른쪽으로 향하는 좌표입니다.
right: 브라우저의 오른쪽에서 왼쪽으로 향하는 좌표입니다.
bottom: 브라우저의 하단에서 상단으로 향하는 좌표입니다.

다음의 테그를 실행하면.
< div style="position: absolute; left: 20; top: 20; width: 100; height: 100 background-color:#CCCCCC">내용< /div>
이렇게 나옵니다.

문서의 가로 세로 절대좌표를 이것으로 잡을수 있습니다.
이방법을 사용하면 브라우저의 크기를 바꾸어도 상관없이 정해진 위치를 고수합니다.

right 와 bottom 은 브라우저를 기준으로 좌표를 산출합니다.
다음의 테그를 실행하면
< div style="position:absolute; right:20px; bottom: 20px; width:100; height:100; background-color:#CCCCCC"> 내용< /div>

이렇게 됩니다. 이것의 특징은 문서의 스크롤에 상관없이 브라우저의 특정위치에 레이어를 띄울수 있다는점입니다. 물론 브라우저의 크기를 변경하면 해당 레이어의 위치도 변합니다.

test.html

다음은 상대좌표입니다.

style="position:relative"
상대좌표의 좌표지정은 절대좌표와 개념이 다릅니다. (당연한소리죠..) 그림을 보면

테그가 현제 위치한곳에서 왼쪽으로 얼마 위로 얼마 혹은 오른쪽으로 얼마 아래로 얼마 이런식으로 상대적인 수치를 입력함으로써 위치를 지정하는것입니다.

다음의 예제를 실행하면
< div style="border:1px dotted black; background-color:#FFCCFF">
< div> 상대좌표 예제 < /div>
< div> & nbsp; < /div>
< div> & nbsp; < /div>
< /div>
< div style="position:relative; top:10; left:10; width:100; height:100; background-color:#CCCCCC"> 내용< /div>
아래와 같은 결과가 나옵니다.

상대좌표를 사용해서 좌표를 잡을때의 최대 단점은..

이런것일려나요..

Posted by 콩바구니

TAG 스타일시트

받은 트랙백이 없고 , 댓글 2개가 달렸습니다.

트랙백 주소

http://kongbaguni.tistory.com/trackback/248

댓글을 달아 주세요

sage 2006/01/12 00:06 댓글주소 수정/삭제 댓글쓰기
먼저 감사드립니다.
이렇게까지 해주실줄 정말로 생각도 못했읍니다.
그래도 퇴근하고 계속 주위에서 기웃거린게 보람이있었읍니다.
정말 알기쉽게 설명해주셔서 성공했읍니다.
책한권 구입해서 떠뜸떠듬 배우다보니 기초가 엉망입니다.
올해들어서 첫번째로 기쁜일이었읍니다 ^^
콩바구님!저같은 초보한테는 정말 유익했읍니다.
감사합니다.
- 콩바구니 2006/01/12 00:19 댓글주소 수정/삭제
  도움이 되셨다니 다행이네요.. 새해 복 많이받으세요 ㅎㅎ