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 là 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. Dropbox cho Gmail
Dropbox khởi đầu là một dịch vụ lưu trữ tệp, nhưng họ sớm phát hiện ra đối tượng chính của mình là các nhà thiết kế, những người sử dụng dịch vụ này để chia sẻ công việc của họ với đồng nghiệp. Vì các tệp thiết kế thường quá lớn đối với tệp đính kèm trong email, nên việc gửi liên kết Dropbox đến tệp sẽ dễ dàng hơn.
Dropbox cho Gmail làm cho quá trình này trở nên thuận tiện hơn. Khi bạn liên kết đến tệp của mình bằng nút Dropbox ở cuối cửa sổ email mới, người nhận sẽ biết được những gì bạn đang gửi. Liên kết đến tệp hình ảnh sẽ tải hình ảnh lên ngay email và liên kết đến các loại tệp khác sẽ tạo ra bản xem trước tiện dụng.
Cài đặt: Dropbox cho Gmail
2. FontFace 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.
FontFace 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. Điểm khác biệt duy nhất là FontFace Ninja đọc các phông chữ được mã hóa trong CSS của trang, như kiểu chữ của tiêu đề và nội dung.
Khi bạn khởi chạy FontFace Ninja, nó sẽ hiển thị cho bạn thông tin về phông chữ mà bạn hướng nó tới --- và 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. Để đánh dấu phông chữ đó, bạn sẽ cần một tài khoản tại dịch vụ chị em, FontFace Dojo.
Cài đặt: FontFace Ninja
3. Bút kẻ mắt ColorPick
Cho dù bạn có con mắt nhìn màu sắc 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 xem mình có ColorPick Eyedropper hay không.
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 đó.
Cài đặt: ColorPick Eyedropper
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.
Cài đặt: Kích thước
5. Trình kiểm tra bằng hình ảnh
Visual Inspector là một công cụ phản hồi và cộng tác mạnh mẽ dành cho các nhóm thiết kế, 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.
Trong Kiểm tra , bạn có thể chọn bất kỳ phần tử nào trên trang để nhận thông tin đầy đủ về nó, từ kích thước đến tên tệp. Màu sắc và Kiểu chữ tab phụ cho phép bạn xem nhanh bảng màu và tất cả các phông chữ, trong khi Nội dung tập hợp tất cả hình ảnh trên trang vào một nơi.
Cộng tác là nơi bạn có thể đưa ra phản hồi và thảo luận với nhóm của mình và thật dễ dàng để lại nhận xét bằng cách nhấp vào bất kỳ thành phần nào trên trang.
Giống như hầu hết các công cụ nâng cao, Visual Inspector đi kèm với một thẻ giá:bạn sẽ cần phải trả từ $ 9 / người dùng / tháng để thêm nhận xét và đồng bộ hóa các thay đổi. Tuy nhiên, các tính năng cơ bản của nó như kiểm tra màu sắc, phông chữ và hình ảnh đều được sử dụng miễn phí.
Cài đặt: Trình kiểm tra trực quan
6. Chụp ảnh màn hình dễ dàng
Tiện ích mở rộng chụp ảnh màn hình có vẻ hơi thừa, vì việc chụp ảnh màn hình trên máy 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 Easy Screen Capture có khá nhiều điểm hấp dẫn.
Quan trọng nhất, nó cho phép bạn chụp toàn bộ trang web, 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.
Một mẹo nhỏ khác là có thể sao chép ảnh chụp màn hình vào khay nhớ tạm và dán nó ngay vào cuộc trò chuyện hoặc email, thay vì tích trữ các tệp hình ảnh vô dụng trên máy tính của bạn.
Cài đặt: Chụp ảnh màn hình dễ dàng
7. 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 lại của 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ế, trải nghiệm người dùng 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. Có rất nhiều cảm hứng để lướt qua khi bạn đang nhâm nhi ly cà phê đầu tiên!
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.
Cài đặt: Muzli 2
Nhận Tiện ích mở rộng của Chrome cho Tất 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 điều nhỏ nhặt khi trở thành một nhà thiết kế --- có thể là thông tin về kiểu chữ hoặc cộng tác với đồng nghiệp của bạn.
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.