67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
|
---
|
|||
|
|
title: "Create Icons"
|
|||
|
|
contributor: "@semih@mitte.ai"
|
|||
|
|
tags: #general, #semihmitteai
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
A premium iOS app icon for a running and fitness app, featuring
|
|||
|
|
a stylized abstract runner figure in motion, composed of flowing
|
|||
|
|
gradient ribbons in energetic coral transitioning to vibrant
|
|||
|
|
magenta. The figure suggests speed and forward momentum with
|
|||
|
|
trailing motion elements. Background is a deep navy blue with
|
|||
|
|
subtle radial gradient lighter behind the figure. Dynamic,
|
|||
|
|
energetic, aspirational. Soft lighting with subtle glow around
|
|||
|
|
figure. Rounded square format, 1024x1024px.
|
|||
|
|
|
|||
|
|
follow the specs below and the example icon designs attached:
|
|||
|
|
|
|||
|
|
These specifications define the visual language of premium, modern app icons as seen in top-tier iOS/macOS applications. The goal is to produce icons that feel polished, memorable, and worthy of a flagship product.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. Canvas & Shape
|
|||
|
|
|
|||
|
|
### Base Shape
|
|||
|
|
- **Format:** Square with continuous rounded corners (iOS "squircle")
|
|||
|
|
- **Corner Radius:** Approximately 22-24% of icon width (mimics Apple's superellipse)
|
|||
|
|
- **Aspect Ratio:** 1:1
|
|||
|
|
- **Recommended Resolution:** 1024×1024px (scales down cleanly)
|
|||
|
|
|
|||
|
|
### Safe Zone
|
|||
|
|
- Keep primary elements within the center 80% of the canvas
|
|||
|
|
- Allow subtle effects (glows, shadows) to approach edges but not clip
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 2. Background Treatments
|
|||
|
|
|
|||
|
|
### Solid Backgrounds
|
|||
|
|
- **Dark/Black:** Pure black (#000000) to deep charcoal (#1C1C1E) — creates drama, makes elements pop
|
|||
|
|
- **Vibrant Solids:** Saturated single-color fills (electric blue #007AFF, warm orange #FF9500)
|
|||
|
|
- **Gradient Backgrounds:** Subtle top-to-bottom or radial gradients adding depth
|
|||
|
|
|
|||
|
|
### Gradient Types (when used)
|
|||
|
|
| Type | Description | Example |
|
|||
|
|
|------|-------------|---------|
|
|||
|
|
| Linear | Soft transition, typically lighter at top | Blue sky gradient |
|
|||
|
|
| Radial | Center glow effect, darker edges | Spotlight effect |
|
|||
|
|
| Angular | Sweeping color transition | Iridescent surfaces |
|
|||
|
|
|
|||
|
|
### Texture (Subtle)
|
|||
|
|
- Fine vertical/horizontal lines for metallic or fabric feel
|
|||
|
|
- Noise grain at 1-3% opacity for organic warmth
|
|||
|
|
- Avoid heavy textures that compete with the main symbol
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 3. Color Palette
|
|||
|
|
|
|||
|
|
### Primary Palette Characteristics
|
|||
|
|
- **High Saturation:** Colors are vivid but not neon
|
|||
|
|
- **Rich Darks:** Blacks and navy blues feature prominently
|
|||
|
|
- **Selective Brights:** Accent colors used sparingly for impact
|
|||
|
|
|
|||
|
|
### Recommended Color Families
|
|||
|
|
|
|||
|
|
#### Cool Spectrum
|