36 плагинов Photoshop для веб-дизайнеров, которые вам нужно попробовать

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

Поскольку мы знаем, что многие из наших читателей используют Photoshop на регулярной основе, мы подумали, что на этот раз было бы неплохо предложить другой вид списка плагинов. Ниже вы найдете лучшие плагины для Photoshop, которые мы могли найти в Интернете.

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

Готовый? Тогда приступим.

Плагины Photoshop, которые веб-дизайнер не должен игнорировать

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

Retinize It

• Цена: Бесплатно
• Доступно для: CC 2015

Во-первых, у нас есть бесплатный плагин для быстрого создания ресурсов для дисплеев Retina. Retinize Он добавляет в Photoshop новый экшен, который позволяет экспортировать изображения в их исходных размерах или увеличивать их в два или три раза.

После установки вы найдете новую опцию в разделе « Окно»> «Действия». Просто выберите слой или группу слоев, запустите действие, назовите файлы и получите нарезанные ресурсы. Отлично подходит для создания веб-сайтов, готовых к работе с сетчаткой.

Вырежьте и нарежьте меня

• Цена: Бесплатно
• Доступно для: CS6

Еще один плагин для прямого экспорта ресурсов из слоев. Cut & Slice me автоматически обрезает ваши изображения и экспортирует их как файлы PNG. Он может иметь дело с перекрывающимися фрагментами, несколькими состояниями кнопок и несколькими разрешениями. К сожалению, он не совсем актуален, но все еще работает со старыми версиями Photoshop.

CSS3P

• Цена: Бесплатно
• Доступно для: CS3 и новее

Как следует из названия, этот сервис может конвертировать слои Photoshop в CSS3. Что в нем особенного, так это то, что это облачный сервис, которым можно пользоваться бесплатно.

Плагин поддерживает несколько слоев (включая текст), тени, градиенты, радиус границы и многое другое. В дополнение к этому, он также может работать с SCSS и SASS.

Угловой редактор

• Цена: Бесплатно
• Доступно для: CC 2015

Если вам когда-нибудь понадобится создать закругленные углы, этот скрипт для вас. Он расширяет возможности Photoshop по созданию скругленных углов, работает с любой многоугольной формой, включает несколько стилей углов, позволяет редактировать сразу несколько слоев и многое другое.

HTML-блок

• Цена: Бесплатно
• Доступно для: CC 2015 (только Mac OS)

Наш следующий соперник позволяет размещать HTML и CSS прямо внутри документов Photoshop. Таким образом, вы можете создавать веб-ресурсы непосредственно в программном обеспечении и использовать онлайн-ресурсы в своем файле PSD. Последний включает веб-шрифты, внешний CSS и многое другое.

Шрифт Awesome PS

• Цена: Бесплатно
• Доступно для: CC

Font Awesome - это иконочный шрифт, который набирает популярность и пользуется популярностью. По этой причине имеет смысл включать только в файлы Photoshop. К счастью, этот плагин делает это проще простого. Просто скачайте и установите бесплатно, и все готово.

Layrs Control 2

• Цена: Бесплатно
• Доступно для: CC, CC 2014

Этот плагин представляет собой набор из семи скриптов, которые упрощают некоторые из наиболее раздражающих аспектов Photoshop. Он включает в себя редактор имени слоя, возможность удаления неиспользуемых эффектов, может автоматически удалять пустые слои, растеризовать смарт-объекты, находить похожие файлы и многое другое. Бесплатно скачать и использовать по своему усмотрению.

CSS Hat 2

• Цена: 39,99 долларов
• Доступно для: CC 2014-2017

CSS Hat автоматически переводит стили слоя в CSS3. Таким образом, вы можете просто скопировать и вставить его, а не выяснять, как разместить графику на сайте.

Плагин может работать с несколькими слоями одновременно, шрифтами и разными стилями шрифтов, а также может выдавать LESS, SASS, Stylus и многое другое. Он также имеет множество функций, которые вы можете найти в редакторах кода, например, подсветку синтаксиса. CSS Hat также доступен для старых версий Photoshop.

Слои страницы

• Цена: $ 35
• Доступно только для Mac OS X

Многие плагины в этом списке призваны упростить превращение файлов Photoshop в веб-сайты. Однако и наоборот будет столь же необходимо. Вот для чего нужны слои страницы.

Плагин автоматически конвертирует веб-сайты в файлы PSD и сохраняет каждый элемент страницы как один слой. Откройте любую страницу во встроенном браузере и просто сохраните ее в Photoshop. Плагин платный, но похоже, что он того стоит.

PNG шляпа

• Цена: 27,99 долларов США
• Доступно для: CS5, CS6, CC, CC 2014.1+, CC 2015

Этот плагин, созданный теми же людьми, что и CSS Hat, расширяет возможности Photoshop по экспорту файлов PNG. Например, он имеет лучшее сжатие и может экспортировать правила CSS. PNG Hat также предлагает щедрую политику возврата денег, если вы не удовлетворены.

Fontself

• Стоимость: 49 €
• Доступно для: CC 2015, CC 2017

Далее идет плагин, который позволяет вам создавать собственный шрифт с помощью перетаскивания. В эпоху, когда типографика становится все более важной в сети, это действительно приятно слышать. Просто превратите (цветные) изображения и векторы в шрифты OpenType. Управляйте кернингом, лигатурами и многим другим. Fontself также является активно поддерживаемым плагином, поэтому владельцы получают новые функции бесплатно.

Плагин Getty Images для Photoshop

• Цена: Бесплатно
• Доступно для: CC 2016 и выше

В Getty images есть огромная коллекция стоковых изображений и плагин, который позволяет импортировать их прямо в Photoshop. Ищите и фильтруйте тысячи изображений с высоким разрешением и синхронизируйте свои покупки с учетной записью Getty.

Очиститель PSD

• Цена: 19,99 долларов
• Доступно для: CC 2014.1+

Еще один плагин от Source, который расширяет возможности панели слоев Photoshop. PSD Cleaner автоматически сканирует структуру слоев и показывает возможности для улучшения. Это поможет вам найти безымянные слои, удалить пустые, найти слои, выходящие за пределы холста, и многое другое. Короче говоря, вы будете организованы.

WebZap

• Цена: 19 долларов
• Доступно для: CS5 и выше

Это может показаться сюрпризом, но Photoshop на самом деле не предназначен для веб-дизайна. Программа начиналась как инструмент для редактирования фотографий и только позже добавила возможности для создания макетов.

Чтобы компенсировать это, есть WebZap. Плагин предоставляет готовые элементы для создания макетов веб-макетов в кратчайшие сроки. Он основан на сетке 960, может создавать форматированный текст Lorem ipsum, навигацию, кнопки и многое другое.

Тонкие узоры

• Цена: 17,99 долларов США
• Доступно для: CC и выше

Subtle Patterns - это библиотека бесплатных шаблонов текстур, которые можно изменять. Одноименный плагин переносит их на панель инструментов Photoshop. Вот и все.

ScreenSnap

• Цена: 9,99 долларов
• Доступно для: CC 2014 или новее

Следующим в нашем списке плагинов Photoshop является ScreenSnap. Программа позволяет создавать скриншоты из файлов PSD, либо всего документа, либо из выбранной области. Нет необходимости обрезать или сохранять вручную, просто выберите папку, нажмите одну кнопку, и все в порядке. Отлично подходит для того, чтобы делиться своей работой с другими, даже с размером сетчатки глаза.

Дуплликатор

• Цена: Бесплатно
• Доступно для: CC, CC2014

Здесь у нас есть расширение для быстрого клонирования слоев и групп слоев, когда вам нужно несколько одинаковых объектов. Просто выберите необходимое количество копий и расстояние между ними.

Перспективные мокапы

• Цена: 19 долларов
• Доступно для: CC 2017

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

Маркировка размеров PS

• Цена: Бесплатно
• Доступно для: CC 2014

Отметки размера позволяют добавлять метки размера объекта или расстояния между объектами с помощью инструмента выделения. Каждая этикетка сохраняется в новом слое и полностью настраивается. Это очень полезно при добавлении спецификаций для человека, который превратит PSD в веб-сайт.

Fontea

• Цена: Бесплатно
• Доступно для: CC 2014, CC 2015

Для всех, кто не удовлетворен предложением Photoshop по умолчанию шрифтов, Fontea включает в себя все веб-шрифты, доступные в Google Fonts (в настоящее время 800+). Плагин также поддерживает актуальность онлайн-репозитория и позволяет вам создавать коллекции ваших любимых шрифтов.

Pixabay

• Цена: $ 4.99
• Доступно для: CC 2015 и выше

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

Есть и другие подобные плагины для других библиотек стоковых фотографий, таких как Shutterstock и Pexels.

LayerCraft

• Цена: Бесплатно
• Доступно для: CC, CC 2014

Еще один плагин для экспорта ресурсов пользовательского интерфейса из слоев Photoshop. LayerCraft имеет возможность масштабировать ваши изображения при экспорте, может обрезать прозрачные пиксели и экспортировать в различных размерах для отображения сетчатки.

Генератор Lorem Ipsum

• Цена: Бесплатно
• Доступно для: CS 5/6, CC

Как следует из названия, это плагин для создания текста-заполнителя Lorem ipsum. Таким образом, вам больше не нужно копировать его из внешних источников. Генератор предлагает настраиваемый вывод, возможность копирования в буфер обмена одним щелчком мыши и активно поддерживается.

LoremPicsum

• Цена: Бесплатно
• Доступно для: CS, CC

Этот похож на версию Lorem ipsum, однако создает случайные изображения вместо текста. Выберите область, выберите рисунок, и вы получите изображение-заполнитель. Забавный трюк: изображения взяты из популярных телешоу и фильмов, таких как Футурама, Симпсоны, В поисках Немо и Up.

Социальный комплект Pro

• Цена: 9,99 долларов
• Доступно для: CC 2015+

И еще один плагин Source. Этот нацелен на улучшение всего, что есть в социальных сетях. Он содержит шаблоны для создания рекламы на мобильных и настольных компьютерах, обложки и изображения профиля. Вы даже можете предварительно просмотреть результаты в Photoshop.

Руководства по слоям

• Цена: Бесплатно
• Доступно для: Неизвестно

Направляющие - важный инструмент в Photoshop, позволяющий сохранять все структурированным. Однако они могут раздражать.

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

Генератор длинных теней

• Цена: Бесплатно
• Доступно для: CS6, CC

Название плагина говорит само за себя. Генератор длинных теней помогает создавать длинные тени в Photoshop. Вы можете контролировать длину и непрозрачность тени, цвет, градиент и углы. Затем просто добавьте их одним щелчком мыши.

TinyPNG

• Цена: 50 долларов
• Доступно для: CS5, CS6, CC и выше

TinyPNG - это онлайн-сервис, который я часто рекомендую для оптимизации изображений перед их загрузкой в ​​WordPress. Он сжимает файлы JPG и PNG, чтобы сделать их как можно меньше.

Сайт также предлагает плагин Photoshop, который делает то же самое внутри программного обеспечения для редактирования изображений. Он позволяет просматривать и сохранять напрямую, масштабировать, использовать частичное выделение и многое другое. Если на их сайте есть какие-либо указания, плагин стоит своих денег.

Glifo

• Цена: 19 долларов
• Доступно для: CS5, CC

Glifo добавляет возможность экспортировать векторные иконки из Photoshop в виде иконок веб-шрифтов. Звучит как отличное дополнение к плагину Font Awesome.

specKing

• Цена: 19 долларов
• Доступно для: CS5, CS6, CC 2014 и более поздних версий.

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

Экспортный комплект

• Цена: 19,33 $ / месяц
• Доступно для: CS6 и выше

Этот плагин Photoshop позволяет конвертировать файлы PSD в HTML, CSS, WordPress, iOS, Android и другие. Он также содержит функции совместной работы. Выглядит очень мощно, однако поставляется с ежемесячной лицензией и стоит не совсем дешево.

Плагин Photoshop Social Share

• Цена: Бесплатно
• Доступно для: Неизвестно (только Mac OS)

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

Преобразовать каждый

• Цена: Бесплатно
• Доступно для: CS5, CS6, CC

Transform Each - это скрипт, позволяющий преобразовывать сразу несколько объектов, не меняя их положения. Что это означает, лучше всего иллюстрирует GIF ниже. Выберите точки привязки, трансформацию, которую вы хотите достичь, и она доставит вас туда одним щелчком мыши.

ToonIt!

• Цена: 129 долларов
• Доступно для: Photoshop CS и более поздних версий.

Веселая в конце. Если вы когда-нибудь задумывались о создании графического онлайн-романа, эта услуга вам очень поможет. Он превращает обычные фотографии в мультфильмы, имеет множество предустановок и отработанные технологии. Хотя немного дороговато.

Вкратце о подключаемых модулях Photoshop…

Photoshop - прекрасный инструмент для веб-дизайнеров. Это мощный инструмент, наполненный функциями и постоянно обновляемый.

Однако иногда нам хочется, чтобы у него были дополнительные функции или более простые способы выполнения задач. Вот тут и пригодятся плагины Photoshop.

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

И это только те, которые полезны для веб-дизайна. Есть еще много других, особенно для ретуши изображений. Есть что добавить?

Знаете ли вы дополнительные плагины Photoshop, которые вам нравятся и которые вам рекомендуются? Пожалуйста, поделитесь в комментариях ниже!

Миниатюра статьи от VectorsMarket / shutterstock.com