Google Chrome Extensions for Web Designers

В далеком 2008 году, когда Google выпустила Chrome, одним из его явных недостатков было отсутствие того разнообразия расширений, какими мог похвалиться Firefox. Но сейчас браузер от поискового гиганта обладает большим количеством Google Chrome-расширений для веб-дизайнеров.

В этой статье мы расскажем о том, какие сейчас существуют полезные Google Chrome расширения для дизайнеров. В основном они заточены под выполнения какой-то одной задачи, будь-то определение цвета или шрифта, и вряд ли будут полезны кому-то еще кроме дизайнеров, но встречаются и такие, которые достаточно универсальны.

Для изображений и заметок

Почему бы не сделать скриншот?

Расширение Blipshot позволяет вам создать скриншот всей страницы (а не только ее видимой части), просто кликнув на значок расширения в браузере:

Blipshot

Чтобы сохранить получившийся скриншот в PNG, просто перетащите его в нужную папку. Что удобно, названия скриншота будет состоять из названия страницы и времени ее создания, так что вы сможете легко разобраться, что где, даже не открывая сами изображения.

Чтобы важные данные всегда были под рукой

С помощью расширения Evernote Web Clipper можно фиксировать идеи для дизайна, которые встретились вам в Интернете, и делиться ими со своей командой:

Находки в Evernote

При этом функционал для создания скриншотов позволяет выделить только нужный фрагмент страницы. Затем получившийся скриншот можно обработать с помощью расширения, например добавить к нему аннотацию, отметить нужные фрагменты маркером, показать, что следует изменить или даже пикселизировать определенные области.

Evernote Web Clipper

Сделанным скриншотом можно поделиться, отправив приглашение по электронной почте с правами на просмотр или редактирование.

Pin It Button также позволяет сохранять интересные варианты дизайна на свой board в Pinterest:

Pin It Button в действии

Однако у расширения от Pinterest нет функционала для пометок, поэтому в Pinterest удобней добавлять просто какие-то идеи, которые можно пересмотреть и обсудить позже.

Редактируйте изображения прямо в браузере

Pixlr Editor — это редактор изображений, который позволяет выполнять все важные операции прямо в браузере:

  1. Обрезать и переворачивать изображение.
  2. Выполнять выделение с помощью Lasso и Magic Wand.
  3. Создавать и редактировать слои.
  4. Определять цвета с помощью пипетки, работать с инструментами Dodge и Burn.
  5. Использовать базовые фильтры.
  6. Настраивать яркость, контрастность и уровни.

Pixlr Editor

Для шрифтов

Что это за шрифт?

Если у вас когда-нибудь возникала необходимость узнать, что за шрифт используется на той или иной странице, поставьте себе расширение WhatFont, которое определяет название и параметры используемого шрифта:

WhatFont

А если попробовать по-другому?

С помощью расширения Google Font Previewer for Chrome можно выбирать шрифт из каталога Google Font API и применять его к различным частям текста на странице или определенному CSS-селектору:

Google Font Previewer for Chrome

Благодаря этому расширению вам не нужно вносить правки в саму HTML-страницу, чтобы быстро проверить, как тот или иной шрифт будет выглядеть на сайте.

Для определения размеров и цветов

Расширение MeasureIt! представляет собой линейку, с помощью которой можно измерять объекты на странице:

MeasureIt!

А вот с помощью Dimensions можно измерить расстояния между объектами на макете в формате PNG или JPG, просто открыв его в Chrome:

Dimensions

Eye Dropper — простое, но полезное расширение, которое позволяет узнать RGB и хэш-код цвета, который использован на странице, не открывая ее код. В общем, аналог пипетки из Photoshop:

Eye Dropper

А если нам нужно узнать не отдельный цвет, а составить целую палитру для изображения? Тогда на помощь придет Palette for Chrome, которая справляется с этой задачей за считанные секунды. Мы просто выбираем, какую именно палитру нужно создать (пользовательскую или одну из предложенных):

Palette for Chrome

Затем расширение генерирует для нас палитру с RGB и HEX-кодами использованных в изображении цветов:

Пример сгенерированной палитры

Для проверки верстки и адаптивности

Если вы создаете адаптивные странички, то вам не обойтись без расширения Responsive Inspector Reloaded (обновленной версии Responsive Inspector). С его помощью можно просматривать запросы media query, которые прописаны для сайта:

Responsive Inspector Reloaded

PerfectPixel by WellDoneCode позволяет наложить на веб-страницу полупрозрачное изображение, чтобы проверить точность верстки:

PerfectPixel by WellDoneCode

А чтобы не закрывая Chrome проверить, как будет выглядеть страница на разных экранах, можно воспользоваться Window Resizer:

Window Resizer

Но Google Chrome расширения для веб-дизайнеров связаны не только с выполнением стандартных задач. Если вы установите себе расширение Dribbble New Tab, то на новой вкладке браузера будут отображаться самые популярные изображения за день с Dribbble:

Dribbble New Tab

А если вы частенько заглядываете на такие сайты, как Behance, Techcrunch, Mashable или Awwwards Winners, то увидеть отображать на новой вкладке все самое новое и интересное поможет вам расширение Muzli — Design Breakfast:

Design Breakfast

Надеемся, что отобранные нами лучшие расширения Google Chrome для веб-дизайнеров пригодяться вам в работе — помогут облегчить выполнение рутинных тасков или даже найти новые идеи для своих творений.

Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

Об авторе

Дизайнер
Олег работал в студии в 2011-2016 годах и за это время успел поучаствовать во множестве проектов в качестве UI/UX дизайнера.

Похожие статьи

Вернуться к списку записей К списку записей