liquidliang
a4ca6ca6ee
- Updated project references across various files to reflect the new name "Opentu" instead of "Aitu". - Adjusted ESLint configuration, documentation, and user manuals to ensure consistency with the rebranding. - Removed outdated README backup file. This change marks a significant rebranding effort to align the project identity with its new vision.
312 lines
10 KiB
Markdown
312 lines
10 KiB
Markdown
# opentu (开图) Logo 设计概念
|
|
|
|
## 🎨 设计理念
|
|
|
|
**核心概念**: 智慧之眼 - 结合AI芯片几何图案的视觉符号
|
|
**设计元素**: 眼睛 + AI芯片 + 像素粒子 + 渐变流动
|
|
|
|
## 💎 主Logo概念设计
|
|
|
|
### 概念1: 智慧之眼（推荐）
|
|
|
|
```svg
|
|
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 外围眼形轮廓 -->
|
|
<path d="M40 20C55 20 70 35 75 40C70 45 55 60 40 60C25 60 10 45 5 40C10 35 25 20 40 20Z"
|
|
fill="url(#gradient1)" opacity="0.1"/>
|
|
|
|
<!-- 主眼球 -->
|
|
<circle cx="40" cy="40" r="18" fill="url(#gradient2)"/>
|
|
|
|
<!-- AI芯片图案瞳孔 -->
|
|
<rect x="35" y="35" width="10" height="10" fill="white" rx="1"/>
|
|
<rect x="37" y="37" width="6" height="6" fill="url(#gradient3)" rx="0.5"/>
|
|
|
|
<!-- 电路线条 -->
|
|
<path d="M32 32L28 28M48 32L52 28M32 48L28 52M48 48L52 52"
|
|
stroke="white" stroke-width="1.5" opacity="0.6"/>
|
|
|
|
<!-- 像素粒子装饰 -->
|
|
<rect x="15" y="25" width="2" height="2" fill="#FD79A8" opacity="0.8"/>
|
|
<rect x="63" y="35" width="2" height="2" fill="#A29BFE" opacity="0.8"/>
|
|
<rect x="20" y="55" width="2" height="2" fill="#6C5CE7" opacity="0.8"/>
|
|
<rect x="58" y="50" width="2" height="2" fill="#FD79A8" opacity="0.8"/>
|
|
|
|
<!-- 渐变定义 -->
|
|
<defs>
|
|
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#6C5CE7"/>
|
|
<stop offset="100%" style="stop-color:#FD79A8"/>
|
|
</linearGradient>
|
|
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#6C5CE7"/>
|
|
<stop offset="50%" style="stop-color:#A29BFE"/>
|
|
<stop offset="100%" style="stop-color:#FD79A8"/>
|
|
</linearGradient>
|
|
<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#6C5CE7"/>
|
|
<stop offset="100%" style="stop-color:#5A4FCF"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
```
|
|
|
|
### 概念2: 抽象几何（备选）
|
|
|
|
```svg
|
|
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- V形状基础 -->
|
|
<path d="M20 20L40 60L60 20" stroke="url(#grad1)" stroke-width="8" fill="none" stroke-linecap="round"/>
|
|
|
|
<!-- A形状融合 -->
|
|
<path d="M25 45L35 25L45 45" stroke="url(#grad2)" stroke-width="4" fill="none" stroke-linecap="round"/>
|
|
|
|
<!-- 像素点装饰 -->
|
|
<circle cx="30" cy="35" r="3" fill="#FD79A8"/>
|
|
<circle cx="50" cy="35" r="3" fill="#A29BFE"/>
|
|
<circle cx="40" cy="50" r="3" fill="#6C5CE7"/>
|
|
|
|
<defs>
|
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#6C5CE7"/>
|
|
<stop offset="100%" style="stop-color:#FD79A8"/>
|
|
</linearGradient>
|
|
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#A29BFE"/>
|
|
<stop offset="100%" style="stop-color:#6C5CE7"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
```
|
|
|
|
## 📝 完整Logo组合
|
|
|
|
### 水平版本
|
|
|
|
```svg
|
|
<svg width="200" height="60" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Logo图标部分 -->
|
|
<g transform="translate(10, 10)">
|
|
<!-- 简化的眼形图标 -->
|
|
<ellipse cx="20" cy="20" rx="18" ry="12" fill="url(#logoGrad)" opacity="0.15"/>
|
|
<circle cx="20" cy="20" r="10" fill="url(#logoGrad)"/>
|
|
<rect x="17" y="17" width="6" height="6" fill="white" rx="1"/>
|
|
<rect x="18" y="18" width="4" height="4" fill="#5A4FCF" rx="0.5"/>
|
|
</g>
|
|
|
|
<!-- 文字部分 -->
|
|
<text x="60" y="25" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="url(#textGrad)">
|
|
Visu
|
|
</text>
|
|
<text x="60" y="42" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="url(#textGrad)">
|
|
AI
|
|
</text>
|
|
|
|
<defs>
|
|
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#6C5CE7"/>
|
|
<stop offset="50%" style="stop-color:#A29BFE"/>
|
|
<stop offset="100%" style="stop-color:#FD79A8"/>
|
|
</linearGradient>
|
|
<linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#6C5CE7"/>
|
|
<stop offset="100%" style="stop-color:#5A4FCF"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
```
|
|
|
|
## 🎯 应用场景展示
|
|
|
|
### Favicon (16x16)
|
|
|
|
```svg
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="8" cy="8" r="6" fill="url(#fav)"/>
|
|
<rect x="6" y="6" width="4" height="4" fill="white" rx="0.5"/>
|
|
<rect x="7" y="7" width="2" height="2" fill="#5A4FCF" rx="0.2"/>
|
|
|
|
<defs>
|
|
<linearGradient id="fav" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#6C5CE7"/>
|
|
<stop offset="100%" style="stop-color:#FD79A8"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
```
|
|
|
|
### 移动端图标 (1024x1024概念)
|
|
|
|
```svg
|
|
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 圆角背景 -->
|
|
<rect width="120" height="120" rx="26" fill="url(#appBg)"/>
|
|
|
|
<!-- 主图标 -->
|
|
<g transform="translate(30, 30)">
|
|
<!-- 外围光晕 -->
|
|
<ellipse cx="30" cy="30" rx="28" ry="18" fill="url(#glow)" opacity="0.2"/>
|
|
<!-- 主眼球 -->
|
|
<circle cx="30" cy="30" r="20" fill="url(#mainEye)"/>
|
|
<!-- AI芯片瞳孔 -->
|
|
<rect x="25" y="25" width="10" height="10" fill="white" rx="2"/>
|
|
<rect x="27" y="27" width="6" height="6" fill="url(#chip)" rx="1"/>
|
|
<!-- 电路装饰 -->
|
|
<path d="M15 15L12 12M45 15L48 12M15 45L12 48M45 45L48 48"
|
|
stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
|
</g>
|
|
|
|
<!-- 像素粒子 -->
|
|
<rect x="20" y="25" width="3" height="3" fill="#FD79A8" opacity="0.8" rx="1"/>
|
|
<rect x="97" y="40" width="3" height="3" fill="#A29BFE" opacity="0.8" rx="1"/>
|
|
<rect x="25" y="85" width="3" height="3" fill="#6C5CE7" opacity="0.8" rx="1"/>
|
|
<rect x="90" y="75" width="3" height="3" fill="#FD79A8" opacity="0.8" rx="1"/>
|
|
|
|
<defs>
|
|
<linearGradient id="appBg" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#8B7EE8"/>
|
|
<stop offset="50%" style="stop-color:#6C5CE7"/>
|
|
<stop offset="100%" style="stop-color:#5A4FCF"/>
|
|
</linearGradient>
|
|
<linearGradient id="glow" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#FFFFFF"/>
|
|
<stop offset="100%" style="stop-color:#FD79A8"/>
|
|
</linearGradient>
|
|
<linearGradient id="mainEye" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#FFFFFF"/>
|
|
<stop offset="30%" style="stop-color:#F8F9FF"/>
|
|
<stop offset="70%" style="stop-color:#A29BFE"/>
|
|
<stop offset="100%" style="stop-color:#6C5CE7"/>
|
|
</linearGradient>
|
|
<linearGradient id="chip" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#6C5CE7"/>
|
|
<stop offset="100%" style="stop-color:#5A4FCF"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
```
|
|
|
|
## 🎪 动态效果概念
|
|
|
|
### CSS 动画示例
|
|
|
|
```css
|
|
/* Logo呼吸效果 */
|
|
@keyframes logoBreath {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
opacity: 0.95;
|
|
}
|
|
}
|
|
|
|
.logo-animated {
|
|
animation: logoBreath 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* 像素粒子浮动 */
|
|
@keyframes pixelFloat {
|
|
0%, 100% {
|
|
transform: translateY(0px) rotate(0deg);
|
|
}
|
|
33% {
|
|
transform: translateY(-3px) rotate(120deg);
|
|
}
|
|
66% {
|
|
transform: translateY(2px) rotate(240deg);
|
|
}
|
|
}
|
|
|
|
.pixel-particle {
|
|
animation: pixelFloat 4s ease-in-out infinite;
|
|
animation-delay: var(--delay, 0s);
|
|
}
|
|
|
|
/* 渐变色彩流动 */
|
|
@keyframes gradientShift {
|
|
0% {
|
|
background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 50%, #FD79A8 100%);
|
|
}
|
|
50% {
|
|
background: linear-gradient(135deg, #FD79A8 0%, #6C5CE7 50%, #A29BFE 100%);
|
|
}
|
|
100% {
|
|
background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 50%, #FD79A8 100%);
|
|
}
|
|
}
|
|
|
|
.gradient-animated {
|
|
animation: gradientShift 6s ease-in-out infinite;
|
|
}
|
|
```
|
|
|
|
## 📐 设计规范
|
|
|
|
### 比例关系
|
|
- **图标与文字**: 1:2.5 的宽度比例
|
|
- **内部间距**: 图标高度的 0.5 倍
|
|
- **最小尺寸**: 完整Logo最小120px宽度
|
|
- **清晰空间**: Logo周围预留Logo高度的 0.5 倍
|
|
|
|
### 颜色变体
|
|
1. **彩色版** (主要): 渐变色彩
|
|
2. **单色版** (备用): 纯白色或纯黑色
|
|
3. **反色版** (深色背景): 白色为主
|
|
4. **灰度版** (特殊场合): 中性灰色
|
|
|
|
### 禁用规范
|
|
- ❌ 不可拉伸或压缩变形
|
|
- ❌ 不可改变渐变方向
|
|
- ❌ 不可添加描边或阴影
|
|
- ❌ 不可在低对比度背景使用
|
|
- ❌ 不可将图标和文字分离超过标准距离
|
|
|
|
---
|
|
|
|
## 🛠️ 实现文件清单
|
|
|
|
### 需要制作的文件
|
|
- [ ] **logo.svg** - 完整矢量Logo
|
|
- [ ] **logo-icon.svg** - 仅图标版本
|
|
- [ ] **logo-horizontal.svg** - 水平布局版本
|
|
- [ ] **logo-monochrome.svg** - 单色版本
|
|
- [ ] **favicon.ico** - 网站图标
|
|
- [ ] **app-icon-*.png** - 各尺寸应用图标 (16px, 32px, 64px, 128px, 256px, 512px, 1024px)
|
|
- [ ] **social-preview.png** - 社交媒体分享图 (1200x630px)
|
|
|
|
### 开发集成
|
|
- [ ] 更新 React 组件中的 Logo 引用
|
|
- [ ] 替换 public 目录中的图标文件
|
|
- [ ] 更新 manifest.json 中的图标路径
|
|
- [ ] 修改 HTML head 中的 favicon 设置
|
|
- [ ] 调整 Loading 动画中的 Logo 效果
|
|
|
|
## 🎬 定制Logo设计 - 胶卷与画笔
|
|
|
|
### 创意概念 - aitu Logo
|
|
基于用户需求设计的专属Logo，结合了电影胶卷和画笔元素：
|
|
- **橙金色电影胶卷**: 飘带状设计，象征视频创作和媒体内容
|
|
- **蓝紫渐变画笔**: 专业画笔造型，代表AI绘画和创意设计
|
|
- **品牌名称**: opentu (开图) - 传递对图片创作的热爱
|
|
|
|
### SVG实现
|
|
```svg
|
|
<!-- 完整设计请参考 aitu-logo.svg 文件 -->
|
|
```
|
|
|
|
文件位置：`docs/aitu-logo.svg`
|
|
|
|
### 设计要点 (v3.0 - aitu 品牌升级)
|
|
- **橙金胶卷**: 温暖的橙金色系，体现媒体内容的丰富与活力
|
|
- **蓝紫画笔**: 科技感的蓝紫渐变，象征AI技术的专业与创新
|
|
- **玫红点缀**: 创意激情色彩，营造艺术创作的热情氛围
|
|
- **飘带动感**: 立体飘带设计，传达创作过程的流畅与自由
|
|
- **品牌名称**: "aitu"字体设计，体现"开图"的情感连接
|
|
|
|
---
|
|
|
|
*Logo设计概念 v1.0*
|
|
*创建时间: 2025-09-05* |