본문 바로가기

STUDY/Web Design

포토샵과 일러스트

포토샵과 일러스트 비교

  포토샵 일러스트
단위

비트맵 방식

픽셀이 모여서 오브젝트를 구성.

크기에 영향을 받으며 확대 시 깨진다.

이미지 작업 시 픽셀, 해상도가 중요하다.

벡터 방식

수학적 연산으로 만들어지며

점, 선, 면이 모여 이루어진 오브젝트로 구성.

크기에 영향을 받지 않으며 확대 시 깨지지 않는다.

해상도 (선명도/화질)

웹 작업 시 72 ppi / 출력 시 300 dpi

해상도(resolution) : 이미지를 구성하는 가로 x 세로 픽셀 수

dpi(dots per inch) : 종이 1인치당 찍히는 점의 개수

ppi(pixel per inch) : 모니터 1인치당 가지고 있는 픽셀 수

선택방식 선택영역으로 작업할 영역을 선택한다. 오브젝트를 선택한다.
레이어 하나의 레이어에 하나의 오브젝트 하나의 레이어에 여러 개의 오브젝트
작업영역 작업영역을 벗어날 수 없다. 작업영역 밖에서도 작업이 가능하다.
저장속도 느리다. 빠르다.
확장자 psd ai
작업범위

이미지 편집, 합성, 보정

부드러운 외곽 처리

사실적인 표현

웹디자인

로고, 아이콘, 캐릭터, 편집, 인쇄물

깨끗한 외곽 처리

깨지지 않는 오브젝트 표현

웹디자인

파일 확장자

psd : 포토샵 표준 저장 방식으로 작업 내역이 모두 저장되므로 수정이 가능하다.

 

ai : 일러스트 표준 저장 방식으로 작업 내역이 모두 저장되므로 수정이 가능하다.

 

svg : xml태그로 저장되어 웹브라우저에 바로 적용 가능하다.

 

jpg : 손실 압축방식 (사진 저장 시 사용)

원본에 손상을 가해 이미지의 용량을 줄이는 방식. 24비트 색상 지원

압축률을 높이거나 새로 저장할수록 이미지의 품질이 떨어지는 단점이 있다.

사진과 같이 다양한 색상과 명도를 가진 이미지의 용량을 줄이는데 가장 효율적인 방식이므로, 주로 사진을 저장하는 용도로 사용된다.

 

gif : 비손실 압축방식 (움직이는 이미지 저장)

gif 이미지 하나에 저장 가능한 색상이 256색으로 제한되어 있어서 어쩔 수 없이 손실이 발생된다. 단색 투명층을 통해 투명 이미지를 지원하며 움직이는 그림, 즉 애니메이션을 지원하기 때문에 널리 사용되고 있다.

 

png : 비손실 압축방식 (투명한 이미지 저장)

24비트를 지원하기 때문에 원본을 손상 없이 그대로 저장할 수 있다. 또한 gif의 단색 투명층이 아닌 알파채널을 통한 투명층을 지원하기 때문에 이미지에 농도를 조절하여 투명 효과를 세밀하게 줄 수 있다. 단순한 패턴을 가진 이미지에는 굉장히 높은 압축 효율을 보여주지만 사진과 같은 다양한 색상과 명도를 가진 이미지에는 압축 효율이 떨어진다.