編者按:
有人在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。
[轉載請保留原文出處、譯者和審校者。 可以不保留我們的連結]