디지털 카메라 로 찍 은 사진 보정 하 기 디지털 카메라 가 빠르 게 퍼지 면서 사진 편집 도 필수 테크닉 으로 자리 를 잡 았 다 . 포토샵 은 편집 전문 프로그램 답 게 디지털 사진 을 아주 간단히 손 본다 . 디지털 사진 보정 테크닉 중 에서 도 필자 의 강의 를 듣 는 학생 들 은 유독 컬러 를 흑백 으로 바꾸 고 노출 을 조정 하 는 기술 에 관심 을 보인다 . 그만큼 이 들 테크닉 이 쓰임새 가 많 다는 뜻 이 다 . 컬러 를 흑백 으로 바꾸 고 노출 을 조정 해 보 자 . 컬러 사진 흑백 으로 만들 고 콘트 라스트 보정 하 기 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 단계 . 이제 이 버튼 을 홈페이지 에 띄우 면 배 경색 이 무엇 이 든 잘 어울린다 공유 하 기 글 요소