百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

再也不用下载PS了!这个网页版PhotoShop,在国外火得一塌糊涂

zhezhongyun 2025-02-09 15:04 24 浏览

郭一璞 问耕 夏乙 乾明 发自 凹非寺
量子位 报道 | 公众号 QbitAI

Adobe这家公司,虽然不时搞出一些惊艳的玩意,但大家对Photoshop一直是又爱又怨:

一,软件买起来贵,还不一定天天用;

二,软件比较大,换一台电脑就很麻烦。

现在,有人把这两个问题解决了。

今天量子位推荐一款:免费、免安装、浏览器里在线直接用的Photoshop替代者,名字叫做Photopea

现在Photopea在国外正火得不行不行的。

Reddit上的点赞已经超过了41.5K,相关讨论绵延不绝;在Hacker News上也引发了不少的关注,是一个520多分的热门话题。

只要打开这个Photopea网页,你的浏览器里上就会出现一个“Photoshop”,不仅仅是像,还能完成的大部分PS功能,甚至在手机浏览器里都可以用。

消息一出,各类P图票友都兴奋了:你是电,你是光,你是最新的爱豆!

实测效果

量子位迫不及待的打开了这款在线PS的网站:https://www.photopea.com/ 。

Photopea的UI界面和PS几乎一模一样,同样的深灰色调,同样的icon排列,同样的画板,右边和PS一样有图层、操作历史工具栏,这个布局对PS用户可以说非常友好了,没有什么学习难度。

而且,除了交互类似之外,快捷键也基本一样,这对左手日常生长在键盘上的设计师来说非常友好了。

点击文件→新建,系统非常体贴的准备了各种尺寸,除了传统的A4、A5纸、iPhone尺寸,还有Instagram、Twitter、Youtube等网站的适宜尺寸,真是舒心。

下面,量子位用《硅谷》的一张主题图片,测试一下这个在线版的PS到底好不好用。

仿制图章:和PS一样好用

仿制图章是设计师们经常用的一种抹掉图片杂质的方法,重复复制图上一片区域,粘贴到杂质处,就可以盖住这些不想被人看到的内容。

我们试着用这个在线版的PS涂掉图片上推特的logo,和PS软件一样的键鼠操作,非常方便的就用白色背景盖住了推特的蓝色logo,效果清晰无杂质,好评。

污点修复画笔:生成效果完爆PS

为什么涂抹杂质要用“仿制图章”这样一个名不副实的功能呢?

其实还是因为PS自动涂抹杂质的效果差:颜色不稳定、边缘效果差、会出现奇怪的东西……总之,PS痕迹明显。

但这个在线PS工具就不一样了,选中修复区之后,它生成的图像简直满分!

看这栋楼,这些窗户,就像重新安装上去的一样,毫无违和感。

包括使用内容填充工具,效果也一样优秀。

磁性套索:不太顺畅

但是磁性套索就显得差一些了,比如我们要选中hooli的这个logo,自动磁性识别的地方其实差一点,必须手动来点选。

但问题在于,在只有一个图层的情况下,选中的区域竟然复制不出来?

我要这磁性套索有何用!

还是PS好,真香。

快速选中,居然是方的

另外,快速选中也是PS里常用的功能,不过,这个在线版PS的效果好像有点捉急。

原理上来看是合格的,但是,选中的边框竟然都是横平竖直的?

算了,还是用魔棒吧,效果看起来好的多:

吸色笔满分

选中哪个颜色就是哪个颜色,这个满分,跟PS一样好用。

橡皮擦满分

橡皮擦看起来非常正常了,满分,虽然实现这个功能……似乎有点过于入门了。

默认字体太神奇

前面这一切还都不错,但打字功能就很神奇了,字体包是预先装好的,英语当然没问题,但是它连藏语都支持,就是不支持简体汉字,量子位打出来的简体字都变成了方框。

好在你可以上传自己的字体包,得以弥补这个bug。

滤镜不输PS

这个在线PS里的滤镜也不错,虽然滤镜种类不如PS多,但效果还是杠杠滴~


最后,这个在线PS软件还可以跟正常的PS一样,导出为PNG、JPG、PSD等各种格式。

另外,还有一个完爆PS的好处是:可以在手机里用。

不过,受限于移动端的交互方式,一些需要右键选中的功能还不能用,滤镜之类的功能则反应没有电脑端快。

90后小哥的神作

所以,这到底是谁要砸Adobe的饭碗?

他,名字叫伊万(Ivan Kutskir),是一位28岁的90后(1990年11月出生在乌克兰),11岁移居到捷克共和国的首都。这么看起来,伊万也有可能站在布拉格黄昏的广场,在许愿池投下了希望……

2003年,伊万的父母给他买了人生第一台电脑。2009年,伊万入读布拉格查理大学获得学士和硕士学位。伊万热衷于理论计算机科学和人工智能。

2012年,伊万萌生了编写一个在线图像处理工具的想法。2013年Photo Pea 0.1版本上线。2014年他还在一篇博客中,叙述自己如何找到一种比Photoshop更好更快实现高斯模糊的方法。

量子位找到一个Photopea早期的页面,当时还是一个浅色的界面,已经具备了一些基本的图像编辑工具。

实际上,现在的Photopea已经更新到3.8版,这个10月21日上线的最新版本,新增加了Live Shapes等多种功能。

最新版的Photopea,代码已经有64,545行。

2013年的Photopea 0.2版,代码6,982行。

据伊万自己透露,他最初为了搭建Photopea耗费了7000小时(三年半时间,每天干5个小时)。直到现在,伊万也是自己一个人单枪匹马在搞。

他自己觉得还不错。

自从开始在页面上加广告之后,收入情况还不错,至少伊万能在布拉格过上体面的生活。当然,你也可以付费使用Photopea,一方面去掉广告,一方面也算是对他的一个支持。单用户,一个月9美元。

早在这个项目之初,伊万说过Photopea的目标不是取代Photoshop,而是让更多人能用上类似的工具。毕竟Photoshop价格不菲,但很多人每年其实只用一次,或者只偶尔使用一些简单的功能。

最后,再给一次Photopea的地址:

https://www.photopea.com/

不翻墙也能用~

伊万在Reddit上的AMA(Ask Me Anything)版块一直在和网友互动问答。

大家关心的问题很多,包括个你对这个项目的代码满意吗?是否想去重构?有没有人要收购你?你还有啥盈利的想法?下一步怎么办等等等等。

不过,也有人在讨论,这个是否存在版权问题?Adobe有没有来找你麻烦?对你抵制什么的。

小哥都给了耐心的回复。

还有人当场提起了需求。

然后……小哥就去实现了它。

这个效率,真的是太逆天了。

一时间圈粉无数,有人当场认了偶像。

有人去表示要去送钱。

有人在情急之下,爆了粗口。

甚至有人评论道“Are you…. God?”

One More Thing

除了Photopea,伊万小哥还有别的研究和作品,其中还有一些很好玩的Flash和HTML5小游戏~

量子位试玩了几个,简单,不过有些确实挺好玩。

比方有一个3D射击游戏:Dino Hunt 2

地址:

http://dinohunt2.ivank.net/

还有一个挺考验智力的连连看:Connetion

地址:

http://connection.ivank.net/

直接复制地址到浏览器就行,手机上也能玩。

应该也不用翻墙。

全集地址在此:

http://www.ivank.net/en/flash

活动策划招聘

量子位正在招聘活动策划,将负责不同领域维度的线上线下相关活动策划、执行。欢迎聪明靠谱的小伙伴加入,并希望你能有一些活动策划或运营的相关经验。相关细节,请在量子位公众号(QbitAI)对话界面,回复“招聘”两个字。

量子位 QbitAI · 头条号签约作者

?'?' ? 追踪AI技术和产品新动态

相关推荐

JavaScript中常用数据类型,你知道几个?

本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师Lison这篇文章我们了解一下JavaScript中现有的八个数据类型,当然这并不是JavaScr...

踩坑:前端的z-index 之bug一二(zh1es前端)

IE6下浮动元素bug给IE6下的一个div设置元素样式,无论z-index设置多高都不起作用。这种情况发生的条件有三个:1.父标签position属性为relative;2.问题标签无posi...

两栏布局、左边定宽200px、右边自适应如何实现?

一、两栏布局(左定宽,右自动)1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。举例:HTM...

前端代码需要这样优化才是一个标准的网站

  网站由前端和后端组成,前端呈现给用户。本文将告诉您前端页面代码的优化,当然仍然是基于seo优化的。  就前端而言,如果做伪静态处理,基本上是普通的html代码,正常情况下,这些页面内容是通过页面模...

网页设计如何自学(初学网页设计)

1在Dreamweaver中搭建不同的页面,需要掌握HTML的语句了,通过调整各项数值就可以制作出排版漂亮的页面,跟着就可以学习一些可视化设计软件。下面介绍网页设计如何自学,希望可以帮助到各位。Dre...

1、数值类型(数值类型有)

1.1数据类型概览MySQL的数据类型可划分为三大类别:数值类型:旨在存储数字(涵盖整型、浮点型、DECIMAL等)。字符串类型:主要用于存储文本(诸如CHAR、VARCHAR之类)。日期/...

网页设计的布局属性(网页设计的布局属性是什么)

布局属性是网站设计中必不可少的一个重要的环节,主要用来设置网页的元素的布局,主要有以下属性。1、float:该属性设置元素的浮动方式,可以取none,left和right等3个值,分别表示不浮动,浮在...

Grid网格布局一种更灵活、更强大的二维布局模型!

当涉及到网页布局时,display:flex;和display:grid;是两个常用的CSS属性,它们都允许创建不同类型的布局,但有着不同的用法和适用场景。使用flex布局的痛点当我们使...

React 项目实践——创建一个聊天机器人

作者:FredrikStrandOseberg转发链接:https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-react/前言...

有趣的 CSS 数学函数(css公式)

前言之前一直在玩three.js,接触了很多数学函数,用它们创造过很多特效。于是我思考:能否在CSS中也用上这些数学函数,但发现CSS目前还没有,据说以后的新规范会纳入,估计也要等很久。然...

web开发之-前端css(5)(css前端设计)

显示控制一个元素的显示方式,我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和...

2024最新升级–前端内功修炼 5大主流布局系统进阶(分享)

获课:keyouit.xyz/14642/1.前端布局的重要性及发展历程前端布局是网页设计和开发的核心技能之一,它决定了页面元素如何组织和呈现。从早期的静态布局到现代的响应式布局,前端布局技术经历了...

教你轻松制作自动换行的CSS布局,轻松应对不同设备!

在网页设计中,自动换行的CSS布局是非常常见的需求,特别是在响应式设计中。它可以让网页内容自动适应不同屏幕尺寸,保证用户在不同设备上都能够获得良好的浏览体验。本文将介绍几种制作自动换行的CSS布局的方...

晨光微语!一道 CSS 面试题,伴你静享知识治愈时光

当第一缕阳光温柔地爬上窗台,窗外的鸟鸣声清脆悦耳,空气中弥漫着清新的气息。在这宁静美好的清晨与上午时光,泡一杯热气腾腾的咖啡,找一个舒适的角落坐下。前端的小伙伴们,先把工作的疲惫和面试的焦虑放在一边,...

2023 年的响应式设计指南(什么是响应式设计优缺点)

大家好,我是Echa。如今,当大家考虑构建流畅的布局时,没有再写固定宽度和高度数值了。相反,小编今天构建的布局需要适用于几乎任何尺寸的设备。是不是不可思议,小编仍然看到网站遵循自适应设计模式,其中它有...