Tổng Hợp Các Extension dành cho Designer trên trình duyệt

Là một Designer (nhà thiết kế) chắc hẵn bạn cần những công cụ để phân tích hình ảnh, màu sắc, và tìm hình mẫu. Nếu như việc thực hiện thủ công khá tốn thời gian thì bạn có thể nhờ sự trợ giúp của các Extension trên trình duyệt. Ngoài việc lượt web ra, trình duyệt còn hổ trợ một số tiện ích mở rộng (Extension) giúp bạn thao tác nhanh hơn các yêu cầu của mình. Ví dụ: tìm tên của Font chữ đang hiển thị, thay đổi kích thước cửa sổ trình duyệt, lấy mã màu…. Bạn có thể tham khảo các Extension dành cho Designer dưới đây:

MAI LAN IMAGE SEARCH – Extension tìm download stock ảnh online

Mai Lan Image Search là Extension dành cho Designer giúp nhanh chóng tìm kiếm, tải về hình ảnh, stock MIỄN PHÍ và chất lượng cao từ các trang web hàng đầu… Đây là Extension do người Việt Nam viết. Với các tính năng như:

• Tìm kiếm nhanh chóng hình ảnh và stock miễn phí từ nhiều trang web.
• Dễ dàng tìm kiếm nhanh bằng cách chọn các từ khóa trên web và truy cập menu ngữ cảnh.
• Tải xuống tất cả các hình ảnh (các trang web được hỗ trợ: Everypixel, Burst, Bapt, Pexels, Picjumbo).

Link trên Chrome: Download Mai Lan Image Search

WHATFONT – Tìm tên Font của trang web

Đây là một extension hỗ trợ các designer trong việc xác định cũng như tái sử dụng các font chữ. Đây Cách dễ nhất để xác định phông chữ trên các trang web. Với tiện ích mở rộng này, bạn có thể kiểm tra phông chữ web bằng cách chỉ rê chuột lên font cần tìm. Đó là đơn giản nhất. Extension hỗ trợ Typekit và Google Font API.

Link tải trên Chrome: tải whatfont 

WINDOW RESIZER – Điều chỉnh kích thước cửa sổ

WINDOW RESIZER là extension giúp giúp Designer điều chỉnh kích thước lại các cửa sổ window để có thể xem lại một cách chính xác hơn bản thiết kế của mình. Tiện ích mở rộng này điều chỉnh lại kích thước cửa sổ của trình duyệt để mô phỏng các độ phân giải khác nhau. Nó đặc biệt hữu ích cho các nhà thiết kế và phát triển web bằng cách giúp họ kiểm tra bố cục của họ trên các độ phân giải trình duyệt khác nhau.

Danh sách độ phân giải hoàn toàn có thể tùy chỉnh (thêm/xóa/ điều chỉnh lại).

Bạn có thể đặt chiều rộng/chiều cao của cửa sổ, vị trí của cửa sổ, biểu tượng cài sẵn (điện thoại, máy tính bảng, máy tính xách tay, máy tính để bàn) và thậm chí tùy chọn áp dụng kích thước mới cho toàn bộ cửa sổ hoặc chỉ cho chế độ xem. Tiện ích mở rộng cũng có các phím tắt toàn cầu có thể tùy chỉnh, một tùy chọn để xuất cài đặt của bạn và nhập chúng trên máy tính khác và hơn thế nữa!

Link tải trên Chrome: download Windows Resizer

PAGE RULER – Hiển thị thanh thước kẻ đo kích thước

 

Extension Page Ruler giúp chúng ta có thể đo kích thước các phần tử ở bất cứ vị trí nào trên trang. Hiển thị một thước kẻ xuất ra chiều rộng, chiều cao và vị trí bạn cần đo. Tính năng chính:

• Vẽ thước kẻ vào bất kỳ trang nào và xem vị trí chiều rộng, chiều cao và trên cùng, dưới cùng, bên trái và bên phải
• Kéo các cạnh của thước kẻ để thay đổi kích thước
• Sử dụng các phím mũi tên để di chuyển và thay đổi kích thước thước
• Hiển thị hướng dẫn mở rộng từ các cạnh thước
• Cập nhật thủ công kích thước và vị trí của thước đo từ thanh công cụ để thay đổi độ chính xác
• Kích hoạt chế độ phần tử của chế độ trực tuyến để phác thảo các thành phần trên trang khi bạn di chuyển chuột qua chúng

Link tải trên Chrome: download Page Ruler

PERFECTPIXEL – tính toán chi tiết từng pixel

Extension PerfectPixel giúp các designer có thể so sánh các bản thiết kế chính xác đến từng pixel.

PerfectPixel cho phép các nhà phát triển và nhà thiết kế đánh dấu đặt lớp phủ hình ảnh bán trong suốt lên trên HTML được phát triển và thực hiện so sánh pixel hoàn hảo giữa chúng.

Tính năng, đặc điểm:

• Hỗ trợ nhiều lớp phủ
• Hỗ trợ đảo ngược và nhân rộng
• Lớp phủ riêng biệt cho mỗi trang web
• Lớp phủ được lưu giữa các phiên duyệt
• Giao diện người dùng dễ sử dụng tối giản
• Hỗ trợ tải lên tập tin kéo-n-drop
• Dán từ url và hỗ trợ clipboard
• Phím mũi tên và hỗ trợ chuột

Link tải trên Chrome: download PerfectPixel

PICKMONKEY – Chụp và chỉnh sửa ảnh chụp màn hình

Đây là một extension chụp nhanh màn hình chỉnh sửa lại ảnh chụp màn hình. Ngoài ra nó còn giúp các bạn tải tất cả các ảnh screenshot của web bằng một cú click chuột. PicMonkey Chrome cho phép bạn lấy ngay hình ảnh từ bất kỳ trang web nào và mở chúng trong PicMonkey để chỉnh sửa. Đây là Extension dành cho Designer hay viết chú thích hoặc đăng bài lên web.

Link tải trên Chrome: download PicMonkey 

SVG GRABBER – Download hình và mã SVG

SVG Grabber là Extension dành cho Designer giúp bạn download logo hoặc hình ảnh trên một trang web một cách nhanh nhất. SVG Grabber cho phép bạn xem trước, tải xuống và sao chép mã tất cả các biểu tượng và hình minh họa SVG trong một trang web.

Link tải trên Chrome: Download SVG Grabber

NINJA FONTFACE – Hiển thị tên Font trên trình duyệt

Với ninja fontface, chỉ bằng cách rê chuột, bạn cũng có thể biết font chữ mà website bạn đang truy cập sử dụng font gì?

Link trên Chrome: Download ninja fontface

CUSTOM CURSOR – Thay đổi con trỏ chuột

Quá chán với kiểu con trỏ trên Chrome, bạn hãy sử dụng extension Custom Cursor để tuỳ chỉnh và thiết kế con trỏ chuột theo ý thích của mình. Tự tạo một bộ sưu tập lớn các con trỏ chuột miễn phí.

Để tải lên con trỏ chuột phong cách riêng của bạn, nên sử dụng:

• Hình ảnh nhỏ (tối ưu 16×16, 32×32 pixel, không quá 128×128);
• Hình ảnh trên nền trong suốt, chẳng hạn như định dạng .png.

Link trên Chrome: Download Custom Cursor

SITE PATELLE – Lấy chính xác mã màu

Extension này có thể giúp bạn lấy riêng lẽ từng màu cũng như lấy toàn bộ bản màu của một trang web. Nếu bạn muốn biết banner hoặc chữ trên trang web đang dùng màu gì thì Site Palette sẽ giúp bạn có ngay mã màu đó. Đây là Extension dành cho Designer nhà phát triển frontend nên cài trên trình duyệt.

Link trên Chrome: Download Site Palette

Theo Nguyễn Hoàng (J2team)

Câu hỏi thường gặp

Tôi có thể sử dụng các extension này trên trình duyệt nào?

Bài viết tập trung vào các extension dành cho trình duyệt Chrome. Tuy nhiên, một số extension có thể tương thích với các trình duyệt khác.

Các extension này có miễn phí không?

Đa số các extension được đề cập trong bài viết đều miễn phí. Tuy nhiên, một số tính năng nâng cao có thể yêu cầu đăng ký trả phí.

Làm thế nào để cài đặt các extension này?

Bạn chỉ cần click vào link tải tương ứng của mỗi extension trong bài viết, sau đó nhấn vào nút “Thêm vào Chrome” (hoặc tương tự tùy thuộc vào trình duyệt bạn đang sử dụng).