css部分：

html部分：

css部分：

js部分:

为了写好这篇文章, 找了很多资料, 如果对你有帮助的话, 帮忙分享一波, 支持一下, 感谢!!!

主要内容：

1、什么是赛博朋克风格

2、PS 如何做出赛博朋克风格

3、使用opencv 实现

1、什么是赛博朋克风格

根据维基百科上面的描述：赛博朋克（Cyberpunk）是反乌托邦未来主义背景中的科幻小说的一个子流派，倾向于关注“下层社会生活和高科技的结合”，以人工智能和控制论等未来主义技术和科学成就为特色，与社会崩溃、反乌托邦并列或衰退

https://en.wikipedia.org/wiki/Cyberpunk

英文原文：

Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of lowlife and high tech",[1] featuring futuristic technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with societal collapse, dystopia or decay

欣赏一下

0dba413e788fddd4ca03227144629749.jpeg

230564bb4df2ee893f30117048b478b0.jpeg

2、PS 如何做出赛博朋克风格

上面描述赛博朋克的定义，但是我们想要的是赛博朋克的风格实现，因此，需要查了一下，在利用 p 图软件（PS）中是如何实现的。

简单来说，我们需要了解赛博朋克的画风具体是什么样子的。

赛博朋克风格在视觉设计中的特点就是蓝、紫、青等冷色调为主色调，霓虹灯光感效果为辅助，故障艺术风为辅助(图像的失真、错位、破碎等) ，有时还可以加一些异常的现象比如180度翻转的建筑，还有复古风和未来风并存。

具体思路：

1、让画面呈现冷色调

2、具有对比效果的冷暖色调，颜色花哨（色相、饱和度、明亮度）

2.1 让红色更偏洋红，橙黄色都往红色靠拢，蓝色紫色都偏青

2.2 所有的颜色往洋红和青蓝色上面调

2.3 再加一层纯色滤镜，颜色选择偏紫色，介于蓝色红色之间，可以更好的平衡色彩

https://www.zhihu.com/question/269194796/answer/652003989

以上是PS 大佬的 PS 具体操作流程，翻译成自己能理解的技术方案

1、opencv 实现冷色调

2、让整体图片往一些特殊的颜色上靠

3、使用opencv 实现

首先介绍一个好用的网站：

https://www.w3schools.com/colors/colors_hsl.asp

4e4f325dfd020013b1674c44069c312d.png

可以直接通过调整HSL空间的值，来查看 RGB 色彩空间对应的值，比起放公式，会直观很多。

另外简单介绍一下，我们这里会用到的两个色彩空间，HSL 和 LAB （主要目的是为了让我们将颜色映射到目标颜色的值区间，下面会考 8e0d4c8db4ef4b7af093225966639e9f.png）

HSL 色相（Hue）、饱和度（Saturation）、亮度（Lightness）

5c8995b0956a1633656d77b1cea88512.png

LAB 亮度（L）、绿红（a）、蓝黄（b）

67e1b9ae130f6b78eb0774df3054da4a.jpeg

这里需要注意的是，很多内容都会提到这两个色彩空间，以及对应的值范围，但是在 opencv 中 会值做一些特定的映射！！！

例如，我们上面提供的工具网页 w3school ，显示的 hsl 的值范围和实际上 opencv的值范围并不一样（这里你可以试着写一个代码来验证）

h : 0 - 360 ⇒ OpenCV range = H/2 (0 >H >180)

s : 0 - 1 ⇒ OpenCV range = 255*S (0 >S >255)

l : 0 - 1 ⇒ OpenCV range = 255*l (0 >S >255)

对于 Lab 也是如此

0 >L >100⇒ OpenCV range = L*255/100 (1 >L >255)

-127 >a >127 ⇒ OpenCV range = a + 128 (1 >a >255)

-127 >b >127 ⇒ OpenCV range = b + 128 (1 >b >255)

为了更加清晰的看到不同色彩空间中，每个通道对分离并查看其对最终显示效果的贡献（以下示意图来源：https://rodrigoberriel.com/ ）

HSV（因为没有找 HSL，所以用 HSV 代替）

6c0fe5dce742f94a81bf5051fa537013.png

原始图像 (a) 及其颜色通道：色调 (b)、饱和度 (c) 和值或亮度 (d)。在第二行，每个通道分别为灰度（单通道图像）。

L*a*b or CIE Lab

cfcea0e8cd262cfb5127970d5901ab3f.png

原始图像 (a) 及其颜色通道：亮度 (b)、a 维 (c) 和 b 维 (d)。在第二行，每个通道分别为灰度（单通道图像）。

这个时候，可能会有一个疑问，这有什么用？

以 Lab 为例，可以看到：

a 维度（c图） 控制颜色的变化范围是 绿 -->红

b 维度（d图） 控制颜色的变化范围是 黄 -->蓝

对照 Lab 的色彩空间（就是那个球），以及我们目标的颜色范围（蓝、紫、青、红），那么我们只需要将对应色彩空间中的值，调整到目标颜色的范围即可实现！！！

现在梳理一下我们的目标：

1、将图片调整成冷色调、

2、可以利用 hsl 将颜色值控制在 （蓝、紫、青、红） 的区间，通过 w3schools 网站可视化，我们可以看到 （蓝、紫、青、红）的值范围是在180-360，映射到opencv中的值范围就变成了 90-180

3、同样的，利用 Lab 再次调整颜色到目标颜色的值范围（个人感觉另一个目的是通过不同色彩空间的调整让最终结果色彩更加的丰富）

效果展示 &参考资料

原图：

471d8de867d5b6222a8899896ae12cda.png

效果图：

97fb63d96600dc8050f22f8ca9286578.jpeg

看到这里的小伙伴，可以赏个三连（点赞 + 在看 + 分享），代码部分将会在下周分享出来（周末搞一波！！！7f410956447cce706344dec3863ecdb0.png）

参考资料：

https://www.jianshu.com/p/7058debaaf2f

https://en.wikipedia.org/wiki/Cyberpunk

https://www.zhihu.com/question/269194796/answer/652003989

https://blog.csdn.net/sinat_26917383/article/details/70860910

https://www.w3schools.com/colors/colors_hsl.asp

https://blog.csdn.net/lysslq2015/article/details/124987039

https://docs.microsoft.com/en-us/windows/win32/wcs/hls-color-spaces

https://blog.csdn.net/weixin_48623445/article/details/119395509

https://rodrigoberriel.com/2014/11/opencv-color-spaces-splitting-channels/

https://learnopencv.com/color-spaces-in-opencv-cpp-python/

https://github.com/howarder3/ironman2020_OpenCV_photoshop/blob/master/Day06_%E8%AA%BF%E6%95%B4%E8%89%B2%E8%AA%BF%E8%89%B2%E6%BA%AB%E7%99%BD%E5%B9%B3%E8%A1%A1_modify_color_temperature.ipynb

https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB

https://sensing.konicaminolta.asia/what-is-cie-1976-lab-color-space/

https://zhuanlan.zhihu.com/p/158524543

努力分享优质的计算机视觉相关内容，欢迎关注：

交流群

欢迎加入公众号读者群一起和同行交流，目前有美颜、三维视觉、计算摄影、检测、分割、识别、医学影像、GAN、算法竞赛等微信群

个人微信（如果没有备注不拉群！）

请注明：地区+学校/企业+研究方向+昵称

下载1：何恺明顶会分享

在「AI算法与图像处理」公众号后台回复：何恺明，即可下载。总共有6份PDF，涉及 ResNet、Mask RCNN等经典工作的总结分析

下载2：终身受益的编程指南：Google编程风格指南

在「AI算法与图像处理」公众号后台回复：c++，即可下载。历经十年考验，最权威的编程规范！

下载3 CVPR2022

在「AI算法与图像处理」公众号后台回复：CVPR，即可下载1467篇CVPR 2020论文 和 CVPR 2021 最新论文

3b888d51537972b04045fa29ea775bd4.gif

文章知识点与官方知识档案匹配

算法技能树首页概览

35848 人正在系统学习中

点击阅读全文

打开CSDN APP，看更多技术内容

unity shader 赛博朋克特效

unity shader 赛博朋克特效

最新发布 仅用CSS几步实现赛博朋克2077风格视觉效果

仅用CSS几步实现赛博朋克2077风格视觉效果 背景 文章开始之前先简单了解下什么是赛博朋克，以及什么是赛博朋克2077。 赛博朋克(Cyberpunk)是“控制论、神经机械学”与“朋克”的结合词，背景大都建立于“低端生活与高等科技的结合”，拥有先进的科学技术，再以一定程度崩坏的社会结构做对比；拥有五花八门的视觉冲击效果，如街头的霓虹灯、街排标志性广告以及高楼建筑等，通常搭配色彩是...

继续访问

python 艺术照片滤镜_Python 图像处理：滤镜之赛博朋克

赛博朋克滤镜实现Python 代码import cv2import numpy as npdef cyberpunk(image):# 反转色相image_hls = cv2.cvtColor(image, cv2.COLOR_BGR2HLS)image_hls = np.asarray(image_hls, np.float32)hue = image_hls[:, :, 0]hue[hue ...

继续访问

数字平原搭建赛博朋克风城市夜景

数字平原搭建赛博朋克风城市夜景 C4d作为一款三维制作软件，具有建模材质灯光绑定动画渲染等多样功能。这次数字平原林工将赛博朋克风格为元素，结合c4d制作赛博朋克城市作品，该作品有着概念艺术场景的设定。赛博朋克风格定义是有着摩肩接踵的高楼大厦，与破败不堪的贫民窟并存，闪烁的霓虹灯，广告牌令人眼花缭乱，还有高科技武器，MR客服，飞行的交通工具等，充满了未来感的风格。 接下来林工带来的赛博朋克城市制作过程 第一步3d建模 找到相关的建筑材料参考，在Photoshop中构建建筑的简单形状，之后.

继续访问

热门推荐 高品质后处理：十种图像模糊算法的总结与实现

本文由@浅墨_毛星云出品，转载请注明出处 CSDN版文章链接：https://qianmo.blog.csdn.net/article/details/103949788 知乎专栏版文章链接：https://zhuanlan.zhihu.com/p/125744132 后处理（Post-Processing），在图形学...

继续访问

Unity Shader 赛博朋克效果

一、效果图 1、原图 加滤镜 原理 获取颜色GRB的值，加深的数值，红色加强绿色减弱。 工程源码

继续访问

赛博朋克版特效shader

关于学习老师的有点科幻的特效小人shader的学习

继续访问

CSS特效 - 赛博朋克故障霓虹灯 clip-path 实现

实现效果 实现原理 （0） 为故障霓虹灯盒子添加before和after，两者content="赛博朋克 2077"重叠显示 （1） 字体橙色与绿色的边缘使用 box-shadow: 水平距离 垂直距离 阴影大小 颜色实现 （3） 鼠标划入触发故障动画 （4） 故障动画原理是使用 CSS3 clip-path 属性实现 clip-path 作用是指定显示区域大小 clip-path: top left bottom right（5） 当前 gif 效果是 从上到下 显示区域变化 并且 trans

继续访问

仅用 CSS 实现赛博朋克 2077 风格视觉效果

点击上方关注前端技术江湖，一起学习，天天进步作者dragonir原文链接：https://juejin.cn/post/6972759988632551460文章开始之前先简单了解下...

继续访问

使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏

声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。背景近期工作有涉及到数字大屏的需求，于是利用业余时间，结合 Three.js 和 CSS实现赛博朋克2077风格视觉效果[2] 实现炫酷 3D 数字地球大屏页面。页面使用 React + Three.js + Echarts + stylus 技术栈，本文涉及到的主要知识点包括：T...

继续访问

AE赛博朋克 超炫酷赛博朋克HUD元素动画AE特效模板素材

如果您不知道我们在说什么，只需Google下即可。这个包是初学者和专业人士的完美选择。AE模板可帮助您制作具有超酷动画形状，赛博朋克和Hitech HUD元素的视频。可以在After Effects中轻松混合，匹配和自定义所有这些模板。包含了所有创意动画视频和游戏的必备赛博朋克动作元素包。涵盖了所有类型的项目。元素动画AE特效模板素材 Cyber​​punk HUD Elements。自定义颜色以与您的项目匹配HUD元素。所有项目的可编辑且易于使用的设置。将所有元素与任何素材混合在一起。

继续访问

程序员集体换电脑？没有男生能拒绝《赛博朋克2077》!

一座五光十色的大都会权力更迭和身体改造是永恒的主题一名野心勃勃的雇佣兵正在追寻一种独一无二的植入体只要得到它，就能获得永生的关键历时8年，通往夜之城的大门终于打开。12月10日，由波兰游...

继续访问

官方配置要求_赛博朋克2077的推荐配置和最低配置

赛博朋克2077官方配置要求赛博朋克2077官方配置要求不久前赛博朋克在其官方网站发布了最新的电脑配置要求(台式机)，比以往大家所猜测的配置要求要来得低一些，下面这份赛博朋克2077官方电脑配置要求，特别要注意的其实只有两个地方，一个是CPU，一个是显卡，其他的配件基本不会造成太大影响。最低配置是什么意思？最低配置就是可以流畅玩游戏，一般是指某个特定分辨率下(1080p：1920*108...

继续访问

闲聊赛博朋克2077

为什么提笔 前一阵子入了赛博朋克2077，从序章任务的心情澎湃，到被bug折磨到痛不欲生（ps4 pro主机版本），再到最后结局的怅然若失，还是想说几句，记录一下这几天赛博朋克的时光。 闲余小思 最后的结局，我选择的是星星解决，即会和女友帕南一起，面对荒坂，离开夜之城。这应该是我最喜欢的解决了，V之所以可以是V，那么他一定不会和荒坂妥协的，而且这一定也是银手所不愿意看到的。至于为什么没有把身体交给银手，这是因为帕南爱的是V，而不是被强尼占据了身体的V。既然选择了和帕南一起面对这些，那么帕南也一定会希望从神舆

继续访问

后科技时代—赛博朋克2077

跳票多次终于还是来了，发售之日便收回成本这几乎是前无古人后无来者，这样一款现象级大作，我肯定也是忍不住滴，而且我的台式机配置还不错，一直没找到真正发挥作用的机会，终于借此机会，一赌大作风采！ 前言 由于波兰蠢驴发行游戏时并没有采取加密，也就是说作为单机游戏的《赛博朋克2077》，盗版瞬间就满天飞了，不过蠢驴貌似也是故意的，前期的宣发加自身质量注定这游戏是要大赚的，且后期的DLC也会让他们赚的盆满钵满。那不用担心收益，还需考虑什么呢？传播度！我觉得他们的目标是制作一款《GTA》级别的游戏，不仅好玩，而...

继续访问

xd羽化怎么调_【Cyberpunk】用一加轻松调出赛博朋克风XD

本帖最后由 喵灬帕斯 于 2020-11-21 20:08 编辑Cyberpunk x OnePlus.jpg (156.03 KB, 下载次数: 0)11-06 00:48 上传CYBERPUNK|赛博朋克Cyber指的是未来(Future)，是一种科技，一种秩序Punk指的是色彩(Color)，是一种自由表达，一种去追求你想做任何事的决心赛博朋克调色主基调是青蓝色和洋红色，洋红色展现的是旧时代...

继续访问

css网站新闻,5个 CSS 特效实现和发现灵感网站推荐

作者 |张旭乾 责编 | 欧阳姝黎作为一名前端工程师，经常在写完 HTML 以后，才觉得真正的噩梦要开始了，啊，写 CSS 的时候，面对满屏乱飞的组件，真想手动给他们挪到该在位置上……都说 CSS 很难掌握，最愁给页面编写样式，其实都是因为还没有形成一个对 CSS 宏观的了解，只要有了正确的学习方法、设计思维，再通过不断的积累，就能轻松的掌握它。接下来我会把掌握 CSS 的 5 个技巧...

继续访问

浅谈游戏《武士刀：零》——赛博朋克风格城市中的刀光剑影

序言 新年伊始，首先祝大家2020年身体健康，一切顺利。本次想要聊一聊的是刚刚通关不久的小品级赛博朋克风格独立游戏《武士刀：零》（KATANA:ZERO）。 赛博朋克风格与第零号武士 近年来，随着《赛博朋克2077》的发售即将到来，“赛博朋克”这一概念逐渐为大众所熟知，以“赛博朋克”为故事背景的游戏也逐渐进入玩家的视野，比如《黑色未来1988》，《VA-11 Hall-A: 赛博朋克酒保行动》，...

继续访问

算法

人工智能

python

写评论

评论

2

1

踩

分享