7 tiện ích mở rộng Chrome phải có cho nhà thiết kế web

7 tiện ích mở rộng Chrome phải có 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 là mình cần.





Điều tốt nhất là bạn thậm chí không cần 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 một 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ô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, giống 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. 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.

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ị của 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.

cách xóa ios 14 beta

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. Kiểm tra trực quan

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.

bên trong Quan sát , 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. Các Màu sắcKiể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 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.

Các Hợp 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.

cách nhận thẻ plex miễn phí

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: 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ẻ thừa, vì chụp ảnh màn hình trên máy Mac thật dễ dàng và chụp màn hình của bạn trên Windows chỉ là một chút rắc rối hơn. Nhưng Easy Screen Capture 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, 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 thủ thuật nhỏ gọn khác là có thể sao chép ảnh chụp màn hình vào khay nhớ tạm và dá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 màn hình dễ dàng

7. Băng giá 2

Cuối cùng, có một nhiệm vụ quan trọng mà 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 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ế, 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.

Cài đặt: Icy 2

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 điều 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 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 học cách quản lý các tiện ích mở rộng Chrome của bạn trước khi họ thoát khỏi tầm tay.

Đăng lại Đăng lại tiếng riu ríu E-mail Nâng cấp lên Windows 11 có đáng không?

Windows đã được thiết kế lại. Nhưng điều đó có đủ thuyết phục bạn chuyển từ Windows 10 sang Windows 11?

Đọc tiếp
Chủ đề liên quan
  • Internet
  • Sáng tạo
  • Google Chrome
  • Thiết kế web
  • Tiện ích mở rộng trình duyệt
Giới thiệu về tác giả Alice Kotlyarenko(28 bài báo đã xuất bản)

Alice là một nhà văn công nghệ có quan điểm mềm về công nghệ của Apple. Cô ấy đã viết về Mac và iPhone được một thời gian, và bị cuốn hút bởi cách công nghệ định hình lại sự sáng tạo, văn hóa và du lịch.

Xem thêm từ Alice Kotlyarenko

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký