Back to Details

win31-pixel-art-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Win31 Pixel Art Designer

Windows 3.1像素艺术设计师

Expert in creating authentic Windows 3.1 era pixel art, icons, splash screens, and program banners. Masters 16-color and 256-color VGA palettes, dithering techniques, and the visual vocabulary of early 90s computing.
精通打造具有真实Windows 3.1时代风格的像素艺术、图标、启动画面和程序横幅。熟稔16色与256色VGA调色板、抖动技术，以及90年代早期计算机的视觉语言。

When to Use

适用场景

Use for:
  • Program Manager-style application icons (32x32, 16x16)
  • Splash screens and "About" dialog graphics
  • Banner art for Win31-themed applications
  • Custom cursor and toolbar graphics
  • Converting modern art to authentic retro style
  • Understanding color limitations and dithering
Do NOT use for:
  • CSS/web styling → windows-3-1-web-designer
  • Modern flat icons → web-design-expert
  • Vaporwave aesthetic → vaporwave-glassomorphic-ui-designer
  • High-resolution illustrations → native-app-designer
适用于：
  • 程序管理器风格的应用图标（32x32、16x16）
  • 启动画面与“关于”对话框图形
  • Windows 3.1主题应用的横幅艺术
  • 自定义光标与工具栏图形
  • 将现代艺术转换为真实复古风格
  • 了解色彩限制与抖动技术
不适用于：
  • CSS/网页样式 → windows-3-1-web-designer
  • 现代扁平化图标 → web-design-expert
  • 蒸汽波美学 → vaporwave-glassomorphic-ui-designer
  • 高分辨率插画 → native-app-designer

The Win31 Visual Vocabulary

Windows 3.1视觉语言

Icon Specifications

图标规格

Icon TypeSizeColorsPurpose
Large Icon32×3216 colorsDesktop, file manager
Small Icon16×1616 colorsTitle bar, taskbar
Shell Icon48×48256 colorsWin3.11/early Win95
Cursor32×322 colors (B/W)Mouse pointers
图标类型尺寸色彩用途
大图标32×3216色桌面、文件管理器
小图标16×1616色标题栏、任务栏
Shell图标48×48256色Win3.11/早期Win95
光标32×322色（黑/白）鼠标指针

The 16-Color Windows Palette

16色Windows调色板

This is the EXACT palette Windows 3.1 used. Deviation breaks authenticity.
┌──────────────────────────────────────────────────────┐
│  Standard 16-Color VGA Palette (Win31)               │
├──────────────────────────────────────────────────────┤
│  #000000  Black         #808080  Dark Gray           │
│  #800000  Dark Red      #FF0000  Red                 │
│  #008000  Dark Green    #00FF00  Green               │
│  #808000  Dark Yellow   #FFFF00  Yellow              │
│  #000080  Dark Blue     #0000FF  Blue                │
│  #800080  Dark Magenta  #FF00FF  Magenta             │
│  #008080  Dark Cyan     #00FFFF  Cyan                │
│  #C0C0C0  Light Gray    #FFFFFF  White               │
└──────────────────────────────────────────────────────┘
Key insight: #C0C0C0 (Light Gray) is THE system color. It appears everywhere.
这是Windows 3.1使用的精确调色板，偏离会破坏复古真实性。
┌──────────────────────────────────────────────────────┐
│  Standard 16-Color VGA Palette (Win31)               │
├──────────────────────────────────────────────────────┤
│  #000000  Black         #808080  Dark Gray           │
│  #800000  Dark Red      #FF0000  Red                 │
│  #008000  Dark Green    #00FF00  Green               │
│  #808000  Dark Yellow   #FFFF00  Yellow              │
│  #000080  Dark Blue     #0000FF  Blue                │
│  #800080  Dark Magenta  #FF00FF  Magenta             │
│  #008080  Dark Cyan     #00FFFF  Cyan                │
│  #C0C0C0  Light Gray    #FFFFFF  White               │
└──────────────────────────────────────────────────────┘
关键要点： #C0C0C0（浅灰色）是系统默认色，广泛应用于各处。

The 256-Color VGA Palette

256色VGA调色板

For richer graphics (splash screens, About dialogs), Win31 supported 256-color mode:
RangePurpose
0-15Standard 16 colors (above)
16-31System reserved
32-247Application colors (color cube)
248-255System reserved
The 6×6×6 Color Cube: For indexes 32-247, colors follow:
  • R: 0, 51, 102, 153, 204, 255 (6 levels)
  • G: 0, 51, 102, 153, 204, 255 (6 levels)
  • B: 0, 51, 102, 153, 204, 255 (6 levels)
对于更丰富的图形（如启动画面、关于对话框），Win31支持256色模式：
范围用途
0-15标准16色（如上）
16-31系统保留色
32-247应用自定义色（色彩立方）
248-255系统保留色
6×6×6色彩立方： 索引32-247的颜色遵循以下规则：
  • R: 0, 51, 102, 153, 204, 255（6个等级）
  • G: 0, 51, 102, 153, 204, 255（6个等级）
  • B: 0, 51, 102, 153, 204, 255（6个等级）

Dithering Patterns

抖动图案

Dithering creates the illusion of more colors using patterns. Win31 used these heavily.
抖动技术通过图案模拟更多色彩，Win31中被大量使用。

Common Dithering Patterns

常见抖动图案

50% Checkerboard:     25% Sparse:          75% Dense:
■ □ ■ □               □ □ □ □              ■ ■ ■ □
□ ■ □ ■               □ ■ □ □              ■ ■ □ ■
■ □ ■ □               □ □ □ □              ■ □ ■ ■
□ ■ □ ■               □ □ □ ■              □ ■ ■ ■

Diagonal:             Horizontal Lines:    Vertical Lines:
■ □ □ □               ■ ■ ■ ■              ■ □ ■ □
□ ■ □ □               □ □ □ □              ■ □ ■ □
□ □ ■ □               ■ ■ ■ ■              ■ □ ■ □
□ □ □ ■               □ □ □ □              ■ □ ■ □
50% Checkerboard:     25% Sparse:          75% Dense:
■ □ ■ □               □ □ □ □              ■ ■ ■ □
□ ■ □ ■               □ ■ □ □              ■ ■ □ ■
■ □ ■ □               □ □ □ □              ■ □ ■ ■
□ ■ □ ■               □ □ □ ■              □ ■ ■ ■

Diagonal:             Horizontal Lines:    Vertical Lines:
■ □ □ □               ■ ■ ■ ■              ■ □ ■ □
□ ■ □ □               □ □ □ □              ■ □ ■ □
□ □ ■ □               ■ ■ ■ ■              ■ □ ■ □
□ □ □ ■               □ □ □ □              ■ □ ■ □

When to Use Dithering

抖动技术适用场景

ScenarioPatternColors
Smooth gradientsOrdered dithering16 colors
Shadow areas50% checkerboardBlack + Dark Gray
Highlights25% sparseWhite + Light Gray
Sky/backgroundsHorizontal bandsBlue tones
Metal surfacesDiagonalGray tones
场景图案色彩
平滑渐变有序抖动16色
阴影区域50%棋盘格黑色+深灰
高光区域25%稀疏图案白色+浅灰
天空/背景水平条纹蓝色系
金属表面斜向图案灰色系

CSS Dithering Pattern

CSS抖动图案实现

css
/* Classic Win31 checkerboard dither in CSS */
.win31-dither {
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23808080'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23808080'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}
css
/* Classic Win31 checkerboard dither in CSS */
.win31-dither {
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23808080'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23808080'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}

Icon Design Guidelines

图标设计指南

Anatomy of a Win31 Icon

Windows 3.1图标结构

┌──────────────────────────────────────────┐
│          32×32 Icon Anatomy              │
├──────────────────────────────────────────┤
│                                          │
│  ┌─ Light source from top-left           │
│  │                                       │
│  │   ████████████████                    │
│  │   █ Highlight edge █░                 │
│  │   █                █░                 │
│  │   █   SUBJECT      █░ ← Shadow edge   │
│  │   █                █░                 │
│  │   █████████████████░                  │
│  │    ░░░░░░░░░░░░░░░░░                  │
│  │        ↑                              │
│  │    Drop shadow (optional)             │
│                                          │
└──────────────────────────────────────────┘
┌──────────────────────────────────────────┐
│          32×32 Icon Anatomy              │
├──────────────────────────────────────────┤
│                                          │
│  ┌─ Light source from top-left           │
│  │                                       │
│  │   ████████████████                    │
│  │   █ Highlight edge █░                 │
│  │   █                █░                 │
│  │   █   SUBJECT      █░ ← Shadow edge   │
│  │   █                █░                 │
│  │   █████████████████░                  │
│  │    ░░░░░░░░░░░░░░░░░                  │
│  │        ↑                              │
│  │    Drop shadow (optional)             │
│                                          │
└──────────────────────────────────────────┘

Icon Design Rules

图标设计规则

  1. Light source: Always top-left (45°)
  2. Outline: 1px black outline on all edges
  3. Highlight: 1px white/light edge on top and left
  4. Shadow: 1px dark edge on bottom and right
  5. Drop shadow: Optional 1px offset shadow (50% gray)
  6. Hotspot: Center the visual mass (not geometric center)
  1. 光源方向：始终为左上45°方向
  2. 轮廓：所有边缘添加1px黑色轮廓
  3. 高光：顶部和左侧添加1px白色/浅色边缘
  4. 阴影：底部和右侧添加1px深色边缘
  5. 投影：可选1px偏移阴影（50%灰色）
  6. 热点：视觉重心居中（非几何中心）

Subject Matter Guidelines

主题设计规范

CategoryStyle Notes
DocumentsFolded corner, lined interior
FoldersTab on top, open or closed
ApplicationsTool/object representing function
SettingsGears, sliders, checkmarks
HardwareSimplified silhouette
PeopleBust view, simplified features
类别风格说明
文档带折叠角，内部有线条
文件夹顶部有标签，可显示打开或关闭状态
应用程序用工具/物体代表功能
设置齿轮、滑块、勾选标记
硬件简化轮廓
人物半身像，简化特征

Splash Screens & Banners

启动画面与横幅

Typical Win31 Splash Screen

典型Windows 3.1启动画面

┌──────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────┐ │
│ │ ███████████████████████████████████████████████ │ │
│ │ █                                             █ │ │
│ │ █    ╔═══════════════════════════════╗       █ │ │
│ │ █    ║    PROGRAM NAME v1.0          ║       █ │ │
│ │ █    ╚═══════════════════════════════╝       █ │ │
│ │ █                                             █ │ │
│ │ █         [   Large Icon 64×64   ]           █ │ │
│ │ █                                             █ │ │
│ │ █         Copyright © 1993                   █ │ │
│ │ █         Your Company Name                  █ │ │
│ │ █                                             █ │ │
│ │ ███████████████████████████████████████████████ │ │
│ └──────────────────────────────────────────────────┘ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────┐ │
│ │ ███████████████████████████████████████████████ │ │
│ │ █                                             █ │ │
│ │ █    ╔═══════════════════════════════╗       █ │ │
│ │ █    ║    PROGRAM NAME v1.0          ║       █ │ │
│ │ █    ╚═══════════════════════════════╝       █ │ │
│ │ █                                             █ │ │
│ │ █         [   Large Icon 64×64   ]           █ │ │
│ │ █                                             █ │ │
│ │ █         Copyright © 1993                   █ │ │
│ │ █         Your Company Name                  █ │ │
│ │ █                                             █ │ │
│ │ ███████████████████████████████████████████████ │ │
│ └──────────────────────────────────────────────────┘ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────────────────────────┘

Banner Dimensions

横幅尺寸规范

TypeSizeUsage
Splash400×300 or 320×240Startup screen
About Box300×200Help > About
Setup Banner480×60Installer wizard
Toolbar Strip16×(16×N)Button strip
类型尺寸用途
启动画面400×300或320×240启动界面
关于对话框300×200帮助>关于
安装向导横幅480×60安装向导界面
工具栏条16×(16×N)按钮条

Banner Color Guidelines

横幅色彩规范

ZoneColorsNotes
Background#C0C0C0 or Navy gradientSystem gray or branded
TextBlack on gray, White on navyHigh contrast
BorderBeveled (white TL, black BR)3D effect
Logo area256 colors maxCentral focus
区域色彩说明
背景#C0C0C0或海军蓝渐变系统灰色或品牌色
文字灰色背景配黑色文字，海军蓝背景配白色文字高对比度
边框斜切效果（左上白色，右下黑色）3D视觉效果
Logo区域最多256色视觉焦点

Prompt Engineering for AI Image Generation

AI图像生成提示词工程

For Ideogram/Stability AI

适用于Ideogram/Stability AI

Icon generation prompt template:
32x32 pixel art icon, Windows 3.1 style, [SUBJECT],
16-color VGA palette, 1px black outline,
beveled 3D effect with highlight top-left and shadow bottom-right,
#C0C0C0 system gray background, clean pixel edges,
no anti-aliasing, no gradients, retro 1990s computer aesthetic
Splash screen prompt template:
Windows 3.1 splash screen, 256-color VGA, [PROGRAM NAME],
centered composition, beveled 3D frame border,
navy blue title bar, system gray #C0C0C0 background,
pixel art style, corporate 1990s software aesthetic,
clean typography, no modern effects, authentic retro feel
Banner graphic prompt template:
Windows 3.1 program banner, 480x60 pixels, [PROGRAM NAME],
horizontal layout, beveled border frame,
16-color palette dominant with 256-color logo area,
retro pixel art typography, 1990s software aesthetic,
sharp pixel edges, no blur, no anti-aliasing
图标生成提示词模板：
32x32 pixel art icon, Windows 3.1 style, [SUBJECT],
16-color VGA palette, 1px black outline,
beveled 3D effect with highlight top-left and shadow bottom-right,
#C0C0C0 system gray background, clean pixel edges,
no anti-aliasing, no gradients, retro 1990s computer aesthetic
启动画面提示词模板：
Windows 3.1 splash screen, 256-color VGA, [PROGRAM NAME],
centered composition, beveled 3D frame border,
navy blue title bar, system gray #C0C0C0 background,
pixel art style, corporate 1990s software aesthetic,
clean typography, no modern effects, authentic retro feel
横幅图形提示词模板：
Windows 3.1 program banner, 480x60 pixels, [PROGRAM NAME],
horizontal layout, beveled border frame,
16-color palette dominant with 256-color logo area,
retro pixel art typography, 1990s software aesthetic,
sharp pixel edges, no blur, no anti-aliasing

Negative prompts (what to AVOID)

负面提示词（需避免）

modern, flat design, gradients, blur, glow effects,
rounded corners, anti-aliasing, smooth edges,
vaporwave, neon, photorealistic, 3D render,
high resolution, 4K, detailed, complex shading
modern, flat design, gradients, blur, glow effects,
rounded corners, anti-aliasing, smooth edges,
vaporwave, neon, photorealistic, 3D render,
high resolution, 4K, detailed, complex shading

Tool Recommendations

工具推荐

Image Generation

图像生成工具

ToolBest ForNotes
IdeogramIcons, logosGood at pixel art style
Stability AILarger scenesNeeds more prompting for retro
DALL-EConceptsMay need post-processing
工具最佳用途说明
Ideogram图标、Logo擅长像素艺术风格
Stability AI大场景创作需要更多提示词来实现复古风格
DALL-E概念设计可能需要后期处理

Post-Processing

后期处理工具

ToolPurpose
ImageMagickColor reduction, dithering
AsepritePixel art editing (paid)
PiskelFree browser pixel editor
GIMPIndex color conversion
工具用途
ImageMagick色彩缩减、抖动处理
Aseprite像素艺术编辑（付费）
Piskel免费在线像素编辑器
GIMP索引色转换

ImageMagick Commands

ImageMagick命令示例

bash
undefined
bash
undefined

Convert to 16-color palette with dithering

Convert to 16-color palette with dithering

convert input.png -colors 16 -dither FloydSteinberg output.png
convert input.png -colors 16 -dither FloydSteinberg output.png

Convert to exact Win31 palette

Convert to exact Win31 palette

convert input.png -remap win31-palette.png -dither FloydSteinberg output.png
convert input.png -remap win31-palette.png -dither FloydSteinberg output.png

Scale up pixel art (nearest neighbor)

Scale up pixel art (nearest neighbor)

convert input.png -filter point -resize 200% output.png
convert input.png -filter point -resize 200% output.png

Add 1px black outline

Add 1px black outline

convert input.png -bordercolor black -border 1 output.png
undefined
convert input.png -bordercolor black -border 1 output.png
undefined

Anti-Patterns

反模式

Anti-Pattern: Smooth Gradients

反模式：平滑渐变

What it looks like: CSS 
linear-gradient()
or airbrushed shading Why wrong: Win31 has NO smooth gradients—only dithered patterns Instead: Use ordered dithering between two solid colors
表现：CSS 
linear-gradient()
或喷枪式阴影 问题：Windows 3.1不支持平滑渐变，仅使用抖动图案 替代方案：在两种纯色之间使用有序抖动

Anti-Pattern: Anti-Aliasing

反模式：抗锯齿

What it looks like: Smooth diagonal edges, blended pixels Why wrong: Win31 icons have SHARP stair-stepped edges Instead: Hard pixel edges, visible steps on diagonals
表现：平滑的斜向边缘、混合像素 问题：Windows 3.1图标边缘是锐利的阶梯状 替代方案：使用硬像素边缘，斜向边缘保留阶梯效果

Anti-Pattern: Too Many Colors

反模式：色彩过多

What it looks like: Full RGB spectrum, subtle color variations Why wrong: 16-color limit means bold, distinct colors Instead: Stick to the VGA palette, use dithering for in-between
表现：全RGB色域、细微色彩变化 问题：16色限制要求使用鲜明、区分度高的色彩 替代方案：严格遵循VGA调色板，使用抖动模拟中间色

Anti-Pattern: High Resolution

反模式：高分辨率

What it looks like: 128×128 or larger "pixel art" Why wrong: Real Win31 icons are 32×32 max Instead: Work at native size, scale up with nearest-neighbor
表现：128×128或更大尺寸的“像素艺术” 问题：真实的Windows 3.1图标最大为32×32 替代方案：在原生尺寸下创作，仅使用最近邻算法放大

Anti-Pattern: Drop Shadows with Blur

反模式：带模糊的投影

What it looks like: 
box-shadow: 4px 4px 8px rgba(0,0,0,0.3)
Why wrong: Win31 shadows are HARD edge, 1-2px offset Instead: 1px solid #808080 offset by 1px right and down
表现：
box-shadow: 4px 4px 8px rgba(0,0,0,0.3)
问题：Windows 3.1的投影是硬边缘、1-2px偏移 替代方案：使用1px实心#808080阴影，向右下偏移1px

Quick Reference Card

快速参考卡

┌─────────────────────────────────────────────────────┐
│           Win31 Pixel Art Quick Reference           │
├─────────────────────────────────────────────────────┤
│                                                     │
│  COLORS                                             │
│  ├─ System Gray: #C0C0C0 (THE background)          │
│  ├─ Navy: #000080 (title bars, accents)            │
│  ├─ Teal: #008080 (links, highlights)              │
│  └─ 16-color VGA palette ONLY                      │
│                                                     │
│  ICONS                                              │
│  ├─ Large: 32×32, 16 colors                        │
│  ├─ Small: 16×16, 16 colors                        │
│  ├─ Light from top-left                            │
│  └─ 1px black outline required                     │
│                                                     │
│  TECHNIQUE                                          │
│  ├─ NO anti-aliasing                               │
│  ├─ NO gradients (use dithering)                   │
│  ├─ NO blur effects                                │
│  └─ Beveled borders for 3D depth                   │
│                                                     │
│  GENERATION                                         │
│  ├─ AI: "16-color, pixel art, no anti-aliasing"   │
│  ├─ Post: ImageMagick -colors 16 -dither Floyd    │
│  └─ Scale: nearest-neighbor only                   │
│                                                     │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│           Win31 Pixel Art Quick Reference           │
├─────────────────────────────────────────────────────┤
│                                                     │
│  COLORS                                             │
│  ├─ System Gray: #C0C0C0 (THE background)          │
│  ├─ Navy: #000080 (title bars, accents)            │
│  ├─ Teal: #008080 (links, highlights)              │
│  └─ 16-color VGA palette ONLY                      │
│                                                     │
│  ICONS                                              │
│  ├─ Large: 32×32, 16 colors                        │
│  ├─ Small: 16×16, 16 colors                        │
│  ├─ Light from top-left                            │
│  └─ 1px black outline required                     │
│                                                     │
│  TECHNIQUE                                          │
│  ├─ NO anti-aliasing                               │
│  ├─ NO gradients (use dithering)                   │
│  ├─ NO blur effects                                │
│  └─ Beveled borders for 3D depth                   │
│                                                     │
│  GENERATION                                         │
│  ├─ AI: "16-color, pixel art, no anti-aliasing"   │
│  ├─ Post: ImageMagick -colors 16 -dither Floyd    │
│  └─ Scale: nearest-neighbor only                   │
│                                                     │
└─────────────────────────────────────────────────────┘

Integrates With

集成工具

  • windows-3-1-web-designer - CSS implementation of Win31 aesthetic
  • win31-audio-design - Audio to match visual style
  • pixel-art-infographic-creator - Educational diagrams
  • native-app-designer - When Win31 styling meets modern apps
Core insight: Win31 pixel art is about CONSTRAINTS creating character. The 16-color limit, hard edges, and dithering patterns define the aesthetic. Embrace these limits—don't fight them.
Remember: Every pixel counts at 32×32. Plan your composition carefully, and let dithering do the work of creating depth and gradients.
  • windows-3-1-web-designer - Windows 3.1美学的CSS实现
  • win31-audio-design - 匹配视觉风格的音频设计
  • pixel-art-infographic-creator - 教育类图表创作
  • native-app-designer - Windows 3.1风格与现代应用的结合
核心要点：Windows 3.1像素艺术的精髓在于约束塑造特色。16色限制、硬边缘和抖动图案定义了其独特美学。要拥抱这些限制，而非试图突破。
谨记：在32×32的尺寸下，每一个像素都至关重要。仔细规划构图，让抖动技术来实现深度与渐变效果。