设计稿复古风格做旧效果怎么做

本文目录导读：

1. 核心思路：做旧设计的五大要素
2. 软件实操（以 Photoshop 为例）
3. 网页/UI 设计（CSS 代码实现）
4. 常用的素材与工具
5. 工作流程建议（快速上手版）
6. 总结要点

设计稿要做出复古、做旧的效果，核心思路是打破完美感，模拟出时间、磨损、印刷工艺误差带来的痕迹，以下是几种不同场景下的实用方法，从图像处理到样式代码都有涵盖。

核心思路：做旧设计的五大要素

1. 色彩褪色：饱和度降低，明度提高（偏黄、偏灰）。
2. 质感粗糙：添加纸张纹理、噪点、颗粒感。
3. 边缘破损：模拟摩擦、撕裂、水渍造成的边缘不完整。
4. 光影不匀：印刷颜色偏移、墨水洇开、光照不均。
5. 元素瑕疵：划痕、污渍、折痕、锈迹。

软件实操（以 Photoshop 为例）

这是最直接、效果最好的方法，推荐使用非破坏性编辑（智能对象、调整图层）。

色彩与色调调整（奠定基调）

• 目标：让颜色看起来像褪色或旧印刷品。
• 方法：
  • 曲线/色阶：将 RGB 通道的暗部提亮（让黑色变灰），亮部压暗（降低对比度）。
  • 色彩平衡：阴影部分增加黄色/红色，高光部分增加蓝色（模拟日晒褪色）。
  • 可选颜色：降低红色、黄色、青色中的黑色。
  • 快速技巧：新建 纯色 调整图层，填充米黄/浅咖啡色，混合模式改为 柔光 或 颜色，透明度 20-50%。

纹理叠加（核心质感）

• 目标：增加纸张、布纹、颗粒感。
• 素材：搜索 “Paper Texture”、“Grain Texture”、“Film Grain” 免费素材。
• 方法：
  • 将纹理图片拖入设计稿上方。
  • 混合模式：正片叠底（让亮部变脏）或 叠加/柔光（增加质感，保留色彩）。
  • 调整：适当降低透明度，或用 色阶 调整纹理的强度。

边缘与破损效果

• 方法A（最快）：图层蒙版 + 画笔，选择 喷溅 或 干画笔 笔刷，用黑色在蒙版上涂抹边缘，制造不规则破损。
• 方法B（自然）：使用 “镜头校正” 滤镜中添加 “晕影”（数量负值），让四周变暗，模拟老照片边缘。
• 方法C（物理感）：添加 橡皮擦 图层蒙版，用粗糙的橡皮擦擦掉一些边角。

印刷瑕疵模拟

• 套色不准：复制主体图层，进入 图层样式 - 通道（RGB），勾选其中一个通道并微移（如 R-1，G+1），产生彩色重影。
• 油墨洇开：对文字层使用 滤镜 > 模糊 > 高斯模糊（1-2px），然后调整 混合模式 或 填充 降低不透明度。
• 划痕/污渍：使用 画笔 工具，选小尺寸白色或灰色，在轻触模式下手动添加划痕。

网页/UI 设计（CSS 代码实现）

前端实现可以借助 CSS 滤镜、渐变、混合模式等。

/* 整体容器 */
.vintage-card {
  background: #e8dcca; /* 复古米黄底色 */
  padding: 40px;
  position: relative;
  overflow: hidden;
  /* 1. 基本色调与褪色效果 */
  filter: sepia(60%) saturate(60%) brightness(90%) contrast(85%);
  border: 1px solid #8b7355; /* 旧纸张边缘色 */
  box-shadow: 
    inset 0 0 20px rgba(0,0,0,0.1),  /* 内阴影模拟陈旧 */
    5px 5px 15px rgba(0,0,0,0.2);   /* 外阴影 */
}
/* 2. 纹理叠加：伪元素 */
.vintage-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    /* 模拟纸张纹理网格 */
    linear-gradient(0deg, transparent 44%, rgba(139, 90, 43, 0.05) 45%, transparent 55%),
    linear-gradient(90deg, transparent 44%, rgba(139, 90, 43, 0.05) 45%, transparent 55%);
  background-size: 4px 4px; /* 微小的纹理粒度 */
  pointer-events: none;
  mix-blend-mode: multiply; /* 让纹理融入背景 */
  opacity: 0.5;
}
/* 3. 噪点颗粒感 */
.vintage-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('data:image/svg+xml,...'); /* 可以使用SVG噪点或简单的CSS噪点 */
  opacity: 0.15;
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* 4. 边缘破损效果（示例：右侧磨损） */
.vintage-card .content {
  position: relative;
  z-index: 1;
  /* 或者使用 clip-path 裁剪不规则形状 */
}
/* 5. 字体复古 */
.vintage-font {
  font-family: 'Courier New', monospace; /* 或 Serif */
  color: #3e2a10;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

常用的素材与工具

工作流程建议（快速上手版）

1. 准备基底：新建一个米黄色或浅灰绿色的画布。
2. 叠加纹理：拖入你最喜欢的纸张纹理图片，混合模式设 正片叠底，透明度 70%。
3. 处理主体：将你的设计内容（图形、文字）放上去，对主体图层使用：
   • 滤镜 -> 杂色 -> 添加杂色 (少量 1-3%)。
   • 滤镜 -> 模糊 -> 高斯模糊 (0.5px，模拟失焦)。
4. 色彩修正：添加 色相/饱和度 调整图层，降低饱和度 20-30%。
5. 增加瑕疵：在蒙版上用粗糙笔刷刷掉一些边缘，或用 渐变工具 做一个Vignette暗角。
6. 收尾：在最上层添加一个 纯色 图层，填充橘黄色，混合模式 柔光，透明度 10%，统一色调。

总结要点

• 不要过度：做旧是锦上添花，保留关键信息可读性。
• 统一逻辑：色彩褪色、纹理叠加、边缘破损要服务于同一个“年代感”设定（比如1930s报纸 vs 1970s海报）。
• 分层处理：使用调整图层、滤镜和蒙版，方便随时修改。

根据你的设计稿具体是海报印刷品还是网页界面，选择 Photoshop 的前期处理，或是 CSS 的后期渲染，两者原理相同，如果需要更具体的参数或案例，可以再告诉我。

标签： 复古做旧