photoshop

[권오숙]

11.큰 그림을 작게해서 홈페이지에 적용하기 1/1 page
먼저 작업에 들어가기 전에 따라하기에 필요한 이미지를 다운 받아 적당한 폴더에 압축을 해제하여 주세요.
메뉴바의 File/Open 명령으로 파일열기 창을 띄웁니다. < 그림 1 >
위에서 다운 받아 압축을 해제한 이미지가 있는 폴더로 이동 tiger 이미지 선택 열기 < 그림 2 >
아래와 같이 늠름한 호랑이 그림이 불려졌습니다.
스캔받거나 어렵게 구한 이미지가 크기가 너무 커서 홈페이지 디자인에 어울리지 않을 때 그 크기를 줄여서 사용하는데 지금부터 간단하게 그 방법을 알아봅니다. < 그림 3 >
메뉴바에서 Image/Image Size를 선택하여 이미지 사이즈 대화 상자를 띄웁니다. < 그림 4 >
현재 그림은 아래와 같이 width(가로) 크기가 500픽셀 height(세로) 크기가 331픽셀 인 것을 알 수 있습니다. < 그림 5 >
아래와 같이 width(가로) 크기를 300픽셀로 하면 자동으로 height(세로) 값도 비례해서 작아집니다.
그리고, 빨갛게 원을 그린 부분에 포시되듯이 485kbyte에서 175kbyte 로 그림의 용량도 줄어든 것을 볼 수 있습니다. Ok 버튼을 누릅니다. < 그림 6 >
아래와 같이 호랑이 그림이 작아진 것을 볼 수 있습니다. < 그림 7 >
여기서 그냥 목적은 이루었으니 저장만 하면 되나 그림이 작아졌으므로 그만큼 해상도도 떨어져 선명하게 보이지 않습니다.
아래와 같이 그림을 선명하게 하는 필터를 적용하여 봅니다. < 그림 8 >
위와 같이 하였을 경우 아래 오른쪽 그림과 같이 보다 선명하여 졌을 것입니다.
왼쪽 은 필터를 적용하지 않았을 때 입니다. < 그림 9 >

15.그림 외곽을 부드럽게 처리하기
15.그림을 페이딩(색이 바라게) 하여 연하게 나타내기 1/1 page
먼저 따라하기에 필요한 이미지를 다운 받아 적당한 폴더안에 압축을 풀어 놓으십시오.
메뉴바의 File/ Open 을 클릭 < 그림 1 >
위에서 다운 받은 폴더로 이동 하여 picture 그림을 선택 열기 < 그림 2 >
아래와 같이 운치있는 풍경이 오픈되었습니다. < 그림 3 >
왼쪽의 도구상자에서 사각 선택툴을 선택한 뒤에 나타나는 위쪽의 옵션에서 20 픽셀 정도로 입력합니다.
이 수치에 따라 부드러운 강도가 세게 됩니다.< 그림 4 >
이제 페이딩 되기 원하는 부분만큼 마우스로 드래그 합니다. < 그림 5 >
위그림과 같이 원하는 만큼 드래그를 한 후 마우스를 놓으면 네 모퉁이가 부드럽게 선택이 됩니다.
아까 위에서 선택범위의 수치를 20 이상으로 주었다면 더 둥글 게 선택이 될 것입니다.
우리는 그림 중에서 현재 선택된 부분 안의 그림만 남게 할 것입니다.
그러기 위해서 선택 바깥의 부분은 지워주어야 합니다.
선택범위 안쪽에 마우스 오른쪽 버튼 클릭 나타나는 메뉴에서 Select Inverse(선택 반전)을 클릭 < 그림 6 >
위와 같이 하였다면 아래 그림과 같이 반대로 선택이 되어 있는 것을 볼 수 있습니다.
이제 키보드의 Delete(삭제) 키를 눌로 바깥의 선택된 부분을 삭제하여 봅니다. < 그림 7 >
아래와 같이 나타나나요? 이제 저장만 하면 됩니다. < 그림 8 >

14.글자와 이미지를 부분적으로 투명하게 만들기
글자나 그림을 부분적으로 투명하게 만들기 1/3 page
먼저 따라하기에 필요한 이미지를 다운 받아 적당한 폴더안에 압축을 풀어 놓으십시오.
메뉴바의 File/ Open 을 클릭 < 그림 1 >
위에서 다운 받은 폴더로 이동 하여 sea 그림을 선택 열기 < 그림 2 >
아래와 같은 시원한 해변 그림이 오픈되었습니다. < 그림 3 >
왼쪽의 도구상자에서 텍스트 입력 툴을 클릭 그림위의 적당한 곳에 마우스를 대고 글자를 입력
< 그림 4 >
글자의 크기를 적당 크기로 늘리기 위해 메뉴바의 Edit /Free Transform(자유변형) 을 클릭
< 그림 5 >
위와 같이 하였을 경우 아래와 같이 글자 크기를 조절할 수 있는 조정자들이 나타납니다.
모퉁이의 사각 조정점을 이용하여 적당한 크기로 글자를 늘립니다. < 그림 6 >
적당한 크기로 늘렸으면 다시 도구상자의 아무 툴이나 클릭하면 "정말로 변형을 적용할 것인가?" 라는 창이 나타납니다.
Apply 버튼을 클릭하여 변형을 적용합니다. < 그림 7 >
아래그림과 같이 글자가 크져 있는 것을 볼 수 있습니다. < 그림 8 >
글자나 그림을 부분적으로 투명하게 만들기 2/3 page
글자를 드래그하여 선택합니다. 글꼴선택 단추를 클릭한 후 적당한 글꼴을 선택합니다. < 그림 9 >
아래아 같이 글꼴이 조금 더 보기 좋게 바뀌었습니다. < 그림 10 >
이번엔 이 글자의 색상을 바다색깔과 비슷하게 하기 위해 다시 왼쪽의 도구상자에서 텍스트 툴을 선택 글자를 마우스로 드래그 하여 선택글자색 변경 아이콘 클릭 < 그림 11 >
파랑색으로 해주고 OK 버튼을 클릭합니다 < 그림 12 >
글자가 파랑색으로 바뀌었습니다
이제 이 글자를 바다에 조금 잠기게 표현하기 위해서 적당한 위치로 옮깁니다
왼쪽의 도구상자에서 이동툴을 선택합니다 < 그림 13 >
글자를 바다표면에 가깝게 이동시킵니다 < 그림 14 >
이제 이 글자에 효과를 주기 위해 레이어 팔레트를 꺼집어 냅니다. 이미 화면에 나와 있다면 이 과정은 생략해도 됩니다.
메뉴바에서 Window / Show Layers를 클릭 < 그림 15 >
글자나 그림을 부분적으로 투명하게 만들기 3/3 page
레이어 팔레트에서 글자 레이어를 더블클릭하여 레이어 스타일 창을 띄웁니다. < 그림 16 >
아래와 같이 그림자를 생기게 하고 안쪽으로 Glow 효과를 주고 OK 버튼을 클릭합니다.<그림17>
위와 같이하였다면 밋밋했던 글자가아래와 같이 조금 세련되게 효과가 적용되었을 겁니다.<그림18>
이제 위의 레이어에 Add Layer Mask 로 부분적으로 투명하게 하기 위해 메뉴바에서 Layer 탭을 클릭 후 Reveal All을 클릭합니다. < 그림 19 >
그런다음, 왼쪽의 도구상자에서 그라디언트 툴을 선택합니다. 이 툴이 보이지 않을 경우 페인트 툴을 누르고 있으면 나타납니다. < 그림 20 >
아래 그림과 같이 글자의 중간지점에서 아래로 약간만 드래그 하여 봅니다. < 그림 21 >
아래와 같이 글자가 물에 잠긴 듯 부분적으로 투명하게 되었습니까?
원하는 모습이 안나타날 경우 몇 번이고 이전 작업으로 돌아가서 반복 연습하여 보십시오.<그림22>

13.스캔한 사진 색 보정하기
스캔한 사진을 보정하여 사용하기 1/1 page
먼저 따라하기에 필요한 이미지를 다운 받아 적당한 폴더안에 압축을 풀어 놓으십시오.
메뉴바의 File/ Open 을 클릭 < 그림 1 >
위에서 다운 받은 폴더로 이동 하여 girls2 그림을 선택 열기 < 그림 2 >
아래와 같이 소녀 그림이 오픈되었습니다.
스캔을 할 때 별다른 옵션을 주지 않았을 경우 원본 사진과 달리 조금 어둡게 나오는등 질이 좀 떨어져 보입니다.
간단하게 보정을 하는 방법을 알아봅니다. < 그림 3 >
메뉴바에서 Image 탭을 클릭 한후 나타나는 메뉴에서 Auto Levels를 클릭 합니다.< 그림 4 >
위와 같이 하였을 경우 아래 오른쪽 그림과 같이 스캔한 사진보다 조금더 밝게 자동으로 조절이 됩니다.< 그림 5 >

10.움직이는 배너 이미지 만들기 (초,중급)
움직이는 배너 이미지 제작하기 1/3 page
먼저 따라하기에 필요한 자료을 다운 받아 임의의 폴더에 압축을 풀어둡니다.
포토샵을 실행한 후 File/ Open을 클릭합니다. < 그림 1 >
위에서 다운받아 압축을 풀어놓은 폴더로 찾아가서 pencel.gif 파일을 선택 후 열기 < 그림 2 >
위와 같이 하였을 경우 아래와 같이 그림이 불러들여 집니다.
이미지 모드가 indexed color 일 경우, 레이어 작업을 할 수 없으므로,
상단 메뉴 Image / Mode / RGB color로 바꾸어 준 후, 아래의 과정을 따라 하여 주십시오.
앞으로 파랑색으로 둘러싸인 레이어 팔레트를 자주 사용하게 됩니다.
이 팔레트가 나와 있지 않다면 메뉴바에서 Window/Show Layers를 클릭하여 레이어 팔레트를 나오게 합니다. < 그림 3 >
현재 불러온 그림에는 아래와 같이 하나의 레이어만 존재합니다.
이 레이어를 선택 후 드래그 하여 아래 그림과 같이 『새로운 레이어 만들기』 버튼위에 끌어다 놓습니다. < 그림 4 >
위와 같이 하였을 경우 아래와 같이 똑 같은 그림을 가진 레이어가 복제됩니다. < 그림 5 >
위의 레이어가 활성화된 상태에서 도구상자에서 텍스트 입력툴을 선택한 후 그림위에 글자를 입력합니다. < 그림 6 >
입력된 글자를 드래그하여 선택 후 글자체와 글자 크기와 글자 색상을 그림과 어울리게 지정합니다. < 그림 7 >
레이어 팔레트를 보면 글자 레이어가 하나더 생긴 것을 볼 수 있습니다.
맨 아래 레이어의 눈 아이콘을 클릭하여 없애 줍니다. 우측 상단의 버튼을 클릭한 후 나타나는 메뉴에서 Merge Visible(보이는 레이어 합병)을 선택합니다. < 그림 8 >
위와 같이 하였을 경우 아래그림과 같이 글자레이어와 위에서 복제된 레이어가 하나의 레이어로 합쳐진 것을 볼 수 있습니다.
왜 이렇게 해야 하는지는 나중에 가면 깨닫게 되니 그냥 따라합니다. < 그림 9 >

움직이는 배너 이미지 제작하기 2/3 page
또 다시 처음 불러올 때 의 그림인 맨 아래 레이어를 복제를 합니다. < 그림 10 >
이번에 복제된 레이어에 또 다른 글자를 입력하기 위해서 맨위의 레이어 눈 아이콘을 클릭하여 잠시 보이지 않게 합니다. < 그림 11 >
도구 상자에서 텍스트 입력 툴을 선택 한 후 글자를 입력합니다.
※만약 입력된 글자를 원하는 위치로 옮기고 싶은 경우에는 도구상자 상단의 이동툴을 선택한 후 키보드의 화살표 키로 정밀하게 이동시킬 수 있습니다. < 그림 12 >
위에서 복제한 레이어와 금방 글자를 입력하면서 생성된 글자레이어를 하나로 합치기 위해 맨 아래의 레이어가 눈 아이콘이 켜져 있다면 클릭하여 꺼주고(꺼져 있다면 그냥 두세요) 우측 상단의 버튼을 눌러서 Merge Layers(보이는 레이어 합병)을 클릭합니다. < 그림 13 >
이제 맨 아래 레이어는 필여없습니다. 선택 한 후 휴지통에 드래그 하여 지워줍니다. < 그림 14 >
이제 두 개의 레이어를 가진 이 그림을 ImageReady 으로 가져가서 작업하여 보겠습니다.
이미지레디는 웹전용 그래픽 프로그램입니다.
웹디자이너들이 이 프로그램을 사용하는 주용도는 움직이는 gif 애니메이션 파일을 만든다던가~
큰 하나의 이미지를 여러개로 잘라서 HTML 문서화 하여 로딩시간을 줄여 준다던가~
마우스가 그림위에 올라갔을 때 다른 그림으로 변하게 하는 롤오버 효과를 낼 때 주로 사용합니다.
포토샵 7.0을 설치할 때 기본으로 같이 설치됩니다.
아래부분을 클리하면 Adobe ImageReady 8.0으로 넘어 갑니다.(File/Jump to/ Adobe ImageReady 8.0) < 그림 15 >
조금 시간이 걸리면서 포토샵과 비슷한 인터페이스를 가진 이미지 레디가 실행됩니다.
아래빨간 부분은 에니메이션 팔레트 입니다. < 그림 16 >

움직이는 배너 이미지 제작하기 3/3 page
에니메에션 팔레트에서 우측 상단의 버튼을 클릭후 나타나는 메뉴에서 Make Frames Form Layers를 클릭< 그림 17 >
레이어 정보가 두 개이므로 프레임이 두 개 생성된 것을 볼 수 있습니다. 재생 버튼을 클릭하여 봅니다. 너무 빨리 그림이 변할 것입니다. < 그림 18 >
프레임 지연시간을 조절하는 곳을 클릭하여 프레임 지연시간은 2초 정도로 하여 줍니다.<그림19>
아래와 같이 두 프레임 모두 위와 같이 프레임 지연시간을 2초정도 하여 주고 재생 버튼을 클릭하면 2초 정도의 지연시간을
가진 뒤 그림이 변할 것입니다. < 그림 20 >
지금까지 작업한 것을 gif 에니메이션 포맷으로 저장하기 위해 File/ Save Optimized As를 클릭합니다. < 그림 21 >
파일이름을 입력 후 저장 버튼을 눌러 저장합니다. < 그림 22 >
지금까지 간단하나마 움직이는 배너 이미지를 포토샵과 이미지 레디를 이용하여 제작하는 방법을 알아 보았습니다.
여러분은 응용해서 프레임도 더 많고 더 효과적인 배너 이미지를 제작하여 보십시오.

9.글자를 배경이미지로 클리핑하여 효과주기
문자와 이미지를 클리핑하여 특수효과 내기 1/3 page
먼저 따라하기에 필요한 이미지를 다운 받아 적당한 폴더안에 압축을 풀어 놓으십시오.
메뉴바의 File/ Open 을 클릭 < 그림 1 >
위에서 다운 받은 폴더로 이동 하여 mount 그림을 선택 열기 < 그림 2 >
아래와 같이 멋진 산 풍경 이미지가 오픈되었습니다. < 그림 3 >
원활한 작업을 하기 위해 레이어 팔레트를 꺼집어 냅니다. 이미 레이어 팔레트가 화면에 나와 있다면 이 과정은 생략해도 됩니다.
메뉴바의 Window / Show Layers를 선택 합니다. < 그림 4 >
이미지를 불러와서 아무작업도 하지 않은 상태이므로 레이어가 배경이미지 하나 뿐입니다.
이제 이 위에 문자를 입력해서 문자 레이어를 만들것입니다. < 그림 5 >
왼쪽의 도구 상자에서 텍스트 입력 툴을 선택 글자의 크기를 16포인트 정도로 하고 그림위에 적당한 곳에 마우스 클릭하여 글자를 입력합니다. < 그림 6 >
이제 입력된 글자의 글꼴을 변경하기 위해 다시 텍스트 입력툴이 선택된 상태에서 글자를 드래그하여 선택합니다. < 그림 7 >

문자와 이미지를 클리핑하여 특수효과 내기 2/3 page
글꼴 선택 단추를 클릭 한 후 적당한 글꼴을 선택합니다. < 그림 8 >
위와 같이 하였을 경우 아래과 같이 글꼴이 변경된 것을 볼 수 있습니다. < 그림 9 > < 그림 10 >
이제 글자를 자유변형하기 위해서 도구상자에서 아무 툴이나 선택합니다.
아마도 글자를 변형후에 적당한 곳으로 다시 이동시켜야 하므로 이왕이면 이동툴을 선택하여 놓습니다.
글자를 자유변형 하기 위해 메뉴바에서 Edit / Free Transform을 선택합니다. < 그림 11 >
위와 같이 하였을 경우 글자를 변형할 수 있는 조정점들이 생기는데 그것들을 이용하여 적당한 크기로 변형합니다. < 그림 12 >
이제 레이어 팔레트에서 아래의 배경레이어 위에서 마우스 오른쪽 버튼을 클릭 한 후 나타나는 메뉴에서 Duplicate Layer.. (레이어 복제)를 선택합니다. < 그림 13 >
위와 같이 하였을 경우 아래와 같은 창이 나타납니다.
복잡한 합성 작업을 할 경우 레이어 가 많아져서 레이어이름을 알아보기 쉽게 바꾸어 주는 것이 좋지만 여기서는 그냥 OK 버튼을 누릅니다. < 그림 14 >
왼쪽 과 같이 배경 레이어가 복제된 것을 볼 수 있습니다. 이제 복제된 배경이미지 레이어를 오른쪽과 같이 마우스로 드래그 하여 MOUNT 글자 레이어 위로 가져다 놓습니다.<그림15-1><그림 15-2 >
위 오른쪽과 같이 하였을 경우 아래 왼쪽과 같이 복제된 배경레이어가 문자 레이어 위로 올라옵니다. 즉, 배경이미지가 글자위에 올라와 있다는 것입니다.
이제 맨 아래의 배경이미지는 필요 없으니 오른쪽과 같이 휴지통으로 드래그하여 지워줍니다.
< 그림 16-1 > < 그림 16-2 > < 그림 17 >
옆과 같이 위의 레이어를 선택하여 활성화 한 후 아래레이어의 눈알 아이콘 옆을 클릭하여 링크(연결)하여 놓습니다.

문자와 이미지를 클리핑하여 특수효과 내기 3/3 page
레이어 팔레트에서 위의 레이어가 선택된 상태에서 메뉴방의 Layer / Group Linked를 선택합니다.
< 그림 18 >
위와 같이 하였을 경우 드디어 위의 산 이미지는 아래 레이어의 글자 부분에 해당하는 부분만 남고 모두 없어지게 됩니다. < 그림 19 >
이제 작업을 거의 다하였으나 이 상태로 그대로 홈페이지에 적용하기 위해서는 필요없는 공간이 너무 많습니다.
왼쪽 도구상자에서 Crop(자르기 툴)을 클릭합니다. < 그림 20 >
글자 부분을 드래그하여 선택합니다. < 그림 21 >
마우스 오른쪽 버튼을 나오는 메뉴에서 Crop(자르기)를 누릅니다. < 그림 22 >
위와 같이 하였을 경우 아래와 같이 되었습니다. < 그림 23 >
위의 그림이 홈페이지 어디에가나 글자 부분만 있고 나머지 여백을 투명하게 보이기 위해 투명한 gif 포맷으로 저장을 해야합니다. 메뉴바의 File / Save for Web을 클릭합니다. < 그림 24 >
포맷이 gif 으로 선택되어 있는지 확인 Transparency(투명하게) 가 체크되어 있는지 확인 OK 버튼을 눌러 저장을 합니다. < 그림 25 >

7.이미지에 다양한 필터효과 주기
이미지에 필터 적용하기 1/1 page
먼저 따라하기에 필요한 이미지를 다운 받아 적당한 폴더안에 압축을 풀어 둡니다.
메뉴바에서 File/ Open 클릭 < 그림 1 >
위에서 다운받아 압축을 풀어놓은 폴더로이동 tree 이미지 선택 열기< 그림 2 >
아래와 같이 풍경 그림이 오픈되었습니다.
이제 이 풍경그림에 필터를 주어서 왼쪽 상단에 화창한 햇님을 넣어 보겠습니다. < 그림 3 >
메뉴바에서 Filter/ Lens Flare... 필터를 클릭합니다. < 그림 4 >
아래와 같은 옵션상자가 나타나는데 Lens Type을 105 mm 에 체크하고 Brighteness(밝기)를 115정도로 하고 Ok버튼을 클릭합니다. < 그림 5 >
아주 간단하게 한여름의 뜨거운 햋빛이 생겼습니다.
이렇게 포토샵을 설치할 때 기본으로 설치되는 필터들이 많으니 한 번씩 테스트하여 여러 가지
필터 효과를 확인하여 보십시오. < 그림 6 >

6.레이어를 이용한 서로 다른 이미지 합성하기
이미지를 합성하여 필요한 이미지를 직접 만들기 1/2 page
작업에 들어가기 전에 따라하기에 필요한 이미지를 다운받아 적당한폴더에 압축을풀어 놓으십시오.
포토샵을 실행 한 후 File/Open < 그림 1 >
다운받아 압축을 푼 이미지가 있는 폴더로 이동합니다. 해변과 girl 이미지를 동시에 선택합니다. 열기 < 그림 2 >
아래와 같이 두 개의 이미지가 오픈되었습니다. < 그림 3 >
이제 합성을 하기 위해서 Window탭을 클릭한 후 나타나는 메뉴에서 Show Layers를 클릭하여 레이어 팔레트를 꺼집어 냅니다.
포토샵 화면에 이미 나와 있다면 이 과정은 생략해도 됩니다.< 그림 4 >
아래와 같이 오른쪽에 레이어 팔레트가 나왔습니다.< 그림 5 >< 그림 6 >
만약 위의 작업화면과 같이 풍경이미지가 활성창이라면 레이어 팔레트에는 왼쪽 옆과 같이 풍경이미지에 해당하는 레이어 팔레트가 표시됩니다.< 그림 7 >
그렇지 않고 뒤쪽의 해변이미지가 작업화면에서 활성창이라면 레이어 팔레트는 해변의 레이어 팔레트 로 표시됩니다.
지금은 아직 합성을 하지 않은 상태이므로 각 이미지마다 보는 바와 같이 레이어가 하나씩밖에 없습니다. 그러나, 실무에 종사하면서 복잡한 이미지를 만들기 위해선 많은 레이어를 사용하여 합성과 수정을 하게 됩니다. < 그림 8 >
포토샵에서 레이어란 하나의 셀로판지로 생각하면 됩니다. 우리는 지금 해변 이미지위에 여자 이미지를 레이어로 깔고 여자 이미지 중에서 파란 부분은 삭제하여 결국은 여자 이미지만 남아서 해변과 합성이 되게 할 것입니다. 레이어를 사용하게 되면 위의 레이어에서 작업하는 것은 아래의 레이어에 지장을 주지 않고 마찬가지로 밑의 레이어에서 무슨 작업을 하던간에 위의 레이어 이미지에는
영향을 주지 않습니다.

2/2 page
여자 이미지가 활성화 된 상태(현재 작업 그림)에서 레이어 팔레트 위에 마우스를 가져가서 드래그하여 해변이미지 위에 끌어다놓습니다. < 그림 9 >< 그림 10 >
위와 같이 하였다면 옆그림과 같이 레이어 팔레트는 해변이미지가 활성창이 되었으므로 해변이미지의 레이어 팔레트로 바뀌고 또한 해변이미지는 이제 레이어를 두 개 가진 이미지가 되었습니다.
즉 해변이미지를 배경으로 하고 위에는 여자 이미지 레이어가 겹쳐져 있는 것입니다.
위쪽의 레이어가 진하게 표시되었고 그리고 왼쪽 눈알 옆에 붓아이콘이 있는것은 해변이미지에서도 현재 작업하고 있는 레이어가 위쪽의 여자 이미지레이어라는 것을 나타내는 것입니다.
아래와같이 해변이미지가 이제작업창이 되었으며 여자이미지가 위에레이어로 깔렸습니다.<그림11 >

도구 상자의 이동툴을 선택 여자이미지 레이어를 마우스 왼쪽 버튼을 누른채 드래그하여 원하는 장소로 이동합니다.< 그림 12 >
아래그림과 같이 도구 상자에서 마술봉 툴을 선택 Tolerance (허용량) 값을 32 정도로 합니다. 마술봉툴을 여자 이미지 위의 파랑색 부분에 갖다 놓고 클릭 합니다.
마술봉툴은 비슷한 색상을 한번에 선택하는데 유용하게 사용됩니다. 위의 옵션중에서 Tolerance(허용 량) 값으로 선택의 범위를 넓히거나 좁힐 수 가 있습니다.< 그림 13 >
키보드의 Delete 키를 눌러 아래와 같이 선택된 부분을 지웁니다.< 그림 14 >
마술봉툴을 다른 도구로 바꾸거나 그림 바깥에 아무데나 클릭하면 선택이 해제되면서 아래와 같이 점선이 없어지고 합성이 된것을 볼 수 있습니다. < 그림 15 >
이제 합성작업이 모두 끝났습니다.
아무도 모르게 아주 정밀하게 작업하여 도저히 합성이 아니라고 할 정도로 하기 위해선 그 만큼 포토샵도 더 자세히 공부하셔야 합니다. 지금까지는 레이어를 이용하여 두 개 의 이미지를 하나의 이미지로 합성하는 것을 마스터 하셨습니다.
File / Save As 명령으로 작업한 이미지를 저장합니다. < 그림 16 >
홈페이지에 적용하기 위해서는 파일 확장자를 아래와 같이 JPG 로 하거나 GIF 파일로 해야 합니다.
또한 이렇게 하면 저장될 때 레이어들을 모두 하나로 합치게 됩니다.
그러므로, 다음에 다시 작업하기 위해서는 레이어가 살아있는 포토샵 전용 파일인 PSD 포맷으로도 저장하여 놓는 습관을 들이시기 바랍니다. < 그림 17 >

5.하나의 그림을 여러개로 분할하여 HTML 로 출력하기
하나의 그림을 여러개로 잘라서 사용하기 1/2 page
먼저 따라하기에 필요한 자료를 다운 받아 임의의 폴더에 압축을 풀어 두십시오.
포토샵을 실행 한 후 File/Open < 그림 1 >
위에서 다운받아 압축을 풀어 놓은 폴더로 찾아가서 jejudo.jpg를 선택 후 열기< 그림 2 >
메뉴바에서 File 클릭 Jump to/Adobe Image Ready 선택 하면 조금후 이미지레디가 실행이 됩니다.< 그림 3 >
아래와 같이 이미지레디가 실행이 되었다면 메뉴바에서 View/Rulers를 선택 < 그림 4 >
위와 같이 하였다면 아래와 같이 눈금자가 생깁니다.
작업화면을 넉넉하게 사용하려면 오른쪽 하단의 빨간 부분을 드래그하여 늘려 주십시오.< 그림 5 >
이제 그림을 여러개로 잘라서 분할하여 보겠습니다.
이번 따라하기에서 하나의 그림을 여러개로 자르는 이유는 방문자들이 인터넷에서 그림이나 웹문서를 로딩할 때 조금이라도 속도를 높이게 하기 위해서입니다.
이 분할 방법을 알아두어 여러 가지에 응용하면 됩니다.
왼쪽의 눈금자 위에 마우스를 가져가면 마우스 포인터가 화살표 모양으로 바뀌는데 왼쪽 버튼을 누른채 그림 쪽으로 원하는 만큼 드래그 하여 파란 분할선이 나타나게 합니다.< 그림 6 >
같은 방법으로 세로로 한 개의 분할선을 더 그어주고 이번엔 위쪽의 눈금자에서 마우스를 그림쪽으로 드래그하여 가로분할선을 그어 줍니다.< 그림 7 >
같은 방법으로 가로 분할선을 더 그어 아래와 같이 총 9개정도의 영역으로 분할 될 수 있게 합니다.< 그림 8 >
위와 같이 하였다면 메뉴바에서 Slices Create Slices form Guides를 선택 < 그림 9 >
하나의 그림을 여러개로 잘라서 사용하기 2/2 page
이전 작업과 같이 하였다면 아래 그림과 같이 하나의 그림이 각기 다른 독립된 작은 그림들로 되었습니다.< 그림 10 >
이제 Optimize(최적화)팔레트를 꺼내어 봅니다. 메뉴바에서 Window/Show Optimize를 클릭하면 됩니다.< 그림 11 >
분할된 이미지들이 하나도 선택되어 있지 않은 상태이므로 아래와 같이 Optimize 팔레트는 아무 기능도 선택할 수 없는 비활성화 상태입니다.< 그림 12 >
도구상자에서 슬라이스(자르기)툴을 누르고 있으면 show slice tool 이 나타나는데 그것을 클릭합니다.< 그림 13 >
slice delect tool 이 선택된 상태에서 그림외곽에서부터 대각선 방향 그림 외곽 까지 드래그하여 모두 선택.< 그림 14 >
위와 같이 해서 선택이 되었을 경우 optimize 팔레트에는 출력 옵션을 지정할 수 있는 것들이 활성화됩니다.
분할된 그림들의 저장옵션을 jpg 포맷으로 하여 줍니다. gif 포맷으로 해도 상관없으나 색상이 많이 들어간 이미지의 경우 jpg 로
하는 것이 좋습니다.
반대로 색상이 많이 들어가지 않는 단색 계통일 경우는 gif 파일로 하는 것이 좋습니다.<그림 15 >
이제 작업이 모두 끝났으니 저장을 하여 보겠습니다. 메뉴바에서 File /Save Optimized를 클릭 합니다.< 그림 16 >
파일이름을 알아보기 쉬운것으로 입력후 파일형식을 Html and Images 로 선택합니다.저장<그림17 >
위에서 저장을 한 폴더로 찾아가 보면 HTML문서 한 개와 images 라는 폴더가 생성되어 있는 것을 볼 수 있습니다.
images 폴더안에는 분할된 이미지들이 순번을 붙여서 각각 저장되어 있습니다.
jejudo.html 문서를 더블클릭해 보면 하나의 이미지가 들어 있는 것을 볼 수 있습니다.
그 하나의 이미지들은 9개의 독립된 이미지들로 구성되어 있으며 이렇게 할 경우 웹문서 로딩시에 웹서버나 방문자의 컴퓨터에 더 빠르고 안정된 로딩을 보장하여 줍니다. < 그림 18 >


이미지를 뽀얗게 만들기 1/2 page
먼저 따라하기에 필요한 이미지를 다운 받아 적당한 폴더에 압축을 풀어둡니다.
메뉴바의 File / Open을 클릭< 그림 1 >
위에서 다운받아 압축을 풀어놓은 폴더로 이동 gril 이미지 선택 열기< 그림 2 >
아래와 같이 소녀 그림이 오픈되었습니다.< 그림 3 >
이 소녀 이미지 위에 레이어로 똑같은 이미지를 올려놓고 위의 이미지에 뽀얀 효과를 줄 것입니 다. 그러기 위해서 레이어 팔레트를 꺼집어 냅니다. 이미 나와 있다면 이 과정을 생략합니다.
메뉴바의 Window 탭을 클릭한 후 나타나는 메뉴에서 Show Layers를 클릭 합니다.< 그림 4 >
아래 그림과 같이 레이어 팔레트가 나왔습니다. 현재는 소녀 배경 하나 뿐이므로 레이어가 한 개 입니다.< 그림 5 >
아래 왼쪽 그림과 같이 레이어를 마우스 왼쪽 버튼을 누른채 밑의 레이어만들기 아이콘으로 끌어다 놓습니다.
그러면 오른쪽 그림과 같이 똑같은 이미지를가진 레이어가 위로 복사가 됩니다.<그림6-1><그림6-2>
아래와 같이 위쪽의 레이어가 파랗게 선택된 상태에서 메뉴바의 Filter / Blur / Gaussian Blur를 클릭합니다.< 그림 7 >

★이미지를 뽀얗게 만들기 2/2 page
Radius를 3 정도로 한 후 OK 버튼을 누릅니다.< 그림 8 >
위와 같이 하였을 경우 아래와같이 Blur(흐리게)필터가 적용된것을 볼수 있습니다.<그림9><그림10>
위쪽의 레이어에 필터가 적용된 상태에서 레이어 팔레트를 옆 그림과 같이 설정하여 줍니다.
위와 같이 하였다면 아래그림과 같이 그림이 뽀얗게 됩니다.< 그림 11 >
여기서 끝을 내도 됩니다. 하지만 한가지 더 정밀한 기법을 배워 보겠습니다.
메뉴바의 Image / Adjust / Curves...를 클릭합니다.< 그림 12 >
대각선 조정선을 드래그 하여 그림과 같이 합니다.
위로 드래그하면 이미지가 밝아지고 아래로 드래그 하면 어두워지는 것을 실시간으로 확인할 수 있을 겁니다.
적당하게 드래그 하여 이미지를 밝고 이쁘게 하여 보세요.
마음에 들 게 되었으면 OK 버튼을 누릅니다.< 그림 13 >
한결더 밝고 뽀얗게 된 것을 볼 수 있습니다.< 그림 14 >

★ 그림위에 그림과 함께 자연스레 동화되는 글자 만들기 1/2 page
먼저 작업에 들어가기 전에 따라하기에 필요한 이미지를 다운 받아 적당한 폴더에 압축을 해제하여주세요.
메뉴바의 File/Open 명령으로 파일열기 창을 띄웁니다. < 그림 1 >
위에서 다운 받아 압축을 해제한 이미지가 있는 폴더로 이동 tiger 이미지 선택 열기< 그림 2 >
아래 그림과 같이 산책하기에 좋을 듯한 숲길 그림이 오픈되었습니다.< 그림 3 >
앞으로 원활한 작업을 하기 위해 레이어 팔레트를 꺼내어 놓습니다.
이미 레이어 팔레트가 나와 있다면 이 과정은 생략해도 됩니다.
메뉴바에서 Window / Show Layers 를 클릭합니다.< 그림 4 >
아래 그림과 같은 레이어 팔레트가 나와 있을 겁니다.
현재는 배경이미지 뿐이므로 레이어가 한 개가 있는 것을 볼 수 있습니다.< 그림 5 >
왼쪽 도구상자에서 텍스트입력 툴을 클릭 합니다. 그림위의 적당한 곳을 골라 "숲과 오솔길" 이라고 입력합니다. < 그림 6 >
레이어 팔레트를 보변 이제 배경이미지 위에 글자 레이어가 하나 생겼을 겁니다.
글자 레이어가 파랗게 되어 있는 것은 현재 작업 레이어라는 것을 뜻합니다.
아무리 이 레이어에서 무슨 작업을 하던간에 아래의 배경이미지 레이어에는 영향을 주지 않습니다.
메뉴바에서 Edit를 클릭한 후 Free Transform(자유변형)을 클릭 하면 숲과 오솔길의 크기를 마음대로 변형할 수 있도록 조정자가 생겼습니다. < 그림 7 >