아이콘(디자인 기본 사항)
메모
이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙으로 적용되지만 프레젠테이션과 예제는 현재 디자인 지침을 반영하지 않습니다.
아이콘은 프로그램의 시각적 ID의 일부로 미적 이유뿐만 아니라 사용자가 거의 즉각적으로 인식하는 의미를 전달하기위한 약식으로 실용적인 이유로 중요한 개체의 그림 표현입니다. Windows Vista는 Windows에 더 높은 수준의 세부 사항과 정교함을 제공하는 새로운 도상학 스타일을 도입했습니다.
참고: 표준 아이콘과 관련된 지침은 별도의 문서에 제공됩니다.
디자인 개념
Aero는 미학 디자인에 구현된 값과 UI(사용자 인터페이스) 뒤에 있는 비전을 나타내는 Windows Vista의 사용자 환경 이름입니다. 에어로는 정통, 활기찬, 반사, 오픈을 의미합니다. Aero는 전문적이고 아름다운 디자인을 확립하는 것을 목표로합니다. 에어로 미학은 사용자 생산성을 용이하게하고 심지어 감정적 인 반응을 구동하는 고품질의 우아한 경험을 만듭니다.
Windows Vista 아이콘은 다음과 같은 방법으로 Windows XP 스타일 아이콘과 다릅니다.
- 이 스타일은 일러스트레이션보다 더 현실적이지만 광실주의적이지는 않습니다. 아이콘은 사진보다 더 잘 보이는 상징적 인 이미지입니다!
- 아이콘의 최대 크기는 256x256픽셀로, 높은 dpi(인치당 점) 디스플레이에 적합합니다. 이러한 고해상도 아이콘은 큰 아이콘이 있는 목록 보기에서 높은 시각적 품질을 허용합니다.
- 실용적이고 고정된 문서 아이콘이 콘텐츠의 썸네일로 대체되어 문서를 보다 쉽게 식별하고 찾을 수 있습니다.
- 도구 모음 아이콘은 더 작은 크기와 시각적 특징에 최적화하기 위해 세부 정보가 적고 큐브 뷰가 없습니다.
잘 디자인된 아이콘:
- 프로그램의 시각적 통신을 개선합니다.
- 프로그램의 시각적 디자인에 대한 사용자의 전반적인 인상과 적합성과 완성도에 대한 감사에 큰 영향을 줍니다.
- 프로그램, 개체 및 작업을 보다 쉽게 식별, 학습 및 찾을 수 있도록 하여 유용성을 향상시킵니다.
다음 이미지는 Windows Vista의 Aero 도상학 스타일이 Windows XP에서 사용되는 것과 다른 것을 보여 줍니다.
잠금 및 키 아이콘
Windows Vista 아이콘(왼쪽의 잠금 및 키)은 정통적이고 선명하며 상세합니다. 그리기보다는 렌더링되지만 완전히 사진화되지는 않습니다.
지구본과 나선형 전자 필기장 아이콘의
Windows Vista 아이콘(왼쪽의 두 아이콘)은 전문적이고 아름답으며 아이콘 프로덕션 품질을 향상시키는 세부 사항에 주의를 기울입니다.
전자 필기장, 잠금, 모니터 및 용지
이러한 Windows Vista 아이콘은 시각 및 세부 정보에서 광학 균형과 인식된 정확도를 표시합니다. 이렇게 하면 크거나 작거나, 가까이 있거나, 멀리서 볼 수 있습니다. 또한 이 도상학 스타일은 고해상도 화면에서 작동합니다.
무선 라우터 아이콘의
이러한 예제에서는 큐브 뷰의 3차원 개체, 전면(평면) 아이콘 및 도구 모음 아이콘을 포함하여 다양한 유형의 아이콘을 보여 줍니다.
지침
관점
Windows Vista의 아이콘은 3차원이며 큐브 뷰에서 단색 개체로 표시되거나 직선으로 표시되는 2차원 개체입니다. 문서 또는 용지 조각과 같이 파일 및 실제로 평평한 개체에 플랫 아이콘을 사용합니다.
3d 컴퓨터와 플랫 2d 용지
일반적인 3D 및 플랫 아이콘
3차원 개체는 두 개의 소실점이 있는 낮은 조감도 보기에서 볼 수 있는 단색 개체로 큐브 뷰로 표시됩니다.
큐브 뷰이미지
이 예제에서는 3D 아이콘의 일반적인 원근 및 소실점을 보여 줍니다.
크기가 작을수록 동일한 아이콘이 원근에서 직선으로 변경됩니다. 16x16 픽셀 이하의 크기로 아이콘을 직선으로 렌더링합니다(전면). 더 큰 아이콘의 경우 큐브 뷰를 사용합니다.
- 예외: 도구 모음 아이콘은 더 큰 크기에서도 항상 전면입니다.
대형 3D 컴퓨터 및 작은 2d 컴퓨터이미지
이 예제에서는 크기에 따라 동일한 아이콘이 어떻게 다르게 처리되는지 보여 집니다.
광원
- 원근 눈금 내의 개체에 대한 광원은 개체의 위쪽, 약간 앞, 약간 왼쪽에 있습니다.
- 광원은 개체 베이스의 후면과 오른쪽에 약간 있는 그림자를 캐스팅합니다.
- 모든 광선은 병렬이며 동일한 각도(예: 태양)를 따라 개체를 공격합니다. 목표는 모든 아이콘 및 스포트라이트 효과에서 균일한 조명 모양을 갖는 것입니다. 병렬 광선은 모두 길이와 밀도가 같은 그림자를 생성하여 여러 아이콘에 걸쳐 더 많은 통합을 제공합니다.
그림자
일반
그림자를 사용하여 개체를 배경에서 시각적으로 들어 올리고 3D 개체가 공간에 어색하게 떠다니는 대신 접지된 것처럼 보이게 합니다.
그림자의 불투명도 범위는 30~50%입니다. 아이콘의 모양이나 색에 따라 다른 수준의 그림자를 사용해야 하는 경우도 있습니다.
필요한 경우 깃털을 그림자를 줄여 아이콘 상자 크기로 자르지 않도록 합니다.
24x24 이하의 아이콘에는 그림자를 사용하지 마세요.
그림자가이미지
일반적인 아이콘 그림자입니다.
플랫 아이콘
- 플랫 아이콘은 일반적으로 문서나 용지와 같은 파일 아이콘 및 플랫 실제 개체에 사용됩니다.
- 플랫 아이콘 조명은 130도에서 왼쪽 위에서 온다.
- 더 작은 아이콘(예: 16x16 및 32x32)은 가독성을 위해 간소화됩니다. 그러나 아이콘 내에 리플렉션이 포함되어 있는 경우(종종 간소화됨) 꽉 끊긴 그림자가 있을 수 있습니다. 그림자 범위는 불투명도에서 30~50%입니다.
- 레이어 효과는 플랫 아이콘에 사용할 수 있지만 다른 플랫 아이콘과 비교해야 합니다. 개체의 그림자는 크기 집합 내에서 그리고 Windows Vista의 다른 아이콘과 함께 가장 잘 보이고 가장 일관된 항목에 따라 다소 달라집니다. 경우에 따라 그림자를 수정해야 할 수도 있습니다. 개체가 다른 개체 위에 놓일 때 특히 그렇습니다.
- 원하는 결과를 얻기 위해 미묘한 범위의 색을 사용할 수 있습니다. 그림자는 개체가 공간에 배치하는 데 도움이 됩니다. 색은 그림자의 인식된 무게에 영향을 줍니다. 너무 무거우면 이미지가 왜곡될 수 있습니다.
그림자가 선택된 대화 상자의
레이어 스타일 대화 상자의 그림자 옵션과 플랫 아이콘에 대한 일반적인 그림자입니다.
기본 플랫 아이콘 그림자 범위
특성 | 레인지 |
---|---|
색 |
검정 |
혼합 모드 |
곱하다 |
불투명도 |
항목의 색에 따라 22-50% |
각 |
120-130(글로벌 조명 사용) |
거리 |
3 for 256x256, 32x32의 경우 1까지 |
전파 |
0 |
크기 |
256x256의 경우 7, 32x32의 경우 2까지 |
3차원 아이콘
- 대/소문자 단위로 3D 아이콘에 대한 그림자를 만들고, 캐스트 거리 범위 내에 맞춰 완전히 투명하도록 페더링을 합니다. 그림자에 대한 공간을 허용하기 위해 필요한 전체 아이콘 크기보다 약간 작은 크기로 이미지를 만듭니다(필요한 크기). 아이콘 가장자리에서 그림자가 갑자기 끝나지 않도록 합니다.
포토샵일러스트레이션
있는 네 개체의 일러스트레이션
이러한 예제는 개체 자체의 모양과 위치를 기반으로 만든 변형을 보여 줍니다. 아이콘 상자 크기로 잘리지 않도록 그림자를 페더화하거나 줄여야 하는 경우도 있습니다.
색 및 채도
색은 일반적으로 Windows XP보다 채도가 낮습니다.
그라데이션을 사용하여 보다 사실적인 이미지를 만듭니다.
표준 아이콘에 대한 특정 색상표는 없지만 많은 컨텍스트와 테마에서 잘 작동해야 합니다. 표준 색 집합을 선호합니다. 경고 아이콘과 같은 표준 아이콘의 색을 다시 지정하지 마세요. 이는 사용자가 의미를 해석하는 기능을 방해하기 때문입니다. 자세한 지침은 색 참조하세요.
아이콘 파일은 원격 데스크톱에서 기본 설정을 지원하기 8비트 및 4비트 팔레트 버전도 필요합니다. 이러한 파일은 일괄 처리 프로세스를 통해 만들 수 있지만 일부 파일은 더 나은 가독성을 위해 수정이 필요하므로 검토해야 합니다.
색 선택 대화 상자
엄격한 색상표 제한은 없습니다. 전체 채도(오른쪽 위)만 방지합니다.
비트 수준: 32비트(알파 포함) + 8비트 + 4비트용 ICO 디자인(가장 중요한 픽셀만 자동으로 아래로 디더링됨). 256x256 픽셀 이미지의 32비트 복사본만 포함해야 하며 파일 크기를 줄이려면 256x256 픽셀 이미지만 압축해야 합니다. 여러 아이콘 도구는 Windows Vista에 대한 압축을 제공합니다.
비트 수준: 도구 모음 24비트 + 알파(1비트 마스크), 8비트 및 4비트.
도구 모음 또는 AVI 파일: 배경 투명도 색으로 magenta(R255 G0 B255)를 사용합니다.
크기 요구 사항
일반
-
주요 응용 프로그램 아이콘, Windows 탐색기에 표시할 수 있는 파일 아이콘, 시작 메뉴 또는 바탕 화면에 표시되는 아이콘과 같은 높은 가시성 아이콘에 특히 주의해야 합니다.
- 애플리케이션 아이콘 및 제어판 항목: 전체 집합에는 16x16, 32x32, 48x48 및 256x256이 포함됩니다(코드 크기는 32에서 256 사이). .ico 파일 형식이 필요합니다. 클래식 모드의 경우 전체 집합은 16x16, 24x24, 32x32, 48x48 및 64x64입니다.
- 목록 항목 아이콘 옵션: 파일 형식의 라이브 썸네일 또는 파일 아이콘 사용(예: .doc); 전체 집합입니다.
- 도구 모음 아이콘: 16x16, 24x24, 32x32 도구 모음 아이콘은 32x32 크기에서도 항상 3D가 아니라 평평합니다.
- 대화 상자 및 마법사 아이콘: 32x32 및 48x48.
- 오버레이: Core 셸 코드(예: 바로 가기) 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 크기는 여전히 널리 사용되므로 중요합니다.
이 크기의 아이콘에 있는 세부 정보에는 아이콘의 키 포인트가 명확하게 표시되어야 합니다.
아이콘이 작아지면 투명도와 더 큰 크기에서 찾은 몇 가지 특수한 세부 정보를 희생하여 점을 단순화하고 가로지르도록 해야 합니다.
특성과 색을 과장하고 키 형식을 강조하는 데 사용해야 합니다.
그림
16x16에서 휴대용 오디오 장치의 아이콘은 휴대 전화로 쉽게 오인될 수 있으므로 귀 조각은 표시할 주요 시각적 세부 정보입니다.
단순히 256x256 크기에서 축소하는 것은 작동하지 않습니다.
모든 크기에는 관련 수준의 세부 정보가 필요합니다. 아이콘이 작을수록 정의 세부 정보를 더 과장해야 합니다.
그림
있는 휴대폰 그림
아이콘 개발
아이콘 디자인 및 생성
- 숙련된 그래픽 디자이너를 고용합니다. 훌륭한 그래픽, 이미지 및 아이콘은 전문가와 함께 작동합니다. 벡터 아트 또는 3D 프로그램을 사용하는 일러스트레이션 환경이 권장됩니다.
- 초기 개념 스케치에서 컨텍스트 내 모형, 최종 프로덕션 검토 및 작업 제품의 아이콘 적합 및 완성까지 일련의 반복을 수행할 계획입니다.
- 미리 아이콘 만들기는 비용이 많이 들 수 있다고 생각합니다. 필요한 아이콘의 전체 집합과 같은 모든 기존 세부 정보 및 요구 사항을 수집합니다. 각각에 대한 기본 함수 및 의미입니다. 명확하게 표시하려는 집합의 패밀리 또는 클러스터 브랜드 요구 사항; 정확한 파일 이름; 코드에 사용되는 이미지 형식; 및 크기 요구 사항 디자이너와 함께 시간을 최대한 활용할 수 있도록 미리 확인합니다.
- 디자이너가 제품에 익숙하지 않을 수 있으므로 기능 정보, 스크린샷 및 사양 섹션을 적절하게 제공합니다.
- 지정학적 및 법적 검토를 적절하게 계획합니다.
- 시간 범위를 매핑하고 정기적인 통신을 수행합니다.
개념 스케치에서 최종 제품
휴대 전화그림
- 개념 스케치를 만듭니다.
- 다양한 크기의 개념을 사용해 보세요.
- 필요한 경우 3D로 렌더링합니다.
- 다양한 배경색에서 크기를 테스트합니다.
- 실제 UI의 컨텍스트에서 아이콘을 평가합니다.
- 최종 .ico 파일 또는 기타 그래픽 리소스 형식을 생성합니다.
도구
- 연필과 종이: 초기 개념 아이디어, 나열 및 스케치.
- 3D Studio Max: 3D 개체를 큐브 뷰로 렌더링합니다.
- Adobe Photoshop: 스케치 및 반복하고, 컨텍스트에서 모형을 만들고, 세부 정보를 마무리합니다.
- Adobe Illustrator/Macromedia Freehand: 스케치 및 반복을 세부 정보를 완료합니다.
- 가마니 Gif 무비 기어: .ico 파일을 생성합니다(필요한 경우 압축 포함).
- Axialis 아이콘 워크샵: .ico 파일을 생성합니다(필요한 경우 압축 포함).
- Microsoft Visual Studio는 Windows Vista 아이콘을 지원하지 않습니다(알파 채널 또는 256개 이상의 색은 지원되지 않음).
프로덕션
팁
다음 단계에 따라 여러 이미지 크기 및 색 깊이를 포함하는 단일 .ico 파일을 만듭니다.
1단계: 개념화
- 가능한 경우 설정된 개념을 사용하여 아이콘에 대한 의미의 일관성과 다른 용도에 대한 관련성을 보장합니다.
- 아이콘이 UI의 컨텍스트에 표시되는 방식과 아이콘 집합의 일부로 작동하는 방식을 고려합니다.
- 기존 아이콘을 수정하는 경우 복잡성을 줄일 수 있는지 여부를 고려합니다.
- 그래픽의 문화적 영향을 고려합니다. 아이콘에 문자, 단어, 손 또는 얼굴을 사용하지 마세요. 필요한 경우 사용자 또는 사용자의 표현을 가능한 한 일반적으로 표시합니다.
- 여러 개체를 아이콘의 단일 이미지로 결합하는 경우 이미지 크기를 더 작은 크기로 조정하는 방법을 고려합니다. 아이콘에 세 개 이하의 개체를 사용합니다(두 개체를 사용하는 것이 좋습니다). 16x16 크기의 경우 개체를 제거하거나 이미지를 단순화하여 인식을 개선하는 것이 좋습니다.
- 아이콘에는 Windows 플래그를 사용하지 마세요.
2단계: 설명
- Windows Aero 스타일 아이콘을 설명하려면 Macromedia Freehand 또는 Adobe Illustrator와 같은 벡터 도구를 사용합니다. 이 문서의 앞부분에서 설명한 대로 색상표 및 스타일 특성을 사용합니다.
- Freehand 또는 Illustrator를 사용하여 이미지를 보여 줍니다. 벡터 이미지를 복사하여 Adobe Photoshop에 붙여넣습니다.
- Photoshop에서 템플릿 계층을 만들고 사용하여 규제된 크기의 제곱 영역 내에서 작업이 수행되도록 합니다.
- 그림자에 대한 공간을 허용하기 위해 필요한 전체 아이콘 크기보다 조금 더 작은 크기로 이미지를 만듭니다(1이 필요한 크기).
- 디렉터리의 모든 아이콘이 일관되게 배치되도록 이미지를 사각형 아래쪽에 배치합니다. 그림자를 자르지 마십시오.
- 이미지 또는 계열에 다른 개체를 추가하는 경우 주 개체를 고정된 위치에 유지하고 사례에 따라 왼쪽 아래 또는 오른쪽 위와 같은 고정된 위치에 더 작은 크기의 플랫 이미지를 배치합니다.
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 미리 보기 애플리케이션 프로그래밍 인터페이스를 사용합니다.)
폴더 아이콘이스크린샷
썸네일의 애플리케이션 아이콘 오버레이(여기에 표시되지 않음)는 파일의 미리 보기를 표시하는 것 외에도 파일 형식에 대한 애플리케이션과의 연결을 지원합니다.
참고: 시각적으로 고유한 콘텐츠가 없는 파일의 경우 썸네일을 사용하지 마세요. 대신 개체 표현과 연결된 애플리케이션 또는 형식을 보여 주는 기존 기호 파일 아이콘을 사용합니다.
도구 모음
- 도구 모음에 표시되는 아이콘은 크기, 색 및 복잡성의 광학 균형이 있어야 합니다.
- 원치 않는 지배 또는 불균형을 방지하기 위해 상황별 스크린샷에서 잠재적 아이콘을 테스트합니다.
- 스크린샷에서 쉽게 테스트하면 코드에서 비용이 많이 드는 반복을 방지할 수 있습니다.
- 코드의 아이콘도 검토합니다. 동작 및 기타 요인은 아이콘의 성공에 영향을 미칠 수 있습니다. 경우에 따라 추가 반복이 필요할 수 있습니다.
작은 아이콘과 레이블이스크린샷
위의 예제에서 광학 균형은 아직 달성되지 않았습니다.
다른 배경그림
컨텍스트에서 반복을 시도합니다.
트리 뷰
- 트리 뷰 컨트롤에서 계층 구조를 유지하려면 광학 균형이 필요합니다.
- 따라서 이 컨텍스트에서 일반적으로 사용되는 아이콘은 여기서 평가되어야 합니다. 경우에 따라 특정 16x16 아이콘은 모양이 다른 아이콘보다 광학적으로 우위를 점하기 때문에 더 작게 만들어야 합니다.
- 광학 불균형에 대한 보상은 최고 품질의 아이콘을 생성하는 데 중요한 부분입니다.
트리 뷰그림