一璞 問(wèn)耕 夏乙 乾明 發(fā)自 凹非寺
量子位 報(bào)道 | 公眾號(hào) QbitAI

Adobe這家公司，雖然不時(shí)搞出一些驚艷的玩意，但大家對(duì)Photoshop一直是又愛(ài)又怨：

一，軟件買(mǎi)起來(lái)貴，還不一定天天用；

二，軟件比較大，換一臺(tái)電腦就很麻煩。

現(xiàn)在，有人把這兩個(gè)問(wèn)題解決了。

今天量子位推薦一款：免費(fèi)、免安裝、瀏覽器里在線(xiàn)直接用的Photoshop替代者，名字叫做Photopea。

現(xiàn)在Photopea在國(guó)外正火得不行不行的。

Reddit上的點(diǎn)贊已經(jīng)超過(guò)了41.5K，相關(guān)討論綿延不絕；在Hacker News上也引發(fā)了不少的關(guān)注，是一個(gè)520多分的熱門(mén)話(huà)題。

只要打開(kāi)這個(gè)Photopea網(wǎng)頁(yè)，你的瀏覽器里上就會(huì)出現(xiàn)一個(gè)“Photoshop”，不僅僅是像，還能完成的大部分PS功能，甚至在手機(jī)瀏覽器里都可以用。

消息一出，各類(lèi)P圖票友都興奮了：你是電，你是光，你是最新的愛(ài)豆！

實(shí)測(cè)效果

量子位迫不及待的打開(kāi)了這款在線(xiàn)PS的網(wǎng)站：https://www.photopea.com/ 。

Photopea的UI界面和PS幾乎一模一樣，同樣的深灰色調(diào)，同樣的icon排列，同樣的畫(huà)板，右邊和PS一樣有圖層、操作歷史工具欄，這個(gè)布局對(duì)PS用戶(hù)可以說(shuō)非常友好了，沒(méi)有什么學(xué)習(xí)難度。

而且，除了交互類(lèi)似之外，快捷鍵也基本一樣，這對(duì)左手日常生長(zhǎng)在鍵盤(pán)上的設(shè)計(jì)師來(lái)說(shuō)非常友好了。

點(diǎn)擊文件→新建，系統(tǒng)非常體貼的準(zhǔn)備了各種尺寸，除了傳統(tǒng)的A4、A5紙、iPhone尺寸，還有Instagram、Twitter、Youtube等網(wǎng)站的適宜尺寸，真是舒心。

下面，量子位用《硅谷》的一張主題圖片，測(cè)試一下這個(gè)在線(xiàn)版的PS到底好不好用。

仿制圖章：和PS一樣好用

仿制圖章是設(shè)計(jì)師們經(jīng)常用的一種抹掉圖片雜質(zhì)的方法，重復(fù)復(fù)制圖上一片區(qū)域，粘貼到雜質(zhì)處，就可以蓋住這些不想被人看到的內(nèi)容。

我們?cè)囍眠@個(gè)在線(xiàn)版的PS涂掉圖片上推特的logo，和PS軟件一樣的鍵鼠操作，非常方便的就用白色背景蓋住了推特的藍(lán)色logo，效果清晰無(wú)雜質(zhì)，好評(píng)。

污點(diǎn)修復(fù)畫(huà)筆：生成效果完爆PS

為什么涂抹雜質(zhì)要用“仿制圖章”這樣一個(gè)名不副實(shí)的功能呢？

其實(shí)還是因?yàn)镻S自動(dòng)涂抹雜質(zhì)的效果差：顏色不穩(wěn)定、邊緣效果差、會(huì)出現(xiàn)奇怪的東西……總之，PS痕跡明顯。

但這個(gè)在線(xiàn)PS工具就不一樣了，選中修復(fù)區(qū)之后，它生成的圖像簡(jiǎn)直滿(mǎn)分！

看這棟樓，這些窗戶(hù)，就像重新安裝上去的一樣，毫無(wú)違和感。

包括使用內(nèi)容填充工具，效果也一樣優(yōu)秀。

磁性套索：不太順暢

但是磁性套索就顯得差一些了，比如我們要選中hooli的這個(gè)logo，自動(dòng)磁性識(shí)別的地方其實(shí)差一點(diǎn)，必須手動(dòng)來(lái)點(diǎn)選。

但問(wèn)題在于，在只有一個(gè)圖層的情況下，選中的區(qū)域竟然復(fù)制不出來(lái)？

我要這磁性套索有何用！

還是PS好，真香。

快速選中，居然是方的

另外，快速選中也是PS里常用的功能，不過(guò)，這個(gè)在線(xiàn)版PS的效果好像有點(diǎn)捉急。

原理上來(lái)看是合格的，但是，選中的邊框竟然都是橫平豎直的？

算了，還是用魔棒吧，效果看起來(lái)好的多：

吸色筆滿(mǎn)分

選中哪個(gè)顏色就是哪個(gè)顏色，這個(gè)滿(mǎn)分，跟PS一樣好用。

橡皮擦滿(mǎn)分

橡皮擦看起來(lái)非常正常了，滿(mǎn)分，雖然實(shí)現(xiàn)這個(gè)功能……似乎有點(diǎn)過(guò)于入門(mén)了。

默認(rèn)字體太神奇

前面這一切還都不錯(cuò)，但打字功能就很神奇了，字體包是預(yù)先裝好的，英語(yǔ)當(dāng)然沒(méi)問(wèn)題，但是它連藏語(yǔ)都支持，就是不支持簡(jiǎn)體漢字，量子位打出來(lái)的簡(jiǎn)體字都變成了方框。

好在你可以上傳自己的字體包，得以彌補(bǔ)這個(gè)bug。

濾鏡不輸PS

這個(gè)在線(xiàn)PS里的濾鏡也不錯(cuò)，雖然濾鏡種類(lèi)不如PS多，但效果還是杠杠滴~

最后，這個(gè)在線(xiàn)PS軟件還可以跟正常的PS一樣，導(dǎo)出為PNG、JPG、PSD等各種格式。

另外，還有一個(gè)完爆PS的好處是：可以在手機(jī)里用。

不過(guò)，受限于移動(dòng)端的交互方式，一些需要右鍵選中的功能還不能用，濾鏡之類(lèi)的功能則反應(yīng)沒(méi)有電腦端快。

90后小哥的神作

所以，這到底是誰(shuí)要砸Adobe的飯碗？

他，名字叫伊萬(wàn)（Ivan Kutskir），是一位28歲的90后（1990年11月出生在烏克蘭），11歲移居到捷克共和國(guó)的首都。這么看起來(lái)，伊萬(wàn)也有可能站在布拉格黃昏的廣場(chǎng)，在許愿池投下了希望……

2003年，伊萬(wàn)的父母給他買(mǎi)了人生第一臺(tái)電腦。2009年，伊萬(wàn)入讀布拉格查理大學(xué)獲得學(xué)士和碩士學(xué)位。伊萬(wàn)熱衷于理論計(jì)算機(jī)科學(xué)和人工智能。

2012年，伊萬(wàn)萌生了編寫(xiě)一個(gè)在線(xiàn)圖像處理工具的想法。2013年P(guān)hoto Pea 0.1版本上線(xiàn)。2014年他還在一篇博客中，敘述自己如何找到一種比Photoshop更好更快實(shí)現(xiàn)高斯模糊的方法。

量子位找到一個(gè)Photopea早期的頁(yè)面，當(dāng)時(shí)還是一個(gè)淺色的界面，已經(jīng)具備了一些基本的圖像編輯工具。

實(shí)際上，現(xiàn)在的Photopea已經(jīng)更新到3.8版，這個(gè)10月21日上線(xiàn)的最新版本，新增加了Live Shapes等多種功能。

最新版的Photopea，代碼已經(jīng)有64,545行。

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

據(jù)伊萬(wàn)自己透露，他最初為了搭建Photopea耗費(fèi)了7000小時(shí)（三年半時(shí)間，每天干5個(gè)小時(shí)）。直到現(xiàn)在，伊萬(wàn)也是自己一個(gè)人單槍匹馬在搞。

他自己覺(jué)得還不錯(cuò)。

自從開(kāi)始在頁(yè)面上加廣告之后，收入情況還不錯(cuò)，至少伊萬(wàn)能在布拉格過(guò)上體面的生活。當(dāng)然，你也可以付費(fèi)使用Photopea，一方面去掉廣告，一方面也算是對(duì)他的一個(gè)支持。單用戶(hù)，一個(gè)月9美元。

早在這個(gè)項(xiàng)目之初，伊萬(wàn)說(shuō)過(guò)Photopea的目標(biāo)不是取代Photoshop，而是讓更多人能用上類(lèi)似的工具。畢竟Photoshop價(jià)格不菲，但很多人每年其實(shí)只用一次，或者只偶爾使用一些簡(jiǎn)單的功能。

最后，再給一次Photopea的地址：

https://www.photopea.com/

不翻墻也能用~

伊萬(wàn)在Reddit上的AMA（Ask Me Anything）版塊一直在和網(wǎng)友互動(dòng)問(wèn)答。

大家關(guān)心的問(wèn)題很多，包括個(gè)你對(duì)這個(gè)項(xiàng)目的代碼滿(mǎn)意嗎？是否想去重構(gòu)？有沒(méi)有人要收購(gòu)你？你還有啥盈利的想法？下一步怎么辦等等等等。

不過(guò)，也有人在討論，這個(gè)是否存在版權(quán)問(wèn)題？Adobe有沒(méi)有來(lái)找你麻煩？對(duì)你抵制什么的。

小哥都給了耐心的回復(fù)。

還有人當(dāng)場(chǎng)提起了需求。

然后……小哥就去實(shí)現(xiàn)了它。

這個(gè)效率，真的是太逆天了。

一時(shí)間圈粉無(wú)數(shù)，有人當(dāng)場(chǎng)認(rèn)了偶像。

有人去表示要去送錢(qián)。

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

甚至有人評(píng)論道“Are you…. God?”

One More Thing

除了Photopea，伊萬(wàn)小哥還有別的研究和作品，其中還有一些很好玩的Flash和HTML5小游戲~

量子位試玩了幾個(gè)，簡(jiǎn)單，不過(guò)有些確實(shí)挺好玩。

比方有一個(gè)3D射擊游戲：Dino Hunt 2

地址：

http://dinohunt2.ivank.net/

還有一個(gè)挺考驗(yàn)智力的連連看：Connetion

地址：

http://connection.ivank.net/

直接復(fù)制地址到瀏覽器就行，手機(jī)上也能玩。

應(yīng)該也不用翻墻。

全集地址在此：

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

— 完 —

活動(dòng)策劃招聘

量子位正在招聘活動(dòng)策劃，將負(fù)責(zé)不同領(lǐng)域維度的線(xiàn)上線(xiàn)下相關(guān)活動(dòng)策劃、執(zhí)行。歡迎聰明靠譜的小伙伴加入，并希望你能有一些活動(dòng)策劃或運(yùn)營(yíng)的相關(guān)經(jīng)驗(yàn)。相關(guān)細(xì)節(jié)，請(qǐng)?jiān)诹孔游还娞?hào)(QbitAI)對(duì)話(huà)界面，回復(fù)“招聘”兩個(gè)字。

量子位 QbitAI · 頭條號(hào)簽約作者

?'?' ? 追蹤AI技術(shù)和產(chǎn)品新動(dòng)態(tài)

幾年來(lái)，HTML5移動(dòng)開(kāi)發(fā)技術(shù)如此火爆，學(xué)習(xí)HTML5開(kāi)發(fā)技術(shù)的人員也是越來(lái)越多。那么我們?cè)谂嘤?xùn)學(xué)習(xí)HTML5技術(shù)時(shí)，應(yīng)該了解哪些呢?今天華清遠(yuǎn)見(jiàn)HTML5培訓(xùn)專(zhuān)家就來(lái)為大家指點(diǎn)迷津。

首先，明確HTML5是什么?

HTML5是HTML經(jīng)過(guò)第五次重大修改，用于取代1999年所制定的HTML4.01和XHTML1.0標(biāo)準(zhǔn)的HTML標(biāo)準(zhǔn)版本。HTML5的具體定義為：“萬(wàn)維網(wǎng)的核心語(yǔ)言，標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言的第五次重大修改。”

其次，明確HTML5技術(shù)特點(diǎn)

NO1.語(yǔ)義特性

HTML5賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)，更加豐富的標(biāo)簽將隨著對(duì)RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶(hù)都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。

NO2.本地存儲(chǔ)特性

基于HTML5開(kāi)發(fā)的網(wǎng)頁(yè)app擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 app Cache，以及本地存儲(chǔ)功能。

NO3.設(shè)備兼容特性

從Geolocation功能的API文檔公開(kāi)以來(lái)，HTML5為網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來(lái)了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。

NO4.連接特性

更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線(xiàn)交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-SentEvent和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶(hù)端的功能。

NO5.網(wǎng)頁(yè)多媒體特性

支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能，與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。

NO6.三維、圖形及特效特性

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶(hù)會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺(jué)效果。

NO7.性能與集成特性

沒(méi)有用戶(hù)會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過(guò)XMLHttpRequest2等技術(shù)，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。

NO8.CSS3特性

在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開(kāi)放字體格式(WOFF)也提供了更高的靈活性和控制性。

HTML5技術(shù)毋庸置疑未來(lái)將成為web前端的主流開(kāi)發(fā)技術(shù)，所以我們一定要抓住時(shí)代發(fā)展的機(jī)遇，如果對(duì)這方面感興趣趕緊學(xué)起來(lái)!!!

如果大家想要更加詳細(xì)的了解HTML5可以看下華清遠(yuǎn)見(jiàn)的官網(wǎng) http://html5.3g-edu.org/?ahbtt