본문 바로가기
인터넷 이용하기 꿀팁

일러스트 파일 jpg, png 파일 저장하는 방법

by 반짝pro 2023. 2. 4.
반응형
1. 일러스트 파일 jpg, png 파일 저장하는 방법
2.JPEG와 PNG차이

일러스트 파일 jpg, png 파일 저장하는 방법을 알아보기 전에 저장명, 확장자명인 JPEG와 PNG차이부터 알아본 후에
바로 저장하는 법을 알려드리도록 하겠습니다.


JPEG와 PNG차이

JPEG와 PNG은 모두 이미지라는 공통된 점이 있지만, 컴퓨터 웹에서 사용 시와 편집디자인 후 실제 인쇄물을 받을 때 다른 차이가 있습니다. 유사한 점도 있지만 차이점도 있게 되는데, 압축 프로세스가 다르며, JPEG는 포함하는 데이터 양이 PNG보다 적어 파일 크기가 작습니다. 반면, PNG는 투명 배경을 지원하기 때문에 그래픽 디자인에 더 적합합니다.
JPEG는 용량이 라이트 한 장점이 있지만, 카카오톡, 메일등으로 보내다 보면 파일의 데이터가 계속 손상되는 단점이 있습니다. 그러다 보니 시간이 지나다 보면 어느 날 '화질구지'라고 하면서 보게 되는 데요.

이러한 손상을 방지하기 위해서는 PNG파일로 저장하고 보내시면 손상이 되지 않습니다.
하지만 파일이 무겁다는 단점이 있고, 일러스트에서 그냥 저장하면, PC와 스마트폰에서 간혹 이미지 뒷부분이 검은색으로 처리되어 보이거나, 체크 바둑판처럼 보이기도 합니다.
체크 바둑판이미지나, 검은색은 기기에서 배경이 투명하다는 걸 처리해서 사람의 눈으로 볼 때 표현해 주는 부분입니다.
간혹 이미지를 캡처하실 때 배경이 체크 바둑으로 된걸 그대로 캡처하시는데 이미 보이는 화면을 캡처하는 부분이기 때문에 png로 저장을 하셔도 배경이 투명인 이미지가 아닌 배경이 색상으로 (백색, 바둑무늬로) 꽉 차 있는 그냥 파일명만 png 파일인 파일로 저장이 됩니다.
일러스트나 포토샵, 또는 다른 디자인 툴로 배경제거, 레이어가 투명한 상태에서 저장을 해주셔야만 투명한파일, png 파일이 됩니다.

일러스트 파일 jpg, png 파일 저장하는 방법

웹용으로 저장하기

일러스트 상단 바에서 맨 앞에 위치한 '메뉴'를 눌러서 11번째에 위치해 있는 웹용으로 저장을 클릭해 줍니다.
이때 단축키를 이용하여, alt+shift+ctrl+s 를 눌러 들어가셔도 됩니다. 그럼 디자인했던 이미지와 함께
새로운 창이 하나 뜨게 됩니다.


왼쪽에는 디자인 한 파일이 미리 보기로 보이고 오른쪽 상당에
사전설정이라고 써져 있고, 이미지크기 등의 설정 탭들이 보이게 됩니다.
사전설정에서 이름 아래에 JPEG라고 쓰여 있는 탭이 바로 jpg 파일로 저장하는 선택 탭입니다.
이 탭을 눌러보시면 png 등 여러 가지를 선택할 수가 있습니다.

탭에서 필요한 확장자를 선택해서 클릭을 해 주시면 되는 돼요,
퍼센트로 움직여서 용량을 정할 수도 있고 최댓값을 설정해서 하셔도 동일하게 적용이 됩니다.
용량 사이즈는 보통 최댓값보다는, 매우 높음 값인 80% 정도가 인터넷에 올렸을 때, 로딩이 빠르게 되기 때문에 필요한 용량을 설정을 해서 탭을 눌러주세요.

PNG파일의 경우에는 PNG-8 이 제일 일반적으로 사용되며, 웹디자인 시 작은 탭 버튼들, 단순한 색의 로고등을 저장하실 때 이용하시면 됩니다. 저는 블로그글등 큰 사이즈가 필요하지 않거나 색상이 중요하지 않을 때 주로  선택하고 있습니다.

PNG의 경우  왼쪽에 미리 보기 해보면 되지 부분이 아니 바둑 체크무늬로 표현되는 걸 알 수 있어요 저장을 했을 때 이 부분이 투명한 배경이 되는 부분입니다  JPG를 선택하면 백색 처리가 되는데, PNG의 경우 백색지정하고 싶다면, 대지에 도형을 백색으로 잡아서 레이어 제일하단에 배치해서 백색배경을 만들어주셔야 합니다.

웹으로 저장하기는 디자인을 했던 파일을 JPG, PNG로  재저장 할 수 있고
웹 디자인을 하시는 분들은,  전체 화면을 디자인한 우의 분할 저장으로 화면을 쉽게 나누어서 한 번에 저장을 할 수도 있습니다.
대지를 여러 개씩 만들지 않고, 하나의 대지에 웹용으로 저장하기 화면에서 나이프로 지정해서  잘라서(분할) 한 번에 여러 이미지도 저장할 수 있습니다.


반응형

댓글