Расширение для фотошопа: 11 полезных расширений для Adobe Photoshop – Надстройки Photoshop (внешние модули и расширения)

11 полезных расширений для Adobe Photoshop

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

Практически все примеры бесплатны!

Layrs Control — это бесплатный плагин, который содержит сценарии, помогающие сэкономит время при работе со слоями. У вас появится возможность одним кликом удалить неиспользуемые эффекты или пустые слои, объединить стили слоя и пр.

Множество направляющих во время работы в фотошопе способны вывести из себя любого. Расширение GuideGuide делает работу с направляющими проще и более организованной. У вас есть возможность создания направляющих на основе документа или выделения, а также можно задать конкретное расстояние. Вы можете сохранять шаблоны направляющих и использовать их в других документах.

Плагин Web Font дает вам возможность при помощи фотошопа получить доступ к огромной библиотеке веб шрифтов. Расширение работает только вместе с Suitcase Fusion 5 и WebINK. Но польза его велика. Вы можете примерить любой веб шрифт, без скачивая и установки.

Skeuomorphism — это простое расширение для фотошопа, которое в минуты делает ваш дизайн плоским, заменяя градиенты сплошным цветом.

CSS3PS делает проще процесс преобразования макетов Photoshop в сломи CSS3.

Множество полезных эффектов для ваших изображений совершенно бесплатно.

ContrastMaster — это плагин и редактор Lightroom для создания эффектных контрастов, фотореалистичных картинок, эффекта HDR и пр. (Бесплатный пробный период)

Cut and Slice Me позволяет экспортировать объекты на любые девайсы за считанные секунды.

Помогает конвертировать макеты Photoshop в темы для WordPress.

Расширение помогает в работе со столь необходимыми в вебе PNG-файлами. Плагин поддерживает управление альфа-каналом, переменную компрессию, профиль ICC и сохранение метаданных.

Flaticon — это свободный проект, созданный по инициативе дизайнеров и разработчиков. Это также одна из самых больших баз бесплатных векторных иконок, доступных для загрузки в SVG, PSD или форматах PNG. Вы также можете конвертировать иконки в веб-шрифты, полностью масштабировать и редактировать их.

Источник: Сей-Хай

Лучшие бесплатные Photoshop плагины для веб-дизайнеров / Habr

Divine Elemente

Один из самых потрясающих проектов, которые я встречал за последнее время. Плагин Divine Elemente дает возможность дизайнерам создавать WordPress темы без каких либо навыков фронт/бэк-енда. К сожалению у меня не было возможности поработать с ним. Он доступен только для Windows. Для того что бы все работало необходимо создавать макет в соответствии со встроенным blueprint — это некий Bootstrap, Boilerplate или даже набор инструкций по наименовании слоев и групп. Разработчики обещают множество всего хорошего, в том числе: SEO friendly, валидную и семантичную верстку, читаемый код. Впечатляет!

Layrs Control CS6 CC

«Коллекция скриптов, которая упрощает выполнение рутинной работы». Плагин удаляет все отключенные эффекты слоев, неиспользуемые слои, находит похожие папки и файлы, растеризовывает все смарт объекты, и производит стилизацию всех элементов в соответствии с Flat дизайном. Кстати, последнюю задачу отдельно выполняет Skeuomorphism.it

Cut&Slice CS6, CC

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

Render.ly CC

Render выполняет тот же функционал, что и Cut&Slice. Плюс ко всему это еще и удобный инструмент для комментирования. Все ваши комментарии к макету будут синхронизированы и доступны в онлайне.

CSS3Ps CS3 +

Конвертирует стили фотошопа и шейпы в CSS и SCSS/SASS под Compass. Поддерживает текстовые слои, внутреннюю и внешнюю тени, внутреннее и внешнее освещение, градиенты, border-radius и др. Единственный минус этого замечательного плагина в том, что он работает через сервер и ждать результата приходится по ~30 секунд.

Composer CS5, CS6, CC

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

GuideGuide CS5, CS6, CC

                          
                                       Скажу коротко — удобнейшая штука для построения сеток.

UPD (31.05.13): А еще есть не менее хороший Griddify с открытым исходным кодом:

WebFont CS5, CC

На дворе 2014 год и во многих проектах уже используются нестандартные шрифты, но не все из них грамотно отображаются во всех браузерах на различных устройствах. Данный плагин предоставляет вам удобный доступ к Google Web Fonts из Photoshop. Для использования вам потребуется скачать 30-дневную триал версию Suitcase Fusion 5, но плагин будет работать после окончания этого периода.

Random User Generator CS6, CC

«Как Lorem Ipsum, только люди». При создании макетов, достаточно часто требуются лица живых людей, дабы все смотрелось реалистичнее: профили, комментарии, посты и др. Random User Generator позволит вам избавиться от поисков аватарок. А работает это с помощью API от http://randomuser.me/.

BlendMeIn CS6, CC

Большое количество качественных наборов иконок в вашем Photoshop. Я уже рассказывал про BlendMeIn в одном из своих дайджестов, но не могу его не упомянуть в этой подборке. Тем более с тех пор там появилось еще несколько сетов. А вы как и другие дизайнеры имеете возможность распространять свои иконки под Creative Commons Attribution 3.0 Unported License с помощью этого плагина.

Flat Icon CS5, CS6, CC

Плагин предоставляет доступ, вероятно, к самой большой коллекции (свыше 38 000) плоских иконок. Более 53 000 установок. Проект http://www.flaticon.com

Social Kit CS6, CC

Набор качественных (Pixel perfect, Real View) обновляемых шаблонов для художников разрабатывающих дизайн страниц в социальных сетях.

Velositey

Великолепный инструмент для создания лэйаутов:

Напоследок:

• Perfect Effects 8 Free Edition — большая коллекция фото фильтров.
• Layer Guides — элементарный плагин с простым интерфейсом для позиционирования слоев по краям или центрированию.
• Layout Wrapper — оборачивает макет в окно браузера Safari, что делают многие дизайнеры вручную при демонстрации работ.
• 2xScaler — удобно масштабируем макеты в эпоху расцвета Retina дисплеев.
• TinyPNG — плагин с достаточно известным компрессором PNG файлов внутри.
• Boundary Noise Reduction — понижаем уровень шумов.
• Ink — Photoshop documenter plugin

                   А еще есть «Лучшие платные Photoshop плагины для веб-дизайнеров»

6 Бесплатных Плагинов, Расширений и Скриптов Для Photoshop / WAYUP

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

Три месяца назад мы уже освещали данную тему, но теперь решили посвятить ей еще один материал. И причина тому проста – плагинов, расширений и скриптов, упрощающих работу дизайнера так много, что порой «голова идет кругом» от мысли: «а вот именно ЭТО мне нужно?». Разумеется, решение о необходимости останется за вами, но все «наши» новые плагины не имеют ничего общего с прошлыми примерами. Да, мы подобрали совсем иные и кардинально отличающиеся по задачам и возможностям.

Подготовка

Отметим сначала, что работоспособность плагинов и скриптов проверялась на версиях Adobe Photoshop СС 2015-2017, CS6. Обычно установка производилась через приложение Adobe Extension Manager CC, но иногда достовернее было сделать её вручную, точнее скопировать папки из архива в папку Adobe. Поэтому об установке каждого конкретного плагина мы расскажем отдельно; универсальный рецепт здесь может только навредить.

Также отметим, что неважно какая лицензия у вашего Photoshop. Работать у вас «

наша» подборка будет.

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

Большое, информативное и функциональное расширение от компании Invisionapp. Хотя правильнее было бы его назвать – набор мини-скриптов и плагинов, которые тесно перемешались друг с другом.

Установка: на страничке продукта введите свой e-mail и получите ссылку на загрузку. Или скачайте архив отсюда. Затем установите .exe файл или скопируйте папки из архива в

C:\Users\[пользовательN]\AppData\Roaming\Adobe\CEP\extensions

Плагин появится в меню Окно -> Расширения. Версия 1.1 для Windows последняя, поскольку расширение развивается теперь только для Mac OSX.

Описание: Craft имеет много функций, которые позволяют быстро создавать прототипы проектов, автоматизировать работу с контентом, проводить синхронизацию ресурсов в облаке. Состоит он из нескольких разделов.

На вкладке Фото можно выбрать расположение нужной фотографии и она автоматически вставится на холст. Если у вас размещен объект, например, эллипс и выбран этот слой, то при указании папки изображение будет выбрано случайное и вставлено в объект. Аналогично и с облачным хранилищем, и с фотками из интернета с Unsplash.com.

Если фотографий мало своих и на ресурсе, то можно отправиться на вкладку Stock и поискать тематические предложения на портале iStock. Загрузить их на компьютер и использовать.

Вкладка Type тоже интересна. Она позволяет поработать с необходимыми и скучными действиями. Расставить время, продумать заголовки, ввести дату, город и прочее. Создаем пустой текстовой слой, выделяем его на панели слоев и выбираем, например, Headlines -> Motivation. Затем создаем еще слой и выбираем Имя, затем еще слой и дату, затем еще один и Article. По умолчанию размер шрифта в плагине 12 пунктов. Вот таким образом быстро получилось смастерить макет страницы со статьей и фоном. Главное, что быстро.

FreeHand позволяет редактировать макеты рукописным вариантом, а на вкладке Sync можно синхронизировать данные с InVision (требуется аккаунт).

Подробнее о том, как что-то работает, рассказано на сайте плагина. И да, он полностью бесплатен, несмотря на такой большой функционал. Он будет бесплатен всегда. Удобен ли Craft для работы? Безусловно.

Работа со шрифтами и текстами, заголовками и прочим всегда непроста для веб-дизайнера. Даже порой сложно сказать, что более творчески выглядит: обработка фотографий или текста. Но благодаря набору шрифтов от Google можно создавать действительно интересные решения и зачастую искать в интернете часами замысловатый шрифт не всегда нужно. Плагин Fontea как раз и работает с базой Google Web Fonts. Но как работает!

Установка: загрузив архив со странички автора, устанавливаем exe. Теперь самое занятное и важное. Если вы запустите Photoshop и перейдете в Окно -> Расширения, плагин там будет и даже запустится, и шрифты появятся. НО! Работать он в 99% случаев не будет. Так или иначе, но плагин требует доступа к папке C:\Program Files\Common Files\Adobe\Fonts. И не просто доступа, а «Полный контроль» для группы пользователя Windows.

Если коротко и это важно: по умолчанию Windows создает две записи: Администратор и Пользователь (которых затем может быть много и с разными правами). Работа в Photoshop обычно осуществляется под Учетной записью пользователя. Поэтому отправляемся по адресу выше и открываем свойства папки Fonts, вкладка Безопасность. Здесь видим, что группа Администраторы имеет галочку «Полный контроль», Пользователи её не имеют. Кликаем «Изменить», выбираем «Пользователи», ставит галочку, сохраняем. Это безопасно, но если у вас везде галочки уже есть, то – отлично.

Описание: Fontea предлагает не просто перечень Google шрифтов с примерами написания, но разбивку на категории, поиск по названию, избранное. Причем, выбранный шрифт применяется к тексту мгновенно, а потому можно просто перебором подобрать нужный.

Разумеется, что не все шрифты поддерживают кириллицу, а перебирать и искать нужное – долго. Что предлагаем мы… Открыть проект Google web Fonts, выбрать справа Languages -> Cyrillic. Пред взором предстанет много названий шрифтов и примеры написания. Мы увидели Ubuntu. Переходим в Photoshop и в поиске Fontea вводим Ubuntu. Нашли три варианта. Применяем понравившийся, и текст обрел новые краски. Отдельно можно отсортировать, таким образом, кирилистические шрифты и отметить их звездочкой.

 

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

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

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

Установка: на страничке скрипта нажмите Download, введите свой e-mail и именно на него придет ссылка для скачивания. Распакуйте .zip архив и скопируйте папку Copio в /Presets/Scripts/.

Описание: уже в самом Photoshop откройте Файл -> Сценарии и увидите два элемента Copio Paste и Copio Copy. Для удобства можно перейти в окно Клавиатурные сокращения и назначить на эти сценарии клавиши быстрого вызова.

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

Еще один небольшой, но интересный плагин. Material Design подразумевает использование длинных теней на иконках. Некоторые рисуют их от руки, кто-то ищет готовые решения. Мы же нашли этот плагин, и возможно вы его знаете, а может, и нет.

Установка: На страничке проекта загрузите версию для Photoshop CC  и установите файл .zxp через Adobe Extension Manager CC. Или переименуйте архив из .zxp в .zip, распакуйте куда-нибудь и папку из архива скопируйте в C:\Program Files (x86)\Common Files\Adobe\CEP\extensions. Теперь в Photoshop плагин появится в Окно -> Расширения.

Описание: создание тени проходит в один клик, но перед этим вы можете настроить длину этой самой тени, её прозрачность, цвет, направление. И не имеет значения – какая у вас фигура. Тень тоже будет фигурной. Просто, быстро, удобно. И вот что у нас получилось.

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

Но ведь и макет сайта хочется создавать в Photoshop с использованием готовых иконок. И не только…

Установка: переходим на сайт авторства плагина Creative Do и загружаем бесплатное расширение, заполнив форму.  Устанавливаем файл .zxp с помощью Adobe Extension Manager CC или переименовываем .zxp в .zip (в Windows 10 можно сделать сразу в Проводнике) и файлы и папки из архива копируем в C:\Program Files (x86)\Common Files\Adobe\CEP\extensions.

Описание: теперь остается только создать холст и выбрать нужную иконку  из большого количества. Здесь представлены все иконки шрифта Font Awesome. Да, создаются они на отдельном слое и очень маленькими. Зато потом можно их увеличить, изменить им цвет, сделать тень или свечение и многое другое. И они векторные.

Наличие самого иконочного шрифта Font Awesome на компьютере не требуется.

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

Установка: загрузите архив со странички проекта. Если архив не распознается в системе, то нажмите ПКМ,  выберите из меню «Открыть с помощью» и откройте любым архиватором, например, WinRar. В архиве найдется нужный файл установки .zxp. Установите его все тем же способом, о котором мы писали ранее для других расширений и запускайте Photoshop.

Описание: расширение позволяет  переименовать слой или слои (разными вариантами), растрировать смарт-объект или наоборот превратить объект в смарт, удалить пустые слои, объединить слой с эффектами, наложенными на него. Удобно быстро, просто.

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

Завершение

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

С чего начать своё расширение для Photoshop, Illustrator и др. на HTML5 / Habr

В этой статье я расскажу как при помощи HTML и JavaScript сделать своё собственное расширение для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign.

С июня 2013-го года Adobe добавила поддержку HTML5 для расширений, тем самым упростив их создание.

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

Инструменты

Для работы нам понадобятся любимый текстовый редактор и базовые знания HTML, CSS и JavaScript.
Да-да, теперь никаких Adobe Configurator и Flash.

Автоматизировать создание базового набора нужных файлов помогут Eclipse и Brackets/Edge Code CC.

Из чего состоит

Создадим простейшее расширение для Photoshop.

Минимальный набор файлов и их структура такие:

ExtensionName/
  CSXS/
    manifest.xml
  index.html

где manifest.xml — файл с описанием всех его параметров,
а index.html — само расширение.

Manifest.xml содержить примерно следуюшее

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<ExtensionManifest ExtensionBundleId="com.extensionname" ExtensionBundleName="Extension Name" ExtensionBundleVersion="1.0" Version="4.0">
  <ExtensionList>
    <Extension Version="1.0"/>
  </ExtensionList>
  <ExecutionEnvironment>
    <HostList>
      <Host Name="PHXS" Version="[14.0,14.9]"/>
    </HostList>
    <LocaleList>
      <Locale Code="All"/>
    </LocaleList>
    <RequiredRuntimeList>
      <RequiredRuntime Name="CSXS" Version="4.0"/>
    </RequiredRuntimeList>
  </ExecutionEnvironment>
  <DispatchInfoList>
    <Extension>
      <DispatchInfo>
        <Resources>
          <MainPath>./index.html</MainPath>
        </Resources>
        <UI>
          <Type>Panel</Type>
          <Menu>ExtensionName</Menu>
          <Geometry>
            <Size>
              <Height>400</Height>
              <Width>400</Width>
            </Size>
          </Geometry>
        </UI>
      </DispatchInfo>
    </Extension>
  </DispatchInfoList>
</ExtensionManifest>

Подробное описание всех параметров

а в index.html, всё что душе угодно. Например:

<!doctype html>
<html>
  <body>
    Hello Habrahabr!
  </body>
</html>

Вот и всё.
Наше первое расширение готово.

Запуск

Для запуска неподписанных приложений нужно включить PlayerDebugMode.
Для этого нужно добавить ключ PlayerDebugMod со значением String равным 1

OS X: ~/Library/Preferences/com.adobe.CSXS.4.plist
Windows: HKEY_CURRENT_USER/Software/Adobe/CSXS.4

Далее папку с созданным расширением нужно положить сюда

OS X: ~/Library/Application Support/Adobe/CEPServiceManager4/extensions/
Windows: %APPDATA%\Adobe\CEPServiceManager4\extensions

Запустить Фотошоп и выбрать в меню Window > Extensions > наше расширение

Все дальнейшие изменения можно вносить прямо в папке CEPServiceManager4\extensions.
О том как вносить изменения без перезапуска Фотошопа ниже

Debugging

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

ExtensionName/
  .debug
  CSXS/
    manifest.xml
  index.html

содержание которого примерно следующее

<?xml version="1.0" encoding="UTF-8"?> 
<ExtensionList>
    <Extension>
        <HostList>
           <Host Name="PHXS" Port="8088"/> 
        </HostList>
    </Extension>
</ExtensionList>

где Extension Id=«com.extensionname» — ID нашего расширения,
а Port=«8088» — порт для подключения.

В браузере откроем ссылку http://localhost:8088,

выберем наш index.html.
И вот они Developer Tools

Проверено в Safari и Chrome

Инструменты упрощающие жизнь

Adobe Edge Code CC/Brackets

David Deraedt сделал замечательное расширение для этих редакторов Creative Cloud Extension Builder for Brackets

Оно автоматически создаёт:

• все нужные файлы в нужном месте для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign на выбор
• библиотеки jQuery и CSInterface
• шаблон для иконки
• свою библиотеку оформления всех элементов интерфейса в стиле Adobe
• скрипт автоматического перекрашивания панели в цвет интерфейса приложения
• кнопочку «Refresh»
• .debug со всеми прописанными данными

Главными плюсами являются набор всего нужного и возможность редактирования расширения без необходимости перезапускать программу

После установки расширения в Edge Code CC выбираем File > New Creative Cloud Extension

Вносим нужные правки в index.html

Сохраняем. Запускаем фотошоп и открываем то, что получилось.

Обратите внимание на маленькую кнопочку «Rf» в правом верхнем углу — она позволяет перезагружать расширение без перезагрузки фотошопа.

Кстати, все скрипты работающие непосредственно с функциональностью фотошопа хранятся в папке jsx папки расширения.

Eclipse

Для этого редактора скачиваем это дополнениеAdobe Extension Builder 3 и устанавливаем его.

Оно создаёт:

• шаблоны для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign
• библиотеки jQuery и CSInterface
• свою библиотеку оформления всех элементов интерфейса в стиле Adobe
• скрипт автоматического перекрашивания расширения в цвет интерфейса приложения

Суть примерно такая же как и в первом случае.
Только вот очень неудобно, что для просмотра внесённых изменений нужно каждый раз перезапускать фотшоп.
Также нет иконки и .debug-файла.
Да и сам Eclipse тяжелее на подъём.

Сборка в ZXP

Последний этап — собрать результат в ZXP-файл и подписать его.
За неимением под рукой Windows, расскажу как это делается в OS X.
Для этого скачиваем CC Extensions Signing Toolkit

Открываем терминал и получаем сертификат командой

ZXPSignCmd -selfSignedCert <countryCode> <stateOrProvince> <organization> <commonName> <password> <outputPath.p12>

пример

ZXPSignCmd -selfSignedCert RU RU Saint-Petersburg "My Company" "Igor Volkov" myPassword myCertificate.p12

Полсле того, как сертификат получен пакуем наше расширение в ZXP с использованием этого сертификата.

ZXPSignCmd -sign <inputDirectory> <outputZxp> <p12> <p12Password>

пример

./ZXPSignCmd -sign HelloHabrahabr/ HelloHabrahabr.zxp myCertificate.p12 myPassword

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

Полезные ссылки

HTML Panel Tips by Davide Barranca — несколько полезных статей на тему
Introduction To Photoshop Scripting By Kamil Khadeyev — с чего начать свой первый скрипт для Фотошопа.
USING The Adobe Eextension SDK — подробная инструкция от Adobe
Adobe Photoshop Scripting — документация по написанию скриптов от Adobe

A Short Guide to HTML5 Extensibility — примерно тоже, что я описал в первой части своей статьи
Introducing HTML5 Extensions — пара вводных видео для работы с Eclipse
Adobe Extension Builder 3 — расширение для Eclipse и паковщик в ZXP-файлы
Creative Cloud Extension Builder for Brackets — расширение для Adobe Edge Code CC/Brackets

Секреты Расширений, Скриптов И Плагинов Photoshop Для Веб-Дизайна / WAYUP

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

Поэтому удобным решением является использовать плагины и расширения, которые специально и создаются для того, чтобы упростить и ускорить труд веб-мастера и художника. В этом материале мы рассмотрим самые необычные и удобные расширения для Photoshop, некоторые из которых бесплатные, а некоторые и платные. Так или иначе, платить или загружать со сторонних ресурсов – решать уже вам.

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

В общем, начинаем.

Мощный плагин, позволяющий упростить множественные действия со слоями в одном документе Photoshop.  Загрузить его можно бесплатно в виде демо-версии или приобрести полностью. Подходит для версий Photoshop CC 2015 и выше для Windows и Mac.

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

Также плагин позволяет найти некоторую группу одноимённых слоев и изменить их свойства разом, а не по одному. Существует также возможность автозаполнения, то есть во время набора названия слоя, появятся варианты имен, выделения их цветом. Все изменения в Renamy в окне Слои применяются автоматически, как и наоборот. Наглядно увидеть плагин в работе можно на сайте разработчиков и на видеоинструкции.

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

Компания The Orange Box создала возможность быстрой конвертации пиксельного изображения в векторное в один клик. Таким образом, теперь вы можете нарисовать что-то, написать кисточкой или карандашом, а затем, нажав одну кнопку, превратить в вектор сразу в Photoshop. Полученное изображение будет иметь векторный контур, который затем можно редактировать пером, увеличивать/уменьшать без потери качества.

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

Простой и легкий плагин для удобства создания активов из слоев и групп. Retinize It бесплатен и подходит для Photoshop CS5, CS6 и CC.

Будь то смарт-объект, форма или изображение, его можно в один клик экспортировать в 100%/200%/300% размере с сжатием и набором цветовой гаммы, формата файлов для правильного отображения на устройствах с системой iOS и экранами Retina.

Таким образом, если веб-мастер создаёт мобильную версию сайта или добавляет иконки разного размера, то как раз данный плагин будет удобен.

Расширение (наверное, одно из самых интересных) для создания быстрого и удобного макета сайтов. Плагин бесплатен и поддерживает работу с Photoshop CS6, CC & CC 2014. Работа новейших версий CC2015 и выше не поддерживается, только если через ручную правку реестра и файла версии.

Небольшой по размеру, но функциональный, он позволяет создать дизайн в несколько кликов. Здесь и макеты footer, и центральных секций, верхнего меню и прочее, и прочее. Таким образом, добавляя разные блоки и секции, можно собрать макет дизайн сайта, а затем редактировать его и накладывать текст, картинки, оформление, кнопочки и прочее, без чего дизайн не является дизайном и для чего, по сути, и нужны веб-дизайнеры.

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

Минималистический и удобный плагин для работы с форматом PNG. SuperPNG бесплатен и поддерживается всеми версиями, начиная с Photoshop CS3.

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

Плагин SuperPNG позволяет сократить размер файла, а качество, все же, он не трогает.

Альтернатива SuperPNG, разработанная на том же самом API.  Плагин платный и демо-версий нет. Несмотря на это, уникальность данного расширения в том, что он позволяет работать с пакетами файлов, поэтому, если вам нужно много PNG сжать, то TinyPNG чуть более удобен. Да и настроек побольше и оформление посимпатичнее.

TinyPNG также создает и JPG файлы, имеет много настроек и работает со слоями. То есть, выделив нужный слой в Photoshop, нажимайте по кнопке Export selected layers. Если же нажать на Show instruction, то появится большой psd файл с мини-учебником.

Весьма удобный и простой плагин, несмотря на то, что платный. Увы, демо-версии тоже нет, но за последние годы он становится самым популярным. Дело в том, что плагин позволяет создать для любого слоя и объекта на нем чистый код CSS3. Затем данный код можно перенести на создаваемый сайт в любой другой редактор или другое приложение. Будет это прямоугольник, кнопка, иконка или текстовой блок – совершенно неважно.

Код CSS3 создается автоматически, как только вы нарисуете объект и включите окно плагина Если решите заменить цвет (например, нашего прямоугольника), то и кодировка автоматически обновится. Если будет добавлен текстовой слой, то и для него будут описаны свойства. Если требуется CSS-код для нескольких слоев, то выделяйте их и плагин автоматически все напишет. Одним словом, для верстальщиков самое нужное.

Таким образом, для веб-дизайнеров и тех, кто не слишком дружит с версткой, такой плагин будет весьма полезен.

Бесплатная альтернатива плагину CSS Hat, поддерживающая работу разных версий Photoshop. Отличие же его в том, что работает он в онлайн-режиме через облако. То есть, необходимо выделить нужный слой  с элементом дизайна сайта (или объект на слое), нажать кнопку CSS3Ps и затем смотреть, как откроется окно браузера, сайт разработчиков и появится затем нужный код CSS3. Поскольку CSS3Ps представляет собой скрипт, а не расширение в «чистом виде», то доступен он в меню Файл->Сценарии.

Что удобнее для веб-дизайнера, сказать сложно. Кого-то устраивает обычное кодирование, кому-то важно off-line.

Плагин для тех, кто работает на Mac OS X, версий для Windows нет. Тем не менее, HTML Block полностью бесплатен и предлагает помощь в кодировании слоев и объектов Photoshop, используя для этого движок WebKit. Помимо создания кода, в отдельном окне будет отображаться и получаемый результат. То есть того, что будет видно в окне браузера.

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

 Установка расширений и плагинов

Удобнее всего устанавливать все расширения для Photoshop через отдельное приложение Adobe Extension Manager CC (CS5/CS6 и так далее). Оно бесплатное и доступно на сайте самого Adobe. Но это только в том случае, если плагин имеет вид архива с расширением ZXP.

В противном случае, необходимо устанавливать в C:\Program Files (x86)\Common Files\Adobe\CEP\extensions (если Win64) или смотреть прилагаемую инструкцию от разработчиков и других создателей плагина, так как разные версии (и сборки) Photoshop имеют разное расположение папок (а если версий на компьютере много…). Но и некоторые плагины устанавливаются в другие папки, как например CSS Hat и TinyPNG. Универсального рецепта нет.

Бывает, что некоторые плагины и расширения не поддерживают современные и новые версии Photoshop. Не обновили их разработчики, а поработать с ними хочется. Так, например, Velositey 2 не работает с CC2015 и выше. Но поскольку плагин бесплатный и распространяется с открытым исходным кодом (Open Source Code) на портале github.com, то и решение нашлось на просторах интернета. Нужно четко знать, какой у вас Photoshop, так как наши настройки для  CC2015 файла CSXS\manifest.xml такие (немного поправили комментарий с github).

 

Таким образом, он у нас заработал и не вызывает проблем. Аналогично и с другими бесплатными плагинами, что по какой-то причине не были обновлены разработчиками вовремя. Это вовсе не означает, что они устарели или вы занялись «пиратством». Разработчики изначально представляют его в открытом виде, а значит, и редактировать можно самостоятельно, просто кардинальных новшеств нет, «багов» нет, вот, возможно и решили сборку не обновлять, а ограничиться только github’ом. Это портал для разработчиков, где можно найти практически все приложения, плагины и прочее, что распространяются по лицензии Open Source. Здесь же ведутся и обсуждения улучшений, багов и прочего.

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

Итоги

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

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

Надеемся, что вам понравились некоторые из них.

Форматы файлов, поддерживаемые в Photoshop

В этом разделе представлен список форматов файлов, поддерживаемых в Photoshop.

Форматы для импорта звука

Звездочкой (*) отмечены форматы, поддержка которых появилась в Photoshop CS6.

• AAC*
• AIFF*
• M2A*
• M4A*
• MP2*
• MP3*

Форматы для импорта видео

Звездочкой (*) отмечены форматы, поддержка которых появилась в Photoshop CS6.

• .264*
• 3GP
• 3GPP*
• AVC*
• AVI (см. примечание ниже)
• F4V*
• FLV*
• MOV (QuickTime)
• MPE*

• MPEG-1
• MPEG-4
• MPEG-2, если установлен декодер (например, с приложением Adobe для обработки видео)
• MTS*
• MXF*
• R3D*
• TS*
• VOB*

Примечание.

• AVI: начиная с Photoshop CC 2019 версии 20.0 этот формат не будет поддерживаться при импорте файлов на компьютерах Mac. Его поддержка будет возможна только в ОС Windows. 
• Воспроизведение SWF: начиная с Photoshop CC 2019 версии 20.0 воспроизведение файлов SWF посредством команды Файл > Открыть как (видео) не будет поддерживаться на компьютерах Mac и Windows. Файлы SWF не будут воспроизводиться в Photoshop.  

Форматы для экспорта видео

Звездочкой (*) отмечены форматы, поддержка которых появилась в Photoshop CS6.

• DPX*
• MOV (QuickTime)
• MP4
• JPEG2000 (QuickTime) (см. примечание ниже)

Примечание.

JPEG2000 (QuickTime): начиная с Photoshop CC 2019 версии 20.0 формат QuickTime с набором JPEG2000 не будет поддерживаться для экспорта на компьютерах Mac и Windows.

Форматы графических файлов

• BMP
• Cineon
• CompuServe GIF
• DICOM
• Формат IFF
• JPEG
• JPEG2000
• Формат больших документов PSB
• OpenEXR
• PCX
• Photoshop 2.0 (только для Mac)
• Photoshop DCS 1.0
• Photoshop DCS 2.0
• Photoshop EPS
  

• Photoshop PDF
• Photoshop PSD
• Photoshop Raw
• PICT (только чтение)
• Ресурс PICT (только для Mac; возможно только открытие)
• Pixar
• PNG
• Переносимый растровый формат
• Radiance
• Scitex CT
• Targa
• TIFF
• Wireless Bitmap

Форматы с поддержкой 3D

Звездочкой (*) отмечены форматы, поддержка которых появилась в Photoshop CS6.

• 3D Studio (только импорт)
• DAE (Collada)
• Flash 3D* (только экспорт)
• JPS* (JPEG Stereo)
• KMZ (Google Планета Земля 4)
• MPO* (мультиформатная поддержка)
• U3D
• OBJ (Wavefront)

22 photoshop-плагина для фронтенд-разработчика / Habr

Предлагаю читателям «Хабрахабра» подборку 22 дополнений (скриптов) помощников, необходимых фронтенд-разработчику.

Hexy

Печально выбирать слои в макете и каждый раз запускать палитру цветов только для того, чтобы получить шестнадцатиричное значение того или иного цвета. Hexy позволяет использовать инструмент «Пипетка»: нажмите на цвет объекта и скопируйте его непосредственно в буфер обмена.

Griddify

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

Size Marks

Size Marks — очень полезный скрипт для веб-дизайнера или фронтенд-разработчика. С его помощью легко замерять внешние отступы элементов.

Velositey

Velositey — полнофункциональное дополнение для Photoshop с открытым исходным кодом. Предназначено для создания скучных вещей, таким образом, вы сосредоточиваетесь над стилизацией сайта.

Random User

Random User создает «пользователей» для заполнения макета при создании сайта, тем самым экономя ваше время.

Kaku

Kaku — простой плагин для перевода названий слоев на разные языки.

LiveShare PS

LiveShare PS позволяет вести онлайн трансляцию демонстрации Photoshop документов.

LayerCraft

Плагин экспортирует элементы пользовательского интерфейса из слоев.

Ink

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

Modular Grid Pattern

Modular Grid Pattern — это приложение для веб дизайнеров для быстрого создания сетки в Adobe Photoshop.

Photoshop Social Shar

Photoshop Social Shar — бесплатный плагин для розшаривания своего дизайна.

Pngquant

Pngquant — обеспечивает сохранение .png лучше, чем при «Сохранить для Web». Созданные файлы на 60-70% меньше, чем 24/32-bit PNG при «Сохранить для Web» и, в отличии от 8-bit PNG, поддерживает полупрозрачный альфа-канал.

Bounce

Bounce — бесплатное дополнение, которое добавляет доступ к сообществу Dribbble в дизайнерских продуктах Adobe.

Retinize It

Retinize It позволяет подготовить ваш дизайн для устройств с retina-дисплеем.

Free photoshop script: Export your vector layers from PS to SVG in a single click! It

Данный скрип позволяет пакетно сохранять векторные слои с расширением “.svg”.

Lighten / Darken Color (Script)

Этот скрип помогает работать с цветом.

Corner Editor

Данный инструмент позволяет задавать скругления каждого угла отдельно. Судя по превью, это будет доступно в CS7, но так же будет полезным и в нынешней версии.

Group Layer Renaming (Script)

Скрипт пакетно переименовывает слои в макете, так же доступен экспорт слоев по тегам с их названий(аналог Slicy).

Realsizer

Скрипт создан для разработчиков интерфейсов мобильных устройств. Позволяет просматривать и печатать дизайн в реальном размере.

Transform Each Beta (Script)

Transform Each позволяет пакетно трансформировать слои аналогично тому, как это сделано в Adobe Illustrator.

12 New Photoshop Tools for CS6

Дополнительная панелька с 12-ю полезными инструментами.

Free Lorem Ipsum Generator

Генератор текста «рыбы» для Photoshop, Illustrator, InDesign & Dreamweaver.

Оригинал статьи