Tip – 웹용 이미지 만들기

2017/11/15
tip-save-web-img-thumb-1

웹사이트 관리자가 글을 작성할 경우 썸네일 이미지 설정 또는 업로드하려는 글 안에 이미지가 들어가야 할 경우가 있습니다. 고용량의 이미지를 그대로 웹사이트에 업로드할 경우 웹페이지를 불러오는 시간이 지체될 뿐만 아니라 웹호스팅의 제한된 용량을 빨리 소비하게 됩니다. 이 글에서는 웹용 이미지 저장 방법에 대해서 알려드립니다. 웹용 이미지 저장을 위해서는 Photoshop(프로그램 공식 웹사이트 바로가기)이라는 프로그램이 필요합니다. 예제에 쓰인 Photoshop 버전은 CC 2017입니다. 아래의 설명이 부족하시거나 이해하기 어려운 부분이 있으시면 언제든지 연락해주시기 바랍니다.

1. 포토샵을 실행한 후, 상단의 메뉴에서 파일 > 새로만들기 메뉴를 클릭합니다.

tip-save-for-web-1

2. 뒤이어 나오는 팝업창에서 이미지의 크기(폭과 높이, 설정값은 웹매뉴얼을 참고)를 설정한 후, 해상도 72 px/in 그리고 색상모드 RGB를 확인한 다음 오른쪽 하단의 [제작] 버튼을 클릭합니다.

tip-save-for-web-22

3. 웹사이트에 업로드하고자 하는 이미지를 그림과 같이 드래그해서 포토샵으로 불러옵니다.

tip-save-for-web-3

4. 이제 설정한 아트보드의 크기에 맞게 이미지의 크기와 위치를 조정합니다. 자세한 설명은 참고 그림 아래에 있습니다.

tip-save-for-web-44
  • 레이어 창에서 이미지가 선택되어 있는지 확인합니다.
  • 단축키 Ctrl + T를 누릅니다. Mac일 경우에는 Cmd + T를 누릅니다.
  • 마우스 포인터를 이미지의 가장자리에 가져가면 포인터 아이콘이 그림과 같이 변하게 됩니다. 이 때, Shift키를 누른 상태에서 마우스를 드래그하면 이미지의 크기를 변경할 수 있습니다.

5. 상단의 메뉴에서 파일 > 내보내기 > 웹용으로 저장을 클릭합니다.

tip-save-for-web-5

6. 참고 그림에 표시된 사항들을 체크한 후 [저장] 버튼을 클릭해 이미지를 저장합니다. 체크해야 할 사항들에 대한 자세한 설명이 참고 그림 아래에 있으니 꼭 확인하시기 바랍니다.

tip-save-for-web-6
  • 현재 저장되는 이미지의 용량입니다. 1mb 이하로 저장할 것을 권장합니다.
  • 확장자가 JPEG인지 확인합니다. 이미지의 용량이 1mb 이상일 때 품질을 조정해서 이미지의 용량을 줄일 수 있습니다.
  • 메타데이터를 없음으로 설정합니다.
  • 참고 : 이미지의 용량을 1mb 이하로 맞추기 위해서 2번의 품질을 너무 낮게 설정하지 않아도 괜찮습니다. 1mb 이하는 권장사항임을 다시 알려드립니다.