Photoshop 웹 도구를 사용하면 웹 페이지에 사용할 구성 요소를 만들거나 완전한 웹 페이지를 사전 설정 또는 사용자 정의 형식으로 출력하기가 쉽습니다.

  • 레어어와 분할 영역을 사용하여 웹 페이지와 웹 페이지 인터페이스 요소를 디자인합니다. (레이어웹 페이지 분할 참조.)

  • 레이어 구성 요소를 사용하여 다른 페이지 컴포지션을 실험해 보거나 페이지를 다양하게 변형하여 내보냅니다. (레이어 구성 요소를 참조하십시오.)

  • 롤오버 텍스트 또는 단추 그래픽을 만들어 Dreamweaver나 Flash로 불러옵니다.

  • [애니메이션] 패널로 웹 애니메이션을 만든 후 애니메이션 GIF 이미지나 QuickTime 파일로 내보냅니다. 자세한 내용은 프레임 애니메이션 만들기를 참조하십시오.

  • Adobe Bridge에서 웹 포토 갤러리를 만들어 다양하고 전문적인 템플릿을 사용하여 이미지 세트를 인터랙티브 웹 사이트로 빠르게 변환합니다.

Photoshop과 Dreamweaver로 웹 사이트를 디자인하는 방법에 대한 비디오를 보려면, Dreamweaver에서 Photoshop을 액세스하여 웹 이미지 향상을 참조하십시오.

롤오버 이미지 만들기

롤오버는 마우스를 올릴 때 변하는 웹 페이지의 단추나 이미지입니다. 롤오버를 만들려면 최소 두 개의 이미지(일반 상태를 나타내는 기본 이미지와 변경된 상태를 나타내는 보조 이미지)가 있어야 합니다.

Photoshop에는 롤오버 이미지를 만들 때 유용하게 사용할 수 있는 다양한 도구들이 있습니다.

  • 레이어를 사용하여 기본 이미지와 보조 이미지를 만듭니다. 하나의 레이어에서 내용을 만든 후 레이어를 복제해서 편집하면 레이어 사이의 정렬 상태를 유지하면서 유사한 내용을 만들 수 있습니다. 롤오버 효과를 만들면 레이어의 스타일, 가시성, 위치를 변경하거나 색상 또는 색조를 조정하거나 필터 효과를 적용할 수 있습니다. 자세한 내용은 레이어 복제를 참조하십시오.

  • 레이어 스타일을 사용하여 색상 오버레이, 그림자 효과, 광선 또는 엠보스 등의 효과를 기본 레이어에 적용할 수도 있습니다. 롤오버 쌍을 만들려면 레이어를 켜거나 끈 후 각 상태의 이미지를 저장합니다. 자세한 내용은 레이어 효과 및 스타일을 참조하십시오.

  • [스타일] 패널에서 사전 설정 단추 스타일을 사용하여 일반, 마우스오버 및 마우스다운 상태의 롤오버 단추를 빠르게 만들 수 있습니다. [사각형 도구]로 기본 모양을 그린 후 [경사진 일반] 등의 스타일을 적용하여 사각형을 자동으로 단추로 바꿉니다. 그런 다음 레이어를 복사하고 [경사진 마우스오버]와 같은 다른 사전 설정 스타일을 적용하여 추가 단추 상태를 만듭니다. 각 레이어를 별도의 이미지로 저장하여 완료된 롤오버 단추 세트를 만듭니다.

  • 웹 및 장치용으로 저장 대화 상자를 사용하여 롤오버 이미지를 웹 호환 형식과 최적화된 파일 크기로 저장합니다. 이미지 최적화를 참조하십시오.

참고:

롤오버 이미지를 저장할 때는 이름 지정 규칙을 사용하여 기본(롤오버 전 상태) 이미지와 보조(롤오버 상태) 이미지를 구분합니다.

Photoshop에서 롤오버 이미지 세트를 만든 후에는 Dreamweaver를 사용하여 웹 페이지에 이미지를 가져오고 자동으로 롤오버 액션을 위한 JavaScript 코드를 추가합니다.

Zoomify로 내보내기

사용자가 회전하거나 확대하여 보다 세부적인 내용을 볼 수 있는 고해상도 이미지를 웹에 게시할 수 있습니다. 기본 크기 이미지는 동등한 크기의 JPEG 파일과 다운로드 시간이 같습니다. Photoshop에서는 JPEG 파일과 HTML 파일을 내보내 웹 서버에 업로드할 수 있습니다.

  1. [파일] > [내보내기] > [Zoomify]를 선택하고 내보내기 옵션을 설정합니다.

    템플릿

    브라우저에 표시되는 이미지의 배경과 내비게이션을 설정합니다.

    출력 위치

    파일의 위치와 이름을 지정합니다.

    이미지 타일 옵션

    이미지의 품질을 지정합니다.

    브라우저 옵션

    사용자 브라우저에 나타나는 기본 이미지의 픽셀 폭과 높이를 설정합니다.

  2. HTML 및 이미지 파일을 웹 서버에 업로드합니다.

16진수 색상 값 사용

Photoshop에서는 이미지 색상의 16진수 값을 표시하거나 색상의 16진수 값을 복사하여 HTML 파일에서 사용할 수 있습니다.

정보 패널에서 16진수 색상 값 보기

  1. [창] > [정보]를 선택하거나 [정보] 패널 탭을 클릭하여 패널을 표시합니다.
  2. 패널 메뉴에서 [패널 옵션]을 선택합니다. [제 1 색상 정보]나 [제 2 색상 정보] 아래 [모드] 메뉴에서 [웹 색상]을 선택하고 [승인]을 클릭합니다.
  3. 16진수 값을 보려는 색상 위에 포인터를 놓습니다.

16진수 값으로 색상 복사

Photoshop에서는 16진수 값(color=#xxyyzz)을 포함하는 HTML COLOR 특성 또는 단독 16진수 값으로 색상을 복사합니다.

  1. 다음 중 하나를 수행합니다.
    • [스포이드] 도구를 사용하여 복사할 색상 위로 포인터를 이동합니다. 마우스 오른쪽 단추(Windows) 또는 Control 키(Mac OS)를 클릭하고 [색상을 HTML로 복사] 또는 [색상의 16진수 코드 복사]를 선택합니다.

    • [색상] 패널, [색상 견본] 패널 또는 Adobe [색상 피커]를 사용하여 전경색을 설정합니다. [색상] 패널 메뉴에서 [색상을 HTML로 복사] 또는 [색상의 16진수 코드 복사]를 선택합니다.

    • 웹 용으로 저장 대화 상자에서 색상 견본을 클릭하거나 매트 > 기타를 선택합니다. [Adobe 색상 피커]에서 16진수 값을 마우스 오른쪽 단추로 클릭하고 [복사]를 클릭합니다.

  2. HTML 편집 응용 프로그램에서 원하는 파일을 열고 편집 > 붙여넣기를 선택합니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책