16 плагинов Photoshop для веб-дизайнеров, которые экономят время
Photoshop остаётся одним из главных инструментов дизайнера. Программное обеспечение появилось почти 30 лет назад и до сих пор не потеряло актуальность. Чаще всего продукт компании Adobe используют для создания интерфейсов и обработки фотографий.
Сегодня расскажем, как автоматизировать некоторые задачи с помощью расширений. В статье описаны возможности 16 полезных дополнений.
Divine Elemente
Плагин превращает прототипы в полноценные темы под систему управления контентом Wordpress. Для корректного экспорта необходимо подготовить набор элементов в соответствии с внутренней документацией скрипта. На выходе разработчики обещают валидную вёрстку и даже поддержку SEO.
Использовать программный код, создаваемый в автоматическом режиме, для готового проекта нельзя, а вот предпросмотр в HTML формате будет полезен.
Полная версия стоит 200 долларов. Результат работы наглядно продемонстрирован в этом ролике. Автор получил рабочий шаблон под Wordpress.
Composer
В макетах веб-сайтов и приложений количество слоев исчисляется сотнями и даже тысячами. Для внесения масштабных изменений дизайнерам приходится сначала выбрать элементы, а затем последовательно менять их свойства.
Composer добавляет возможность выполнять массовые операции:
- обновить стиль;
- изменить положение;
- включить или отключить видимость;
- синхронизировать библиотеку.
После установки расширения в панели редактора появляется дополнительная вкладка, а в ней 4 кнопки.
GuideGuide
Модульная сетка — способ организации пространства, который позволяет упорядочить элементы и облегчить последующую работу верстальщика.
GuideGuide создает сетку по заданным параметрам. Кроме Photoshop он поддерживает Ilustrator для векторной графики, а также Sketch и Adobe XD. Доступна функция сохранения пользовательских наборов. Шаблоном можно поделиться с другими пользователями.
Базовая версия стоит 5 долларов в месяц. На тестирование возможностей дают 14 дней.
Random User Generator
При создании макетов часто надо «оживить» структуру с помощью фотографий людей для комментариев, профилей и записей. Random User Generator создаёт вымышленные личности определённого пола.
Управление сводится к 4 шагам:
- Выбрать мужчину или женщину.
- Нажать на кнопку генерации.
- Вставить изображение.
- Скопировать имя.
Layout Wrapper
Одна из главных задач дизайнера — презентация работы заказчику. Дополнение делает скриншот открытого файла и добавляет к нему рамку от браузера Safari.
Для запуска скрипта надо добавить его в папку Scripts с установленным Photoshop, и в настройках клавиатурных сокращений задать сочетание клавиш, которое будет запускать операцию. Название окна и текст в адресной строке подстраивается под имя документа. Текстовые элементы легко отредактировать, как и цвет фона.
Layrs Control 2
Дополнение — удобный редактор слоёв с широкими возможностями. Он пригодится для больших проектов с древовидной структурой.
Доступные операции:
- редактирование названий;
- удаление эффектов;
- поиск пустых слоёв;
- быстрое преобразование в смарт-объекты;
- поиск по имени.
Perspective Mockups
Презентация макета должна произвести впечатление на клиента. В этом помогает красивый интерфейс и полезные инструменты.
Perspective Mockups делает из скриншотов красивые перспективные композиции. Больше не надо тратить время на трансформацию и обработку картинок. Легким движением мыши графика превращается в перспективу.
Расширение стоит 19 долларов.
Prisma
Дизайнер тратит много сил на создание единого стиля. Ему надо держать под рукой коды используемых цветов или копировать элементы и редактировать их.
Prisma автоматизирует эту задачу. После загрузки дополнения появится менеджер управления цветом, который связывает слои между собой. Пользователю надо нажать несколько кнопок, и они автоматически перекрасятся.
Плагин подгружает цвета из стандартной библиотеки и запоминает действия. Prisma поддерживает работу с несколькими файлами. Это будет полезно в условиях командной работы. Участники заметят, если поменяется оттенок текста, фона или заголовков.
Photoshop Design Space
Расширение меняет отображение интерфейса графического редактора. Структура создана специально под проектирование макетов. Пространство делится на два участка. Слева располагается область просмотра, а справа — панель свойств объекта, список слоёв и сохранённые библиотеки.
Дополнение сильно меняет внешний вид Adobe Photoshop CC и настраивает на продуктивную работу. За счёт экономии места важные инструменты всегда находятся под рукой.
Chroma Palette
Плагин создает наборы цветов, которые вызываются с помощью сочетания клавиш. В библиотеке хранится до 180 оттенков.
Операции выполняются через хоткеи. Есть кнопка захвата, которая переносит цвет из стандартной палитры в область расширения. Для корректной работы Chroma Palette понадобится Microsoft .Net Framework.
LiveShare PS
При создании любого проекта возникает необходимость проконсультироваться с заказчиком и членами команды. LiveShare PS закроет потребности в коммуникациях.
Бесплатное решение даёт возможность организовать конференцию внутри Фотошопа. Трансляция экрана запускается в несколько кликов, ограничений по количеству юзеров нет. Участники беседы мгновенно видят изменения. Они также могут оставлять комментарии, и будет видно, кто именно внёс правки.
Продукт создавался при активном сотрудничестве с сотрудниками Adobe.
Ink
После того, как дизайнер заканчивает работу над макетом, эстафета переходит к разработчикам. Опытные специалисты знают, что внешний вид интерфейса часто отличается от набросков, созданных в программе.
Ink добавляет возможность писать спецификацию к слоям. Если указать особенности некоторых элементов, верстальщики сделают дизайн максимально приближенным к прототипу.
Возможности:
- стиль: тени, градиенты, заливка;
- форматирование текста: шрифты, оформление, размер, цвет;
- автоматический вывод размеров;
- документация выгружается в отдельную папку.
Font Awesome PS
Иконочные шрифты — тренд последних лет. Они корректно отображаются в разных браузерах и платформах: от Windows до Android.
Font Awesome PS интегрирует набор иконок одноименного шрифта в интерфейс программы. Встроенный поиск обеспечивает навигацию по архиву. Элементы добавляются, как новые слои. С ними можно выполнять основные операции: трансформация, изменение цвета и масштабирование.
Long Shadow Generator
Стиль Metro стал популярен после выхода операционной системы Windows 8. Он запомнился благодаря использованию плиток и длинных теней.
Long shadows часто используют для плоских объектов, чтобы придать им объём. Дизайнеры добавляют эффект с помощью комбинации цветов, градиентов и экспериментов с прозрачностью.
Long Shadow Generator создаёт длинные тени на основе введённых параметров. Плагин поддерживает разные элементы: от текста до иконок. В настройках задаётся длина, прозрачность и стиль.
TinyPNG Photoshop Plugin
TinyPNG — популярный сервис для сжатия изображений. Несмотря на то, что скорость интернета в 2019 году высокая, пользователи не любят, когда страницы грузятся слишком долго. На быстродействие сайта сильно влияет вес картинок.
Плагин TinyPNG сжимает графику в интерфейсе редактора. В настройках экспорта появится дополнительная опция, которая и формирует выходной файл. Пользователь только выбирает формат изображения и уровень оптимизации. Скрипт анализирует размер и самостоятельно подбирает оптимальное качество. Преобразование выполняется в пространстве цветов sRGB для максимальной совместимости.
Инструмент поддерживает версии CS5, CS6 и CC.
Лицензия без ограничения по сроку использования стоит 65 долларов.
Spriteowl
Инструмент облегчает взаимодействие со спрайтами в Фотошопе. Sprite — несколько картинок, которые объединены в пределах области. Они активно используются в верстке для ускорения скорости загрузки сайта.
Spriteowl преобразует спрайты в готовый архив для верстальщика. На выходе из картинки получается библиотека с CSS, LESS и PNG. Приложение также учитывает Retina дисплеи.
Для создания современного интерфейса не хватит базовых знаний графического редактора и набора плагинов. Нужно учиться работать с сетками, учитывать особенности разных платформ и реализовать адаптивность.
Чтобы сэкономить время — закажите дизайн в IDBI. Вместе мы сделаем идеальный проект под ваши задачи.
