在之前的文章中，我需要一些电影图片来展示我的 CSS 网格布局。最简单的做法是使用真实的电影海报，但我决定玩点花样，制作一个自定义的电影合集。我去了 Blockbuster、HBO Max-Width 和 Netflix，最终得到了以下图片：
在这篇文章中，我将解释我是如何创建这个系列的，以及为什么我花了这么多时间在这上面。
银河系词汇表：这些标题是什么意思？
每个标题都指的是 CSS 或 Web 开发中的一个概念：
- 阿波罗13像素
- 像素（
px）是CSS中的长度单位。它是定义文本、边框和间距等固定大小的常用方法。- 蒂芙尼的突破点
- 断点是指网站布局发生变化的屏幕宽度——例如，当网站从手机上的单列布局切换到桌面上的多列网格布局时。
- 颜色 #9D00FF
- 这是紫色的一种十六进制颜色代码。十六进制代码是CSS中定义颜色的常用方法。
- 重庆福来印刷
- Flexbox是一种布局模型，它允许元素“灵活”地伸缩——增大以填充额外的空间，或缩小以适应狭小的空间。
- 穿衬垫的魔鬼
- 内边距是指元素内部，其内容与边框之间的空间。在本例中，内边距指的是灰色边框与文本之间的间隙。
- 帝国反击战
- 块级元素是指从新行开始并占用全部可用宽度的元素，例如标题或段落。
- 滚出去
- Git是一种版本控制工具，用于跟踪源代码的更改。它是管理 Web 开发项目的行业标准。
- 网格器
- CSS Grid是一种用于按行和列排列元素的布局系统。与一维的 Flexbox 不同，Grid 专为二维布局而设计。
- 隐藏的<图形>
<figure>元素用于显示带有标题的图像，而hidden属性告诉浏览器不要在页面上渲染特定元素。- 造型师
<style>元素用于将 CSS 规则直接嵌入到 HTML 页面中。这些规则通常被称为“样式”。- 边缘
- 边距是指元素外部的空间，也就是元素与其相邻元素之间的间隙。在这个列表中，边距指的是灰色边框与其上方文本之间的间隙。
- vh 为 Vendetta
- 视口是指浏览器中网页的可见区域。vh
vh代表视口高度，其中1vh等于屏幕高度的 1%。
我对这份书单相当满意，也对我在十几个书名中融入的丰富多样性和文字游戏感到满意。
最佳双关语：选择电影片名
写出好双关语的诀窍在于多写一些，然后把不好的都扔掉。我只需要十几部电影，但我还有三十多个其他片名没用上。
如果一时想不出双关语，我就列两份清单：一份是我想戏仿的短语或词语，另一份是我想硬塞进去的词语。在这个例子中，第一份清单里有像“X战警”或“碟中谍”这样的短语，第二份清单里有像“像素” 、 “边距”和“弹性”这样的词语。
这时我就会求助于搜索引擎——我找不到其他人用过我想要的那种双关语，但我可以找到现成的、包含这些元素的列表。这次，我查阅了一些著名经典电影的列表，还阅读了一些网页开发教程和术语表。我倾向于选择热门电影，这样更多人能理解我的梗；如果用的是冷门电影，很可能就没人能get到。
在构建这两个列表的过程中，我开始发现一些关联，比如X战警可以变成“弹性战警”（Flex-Men） 。我把所有想法都记了下来，即使是不好的想法——通常一个糟糕的想法会成为好想法的起点。例如，我早期的一个想法是“通往未来的障碍”（Block to the Future ），这不太好，但后来我意识到可以用“帝国反击战障碍”（The Empire Strikes Block ）来代替，这样就好多了。
如果这只是一个纯粹的文字练习，标题就足够了——但我还需要海报。
模糊狂想曲：用原始方法制作海报
我需要一些海报来配合标题，但是用什么海报比较好呢？
我想用电影海报，因为很多电影都有标志性的海报，这有助于人们理解这个双关语——但我不想用真正的电影海报，因为它们通常会显示片名。那样会与我的文本相矛盾，而不是起到帮助作用。
但我确实有一个图像编辑器，虽然我缺乏 Photoshop 技能来逼真地替换标题，但我可以制作出眯着眼睛看也还不错的文字——这给了我一个灵感。
几年前，我使用 Michael Fogleman 的Primitive 工具制作了一些壁纸。Primitive 工具使用简单的几何形状重新绘制图像，一次添加一个形状，力求越来越接近原始图像。
举个例子，我的脸被重新绘制成了几百个三角形：
这呈现出图像的可辨识版本，但风格独特，你不会把它误认为是真品。
对于我考虑的每部电影，我都从电影数据库下载了海报，然后用Primitive软件进行模糊处理。有时，模糊处理后会露出原片名，这时我会用图像编辑器替换片名，然后再进行模糊处理。模糊处理意味着我可以进行一些粗略的编辑——例如，我不需要完全一样的字体——因为Primitive软件会模糊掉任何瑕疵。
这为我寻找双关语增添了一个新的维度——我想要的是那些在模糊处理后仍然能够辨认出的电影海报。这就排除了那些图案过于繁杂的海报，因为模糊处理后很难区分各个元素。我查阅了一些经典电影海报的列表，这些海报通常具有清晰、独特的形状，即使转换成三角形也能保持形状。
《穿普拉达的女王》堪称经典海报的典范之一。我对这部电影一无所知，但我记得那张海报上有个醒目的红色高跟鞋。用 Primitive 工具模糊处理这张海报后，它几乎立刻就能被认出来。以下是分别使用 5 个、25 个和 50 个三角形处理后的效果：
我有一整年都用Primitive模糊处理过的照片做桌面壁纸，一直想找个机会把它应用到一个更大的项目中。我对最终效果非常满意——它让我可以更好地发挥自己创作的标题，也让整个系列看起来更加协调统一。
拓宽视野：选择更多样化的选项
我挑选了十二部电影，开始撰写文章。但在截取电影列表的屏幕截图时，我发现我最初的选择并不具有代表性。这十二部电影中有十部的主要角色都是男性或几乎全是男性，而且所有主角都是白人。
我一度想忽略这个问题，因为这只是为一篇博客文章虚构的收藏，真的那么重要吗？但这样想未免太虚伪了——既然我如此用心，投入了这么多精力，那么这些收藏对我来说一定意义非凡。我想要的是更丰富、更有趣的收藏。
我找了一些以女性和非白人角色为中心的著名电影清单，并把其中一些添加到我虚构的片单中。理想情况下，我还想收录一些以酷儿或残疾人士为主角的电影，但我没找到任何一部海报经典或片名巧妙的电影。
NG镜头集锦：我没用过的电影
我制作了很多双关语和海报，其中有几张是我个人最喜欢的，我从帖子中剪了下来：
《五十度灰》变成了《五十度灰》第999部，也是我第一次考虑用十六进制代码替换颜色的电影。后来，为了创建一个更多元化的片单，我把它换成了《紫色》 ，用亮色海报替换掉原本以灰色为主的海报也很有帮助。
X战警变成了“弹性战警”（Flex-men） ，我真遗憾没能用上这个双关梗。海报也拖了后腿——原版X战警的标志非常醒目，很难更改，而且所有色彩鲜艳的X战警海报都挤满了角色，显得很杂乱。
《小鬼当家》变成了《Home Align》 ，虽然这个双关语不太巧妙，但海报依然很容易辨认。
我有充分的理由删掉它们，删掉它们之后，文章内容会更好——但也许它们会在以后的文章中再次出现。
你为什么要这样做？
为了在一篇博文中插入占位符数据而花费这么多精力，确实有点不值。但我这么做是因为觉得好玩，而且也让我更享受写作的过程。每次想到新的标题或者在截图中看到海报，我都会会心一笑。这就足够了。
正是这种有趣的细节让我喜欢拥有一个个人博客，它既不是生意，也不是收入来源。我写作是因为我喜欢它，而且因为它不是商业网站，所以我可以做出一些不合商业逻辑的决定。如果你只关心时间和金钱，那么这个副业的回报可能很低——但它带来的快乐却是无与伦比的。
[如果您的RSS阅读器中此文章的格式显示异常，请访问原文]
原文： https://alexwlchan.net/2026/parody-movie-posters/?ref=rss