120710 아트 세미나 Photoshop Tool and Tip

1. Photoshop pixel 방식의 이미지 구동 원리에 대한 이해.

4X4 pixels

2X2 pixels

2. 많이 쓰이는 파일 포맷의 특징

이미지 파일중 1bit, 4bit, 8bit의 경우 파일 내부에 pallette라는 색상 정보를 포함.

1bit는 2개, 2bit는 4개, 8bit는 256의 색상 정보를 가짐. 이 pallete는 Header 정보에 포함되어 있으며 이러한 color 정보를 통해 이미지를 표현하게 된다.(indexed color라고도 불린다. - 포토샵에서 GIF 포맷으로 저장할 경우 index color로 전환하여 저장해야 하는 이유임)

File Header

Information Header

Pallette

DATA

(8bit 미만의 비트맵 구조)

16bit 비트맵부터는 pallete를 사용하지 않는다. 이는 pallete에 저장되는 정보량 자체가 크므로 이를 Header에 포함할 경우 오히려 용량이 증가하기 때문(16bit 컬러의 색상수는 65536-2의 16승)에 pallete를 쓰지 않고 각 픽셀의 정보가 RGB 각각 1byte씩 3byte가 픽셀 단위로 들어간다.

File Header

Information Header

DATA

(16비트 이상의 비트맵 구조)

File Header : 파일에 대한 정보값을 가지고 있음.

Information Header : 실제 비트맵 이미지에 대한 정보를 가지고 있음(bit count, 가로 세로 Size등의 정보)

Pallette : 각 픽셀이 가지고 있는 값에 대한 실제 RGB값을 저장하고 있음.

DATA : 각 픽셀의 색상값이 저장되어 있음

JPEG(Joint Photographic Experts Group) : 디지털 이미지 규격으로 널리 사용되는 포맷. 용량을 압축되는 방식으로 저장하는 손실압축 방식으로 저장되며 최대 24비트 컬러까지 지원된다. 화질대비 압축률이 GIF에 비해 월등히 높으며 압축할때 압축률(화질대비 손실률)을 조절할수 있다.

BMP(Bitmap) : Microsoft에서 개발된 윈도우즈 운영체제의 기본적인 그래픽 포맷. 이미지 데이터를 pixel 데이터 그대로 저장하기 때문에 실 데이터 그대로 저장이 된다.

(Photoship mode의 image에서 bitmap은 0.1 2채널로 이미지를 변환하는것으로 개념이 다르다.)

DDS(Direct Drew Surface) : Nvidia에서 개발한 파일 포맷으로 directX 기반의 텍스쳐맵을 표현하기 위한 이미지 형식(DXT). 타 포맷과 달리 손실대비 압축률이 높으며 이미지에 따라 이미지 크기가 변하지 않고 고정되는 특징을 가지고 있다. 또한, mipmap을 미리 생성해 압축 저장하기 때문에 게임에서 쓰이기 좋아 많이 활용된다.

포토샵에서 불러들였을경우 밉맵을 보겠냐고 하면 이렇게 이미지가 뜬다.
(신입무렵 만들었던 texture...... 내부에서 DDS포맷으로 변환하는 Unity, Unreal과 달리 DDS 포맷을 규격으로 사용하는 자체 엔진일경우 이렇게 처음부터 DDS로 파일을 만들어 import 해야하는 경우도 있다)

 - DXT1 no Alpha : RGB는 4단계로 보간, 알파채널은 가지지 않는다. 가장 용량이 적다.(1024x1024 기준 684kb)

 - DXT1 1bit Alpha : RGB는 3단계로 보간t, 알파채널은 1bit. 1 bit를 알파 채널에 할당하므로 크기는 변하지 않지만 이미지 품질은 떨어진다.

                            알파채널은 0,1의 두채널만을 가지므로 알파가 빠지는 영역 없는 영역 두가지로만 표현된다.

 - DXT3 Explicit Alpha : RGB 4단계 보간, 알파 4bit로 표현(1024x1024 기준 1.36MB)

                            4 bit이므로 16단계의 그레이 스케일로 알파영역이 표현되므로 약간 투박한 표현이 가능하다.                    

 - DXT5 Interpolated Alpha : RGB 4단계 보간, 알파는 8bit로 표현

                            8 bit이므로 256단계의 그레이 스케일로 알파영역이 표현된다. DXT3와 파일 크기는 동일하다.

(압축방식은 이미지를 4x4 블록으로 나눈뒤, 블록안의 두가지 대표색상을 선정 나머지 두색상의 값을 보간값으로 표현하는 방식. 해당 색상역시 비트를 낮춰서 저장. 이 때문에 DDS 포맷은 2의 승수 방식으로만 저장이 가능하다.- 비대칭은 가능)

DDS의  DXT3 및 DXT5 이미지 크기가 같은 이유 (헤더 제외) = ((bmp.width + 3) >> 2) * ((bmp.height + 3) >> 2) * 16

뱀다리 1 : DXT2와 DXT4는 언리얼에서 지원안해서 없어졌다는데 믿거나 말거나 ㅋ : http://wiki.beyondunreal.com/Legacy:DXT

뱀다리 2 : DDS포맷은 파일을 보려거나 편집하려면 nvidia 홈페이지에서 plug-in을 받아서 설치해줘야 한다.

뱀다리 3 : 언리얼에서 요구하는 DXTC의 사용 가이드 : UDN DXTC 예제 및 기술 비교

GIF(Graphics Interchange Format) : 렘펠지브웰치(LZW)방식으로 원 사이즈의 40%까지 줄일수 있다. JPEG에 비해 압축률은 떨어지지만 사이즈가 작아 전송속도가 빠르고 이미지 손상이 적은편. 그래픽 내에 이미지 정보는 물론 문자열과 같은 정보도 저장이 가능하며 여러장의 이미지를 한개의 파일에 담을수 있다. 또한 인터레이스 형식으로도 저장된다. 단점은 256 colo이상은 지원하지 않기 때문에 이미지 품질이 떨어지는 단점을 가진다.

PNG(Portable network graphics) : 웹에서 최상의 비트맵 이미지를 구현하기 위해 만들어진 포맷. 24bit 이미지를 처리하면서도 GIF보다 적은 용량으로도 이미지 표현이 가능하기도 하다. 알파채널을 별도로 가지지 않고 인터레이스 형식으로 알파를 표현할수 있다.

뱀다리 1 : UI작업에서 PNG를 그대로 사용할 경우 DDS를 사용하는 것보다 로딩속도가 2배 이상 느려진다는 의견이 있음.(DDS를 사용할경우 이미지 품질저하가 드러나므로 적정용량의 TGA를 compress하는 편이 가장 효율적 퀄리티가 나온다는 의견이 있음)

TGA(Truevision Graphics Adapter) : 트루비젼의 타가보드를 위해 개발된 이미지 포맷. 줄여서 보통 타가라고 부른다. 특허로부터 방해가 거의 없고 도입하기 쉽다는 장점으로 널리 쓰이나 압축방식이 디지털 사진과 같은 수많은 색변화가 있는 이미지를 압축할때 그리 좋은 결과를 보이지 않으나 텍스쳐나 단순 이미지의 압축률은 좋은편이라 게임에서 널리 쓰인다.

 - 16bit, 24bit, 32bit 세가지 옵션을 지원하며 32bit 옵션에서 8bit 알파채널을 지원한다.

 - Compress 항목 : 저장옵션의 하단에 compress(RLE)라는 옵션이 있다. 이는 색 손실이 없는 TGA의 이미지 압축을 위한 옵션으로 동일 컬러값을 가지는 항목에 대해 하나의 데이터로 저장하는 옵션이다.( a, a 라는 동일 컬러값을 가지는 픽셀을 각각 저장하는 것이 아닌 a1, a2로 저장한다 생각하면 쉽다). 바꿔말하면 색변화가 심한 texture의 경우 큰 효과를 보기 힘들다.

각 옵션에 따른 파일 사이즈 크기 비교(1024x1024)

05-1 : 16 bit comprees No

05-2 : 16 bit comprees Yes

05-3 : 24 bit comprees No

05-4 : 24 bit comprees Yes

05-5 : 32 bit comprees No

05-6 : 32 bit comprees Yes

(32bit 영역의 경우 alpha 채널 데이터 포함된 결과임)

3. Mask의 개념과 특성.

 

   - Photoshop Mask란?

  - Quick mask의 사용과 활용

  - layer mask의 활용

4. Photoshop Brush의 활용 및 이미지 편집의 알고리즘적 특성

 - 이전 refrence 자료 활용 : http://illu.tistory.com/350

 

 - Filter를 활용한 이미지 편집 및 주의 사항. 특성

5. CS5의 추가 기능활용

 - Content Aware

 

 - Refine Edge

 - Puppet Warp

- CS4 이후부터 추가된 Open GL 가속을 통한(Enable OpenGL Drawing 항목) 향상된 이미지 편집기능