자르고 합치고 뒤집고… 포토샵 고수에 도전하자 2

디지털 카메라로 찍은 사진 보정하기 디지털 카메라가 빠르게 퍼지면서 사진 편집도 필수 테크닉으로 자리를 잡았다. 포토샵은 편집 전문 프로그램답게 디지털 사진을 아주 간단히 손본다. 디지털 사진 보정 테크닉 중에서도 필자의 강의를 듣는 학생들은 유독 컬러를 흑백으로 바꾸고 노출을 조정하는 기술에 관심을 보인다. 그만큼 이들 테크닉이 쓰임새가 많다는 뜻이다. 컬러를 흑백으로 바꾸고 노출을 조정해보자. 컬러 사진 흑백으로 만들고 콘트라스트 보정하기 1단계. 포토샵의 작업 창에 흑백으로 만들 이미지를 불러온 다음 image → adjust → desaturate를 누른다. 2단계. 컬러 사진이 흑백으로 바뀐 것을 볼 수 있다. 그런데 흑백 사진의 콘트라스트가 상당히 약하다. 밝은 부분은 좀 더 밝게, 어두운 부분은 좀 더 어둡게 콘트라스트를 보정하려면 ‘레이어 팔레트’ 밑의 create new fill or adjustment layer 아이콘을 누른 다음 curves를 고른다. 3단계. curves 창이 열리면 Ctrl 키를 누른 상태에서 밝게 하고 싶은 부분을 마우스로 고른다. 4단계. curves 창의 커브 선에 까만 점이 더해졌다. 흑백 이미지의 하이라이트 부분을 좀 더 밝게 하려면 이 점을 끌어 위쪽으로 약간 올린다. 5단계. 흑백 이미지의 하이라이트 부분이 좀 더 밝아졌다. 마찬가지로 흑백 이미지의 어두운 부분 중 좀 더 어둡게 하고 싶은 부분을 Ctrl 키를 누른 상태에서 마우스로 고른다. 6단계. curves 창의 커브 곡선에 까만 점이 생긴다. 어두운 부분을 좀 더 어둡게 하려면 이 점을 끌어 약간 밑으로 옮긴다. 7단계. 같은 방법으로 커브 곡선에 까만 점을 더해 흑백 이미지를 보정한 다음 curves 창의 ok 버튼을 누른다. 8단계. ‘레이어 팔레트’에는 curves 보정 레이어가 더해지고 흑백 이미지의 밝은 부분은 좀 더 밝게, 어두운 부분은 좀 더 어둡게 보정되었다. 보정 레이어의 유용성 이미지를 보정할 때는 ‘레이어 팔레트’의 create new fill or adjustment layer 아이콘을 눌러 나타나는 여러 메뉴를 이용하는 게 좋다. image → adjust 메뉴 밑에는 보정과 관계된 여러 가지 메뉴가 있다. 이 메뉴들로 보정하면 원본 이미지에 그 결과가 바로 입혀지므로 실수를 했을 때 되돌릴 수 없다. 하지만 보정 레이어를 이용하면 실제 이미지를 변형시키거나 손상시키지 않으므로 작업 결과가 마음에 들지 않으면 원본을 손쉽게 되살린다. 9단계. 블렌딩 모드를 이용해 이미지를 좀 더 보기 좋게 보정하려면 ‘레이어 팔레트’의 set the blending mode 버튼을 누른 뒤 soft light를 고른다. 10단계. 보정 레이어에 soft light 블렌딩 모드가 설정되었으므로 이미지의 밝은 부분은 좀 더 밝게, 어두운 부분은 좀더 어둡게 변한다. 이미지 보정에 많이 쓰는 블렌딩 모드 포토샵에서는 모든 레이어에 블렌딩 모드라고 하는 기능을 적용할 수 있다. 블렌딩 모드는 현재 작업하는 레이어와 그 밑의 레이어를 서로 연결시킴으로써 두 개의 레이어를 서로 어울리게 보정해준다. 블렌딩 모드는 이미지의 톤이나 잡티 등 여러 문제를 간단하게 해결하면서 보다 강한 보정 효과를 가져다준다. 노출이 많은 사진 보정하기 1단계. 포토샵의 작업 창에 노출이 많은 사진을 불러온 다음, 원본 이미지 사본을 복사하려면 image → duplicate를 누른다. 2단계. duplicate image 창이 열리면 ok 버튼을 누른다. 3단계. 복사본 이미지가 생기면 image → mode → garyscale를 눌러 그레이스케일로 바꾼다. 4단계. discard color information 창이 열리면 ok 버튼을 누른다. 5단계. 사본 이미지가 그레이스케일 모드로 바뀌면 원본 이미지를 고른 다음 select → load selection을 누른다. 6단계. load selection 창이 열리면 source의 document에 선택 영역으로 정할 이미지가 사본 이미지로 등록되었는지 보고 ok 버튼을 누른다. 7단계. 원본 이미지에 선택 영역이 정해졌다. 선택 영역 이미지를 복사해 레이어로 만들려면 layer → new → layer via copy를 고른다. 8단계. ‘레이어 팔레트’에 선택 영역 이미지가 복사돼 layer 1이 생겼다. edit → fill을 누른다. 9단계. fill 창이 열리면 comtents의 use를 50% gray으로 하고 blending의 mode는 screen, opacity는 100%로 한다. 이제 preserve transparency를 체크하고 ok 버튼을 누른다. 10단계. 이미지의 빛 노출 정도가 웬만큼 보정되었다. 이번에는 밝기와 콘트라스트를 한꺼번에 보정해보자. ‘레이어 팔레트’의 create new fill or adjustment layer 아이콘을 누른다. 11단계. brightness/contrast 창이 열리면 brightness와 contrast에 있는 슬라이더를 조절해 밝기와 콘트라스트를 맞춘 뒤 ok 버튼을 누른다. 12단계. 빛이 심하게 노출되었던 이미지의 빛 노출 정도나 밝기, 색상 대비가 알맞게 보정되었다. 웹에서 쓰는 이미지 최적화하기 인터넷 보급률이 높아지면서 홈페이지를 운영하거나 새로 만드는 이들이 크게 늘었다. 홈페이지를 꾸밀 때는 여러 가지 이미지를 써서 멋스럽게 장식하는 게 인지상정. 하지만 웹의 특성을 제대로 고려하지 않고 무작정 크고 화려한 그림을 갖다 붙이면 속도가 느려진다. 웹에서 쓰는 이미지는 그 나름대로 최적화해야 한다. 파일 크기를 줄이고 색상을 조절하는 방법을 배워보자. 1단계. 웹에 쓰는 이미지를 불러와 최적화하려면 file → open을 누른다. 2단계. open 창이 열리면 최적화할 이미지를 고르고 ‘열기’ 버튼을 누른다. 3단계. 포토샵의 작업 창에 그림이 열렸다. 먼저, 이것의 크기를 조절한다. image → image size 메뉴를 누른다. 4단계. image size 창이 뜨면 pixel dimensions의 width 칸에 가로 길이를 넣고 ok 버튼을 누른다. 그러면 width 값의 적당한 비율로 height 값이 저절로 바뀐다. 5단계. 그림 크기가 바뀌었다. 그림 크기를 조절할 때 가로나 세로만 조절하기 image size 창을 이용하면 그림 크기를 쉽게 조절할 수 있다. 그런데 pixel dimensions의 width와 height 오른쪽에는 쇠사슬 모양의 링크 아이콘이 보인다. 가로, 세로 중 하나를 조절했을 때 나머지 값이 저절로 바뀌도록 하는 것이다. 그렇다면 같은 비율로 조절하지 않고 어느 한쪽만 바꿔야 할 때는 어떻게 할까? image size 창의 constrain proportion 앞에 있는 체크 표시를 끄면 width와 height 오른쪽의 쇠사슬 링크 아이콘이 사라지면서 width와 height 중 어느 하나만 조절된다. constrain proportion 항목을 끄면 가로나 세로 값만 바꿀 수 있다. 이미지 크기를 조절할 때 주의할 점 홈페이지를 만들 때는 HTML 언어를 직접 코딩하거나 여러 가지 웹 에디터를 쓴다. 웹 페이지에 그림을 넣을 때 HTML이나 웹 에디터에서도 그림 크기를 조절할 수 있다. 하지만 이 방법은 실제 그림 용량과 아무 상관이 없다. 웹 페이지에 넣을 그림이 너무 크면 가로나 세로 길이를 HTML 태그나 웹 에디터에서 작게 조절하는데, 이 방법은 웹 브라우저에서 보이는 그림이 작을 뿐 실제 크기가 줄어드는 것은 아니다. 용량 다이어트와 아무 상관이 없다는 얘기다. 실제 그림 크기를 줄이면서 용량도 낮추려면 포토샵과 같은 그래픽 프로그램으로 손을 봐야 한다. 6단계. 크기를 조절한 그림을 웹에 최적화시킨 상태로 저장하려면 file → save for web 메뉴를 누른다. 7단계. save for web 창이 열리면 4-Up 탭을 누른다. 2-up과 4-up 탭 save for web 창의 original, optimized, 2-up, 4-up 탭은 최적화하는 이미지를 여러 가지 형식으로 보여준다. original은 원본 그대로 띄우고 optimized는 최적화된 상태를 보여준다. 2-Up은 편집하기 전과 뒤를 비교하므로 원본 이미지와 최적화된 이미지의 컬러 수나 용량을 쉽게 견준다. 4-up은 원본 이미지와 최적화된 세 개의 이미지를 비교한다. 각 미리 보기는 파일 포맷, 용량, 크기, 로딩 속도를 표시하므로 웹에 가장 잘 어울리는 이미지를 쉽게 고를 수 있다. 8단계. 4-up 화면이 나타나면 첫 번째 있는 원본 이미지와 나머지 세 개의 최적화된 이미지를 비교한다. 이중 이미지 품질도 좋으면서 용량이 적어 웹에 적합한 세 번째 이미지를 고른다. 9단계. 세 번째 최적화된 미리 보기 이미지를 고르면, 오른쪽의 settings에 있는 드롭다운 버튼을 눌러 파일 포맷 형식을 jpeg medium으로 바꾼다. 웹에서 쓰는 파일 포맷 형식 포토샵에서 만든 이미지는 어디에 쓰느냐에 따라 여러 가지 포맷으로 저장한다. 웹에 띄우는 그림은 압축률이 뛰어나면서 깨끗한 jpg나 gif, png를 이용한다. jpg는 사진 이미지와 같이 색상 수가 많은 이미지를 저장할 때 주로 쓴다. 256컬러 이하의 이미지를 저장하는 gif는 홈페이지의 버튼이나 아이콘, 메뉴 이미지에 어울린다. png는 차세대 웹 그래픽 표준 방식으로 알려지지만 아직까지 이 방식을 따르는 웹 브라우저가 없어 거의 쓰지 않는다. 10단계. settings에 있는 드롭다운 버튼을 눌러 파일 포맷을 jpeg medium으로 하면 세 번째 미리 보기 이미지 밑의 파일 포맷 형식이 jpeg로 바뀐다. 이번에는 progressive를 체크한다. progressive를 체크하는 이유 save for web 창의 progressive 항목을 체크하는 이유는 무엇일까? 웹에 최적화시킨 이미지라도 덩치가 크면 홈페이지에 넣었을 때 웹 브라우저에 늦게 뜬다. 이것을 기다리지 못한 네티즌들은 다른 사이트로 가버린다. progressive를 체크하면 그림을 서버에서 모두 읽은 뒤 홈페이지에 띄우는 게 아니라 가져오는 만큼 표시한다. 덕분에 방문자는 지루함을 덜 느낀다. 용량이 큰 그림은 이 항목을 체크하는 게 좋다. 11단계. quality 바를 조절해 미리 보기 화면의 이미지 상태를 보면서 품질을 정한다. 12단계. save for web 창의 ok 버튼을 누른다. 13단계. save optimized as 창이 뜨면 최적화한 그림을 저장할 폴더와 이름을 정하고 ‘저장’ 버튼을 누른다. 홈페이지에 쓰는 투명 버튼 만들기 홈페이지에서 쓰는 버튼도 주로 포토샵으로 만든다. 문제는 애써 만든 버튼을 막상 홈페이지에 집어넣었을 때 주변 색과 어울리지 않을 때가 많다는 것이다. 똑같은 색도 밝기나 무게가 달라 조화를 맞추기가 여간 어렵지 않다. 차라리 버튼을 투명하게 하는 게 낫다. 1단계. 포토샵에서 만든 버튼을 웹 페이지에 넣었는데 버튼과 배경 색깔이 달라 영 어색하다. 2단계. 버튼을 투명하게 하려면 먼저, 포토샵에 버튼 이미지를 불러온다. 그리고 투명하게 할 부분을 ‘선택 영역’으로 정하기 위해 ‘툴 박스’의 ‘마술봉 툴’(magic wand tool)을 고른다. 이미지를 투명하게 할 때 주의할 점 포토샵으로 이미지를 투명하게 할 때 한 가지 주의할 점이 있다. 반드시 이미지의 컬러 모드가 RGB color이어야 한다는 것이다. 예를 들어, 작업할 이미지의 컬러 모드가 index color이면 image → mode → RGB color를 누른다. 3단계. 투명하게 처리할 부분을 마우스로 눌러 선택 영역으로 정한다. 4단계. 선택 영역으로 정하면 help → export transparent image를 누른다. 5단계. export transparent image wizard 창이 열리면 I have selected the area to be made transparent를 고르고 next 버튼을 누른다. 6단계. 작업할 이미지를 어디에 쓸 것인지 묻는다. 홈페이지에 띄울 것이므로 online을 고른다. 7단계. 어떤 포맷으로 저장할 것인지 물으면 gif를 고르고 next 버튼을 누른다. 8단계. gif 포맷은 색상 수에 제약을 받는다는 경고 메시지가 뜬다. 다음 창으로 넘어간다. 9단계. indexed color 창이 열리면 ok 버튼을 누른다. 10단계. save as 창이 뜨면 ‘저장 위치’ 버튼을 눌러 투명하게 작업한 이미지를 저장할 폴더와 이름을 정하고 ‘저장’ 버튼을 누른다. 11단계. gif options 창이 열리면 normal 옵션을 고르고 ok 버튼을 누른다. gif options 창 들러보기 포토샵에서 작업한 이미지를 gif 포맷으로 저장할 때 꼭 뜨는 gif options 창은 홈페이지에서 그림을 불러오는 방식을 정한다. 용량이 큰 이미지를 브라우저에 불러오는 시간이 길다. 이때 normal 대신 interlaced를 고르면 이미지를 서버에서 다 불러온 뒤 화면에 띄우는 게 아니라 조금씩 읽어오면서 표시한다. 덩치 큰 gif 그림을 쓸 때는 반드시 이 옵션을 체크한다. 12단계. 투명하게 작업한 이미지를 온라인에 쓸 준비가 끝났다는 메시지다. finish 버튼을 누른다. 13단계. 포토샵의 작업 창에 투명한 이미지가 보인다. 14단계. 이제 이 버튼을 홈페이지에 띄우면 배경색이 무엇이든 잘 어울린다