Коли Google запустила Chrome багато років тому, у 2008 році, одним з очевидних недоліків був майже повна відсутність розширень — що було дуже незручно, якщо ви звикли до безлічі їх, які пропонував Firefox. Але сьогодні браузер від гіганта пошуку має різноманітні розширення Google Chrome для веб-дизайнерів.
Тут ми розповімо вам про корисні розширення Google Chrome для дизайнерів. Хоча більшість з них присвячені виконанню однієї задачі (наприклад, визначення кольору або шрифту) і не викличуть захоплення у когось, крім дизайнерів, серед них є кілька універсальних помічників.
Для зображень і нотаток
Зробимо скріншот!
Blipshot дозволяє створити скріншот усієї сторінки (а не лише видимої частини) простим натисканням на його іконку в браузері:
Щоб зберегти скріншот у форматі PNG, просто перетягніть його в папку. Також дуже зручно, що ім'я файлу включає назву сторінки, а також час створення. Завдяки цьому ви можете легко ідентифікувати потрібний скріншот, не переглядаючи сам файл.
Все необхідне під рукою
Використовуючи Evernote Web Clipper, ви можете зберігати ідеї дизайну, з якими стикаєтеся в Інтернеті, і ділитися ними з вашою командою:
Ви можете включити в скріншот лише ту частину, яка вас цікавить. Потім ви можете редагувати свій скріншот, використовуючи інструменти, надані розширенням: додати анотацію, виділити певні частини, показати, які зміни потрібно внести, або навіть пікселізувати деякі області.
Ви можете ділитися скріншотом через електронну пошту, надаючи права на перегляд та/або редагування.
Pin It Button також дозволяє зберігати зразки дизайну — цього разу на вашій дошці Pinterest:
Але розширення Pinterest не дозволяє створювати анотації, тому воно більше підходить для простого збору ідей для подальших обговорень.
Редагуйте зображення прямо з браузера
Pixlr Editor дозволяє виконувати всі основні завдання редагування зображень, не покидаючи Chrome:
- Обрізати та повертати зображення.
- Вибирати певні області за допомогою ласо або магічної палички.
- Створювати та редагувати шари.
- Визначати кольори за допомогою піпетки, використовувати Dodge і Burn.
- Застосовувати базові фільтри.
- Змінювати яскравість, контрастність і рівні.
Для шрифтів
Який це шрифт?
Якщо вам коли-небудь терміново потрібно було дізнатися, який шрифт використано на певній сторінці, встановіть WhatFont. Цей розширення виявляє шрифт та його параметри, застосовані до певного тексту:
Спробуємо ще одне, добре?
Google Font Previewer for Chrome дозволяє вибрати шрифт з Google Font API та застосувати його до різних частин тексту або певного CSS-селектора:
Завдяки цьому вам не потрібно змінювати свій HTML-код, щоб швидко перевірити, чи виглядатиме якийсь шрифт добре на вашій сторінці чи ні.
Для визначення розмірів і кольорів
MeasureIt! — це віртуальна лінійка, яку ви можете використовувати для вимірювання об'єктів на сторінці:
А за допомогою Dimensions ви можете виміряти відстані між об'єктами на сторінці PNG або JPG макету, який ви відкрили в Chrome:
Eye Dropper — це просте, але корисне розширення для визначення RGB та hex-коду кольору, використаного на сторінці, без перегляду її виходу. Так само, як піпетка в Photoshop:
А що, якщо нам потрібно створити палітру кольорів з зображення? Тоді Palette for Chrome — це саме те, що нам потрібно. Робить це миттєво. Ми просто вибираємо, яку палітру створити (налаштовану або з попередньо визначеною кількістю кольорів):
Потім розширення генерує палітру з RGB та HEX-кодами кольорів, використаних на зображенні:
Для перевірки макету та адаптивності
```Якщо ви створюєте адаптивні дизайни, вам обов'язково потрібно встановити Responsive Inspector Reloaded (нова версія Responsive Inspector). Це дозволяє вам перевіряти медіа-запити, використані на веб-сайті:
Використовуючи PerfectPixel by WellDoneCode, ви можете накрити сторінку напівпрозорим зображенням і перевірити, чи є її макет піксель-перфектом.
А щоб перевірити, як ваша сторінка виглядатиме на різних екранах, не закриваючи Chrome, використовуйте Window Resizer:
Але не всі розширення Google Chrome для веб-дизайнерів призначені для виконання рутинних завдань. Встановіть Dribbble New Tab, і при відкритті нової вкладки ви побачите найкращі зображення Dribbble дня:
Якщо ви часто відвідуєте Behance, Techcrunch, Mashable та Awwwards Winners, Design Breakfast покаже всі гарячі оновлення з цих сайтів на новій вкладці:
Сподіваємося, що ці найкращі розширення Chrome для веб-дизайнерів полегшать ваше життя та допоможуть знайти нові джерела натхнення.
Потрібна розробка MVP, iOS і Android застосунків або прототипування? Перегляньте наше портфоліо та зробіть замовлення сьогодні!
