8 Tiện ích mở rộng phải có của Chrome dành cho nhà thiết kế web

Là một nhà thiết kế web, phần mềm bạn nhất thiết phải có trên máy tính của mình là gì? Rất có thể đó là Photoshop và Illustrator. Và trong khi đó là những yếu tố cần thiết trong quy trình thiết kế của bạn, có những công cụ nhỏ hơn mà bạn có thể không biết mình cần.

Điều tốt nhất là bạn thậm chí không phải tải chúng xuống — chỉ cần cài đặt các tiện ích mở rộng Chrome này và bạn có thể sử dụng. Từ việc xác định phông chữ trên các trang đến đo khoảng cách giữa các phần tử web, các tiện ích mở rộng Chrome thiết kế web này sẽ giúp cuộc sống của bạn dễ dàng hơn.

1. PerfectPixel

PerfectPixel của WellDoneCode giúp bạn phát triển một trang web hoàn hảo theo pixel bằng cách cho phép bạn thêm lớp phủ hình ảnh trên trang web với một vài cú nhấp chuột.

Bạn có thể tải lên hình ảnh từ máy tính, URL hoặc khay nhớ tạm của mình. Nhờ tiện ích mở rộng này, bạn có thể thêm nhiều lớp vào một trang web, điều chỉnh kích thước hình ảnh và thay đổi độ mờ. Phần mở rộng cho phép tùy chỉnh và hỗ trợ các phím tắt.

Nó có một gói miễn phí và trả phí. Phần mềm miễn phí sẽ đủ cho hầu hết mọi người. Tuy nhiên, gói Pro không có quảng cáo, cung cấp hỗ trợ ưu tiên và hỗ trợ xoay vòng lớp, với giá 14,99 đô la một năm. PerfectPixel của WellDoneCoode là một tiện ích mở rộng nổi bật với hơn 300.000 lượt tải xuống.

Tải xuống: PerfectPixel của WellDoneCode dành cho Google Chrome (Miễn phí, mua hàng trong ứng dụng)

2. Phông chữ Ninja

Với hàng ngàn phông chữ có sẵn, khả năng tạo kiểu chữ của bạn là vô tận. Đặc biệt nếu bạn có thể xác định một phông chữ đẹp mà bạn nhìn thấy ở đâu đó và mượn nó cho dự án của riêng bạn.

Fonts Ninja là một tiện ích mở rộng của Chrome giúp bạn thực hiện điều đó. Giống như các công cụ tìm phông chữ từ hình ảnh, nó giúp bạn xác định các phông chữ bạn thấy trực tuyến. Sự khác biệt duy nhất là Fonts Ninja đọc các phông chữ được mã hóa trong CSS của trang, giống như kiểu chữ của tiêu đề và nội dung.

Khi bạn khởi chạy Fonts Ninja, nó sẽ hiển thị cho bạn thông tin về phông chữ mà bạn hướng đến — không chỉ kiểu chữ mà còn cả trọng lượng, kích thước, chiều cao, chiều rộng và màu sắc. Bạn có thể đánh dấu các chi tiết phông chữ này để tham khảo trong tương lai bằng cách sử dụng tiện ích mở rộng này.

Tải xuống: Phông chữ Ninja cho Google Chrome (Miễn phí)

3. Kẻ mắt màu ColorPick

Cho dù bạn có con mắt nhìn màu tốt đến đâu, thật khó để tạo lại một màu cụ thể mà bạn đã thấy trực tuyến trừ khi bạn biết các giá trị RGB hoặc HTML của nó. May mắn thay, bạn không cần phải đoán nếu bạn có ColorPick Eyedropper.

Giống như các ứng dụng chọn màu tốt nhất cho Mac, ColorPick Eyedropper sẽ hiển thị cho bạn các giá trị cho bất kỳ màu nào bạn trỏ vào. Sự khác biệt là nó luôn ở đó trong trình duyệt của bạn và bạn không phải tải lên bất cứ thứ gì — chỉ cần nhấp vào biểu tượng và di chuyển mục tiêu đến đúng vị trí.

Tiện ích mở rộng đọc màu sắc từ văn bản, hình ảnh và khá nhiều thứ bạn có thể thấy trên trang web (thậm chí cả quảng cáo). Sau khi bạn chụp một màu, nó sẽ hiển thị cho bạn các giá trị HTML, RGB và HSL cho màu đó.

Tải xuống: ColorPick Eyedropper dành cho Google Chrome (Miễn phí)

4. Kích thước

Phần mở rộng mã nguồn mở này là một tìm kiếm cho các nhà thiết kế web, đặc biệt nếu bạn thực hiện các hợp đồng biểu diễn một lần cho các doanh nghiệp nhỏ. Khi khách hàng giao cho bạn một trang web mà không có bất kỳ tệp hoặc tài liệu nào trước đó và yêu cầu bạn thiết kế “một trang như thế này, nhưng với văn bản và hình ảnh khác”, việc tìm ra bố cục là một điều khó khăn.

Thứ nguyên cho phép bạn dễ dàng đo chiều cao và chiều rộng của bất kỳ phần tử nào trên trang, cũng như lề giữa chúng. Điều đó giúp bạn dễ dàng tạo lại các trang hiện có và kiểm tra kỹ các thiết kế của riêng bạn sau khi chúng đi vào sản xuất.

Tải xuống: Kích thước cho Google Chrome (Miễn phí)

5. Kiểm tra trực quan

Visual Inspector là một công cụ mạnh mẽ dành cho các nhà thiết kế web, kết hợp các tính năng của ba phần mở rộng trước đó và bổ sung thêm nhiều tính năng khác.

bên trong Quan sát , bạn có thể chọn bất kỳ phần tử nào trên trang để có thông tin đầy đủ về nó, từ kích thước đến tên tệp. Các Màu sắc và Kiểu chữ các tab cho phép bạn xem nhanh bảng màu và tất cả các phông chữ, trong khi Tài sản tập hợp tất cả các hình ảnh trên trang vào một nơi.

Sau khi khởi chạy tiện ích mở rộng, bạn có thể nhấp vào bất kỳ phần tử nào và sửa đổi nó cục bộ bằng cách sử dụng tab Kiểm tra. Các Đầu ra CSS là nơi bạn có thể cập nhật mã CSS theo thời gian thực khi bạn thực hiện các thay đổi đối với trang web.

Ban đầu, các thay đổi được lưu cục bộ, mặc dù bạn có thể xuất chúng. Nó cũng hiển thị phiên bản di động của trang web.

Tải xuống: Trình kiểm tra trực quan cho Google Chrome (Miễn phí)

6. Trình ghi màn hình

Tiện ích mở rộng chụp ảnh màn hình có vẻ thừa, vì việc chụp ảnh màn hình trên Mac thật dễ dàng và việc chụp màn hình của bạn trên Windows chỉ phức tạp hơn một chút. Nhưng Screen Recorder có khá nhiều điểm bán hàng.

Quan trọng nhất, nó cho phép bạn chụp toàn bộ trang web một cách tự động, không chỉ khu vực bạn nhìn thấy trên màn hình. Đó là điều vô giá khi bạn cần báo cáo một số vấn đề trên một trang dài và chụp tất cả chúng sẽ mất từ ​​ba đến bốn ảnh chụp màn hình.

Nó đi kèm với trình chỉnh sửa hình ảnh tích hợp cho phép bạn thực hiện các thay đổi cần thiết trước khi tải tệp xuống hoặc tải tệp lên Google Drive. Screen Recorder không chỉ giới hạn ở ảnh chụp màn hình, tiện ích mở rộng giúp việc ghi video màn hình hoặc webcam trở nên dễ dàng.

Tải xuống: Trình ghi màn hình cho Google Chrome (Miễn phí)

Công cụ thiết kế là một tiện ích mở rộng tiện dụng của Chrome để giúp bạn tạo các thiết kế hoàn hảo đến từng pixel. Tiện ích này cho phép bạn căn chỉnh tất cả các phần tử của trang web Chrome bằng cách thêm thước và lưới. Tương tự, bạn có thể thêm lớp phủ vào bất kỳ trang web nào.

Phần mở rộng có thể tùy chỉnh một chút vì bạn có thể điều chỉnh chiều rộng thước, phông chữ và chủ đề. Công cụ thiết kế có phiên bản Plus, với giá 11,50 đô la một năm, bao gồm các tính năng như bảng thiết kế và lớp phủ.

Tải xuống: Công cụ thiết kế dành cho Google Chrome (Miễn phí, có đăng ký)

8. Muzli 2

Cuối cùng, có một nhiệm vụ quan trọng bạn phải giải quyết vào mỗi buổi sáng: rũ bỏ những gì còn sót lại trong giấc ngủ và bắt đầu ngủ. Muzli 2 của InVision sẽ phục vụ như một tờ báo buổi sáng của bạn với các bài báo được tuyển chọn về nghệ thuật, thiết kế, UX và công nghệ.

Muzli thay thế tab Chrome mặc định của bạn và cho phép bạn tùy chỉnh những gì bạn thấy ở đó. Tùy thuộc vào sở thích của bạn, Muzli sẽ chọn nguồn cấp dữ liệu cho bạn, với các trang web khác nhau, từ Dribble và Behance đến 99designs và Creative Bloq. Rất nhiều cảm hứng để lướt qua khi bạn đang nhâm nhi ly cà phê đầu tiên của mình!

Nếu bạn cho rằng toàn bộ tab trình duyệt chứa nhiều nội dung thiết kế quá dữ dội, thì Muzli cũng có phiên bản Lite. Nó sẽ không ghi đè tab mặc định của bạn và bạn sẽ có thể truy cập nguồn cấp dữ liệu bất cứ khi nào bạn muốn, chỉ bằng cách nhấp vào biểu tượng tiện ích mở rộng.

Tải xuống: Muzli 2 dành cho Google Chrome (Miễn phí)

Nhận các tiện ích mở rộng của Chrome cho tất cả các nhiệm vụ thiết kế của bạn

Các tiện ích mở rộng của Chrome trong danh sách này không phù hợp với phần mềm thiết kế của bạn, nhưng chúng bao gồm tất cả những thứ nhỏ nhặt đi kèm với việc trở thành một nhà thiết kế — có thể là thông tin về kiểu chữ hoặc chụp ảnh màn hình.

Một khi bạn nhận ra rằng Cửa hàng Chrome trực tuyến tràn ngập các công cụ, bạn có thể khó ngừng thêm các công cụ mới. Vì vậy, hãy tìm hiểu cách quản lý các tiện ích mở rộng Chrome của bạn trước khi chúng vượt quá tầm tay.