[譯]Google新logo是如何縮減13000位元組的

發表於2019-05-11

原文連結:Quora
譯者:傑微刊—程慧


編者按:
有人在Quora上提問:Google的新logo是如何做到只有305位元組的?舊logo的大小有14000位元組之多。來自多倫多的UI設計師Ilya Yakubovich的回答1萬+的投票。以下是傑微刊對其回答的完整譯文。


之前的logo採用的是較為複雜的serif(襯線)字型,它只能通過貝塞爾曲線來構建。這樣的話總共會有100個錨點,結果產生的就是一個6KB(6380位元組)的檔案。而壓縮之後能達到2KB(2145位元組)。


[img=Google,Logo,設計]https://jf-bucket-public.oss-cn-qingdao.aliyuncs.com/jfperiodical/attached/image/20150907/1386345689.png[/img]



新logo是一個簡化的版本,也就是說,幾乎可以完全通過圓形和矩形來構建(小寫字母g除外)。


[img=Google,Logo,設計]https://jf-bucket-public.oss-cn-qingdao.aliyuncs.com/jfperiodical/attached/image/20150907/1917254107.png[/img]



整個logo包含:


① 10個圓形(大寫G和小寫g分別有兩個圓,兩個o分別有兩個圓,字母e有兩個圓)


② 5個矩形(大寫字母G有兩個矩形,小寫l有1個矩形,小寫e有2個矩形)

③ 1個由7個錨點構成的形狀(小寫g由上往下寫的部分)
 
雖然Google尚未釋出新版本的305位元組的logo,也不太可能在網上出現,但是我相信他們的logo會如預期一般,降至305位元組。

為了驗證這一點,我採用SVG格式試著建立了第一個字母G,結果產生的是一個302位元組的檔案(未壓縮),壓縮之後是195位元組。

下面是整個未壓縮版的繪圖過程,包括兩個圓形和兩個矩形:
?
1
2
3
4
5
6
<svgxmlns="http://www.w3.org/2000/svg"><circle r="100"cy="100"cx="100"fill="#4885ed"/><circle r="70"cy="100"cx="100"fill="#ffffff"/><rect transform="rotate(-40 166,67)"height="78"width="99"y="27"x="117"fill="#ffffff"/><rect height="30"width="88"y="87"x="111"fill="#4885ed"/></svg>

這樣就產生了下面右邊的圖形:

[img=Google,Logo,設計]https://jf-bucket-public.oss-cn-qingdao.aliyuncs.com/jfperiodical/attached/image/20150907/1330594533.png[/img] 


另外有一位使用者指出,還有一種途徑可以建立出新的logo,它是採用筆畫(stroke)的方式來完成,而非填充(fill)的方式。這也是之前的老logo沒法實現的,這種方法甚至可以帶來更小的檔案。整個logo的程式碼共290位元組:

?
1
2
3
4
5
6
7
8
9
10
<svgxmlns="SVG namespace"width="600"height="250"><g stroke-width="16"fill="none">  <path d="M173 102a51 51 0 1 1-13-30m20 37h-53"stroke="#4a87ee"/>  <circle cx="227"cy="128"r="32"stroke="#d83038"/>  <circle cx="313"cy="128"r="32"stroke="#f4c022"/>  <path d="M401 160a31 31 0 1 1 0-61m-4 0a24 29 0 1 1 0 61m26-67v79m-1-12a20 20 0 1 1-52 17"stroke="#4a87ee"/>  <path stroke="#4ab95a"d="M449 51v115"/>  <path d="M529 118a30 30 0 1 0-2 24m5-32l-62 28"stroke="#d83038"/></g></svg>

通過這種方法,整個logo用兩個圓圈(兩個o)和四條路徑(G, g, l和e)就可以繪製完成。
 

[img=Google,Logo,設計]https://jf-bucket-public.oss-cn-qingdao.aliyuncs.com/jfperiodical/attached/image/20150907/1351360169.png[/img]





-------------------好久不見的分割線-------------------

如果您發現這篇譯文的任何問題,可隨時與傑微刊聯絡。

我們水平有限,但理想高遠。傑微刊旨在分享優質的內容。

傑微刊也同樣期待理想的您對這個世界的貢獻。歡迎任何目的的聯絡。

傑微刊的有償投稿郵箱是:weikan@jointforce.com

我們的QQ是:1820494189。

[轉載請保留原文出處、譯者和審校者。 可以不保留我們的連結] 


原文點此檢視

回覆

相關文章