这种图如何制作，求指导！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3097 天前的主题，其中的信息可能已经有所发展或是发生改变。

这张图一看就是一名程序员坐在电脑前写代码，我想给自己做一张这样的，如何 ps

代码

程序员

看上去

指导

18 条回复 • 2016-06-04 19:45:05 +08:00

rekulas

2016-06-02 13:27:13 +08:00

这个主要把代码提取出来就行了我提供个简单的 idea
打开 https://ace.c9.io/build/kitchen-sink.html 选择合适的代码把你的代码复制上去去掉 Show Invisibles Show print margin 选项
打开 chrome 元素检查在 div.ace_scroller 元素 css 里添加你的照片背景图就完成了
比如这样
http://7xrn7f.com1.z0.glb.clouddn.com/16-6-2/16755937.jpg

rekulas

2016-06-02 13:30:43 +08:00

没注意到代码是翻转的，你可以在 css 加上 transform: scaleX(-1);翻转或者自己再 ps 翻转下

MikeFish

2016-06-02 13:51:28 +08:00

确实是很帅

Mutoo

2016-06-02 13:56:07 +08:00

白底 IDE 截张图，放到 PS 里面，反相，水平翻转，然后图层模式改成「滤色」放在照片上面， Done.

Mutoo

2016-06-02 14:36:55 +08:00

做了个效果，预览如下 https://www.dropbox.com/s/xhb8365hvixbpcy/code_on_picture.png?dl=0

rekulas

2016-06-02 14:46:53 +08:00

@Mutoo 这个方法确实好看点不过预览图放 dropbox 差评

Mutoo

2016-06-02 15:05:32 +08:00

@rekulas Dropbox 支持截图直接分享，习惯了。🙂🙂🙂

tanteng

2016-06-02 16:00:41 +08:00

@Mutoo 图片打不开

rekulas

2016-06-02 16:25:14 +08:00

@tanteng 转发
http://7xrn7f.com1.z0.glb.clouddn.com/16-6-2/60797055.jpg

EchoWhale

2016-06-02 17:33:35 +08:00 via Android

打不开任何一张图😂😂

hei1000

2016-06-02 17:35:09 +08:00 via Android

@EchoWhale +1

7z7

2016-06-02 18:44:44 +08:00

@rekulas 打不开的.

拒绝访问

本缓存服务器管理员： [email protected]

Via:huizhoudianxin50:4 (Cdn Cache Server V2.0)

Generated Thu, 02 Jun 2016 10:47:37 GMT by cache.51cdn.com (Cdn Cache Server V2.0)

rekulas

2016-06-02 19:42:31 +08:00

@7z7
@EchoWhale
图床挂了重来下 mutoo 的我的找不到了
http://r5.loli.io/RbM3ui.jpg
http://imgchr.com/images/unspecified.png