Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Làm cách nào để logo mới của Google giảm từ 14.000 byte xuống còn 305 byte?

Chủ đề thuộc danh mục 'Các bộ nhận diện thương hiệu ấn tượng' được đăng bởi dennisph91, 5/9/15.

Lượt xem: 32,466

  1. dennisph91 Thành viên cấp 2

    Z0jzL4I.jpg
    Google nói logo cũ của họ có dung lượng khoảng 14.000 byte, còn logo mới nhất hiện tại chỉ có 305 byte mà thôi. Đây không hẳn chỉ là việc nén hình ảnh mà thực chất là cả một quá trình chọn lại phương pháp vẽ. Cụ thể, logo cũ sử dụng font Serif khá phức tạp với khoảng 100 điểm " anchor" (điểm móc dùng để tạo nét vẽ trong các phần mềm đồ họa) trong khi logo mới chỉ dùng các hình tròn và hình vuông để tạo thành, thậm chí có thể chỉ cần dùng các đường thẳng là cũng tạo được logo mới. Dưới đây là chi tiết cách người ta chỉ ra sự khác biệt giữa hai phương pháp vẽ.

    Logo cũ

    Sử dụng font Serif, ở các điểm tận cùng của mỗi ký tự đều khá phức tạp (các phần dư ra, điểm nhọn, điểm cong). Để vẽ được các nét đó, người ta phải tạo ra các điểm " Anchor Point", đây là các điểm nối dùng để tạo ra nét vẽ liền nhau trong phần mềm đồ họa. Nét vẽ càng phức tạp thì càng có nhiều điểm Anchor Point. Xem hình bên dưới bạn sẽ thấy, có đến 100 Anchor Point trong logo cũ của Google.

    pv5rd2U.png

    Logo mới

    Trong khi đó, logo mới nhất của Google được vẽ theo cách đơn giản hơn rất nhiều, chỉ dùng các khối hình tròn và hình chữ nhật ghép lồng lại với nhau là ra, bao gồm:
    • 10 vòng tròn (2 vòng cho mỗi "G", 2 vòng cho mỗi chữ "o", 2 vòng cho chữ "e").
    • 5 hình chữ nhật (2 hình cho chữ "G", 1 hình cho chữ "l", 2 hình cho chữ "e").
    • 1 hình khối đặc biệt duy nhất với 7 " Anchor Point" (dùng cho phần đuôi của chữ "g" viết thường).
    297gp7f.png
    Hiện tại Google chưa phát hành phiên bản logo chỉ có 305 byte (hình mới mà bạn thấy trên website Google nặng tới mười mấy KB). Tuy nhiên, người ta đã thử vẽ lại chữ "G" của logo mới dưới dạng file SVG theo cách hướng dẫn trên thì dung lượng sau cùng chỉ có 302 byte, nếu nén lại nữa thì chỉ còn có 195 byte cho ký tự "G" đầu tiên.

    Ezuj1vl.jpg

    Chưa hết, một người dùng khác còn có cách vẽ bá đạo hơn nữa mà không cần dùng hình tròn với hình chữ nhật. Thay vì vẽ hai hình tròn lồng vào nhau rồi tô màu (Fill) màu xanh vào chỗ giữa hai hình tròn thì người này chỉ dùng các đường thẳng để vẽ, sau đó dùng thuộc tính "Stroke" để tô đậm nét vẽ đó lên (Bold), kết quả vẫn có được hình ảnh chữ G tương tự nhưng dùng ít dòng code lập trình hơn và dung lượng file cũng ít hơn. Bằng cách này, toàn bộ logo " Google" sau khi vẽ chỉ nặng còn 290 byte. Cách vẽ là dùng 2 hình tròn cho 2 chữ "o" và dùng 4 nét vẽ ("Paths") cho các chữ "G", "g", "l" và "e". Sau đó dùng thuộc tính "Stroke" tăng chiều này nét vẽ lên 16 pixel là có ngay logo mới hoàn chỉnh.

    LG2C3hD.jpg
    Bạn có thể xem chi tiết các đoạn code dùng để vẽ, bài viết gốc và tham khảo thêm nhiều thông tin khác về logo tại các link sau:
    Theo TDNC - Tinh Tế​

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    dennisph91, 5/9/15
    #1
    kesitinh_ks, Ariga Truong, Cua Càng và 12 người khác thích bài viết này.
  2. my.life

    my.life Mới đăng kí

    logo mới thấy đẹp hơn logo cũ
    my.life, 5/9/15
    #2
  3. ToiHocDoHoa.com

    ToiHocDoHoa.com Thành viên cấp 3

    quá dã man - trí tuệ, tiền bạc là ở đây T_T
    ToiHocDoHoa.com, 5/9/15
    #3
  4. Chém Gió Mướn

    Chém Gió Mướn Thành viên cấp 1

    logo ng ta đầu tư như vậy nên có giá trị cao, còn mấy pa mấy má ở Vn bỏ mấy đồng xu mà đòi này nọ, cuối cùng làm theo ý thích ra cục :Poop: =)))
    Chém Gió Mướn, 5/9/15
    #4
    SerdyKee và black eagle thích bài viết này.
  5. F_Designer

    F_Designer Mới đăng kí

    Quá chất
    F_Designer, 5/9/15
    #5
  6. Phuong1836

    Phuong1836 Thành viên cấp 1

    Chém Gió Mướn Không nói chung các bạn Design, nhưng nhiều bạn hoang tưởng nghĩ là mình cao siêu lắm còn khách không biết gì. Khách hàng ko biết mới nhờ các bạn làm vì xh phân công như vậy. Nhưng đã làm và cảm thấy mình tự trân trọng sản phẩm của mình chưa, đã xứng đáng mấy xu khách bỏ ra chưa thì hãy nói bạn à.
    Phuong1836, 6/9/15
    #6
  7. idiot

    idiot Mới đăng kí

    Thời gian và cái đầu. Câu chuyện tưởng chừng đơn giản nhưng thật sự nó là đẳng cấp. Mà đéc hiểu cái logo cũ kiểu j mà lên tới 14k byte nhể :v
    idiot, 6/9/15
    #7
  8. SwingsOnlyone

    SwingsOnlyone Thành viên cấp 4

    Thì "tối giản hóa" và "internet of thing" là tương lai của cuộc cách mạng công nghệ và thiết kế mà
    SwingsOnlyone, 6/9/15
    #8
  9. RainyWarrior

    RainyWarrior Thành viên Max level

    nhìn thì có vẻ lớn nhưng 14kb hay 305b cũng chẳng có gì khác biệt
    RainyWarrior, 6/9/15
    #9
  10. lhlongnt

    lhlongnt Mới đăng kí

    Sao lại không có gì khác biệt, với 1 hệ thống rất nhiều trang web có lượng truy cập khủng khiếp của google thì việc giảm được dung lượng cho cái logo sẽ làm giảm đáng kể cho lưu lượng truy cập mạng
    lhlongnt, 6/9/15
    #10
    SerdyKee thích bài viết này
  11. faragona

    faragona Thành viên cấp 2

    lhlongnt: Logo của Google hiện đang để ở định dạng PNG, là loại ảnh bitmap, nó lưu dữ liệu dưới dạng điểm ảnh, do đó về cơ bản thì logo mới sẽ nặng hơn logo cũ vì có nhiều điểm ảnh có dữ liệu hơn ( font chữ mới dày hơn). 305 bytes chỉ là kích thước file thiết kế hoặc file ảnh vector, mà hiện tại thì hầu hết các trình duyệt đều chưa xử lý được hoàn thiện ảnh vector nên nó chẳng có tý giá trị gì về việc tiết kiệm băng thông hay lưu lượng sử dụng cả.
    faragona, 6/9/15
    #11
    Soullegend thích bài viết này
  12. Soullegend

    Soullegend Thành viên cấp 3

    load bất cứ 1 trang nào cũng ít nhất có 1 hình to hơn cái logo rồi cho nên giảm tí xíu thế này chả giảm thiểu đc gì cho tài nguyên mạng
    Soullegend, 7/9/15
    #12
  13. mmo123rpg

    mmo123rpg Mới đăng kí

    Bây giờ dân thiết kế web có xu hướng mới là xài SVG kết hợp với animation để tạo thành ảnh GIF. Bạn nào có kiến thức về mảng thì xin hãy share giùm vài tài liệu nhé.
    mmo123rpg, 7/9/15
    #13
  14. lazycatnct

    lazycatnct Mới đăng kí

    Sáng tạo tối ưu để vươn tới sự hoàn hảo. Rất hay và thật tài năng
    lazycatnct, 7/9/15
    #14
  15. kevinhuynh12

    kevinhuynh12 Banned

    Nhưng nếu đây là của người VN làm và ăn dc hàng chục ngàn $ thì nó lại khác :))
    kevinhuynh12, 8/9/15
    #15
  16. NBee

    NBee Mới đăng kí

    Muốn học đi thì phải học bò, các thanh niên ạ. Thay vì nhìn số dung lượng thì sao ko nhìn đến tỷ lệ đc tối ưu hóa. Hơn nữa thời đại gì rồi mà ảnh vector còn chưa thông dụng hả =)) có người dùng bình thường thì còn ko đụng đến chứ dân thiết kế có đứa nào chưa chạm qua. Hơn nữa cần quái gì phải lo đến trình duyệt khác trong khi Chrome của nó có sẵn kia. Gặp 1 sự đổi mới mà toàn nhìn vào mặt tiêu cực thế hèn gì mãi chẳng khá đc.
    NBee, 8/9/15
    #16
  17. seannhok

    seannhok Thành viên cấp 1

    @faragona vậy chắc bạn chưa bao giờ nghe qua định dạng SVG nhỉ? Hầu như trình duyệt thế hệ mới nào cũng đã hỗ trợ chuẩn này, và nó là chuẩn đồ họa vector đấy bạn à!
    seannhok, 8/9/15
    #17
  18. kesitinh_ks

    kesitinh_ks Thành viên cấp 2

    Đỉnh của đỉnh :like:
    kesitinh_ks, 8/9/15
    #18
  19. Chém Gió Mướn

    Chém Gió Mướn Thành viên cấp 1

    @Phuong1836
    Vâng, mình luôn làm theo kiểu tiền nào của đó bạn ah. ở trên mình chỉ nói đến những khách bỏ chẳng bảo nhiêu nhưng đòi hỏi thì vô tận. thường thì những khách như vậy mình làm cho xong chứ k có nghĩ đến sản phẩm cuối nó như thế nào nữa, vì khách như vậy thường muốn theo ý mình chứ thật sự k hiểu rõ nhiều :)
    Chém Gió Mướn, 19/9/15
    #19
  20. tonyhoang195

    tonyhoang195 Thành viên cấp 1

    quá thông minh sáng tạo , người nước ngoài họ làm việc rất tỉ mỉ chứ ko xuề xòa như VN, chúng ta còn phải học hỏi nhiều từ họ
    tonyhoang195, 19/9/15
    #20
Từ khóa:

Ủng hộ diễn đàn