Share via


아이콘(디자인 기본 사항)

참고

이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙에 따라 적용되지만 프레젠테이션 및 예제는 현재 디자인 지침을 반영하지 않습니다.

아이콘은 개체의 그림 표현이며, 프로그램의 시각적 ID의 일부로 미적 이유뿐만 아니라 실용적인 이유 때문에 사용자가 거의 즉각적으로 인식하는 의미를 전달하기위한 약어로 중요합니다. Windows Vista는 Windows에 더 높은 수준의 세부 사항과 세련미를 제공하는 새로운 도상학 스타일을 소개합니다.

참고:표준 아이콘과 관련된 지침은 별도의 문서에 제공됩니다.

설계 개념

Aero는 미적 디자인에 구현된 값과 UI(사용자 인터페이스) 뒤에 있는 비전을 모두 나타내는 Windows Vista의 사용자 환경 이름입니다. 에어로는 정통, 활기찬, 반사, 오픈을 의미합니다. 에어로는 전문적이고 아름다운 디자인을 확립하는 것을 목표로합니다. 에어로 미학은 사용자 생산성을 용이하게하고 감정적 인 반응을 유도하는 고품질의 우아한 경험을 만듭니다.

Windows Vista 아이콘은 다음과 같은 방법으로 Windows XP 스타일 아이콘과 다릅니다.

  • 이 스타일은 설명보다 더 현실적이지만 포토리얼리스틱하지는 않습니다. 아이콘은 포토리얼리스틱보다 더 잘 보이는 상징적인 이미지입니다!
  • 아이콘의 최대 크기는 256x256픽셀이므로 높은 dpi(인치당 점) 디스플레이에 적합합니다. 이러한 고해상도 아이콘을 사용하면 큰 아이콘이 있는 목록 보기에서 높은 시각적 품질을 사용할 수 있습니다.
  • 실용적인 경우 고정 문서 아이콘은 콘텐츠의 축소판 그림으로 대체되므로 문서를 더 쉽게 식별하고 찾을 수 있습니다.
  • 도구 모음 아이콘은 더 작은 크기와 시각적 특징을 최적화하기 위해 세부 정보가 적고 큐브 뷰가 없습니다.

잘 디자인된 아이콘:

  • 프로그램의 시각적 통신을 개선합니다.
  • 프로그램의 시각적 디자인에 대한 사용자의 전반적인 인상과 적합성과 마무리에 대한 감사에 큰 영향을 미칩니다.
  • 프로그램, 개체 및 작업을 보다 쉽게 식별, 학습 및 찾을 수 있도록 하여 유용성을 향상시킵니다.

다음 이미지는 Windows VISTA의 에어로 스타일 아이콘이 Windows XP에서 사용되는 것과 어떻게 다른지 보여 줍니다.

잠금 및 키 아이콘 이미지

Windows Vista 아이콘(왼쪽의 잠금 및 키)은 정통적이고 선명하며 상세합니다. 그리기보다는 렌더링되지만 완전히 포토리얼리스틱하지는 않습니다.

지구와 나선형 전자 필기장 아이콘 이미지

Windows Vista 아이콘(왼쪽의 두 아이콘)은 전문적이고 아름다워서 아이콘 프로덕션 품질을 향상시키는 세부 사항에 주의합니다.

전자 필기장, 잠금, 모니터 및 용지 이미지

이러한 Windows Vista 아이콘은 시각 및 세부 정보에서 광학 균형 및 인식된 정확도를 표시합니다. 이렇게 하면 크거나 작거나, 가까이 있거나, 멀리서 볼 수 있습니다. 또한 이 아이콘 체계 스타일은 고해상도 화면에서도 작동합니다.

큰 녹색 오른쪽 화살표 아이콘의 용지 아이콘 이미지무선 라우터 아이콘 이미지 이미지

이러한 예제에서는 큐브 뷰의 3차원 개체, 전면(평면) 아이콘 및 도구 모음 아이콘을 포함하여 다양한 유형의 아이콘을 보여 줍니다.

지침

관점

  • Windows Vista의 아이콘은 3차원이며 큐브 뷰에 단색 개체로 표시되거나 직선으로 표시된 2차원 개체입니다. 파일 및 문서 또는 용지 조각과 같이 실제로 평평한 개체에 플랫 아이콘을 사용합니다.

    3d 컴퓨터 및 플랫, 2d 용지의 이미지

    일반적인 3D 및 플랫 아이콘.

  • 3차원 개체는 두 개의 소실 지점이 있는 낮은 조감도에서 볼 수 있는 단색 개체로 큐브 뷰로 표시됩니다.

    큐브 뷰를 보여 주는 선이 있는 Notebook 이미지

    이 예제에서는 3D 아이콘의 일반적인 원근 및 소실 지점을 보여 줍니다.

  • 크기가 작을수록 동일한 아이콘이 원근에서 직선으로 변경됩니다. 16x16픽셀 이하의 크기로 아이콘을 직선으로 렌더링합니다(전면). 더 큰 아이콘의 경우 큐브 뷰를 사용합니다.

    • 예외: 도구 모음 아이콘은 더 큰 크기에서도 항상 전면입니다.

    대형 3D 컴퓨터 및 소형 2d 컴퓨터 이미지

    이 예제에서는 크기에 따라 동일한 아이콘이 어떻게 다르게 처리되는지 보여 집니다.

광원

  • 원근 눈금 내의 개체에 대한 광원은 위쪽, 약간 앞에, 개체의 왼쪽에 약간 있습니다.
  • 광원은 개체 베이스의 후면과 오른쪽에 약간 있는 그림자를 캐스팅합니다.
  • 모든 광선은 병렬이며 동일한 각도(예: 태양)를 따라 개체를 공격합니다. 목표는 모든 아이콘 및 스포트라이트 효과에 걸쳐 균일한 조명 모양을 갖는 것입니다. 병렬 광원은 모두 길이와 밀도가 같은 그림자를 생성하여 여러 아이콘에서 더 많은 통합을 제공합니다.

그림자

일반

  • 그림자를 사용하여 개체를 배경에서 시각적으로 들어 올리고 3D 개체가 공간에 어색하게 떠다니는 대신 접지된 것처럼 보이게 합니다.

  • 그림자에 불투명도 범위를 30~50%로 사용합니다. 아이콘의 모양이나 색에 따라 다른 수준의 그림자를 사용해야 하는 경우도 있습니다.

  • 필요한 경우 그림자를 페더하거나 줄여 아이콘 상자 크기로 자르지 않도록 합니다.

  • 24x24 이하 크기의 아이콘에는 그림자를 사용하지 마세요.

    그림자가 있는 3D 아이콘 이미지

    일반적인 아이콘 그림자입니다.

플랫 아이콘

  • 플랫 아이콘은 일반적으로 문서 또는 용지와 같은 파일 아이콘 및 플랫 실제 개체에 사용됩니다 .
  • 평평한 아이콘 조명은 130도에서 왼쪽 위에서 온다.
  • 더 작은 아이콘(예: 16x16 및 32x32)은 가독성을 위해 간소화됩니다. 그러나 아이콘 내에 리플렉션이 포함되어 있는 경우(종종 간소화됨) 꽉 끊긴 그림자가 있을 수 있습니다. 그림자 범위는 불투명도가 30~50%입니다.
  • 레이어 효과는 플랫 아이콘에 사용할 수 있지만 다른 플랫 아이콘과 비교해야 합니다. 개체의 그림자는 크기 집합 내에서 그리고 Windows Vista의 다른 아이콘과 함께 가장 잘 보이고 가장 일관된 항목에 따라 다소 달라집니다. 경우에 따라 그림자를 수정해야 할 수도 있습니다. 개체가 다른 개체 위에 배치될 때 특히 그렇습니다.
  • 원하는 결과를 얻기 위해 미묘한 범위의 색을 사용할 수 있습니다. 그림자는 개체가 공간에 배치되는 데 도움이 됩니다. 색은 그림자의 인식된 가중치에 영향을 줍니다. 너무 무거우면 이미지가 왜곡될 수 있습니다.

좁은 그림자가 있는 용지 아이콘의 그림자가 선택된 스크린샷이 있는 대화 상자의 스크린샷

레이어 스타일 대화 상자의 그림자 옵션과 플랫 아이콘에 대한 일반적인 그림자입니다.

기본 플랫 아이콘 그림자 범위

특성 범위
색상
검정
혼합 모드
곱하기
불투명도
항목의 색에 따라 22~50%
각도
120-130(전역 조명 사용)
거리
256x256의 경우 3, 32x32의 경우 1까지
Spread
0
크기
256x256의 경우 7, 32x32의 경우 2까지

3차원 아이콘

  • 대/소문자 단위로 3D 아이콘에 대한 그림자를 만들고, 캐스트 거리 범위 내에 맞고 페더링하여 완전히 투명하게 만듭니다. 그림자에 대한 공간을 허용하기 위해 필요한 전체 아이콘 크기보다 약간 작은 크기로 이미지를 만듭니다(필요한 크기의 경우). 아이콘 가장자리에서 그림자가 갑자기 끝나지 않는지 확인합니다.

Photoshop에서 그림자 만들기 그림

다양한 그림자가 있는 네 개의 개체 그림

이러한 예제는 개체 자체의 모양과 위치에 따라 생성된 변형을 보여 줍니다. 아이콘 상자 크기로 잘리지 않도록 그림자를 페더화하거나 줄여야 하는 경우가 있습니다.

색 및 채도

  • 색은 일반적으로 Windows XP보다 채도가 낮습니다.

  • 그라데이션을 사용하여 보다 사실적인 이미지를 만듭니다.

  • 표준 아이콘에 대한 특정 색상표는 없지만 많은 컨텍스트와 테마에서 잘 작동해야 합니다. 표준 색 집합을 선호합니다. 경고 아이콘과 같은 표준 아이콘의 색을 다시 지정하지 마세요. 이는 사용자의 의미를 해석하는 기능을 방해하기 때문입니다. 자세한 지침은 색을 참조 하세요.

  • 아이콘 파일에는 원격 데스크톱의 기본 설정을 지원하기 위해 8비트 및 4비트 팔레트 버전도 필요합니다. 이러한 파일은 일괄 처리 프로세스를 통해 만들 수 있지만 일부 파일은 더 나은 가독성을 위해 수정이 필요하므로 검토해야 합니다.

    색 선택 대화 상자의 스크린샷

    엄격한 색상표 제한은 없습니다. 전체 채도(오른쪽 위)만 방지됩니다.

  • 비트 수준: 32비트(알파 포함) + 8비트 + 4비트용 ICO 디자인(가장 중요한 픽셀만 자동으로 아래로 디더링됨). 256x256 픽셀 이미지의 32비트 복사본만 포함해야 하며 파일 크기를 낮추려면 256x256 픽셀 이미지만 압축해야 합니다. 여러 아이콘 도구는 Windows Vista에 대한 압축을 제공합니다.

  • 비트 수준: 도구 모음 24비트 + 알파(1비트 마스크), 8비트 및 4비트.

  • 도구 모음 또는 AVI 파일: 배경 투명도 색으로 magenta(R255 G0 B255)를 사용합니다.

크기 요구 사항

일반

  • 기본 애플리케이션 아이콘, Windows Explorer 표시할 수 있는 파일 아이콘, 시작 메뉴 또는 바탕 화면에 표시되는 아이콘과 같은 높은 표시 유형 아이콘에 특히 주의하세요.
    • 애플리케이션 아이콘 및 제어판 항목: 전체 집합에는 16x16, 32x32, 48x48 및 256x256(코드 크기가 32에서 256 사이)이 포함됩니다. .ico 파일 형식이 필요합니다. 클래식 모드의 경우 전체 집합은 16x16, 24x24, 32x32, 48x48 및 64x64입니다.
    • 목록 항목 아이콘 옵션: 파일 형식의 라이브 썸네일 또는 파일 아이콘을 사용합니다(예: .doc). 전체 집합입니다.
    • 도구 모음 아이콘: 16x16, 24x24, 32x32. 도구 모음 아이콘은 32x32 크기에서도 항상 3D가 아니라 평평합니다.
    • 대화 상자 및 마법사 아이콘: 32x32 및 48x48.
    • 오버레이: 핵심 셸 코드(예: 바로 가기) 10x10(16x16), 16x16(32x32의 경우), 24x24(48x48의 경우), 128x128(256x256의 경우). 이들 중 일부는 약간 작지만 모양과 광학 균형에 따라 이 크기에 가깝습니다.
    • 빠른 실행 영역: 아이콘은 Alt+Tab 동적 오버레이의 48x48에서 축소되지만 보다 선명한 버전의 경우 .ico 파일에 40x40을 추가합니다.
    • 풍선 아이콘: 32x32 및 40x40.
    • 추가 크기: 다른 파일(예: 주석, 도구 모음 스트립, 오버레이, 높은 dpi 및 특수 사례)을 만들기 위한 리소스로 사용하는 데 유용합니다. 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10 및 8x8. 해당 영역의 코드에 따라 .ico, .png, .bmp 또는 기타 파일 형식을 사용할 수 있습니다.

높은 dpi의 경우

  • Windows Vista는 96dpi 및 120dpi를 대상으로 합니다.

다음 표에서는 두 개의 일반적인 아이콘 크기에 적용되는 배율의 예를 보여 줍니다. 이러한 모든 크기가 .ico 파일에 포함되어야 하는 것은 아닙니다. 코드는 더 큰 코드를 축소합니다.

dpi 아이콘 크기 배율
96
16x16
1.0 (100%)
120
20x20
1.25 (125%)
144
24x24
1.5 (150%)
192
32x32
2.0 (200%)
dpi 아이콘 크기 배율
96
32x32
1.0 (100%)
120
40x40
1.25 (125%)
144
48x48
1.5 (150%)
192
64x64
2.0 (200%)

.ico 파일 크기(표준)

다양한 표준 크기의 라우터 아이콘을 보여 주는 다이어그램

.ico 파일 크기(특수한 경우)

다양한 크기의 라우터 아이콘 그림

주석 및 오버레이

  • 주석은 아이콘의 오른쪽 아래 모서리로 이동하며 아이콘 영역의 25%를 채워야 합니다.
    • 예외: 16x16 아이콘은 10x10 주석을 사용합니다.
  • 아이콘 위에 두 개 이상의 주석을 사용하지 마세요.
  • 오버레이는 아이콘의 왼쪽 아래 모서리로 이동하며 아이콘 영역의 25%를 채워야 합니다.
    • 예외: 16x16 아이콘은 10x10 오버레이를 사용합니다.

세부 수준

  • 이러한 아이콘의 16x16 크기는 여전히 널리 사용되므로 중요합니다.

  • 이 크기의 아이콘에 있는 세부 정보는 아이콘의 핵심 지점을 명확하게 표시해야 합니다.

  • 아이콘이 작아지면 더 큰 크기의 투명도 및 일부 특수 세부 정보를 희생하여 점을 단순화하고 얻을 수 있습니다.

  • 특성과 색을 과장하고 키 형식을 강조하는 데 사용해야 합니다.

    대형 디바이스 1대와 소형 디바이스 2개 그림

    16x16에서 휴대용 오디오 장치의 아이콘은 휴대 전화로 쉽게 오인될 수 있으므로 귀 조각은 표시할 주요 시각적 세부 정보입니다.

  • 단순히 256x256 크기에서 축소하는 것은 작동하지 않습니다.

  • 모든 크기에는 관련 수준의 세부 정보가 필요합니다. 아이콘이 작을수록 정의 세부 정보를 더 과장해야 합니다.

    명확한 세부 정보가 있는 휴대폰 그림

    흐릿한 세부 정보가 있는 휴대폰 그림

아이콘 개발

아이콘 디자인 및 생성

  • 숙련된 그래픽 디자이너를 고용합니다. 훌륭한 그래픽, 이미지 및 아이콘은 전문가와 함께 작동합니다. 벡터 아트 또는 3D 프로그램을 사용하는 일러스트레이션 환경이 권장됩니다.
  • 초기 개념 스케치에서 컨텍스트 내 모형, 최종 프로덕션 검토 및 작업 제품의 아이콘 적합 및 완성에 이르기까지 일련의 반복을 수행하도록 계획합니다.
  • 미리 아이콘 만들기는 비용이 많이 들 수 있다고 생각합니다. 필요한 아이콘의 전체 집합과 같은 모든 기존 세부 정보 및 요구 사항을 수집합니다. 각각에 대한 기본 함수 및 의미, 명확하게 표시하려는 집합의 패밀리 또는 클러스터, 브랜드 요구 사항, 정확한 파일 이름, 코드에 사용되는 이미지 형식 및 크기 요구 사항입니다. 디자이너를 사용하여 시간을 최대한 활용할 수 있는지 미리 확인합니다.
  • 디자이너는 제품에 익숙하지 않을 수 있으므로 기능 정보, 스크린샷 및 사양 섹션을 적절하게 제공합니다.
  • 적절하게 지정학적 및 법적 검토를 계획합니다.
  • 시간 프레임을 매핑하고 정기적인 통신을 수행합니다.

개념 스케치에서 최종 제품으로

휴대폰 스케치 개발 그림

  • 개념 스케치를 만듭니다.
  • 다양한 크기의 개념을 사용해 보세요.
  • 필요한 경우 3D로 렌더링합니다.
  • 다양한 배경색에서 크기를 테스트합니다.
  • 실제 UI의 컨텍스트에서 아이콘을 평가합니다.
  • 최종 .ico 파일 또는 기타 그래픽 리소스 형식을 생성합니다.

도구

  • 연필 및 종이: 초기 개념 아이디어, 나열 및 스케치.
  • 3D Studio 최대: 큐브 뷰에서 3D 개체를 렌더링합니다.
  • Adobe Photoshop: 컨텍스트에서 스케치 및 반복, 모의 작업 및 세부 정보를 마무리합니다.
  • Adobe Illustrator/Macromedia Freehand: 스케치하고 반복하고 세부 정보를 마무리합니다.
  • 가마니 Gif 무비 기어: .ico 파일을 생성합니다(필요한 경우 압축 포함).
  • Axialis 아이콘 워크샵: .ico 파일을 생성합니다(필요한 경우 압축 포함).
  • Microsoft Visual Studio는 Windows Vista 아이콘을 지원하지 않습니다(알파 채널 또는 256가지 이상의 색상은 지원되지 않음).

프로덕션

다음 단계에 따라 여러 이미지 크기와 색 깊이가 포함된 단일 .ico 파일을 만듭니다.

1단계: 개념화

  • 가능한 경우 설정된 개념을 사용하여 아이콘에 대한 의미의 일관성과 다른 용도와 관련성을 보장합니다.
  • 아이콘이 UI의 컨텍스트에 표시되는 방법과 아이콘 집합의 일부로 작동하는 방식을 고려합니다.
  • 기존 아이콘을 수정하는 경우 복잡성을 줄일 수 있는지 여부를 고려합니다.
  • 그래픽의 문화적 영향을 고려합니다. 아이콘에서 문자, 단어, 손 또는 얼굴을 사용하지 마세요. 필요한 경우 사용자 또는 사용자의 표현을 가능한 한 일반적으로 표시합니다.
  • 여러 개체를 아이콘의 단일 이미지로 결합하는 경우 이미지가 더 작은 크기로 스케일링되는 방법을 고려합니다. 아이콘에 3개 이하의 개체를 사용합니다(두 개체가 기본 설정됨). 16x16 크기의 경우 개체를 제거하거나 이미지를 단순화하여 인식을 개선하는 것이 좋습니다.
  • 아이콘에는 Windows 플래그를 사용하지 마세요.

2단계: 설명

  • Windows Aero 스타일 아이콘을 설명하려면 Macromedia Freehand 또는 Adobe Illustrator와 같은 벡터 도구를 사용합니다. 이 문서의 앞부분에서 설명한 대로 색상표 및 스타일 특성을 사용합니다.
  • Freehand 또는 Illustrator를 사용하여 이미지를 보여 줍니다. 벡터 이미지를 복사하여 Adobe Photoshop에 붙여넣습니다.
  • Photoshop에서 템플릿 계층을 만들고 사용하여 규제된 크기의 제곱 영역 내에서 작업이 수행되도록 합니다.
  • 그림자에 대한 공간을 허용하기 위해 필요한 전체 아이콘 크기보다 약간 작은 크기로 이미지를 만듭니다(필요한 크기의 경우).
  • 디렉터리의 모든 아이콘이 일관되게 배치되도록 사각형 아래쪽에 이미지를 배치합니다. 그림자를 차단하지 마십시오.
  • 이미지 또는 계열에 다른 개체를 추가하는 경우 기본 개체를 고정된 위치에 유지하고 사례에 따라 왼쪽 아래 또는 오른쪽 위와 같은 고정된 위치에 더 작은 크기의 이미지를 고정된 위치에 배치합니다.

3단계: 24비트 이미지 만들기

  • Photoshop에 크기를 붙여넣은 후에는 특히 16x16 및 더 작은 크기에서 이미지의 가독성을 검사. 색의 백분율을 사용하는 픽셀 포킹이 필요할 수 있습니다. 투명성 감소도 필요할 수 있습니다. 핵심 요소에 집중하기 위해 더 작은 크기로 측면을 과장하고 측면도 제거하는 것이 일반적입니다.
  • 8비트 아이콘은 32비트 미만의 색상 모드로 표시되며 8비트 알파 채널이 없으므로 앤티앨리어싱이 없기 때문에 가장자리가 정리되거나 정리되어야 할 수 있습니다(가장자리가 들쭉날쭉하고 이미지를 읽기 어려울 수 있음).
  • Photoshop에서 24비트 이미지 계층을 복제하고 레이어 이름을 4비트 이미지로 바꿉니다. Windows 16 색상표에 4비트 이미지를 인덱싱합니다.
  • 16가지 색상표의 색만 사용하여 이미지를 정리합니다. 개체 색의 어둡거나 밝은 버전으로 만든 윤곽선은 일반적으로 회색 또는 검은색보다 선호됩니다.
  • 비트맵에서 작업하는 경우 배경색이 이미지 자체에서 사용되지 않는지 확인합니다. 그 이유는 투명한 색이 될 색이기 때문입니다. Magenta(R255 G0 B255)는 종종 배경 투명도 색으로 사용됩니다.

4단계: 8비트 및 4비트 이미지 만들기

  • 이제 24비트 이미지를 32비트 아이콘으로 만들 준비가 되었으므로 8비트 버전을 만들어야 합니다.
  • 상황별 스크린샷을 테스트하기에 좋은 시기입니다. 컨텍스트에서 다른 아이콘 또는 아이콘 패밀리를 보고 검색할 수 있는 것은 놀랍습니다. 이 단계에서는 시간과 비용을 절약할 수 있습니다. 파일이 프로덕션을 통과하고 전달되기 전에 문제를 파악하는 것이 훨씬 낫습니다.
  • 필요한 크기로 이미지에 그림자를 추가합니다.
  • 그림자와 24비트 이미지를 함께 병합합니다.
  • 각 크기에 대해 새 Photoshop 파일을 만듭니다. 적절한 이미지를 복사하여 붙여넣습니다. 각 파일을 .psd 파일로 저장합니다.
  • 이미지 계층을 배경 계층과 병합하지 마세요. 작업하는 동안 파일 이름에 크기 및 색 깊이를 포함하는 것이 유용하지만 궁극적으로 파일 이름을 바꿔야 할 수 있습니다.

5단계: .ico 파일 만들기

  • 아티스트의 요구 사항과 기술을 가장 잘 충족하는 애플리케이션을 선택합니다. 배송 제품에 사용할 아이콘은 구매하거나 라이선스가 부여된 도구에서 만들어야 합니다. 즉, 평가판 버전을 사용할 수 없습니다.
  • 아래에 나열된 두 제품은 모두 Windows Vista용 아이콘을 생성한 디자이너가 사용했으며 각각 Adobe Photoshop CS로 내보낼 수 있는 기능을 제공합니다.
    • 가마니 Gif 무비 기어: .ico 파일 생성
    • Axialis 아이콘 워크샵: .ico 파일 생성
  • Visual Studio는 Windows Vista 아이콘을 지원하지 않으므로(알파 채널 또는 256개 이상의 색에 대한 지원이 없음) 사용하지 않는 것이 좋습니다.
  • 아이콘(.ico 형식) 파일에는 4비트 및 8비트 버전과 24비트 + 알파가 포함되어야 합니다.
  • 어떤 아이콘 만들기 프로그램을 사용하든 파일을 "Windows 아이콘(.ico)"으로 저장합니다.
  • 일부 아이콘 자산은 실제로 비트맵 스트립일 수 있으며, 알파 채널(예: 도구 모음) 또는 투명도로 저장된 .png 파일이 필요할 수도 있습니다. 모든 형식이 반드시 .ico 형식인 것은 아닙니다. 코드에서 지원되는 형식에 대한 검사.

6단계: 평가

  • 모든 크기를 살펴봅니다.
  • 가족을 함께 살펴보고 가족의 유사성, 광학 균형 및 구별을 평가합니다.
  • 컨텍스트에서 상대 가중치 및 가시성을 평가합니다(지배하지 않는지 확인).
  • 지금 사용되지 않을 수도 있지만 가까운 장래에 있을 수 있는 사례를 고려합니다. 이 아이콘에 주석을 추가하거나 오버레이를 사용할 수 있나요?
  • 코드에서 살펴보세요.

목록 보기, 도구 모음 및 트리 뷰 컨텍스트의 아이콘

목록 보기

  • Windows Vista의 경우 사용자가 찾고 있는 파일을 직접 인식할 수 있도록 작은 규모로 시각적으로 고유한 콘텐츠를 보유하는 파일에 미리 보기 를 사용합니다. (이를 위해 Windows 미리 보기 애플리케이션 프로그래밍 인터페이스를 사용합니다.)

    폴더 아이콘이 있는 Windows 탐색기의 스크린샷

  • 썸네일의 애플리케이션 아이콘 오버레이(여기에 표시되지 않음)는 파일의 미리 보기를 표시하는 것 외에도 파일 형식에 대한 애플리케이션과의 연결을 지원합니다.

참고: 시각적으로 고유한 콘텐츠가 없는 파일의 경우 썸네일을 사용하지 마세요. 대신 개체 표현과 연결된 애플리케이션 또는 형식을 보여 주는 기존 기호 파일 아이콘을 사용합니다.

도구 모음

  • 도구 모음에 표시되는 아이콘의 크기, 색 및 복잡성에 광학 균형이 있어야 합니다.
  • 원치 않는 지배 또는 불균형을 방지하기 위해 상황별 스크린샷에서 잠재적 아이콘을 테스트합니다.
  • 스크린샷에서 테스트하면 코드에서 비용이 많이 드는 반복을 쉽게 방지할 수 있습니다.
  • 코드의 아이콘도 검토합니다. 동작 및 기타 요인은 아이콘의 성공에 영향을 미칠 수 있습니다. 경우에 따라 추가 반복이 필요할 수 있습니다.

작은 아이콘과 레이블이 있는 도구 모음의 스크린샷

위의 예제에서 광학 균형은 아직 달성되지 않았습니다.

다른 배경의 아이콘 그림

컨텍스트에서 반복을 시도합니다.

트리 보기

  • 트리 뷰 컨트롤에서 계층 구조를 유지하려면 광학 균형이 필요합니다.
  • 따라서 이 컨텍스트에서 일반적으로 사용되는 아이콘은 여기서 평가되어야 합니다. 경우에 따라 특정 16x16 아이콘의 모양이 다른 아이콘보다 광학적으로 우위를 점하기 때문에 더 작게 만들어야 합니다.
  • 광학 불균형에 대한 보상은 최고 품질의 아이콘을 생성하는 데 중요한 부분입니다.

트리 뷰의 두 폴더 집합 그림