3. 포토샵 파일을 잘라내자

동일한 내용이 http://ugpapa.springnote.com/ 여기서도 공개됩니다. 많은 이용바랍니다.

 

웹디자인을 하거나 인쇄 디자인을 하거나, 사진작업을 할 때 가장 많이 사용하는 도구는 포토샵입니다. 전세계에서 가장 많이 사용되고 있으며, 컴퓨터를 사용하는 대한민국의 모든 사용자들도 한번쯤은 포토샵이라는 말을 들어 봤을 겁니다.

 

포토샵의 가장 최신 버전은 Photoshop CS5 입니다.

정확하게 버전으로 따지면 12 버전이죠. 벌써 12번째 판올림이 되었다는 것입니다.

 

포토샵도 스탠다드 버전과 익스텐디드버전이 있습니다.

일반인들이 사용하기에는 스탠다드 버전이라고 해서 사용상에 지장이 있는 것은 아닙니다. 오히려 스탠다드 버전이 사용하기 더 가볍다고 할 수 있습니다.

익스텐디드 버전은 추가적인 기능 중에 3D기능이 포함되어 있는데, 웹 디자인을 하거나 할 경우에는 사용빈도가 많이 떨어집니다.

포토샵은 전문가 집단에서 사용하는 도구이기 때문에 가격이 상당히 고가인 소프트웨어 입니다. 보통 가격이 90만원에서 140만원 대로 형성되어 있습니다.

 

또한 저가이면서 기능이 포토샵과 거의 유사한 포토샵 엘리먼트 버전도 있습니다.

일반인들이 사진 보정 및 간단한 기능을 위한 버전인데, 포토샵에서 가장 많이 사용하는 기능들도 포함되어 있어, 포토샵을 사용할 줄 알면 편리하게 사용 가능합니다.

 

이제부터 포토샵으로 작업한 결과물은 하나씩 잘라내는 작업을 해보도록 하겠습니다.

 

 

디자인된 포토샵 파일 잘라내기                                                

 

다시 한번 디자인된 페이지를 살펴 보겠습니다.

여기서 이미지로 구성된 부분은 상단 배경, 좌측 배경하고 로고 이미지, 메인메뉴와 타이틀 이미지 그리고 페이지 헤더 이미지가 이미지로 구성되었다는 것을 알 수 있습니다. 각각의 파일들을 잘라내 보도록 하겠습니다.

 

먼저 로고 이미지 파일 입니다.

로고 이미지 파일은 로고 있는 부분을 통째로 잘라 낼 수 도 있고, 로고만 잘라서 나머지 부분을 투명 처리하는 방법 2가지 방법이 있을 수 있습니다.

 

    

또는  

 

이렇게 2가지 방법이 있습니다.

여기서 로고의 갈색 부분은 원래 투명한 색입니다.

투명한 색을 사용하게 되면 보이지 않게 되어 갈색으로 대체 하였습니다.

 

CSS 를 이용해서 디자인을 할 경우에는 투명한 이미지로 되어 있는 후자의 로고를 사용하는 것이 페이지 레이아웃 작업 시 더 편리하고, 유연성 있게 배치할 수 있습니다.

 

배경이 투명한 이미지는 2가지 방식의 파일 형식이 있습니다.

하나는 GIF 이미지 이고 다른 하나는 PNG 이미지입니다.

오래된 브라우저인 경우에는 PNG 파일일 경우 인식을 하지 못하거나 의도한 바대로 이미지가 나오질 않습니다. 특히 한국에서 현 시점에서 가장 많이 사용하는 브라우저인 IE 6인 경우에도 이미지가 나타나긴 하지만 투명한 부분이 투명하지 않고 흰색으로 표시되어 버립니다. IE7 이상의 브라우저에서는 정상적으로 보입니다.

IE6 에서 PNG 이미지를 투명하게 처리하는 방법은 가장 마지막 장에서 따로 설명해 드리도록 하겠습니다.

 

위와 같이 배경이 그라데이션으로 처리된 곳에 이미지를 배치 할 경우에는 GIF 이미지 보다는 PNG 이미지를 사용하는게 로고를 더 깔끔하게 처리할 수 있습니다.

 

아래의 예를 보겠습니다.

 

 

위의 로고 이미지는 PNG 파일입니다. 배경을 투명 처리했습니다. 로고가 상당히 깔끔하게 처리되어 있습니다.

 

그러면 이제는 로고를 GIF 이미지로 처리한 부분을 비교해 보도록 하겠습니다.

 

 

여기서 보시면 알겠지만 로고 이지미의 곡선이나 사선 처리된 부분이 깔끔하지 않는다는 것을 알 수 있습니다.  어떻게 보면 조금은 지저분하게 보일 수가 있는데요. 예전에 PNG 이미지를 사용하지 못했을 때는 위와 같은 크기의 이미지 전체를 잘라서 사용하기도 했었습니다.

 

이전에도 언급을 했지만 PNG 파일은 IE6에서 읽을 수는 있지만 PNG 파일을 제대로 처리해 주지 못합니다.

 

그럼 IE6에서 어떻게 보이는지 보겠습니다.

 

 

위와 같이 보이게 됩니다.

 

이건 우리가 원하는 결과가 아닙니다.

하지만 IE6 에서도 IE7 이상이나 다른 브라우저에서와 같이 올바르게 표현할 수 있는 방법이 있습니다.

 

이제 메인 메뉴 부분을 잘라내 보도록 하겠습니다.

 

메인 메뉴도 마찬가지로 PNG 파일로 잘라내 보도록 하겠습니다.

 

왜냐하면 이 부분도 라운드 처리가 되어 있어서 틀 바깥쪽을 투명하게 처리해줘야 하는데,  GIF 이미지인 경우에는 로고와 같이 깨끗하게 보이질 않습니다.

 

 

 

포토샵에서 위와 같이 메인 메뉴가 있는 부분만 보이게 처리해 주고 나머지는 전부 숨김 처리 해 줍니다.

 

그리고 선택툴 (Selection Tool)로 선택을 한 후

 

 

Shift + Ctrl + C 를 누르거나 포토샵의 Edit > Copy merged 를 선택합니다.

 

이렇게 하는 이유는 해당 레이어를 포함해서 보여지는 레이어를 전부 합쳐 복사 하는 역할을 합니다.

 

그렇게 해야만, 작업한 모든 레이어가 다 나타나게 됩니다. 그냥 Copy만 하게 되면 보여지는 것과는 다른 결과를 얻게 됩니다.

 

그후 Ctrl +N 또는 File > New를 하시면 이전에 Copy Merged  한 이미지 사이즈과 동일한 크기의 새로운 윈도우가 생성됩니다.

 

 

 

즉 클립보드에 정확하게 아까 카피한 레이어 이미지가 들어가 있고 새로운 이미지를 만들겠다고 하면 메모리에 있는 이미지와 같은 사이즈의 이미지 크기가 만들어지게 되는 것입니다.

여기서 OK 를 누르시고 Ctrl +V 를 누르시거나, Edit > paste 를 해 줍니다.

 

 

 

결과물은 다음과 같습니다. 여기서 저장할 때 잘 살펴 보시면 Layers에 두개의 레이어가 있습니다. Background 와 Layer1 이렇게 두 개의 레이어가 있는데, Background 레이어는 저장할 때 꺼주는게 좋습니다.

 

 

 

Background  레이어를 꺼주신 후 Alt +Shift + Ctrl + S 를 누르시거나 File > Save for web & Devices 를 클릭해 줍니다.

 

 

 

그럼 이런 윈도우가 나타나게 됩니다.

 

우리가 원하는 것은 이미지를 배경이 투명한 PNG 파일로 저장하는 것입니다.

 

여기서 PNG24 를 선택하고 반드시 Transparency 를 체크해 줍니다.

 

 

그리고 Save를 눌러줍니다.

 

이제 메인 메뉴의 메뉴 4개를 잘라내서 저장해 보도록 하겠습니다.

 

앞서 했던 방식과 동일한 방식으로 진행하게 됩니다.

 

 

여기서 해당하는 각각의 메뉴를 선택해서 저장해 줍니다.

 

여기서 저장할 때 각각의 이미지는 GIF 로 저장하겠습니다.

 

여기서 잠깐!!

 

왜 메뉴배경과 로고는 PNG 로 저장을 했는데, 왜 메뉴의 글자들은 GIF로 저장하는지 에 대한 의문이 들겁니다.

 

PNG 로 저장하면 PNG로만 저장하지 왜 하나는 PNG 하나는 GIF 파일로 저장하는가 말이죠.

 

결론부터 말씀 드리면 PNG 파일은 GIF 파일이나 JPG 파일보다 파일 사이즈가 조금은 큽니다. 그리고 특별한 용도 외에는 JPG 파일이나 GIF 를 보편적으로 사용하는 이 좋습니다. 인터넷 속도, 브라우저 호환성 등의 이유로 현재까지도 PNG 파일보다는 GIF, 혹은 JPG 파일로 사용하는 것이 웹 이지의 속도를 높이는 방법입니다.

 

PNG 파일은 배경이 복잡한 곳에 사용함이 좋고 GIF 파일인 경우 배경이 단순한 경우 Transparency 옵션을 줘서 저장해야 최고의 효과를 줄 수 있습니다.

여기서 예제를 보면 헤더 부분이 회색에서 검은색으로 그라데이션효과를 줬는데, 이럴 경우 GIF 이미지 보다 PNG 파일이 더 효과가 좋은 경우입니다.

 

메인 메뉴의 텍스트가 들어가 있는 부분은 배경의 거의 흰색 계열도 단순하기 때문에 GIF 로 파일을 저장하는 것입니다.

 

만약 여기도 복잡한 패턴이나 여러가지 색이 혼합된 그라데이션을 사용하게 되면 PNG 파일로 저장해야만 최상의 효과를 줄 수 있습니다.

 

이제 메인 메뉴에 있는 텍스트 파일 또한 배경을 투명하게 해서 저장합니다.

 

Save for web & Devices 로 저장할 경우 GIF 파일인 경우에는 다음과 같은 옵션이 뜨게 됩니다.

 

얼핏 보면 복잡하게 보이지만 이 부분에 대한 설명은 다음 장에서 아주 자세하게 다루기 때문에 이렇게 저장을 한다고 보시면 됩니다.

 

여기서도 Transparency를 활성화 해준 후 저장을 하면 됩니다.

 

각각의 이미지들을 img 라는 폴더 안에 넣었고 그 결과는 다음과 같습니다.