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


10 бесплатных плагинов для Photoshop / Полезное / FREELANCE.TODAY

Использование плагинов для популярного графического редактора Adobe Photoshop позволяет значительно упростить работу и тем самым повысить свою продуктивность. Плагины отлично подходят для выполнения повторяющихся или трудоемких задач, таких, как конвертация файлов PSD в SCC3, экспорт слоев, преобразование текста в формат SVG и так далее. Существует огромное количество Photoshop-плагинов, созданных многочисленными поклонниками этой программы. Cегодня FreelanceToday представляет вам 10 бесплатных расширений, которые обязательно помогут вам в работе!

 

HEXY

nexy 

 

Hexy предназначен для быстрого получения Hex или RGB цветовых кодов. Установив плагин, вам в дальнейшем потребуется использовать инструмент «пипетка». Достаточно кликнуть по выбранному цвету и плагин автоматически скопирует цветовой код в буфер обмена. После этого его будет очень легко вставить в файл CSS. Просто и удобно, очень полезный плагин!

 

SIZE MARKS

size 

 

Плагин Size Marks представляет собой скрипт для Photoshop, который превращает прямоугольное выделение в размерную метку. Таким образом, фронтенд-инженер или дизайнер может гораздо быстрее подготовить макет к верстке. При этом плагин создает новый слой и автоматически присваивает ему название, что очень удобно. Новый слой полупрозрачный и совсем не мешает работе. Чтобы установить плагин, нужно разархивированный скрипт положить в папку Windows: C:\[Program Files]\Adobe\[Photoshop]\Presets\Scripts и перезапустить программу.

 

PICTURA

pictura 

 

Вам требуется часто вставлять изображения во время работы над проектом? Установите плагин Pictura! Плагин позволяет искать и добавлять изображения из Flickr, не выходя из рабочего пространства. Загрузка происходит моментально, всего за один клик. Если нужно найти бесплатные картинки, можно использовать встроенный фильтр. Чтобы установить плагин, просто кликните два раза по скачанному файлу. Pictura работает с версиями Photoshop CS5 и выше.

 

OVEN

oven 

 

Oven – отличный плагин для работы с многослойными документами. В Photoshop в 2013 году появился инструмент Generator, который позволял экспортировать изображения в режиме реального времени. Однако, чтобы экспорт прошел правильно, нужно было переименовывать нужные слои, что отнимало много времени. Oven решает эту проблему. Плагин можно настроить на экспорт в форматы png и jpg. Oven совместим с версиями CC и CC 2014.

 

INK

ink 

 

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

 

LAYERCRAFT

craft 

 

Плагин LayerCraft  позволяет экспортировать слои в разном масштабе. Очень удобный инструмент для быстрого экспорта элементов пользовательских интерфейсов. Вы сможете экспортировать изображения в @ 1х, @ 2х и даже @ 3х (что иногда нужно для устройств с экраном Retina) или MDPI и xhdpi для Android. Если вы занимаетесь созданием пользовательских интерфейсов, то этот плагин поможет вам сэкономить много времени. Плагин совместим с версией CC.

 

COMPOSER

composer 

 

Сomposer – это плагин, позволяющий изменить или обновить стиль слоя всего в один клик. Достаточно выделить слои, в которые были внесены изменения и закрепить эти свойства. Теперь слои, в которых применялись стили или режимы смешивания, можно использовать при редактировании элементов в других слоях. Плагин Composer совместим с версиями Photoshop CS5, CS6 и CC.

 

VELOSITEY

velositey 

 

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

 

QUICKGUIDE

quickguide 

 

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

 

LOREM IPSUM GENERATOR

lorem 

 

Плагин для генерации «рыбы». Теперь не нужно искать текст в интернете или копировать его из текстового файла – все можно сделать непосредственно в рабочей области. Помимо этого, в плагине предусмотрено несколько настроек вывода текста. Плагин можно использовать в Illustrator, InDesign и Dreamweaver. Расширение совместимо с версиями Photoshop CS5, CS6 и CC.

freelance.today

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

Divine Elemente
image Один из самых потрясающих проектов, которые я встречал за последнее время. Плагин Divine Elemente дает возможность дизайнерам создавать WordPress темы без каких либо навыков фронт/бэк-енда. К сожалению у меня не было возможности поработать с ним. Он доступен только для Windows. Для того что бы все работало необходимо создавать макет в соответствии со встроенным blueprint — это некий Bootstrap, Boilerplate или даже набор инструкций по наименовании слоев и групп. Разработчики обещают множество всего хорошего, в том числе: SEO friendly, валидную и семантичную верстку, читаемый код. Впечатляет!
Layrs Control CS6 CC
image «Коллекция скриптов, которая упрощает выполнение рутинной работы». Плагин удаляет все отключенные эффекты слоев, неиспользуемые слои, находит похожие папки и файлы, растеризовывает все смарт объекты, и производит стилизацию всех элементов в соответствии с Flat дизайном. Кстати, последнюю задачу отдельно выполняет Skeuomorphism.it
Cut&Slice CS6, CC
image Очень и очень удобный плагин предназначенный для нарезки макета. Позволяет экспортировать слои с настройкой для различных устройств. Определенный синтаксис при наименовании слоев позволяет автоматически производить дополнительные действия над слоем или группой слоев: тримминг, масштабирование, выявление состояния кнопок и распределение их на типы устройств.
Render.ly CC
Render выполняет тот же функционал, что и Cut&Slice. Плюс ко всему это еще и удобный инструмент для комментирования. Все ваши комментарии к макету будут синхронизированы и доступны в онлайне.
CSS3Ps CS3 +
Конвертирует стили фотошопа и шейпы в CSS и SCSS/SASS под Compass. Поддерживает текстовые слои, внутреннюю и внешнюю тени, внутреннее и внешнее освещение, градиенты, border-radius и др. Единственный минус этого замечательного плагина в том, что он работает через сервер и ждать результата приходится по ~30 секунд.
Composer CS5, CS6, CC
image Отличный плагин, который позволяет производить операции над множеством слоев одновременно. А именно изменять стили слоя, непрозрачность, позиционирование и синхронизировать «модели слоев» между слоями.
GuideGuide CS5, CS6, CC
                          image                                        Скажу коротко — удобнейшая штука для построения сеток.

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

WebFont CS5, CC
image На дворе 2014 год и во многих проектах уже используются нестандартные шрифты, но не все из них грамотно отображаются во всех браузерах на различных устройствах. Данный плагин предоставляет вам удобный доступ к Google Web Fonts из Photoshop. Для использования вам потребуется скачать 30-дневную триал версию Suitcase Fusion 5, но плагин будет работать после окончания этого периода.
Random User Generator CS6, CC
image «Как Lorem Ipsum, только люди». При создании макетов, достаточно часто требуются лица живых людей, дабы все смотрелось реалистичнее: профили, комментарии, посты и др. Random User Generator позволит вам избавиться от поисков аватарок. А работает это с помощью API от http://randomuser.me/.
BlendMeIn CS6, CC
image Большое количество качественных наборов иконок в вашем Photoshop. Я уже рассказывал про BlendMeIn в одном из своих дайджестов, но не могу его не упомянуть в этой подборке. Тем более с тех пор там появилось еще несколько сетов. А вы как и другие дизайнеры имеете возможность распространять свои иконки под Creative Commons Attribution 3.0 Unported License с помощью этого плагина.
Flat Icon CS5, CS6, CC
image Плагин предоставляет доступ, вероятно, к самой большой коллекции (свыше 38 000) плоских иконок. Более 53 000 установок. Проект http://www.flaticon.com
Social Kit CS6, CC
image Набор качественных (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 плагины для веб-дизайнеров»

habr.com

Бесплатные Photoshop плагины, которые могут оказаться полезными

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

Как использовать Photoshop Плагины?

  1. Скачать последнюю версию Adobe Extension Manager и установить его
  2. Двойным щелчком мыши открыть плагин Photoshop (.zxp), который вы скачали
  3. Adobe Extension Manager будет запущен и автоматически установит плагин. Альтернативный способ: запустите Adobe Extension Manager и нажмите на кнопку «Установить» в верхней части панели, найдите и выберите ваш плагин.
  4. Используйте плагин, выбрав в меню: Window> Extensions> имя плагина
  1. Photoshop pluginsPhotoshop plugins

Удобные линии разметки

GuideGuideGuideGuide

С GuideGuide очень удобно создавать и управлять линиями разметки. Точные столбцы, строки, центральные и базовые линии могут быть созданы на основе вашего документа или щелчком кнопки. Часто используемые наборы могут быть сохранены для повторного использования. Сетки могут использовать несколько видов измерений. (Photoshop CS5 +)

Уменьшение шума изображения

NeatImageNeatImage

Neat Image является фильтром изображения для уменьшения шума и зернистости фотографических изображений, полученных с помощью цифровых камер и сканеров. Photoshop CS 5+ для ПК и CS3 + для Mac.

Выбор веб шрифтов

WebfontpluginWebfontplugin

WebfontpluginWebfontplugin

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

Создание тени

longshadowlongshadow

Генератор длинной тени является расширением для фотошопа, с помощью которого вы можете создать длинную тень одним щелчком мыши! Вы можете отрегулировать длину тени или непрозрачность. Photoshop CS6 +.

Бесплатный векторный набор иконок 1: BlendMe.in

BlendMeinBlendMein

При использовании BlendMe.in вы можете не выходя Photoshop или Illustrator найти тысячи активов, в том числе популярные наборы иконок. Photoshop CS6 +, и вы должны зарегистрироваться. Все наборы имеют лицензию CC BY 3.0 .

Бесплатный векторный набор иконок 2: flaticon

flaticonflaticon

Вы можете использовать flaticon плагин для того, чтобы не выходя из рабочей среды быстро найти иконки, необходимые для вашего дизайна. Photoshop CS5 +. Все активы имеют лицензию CC BY 3.0 .

Доступ к рынку творчества

CreativeMarketCreativeMarket

Мгновенный доступ к избранному дизайну от творческого рынка Adobe Extension, не покидая своих приложений, таких как Photoshop, Illustrator или InDesign. Вы получите доступ к новым бесплатным графикам, шаблонам, шрифтам, кистям, дополнениям и многому другому.

Blots 2.2

Blots 2.2 позволяет рисовать водную рябь для получения бесшовных текстур.

скачать

Kaleidoscope 2.1

Kaleidoscope 2.1 создает настраиваемые калейдоскопические узоры.

скачать

Water Ripples

Water Ripples — тут все понятно. Генерирует круги на воде. Разные и настраиваемые.

скачать

Absolute Color 1.1

Absolute Color 1.1 — плагин базируется на разделенном на 6 секторов спектре. Выберите один из них, чтобы ограничить им цвета вашего изображения.

скачать

Craquelure 3D

Craquelure 3D — задаем изображению текстуру холста в различных узорах, размерах и т. д.

скачать

virtualPhotographer

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

скачать

AlphaWorks

AlphaWorks быстро убирает белый или черный цвет из изображения.

скачать

Face Control

Face Control — плагин, меняющий выражение и черты лица.

скачать

Сircle to square

Сircle to square превращает круглые вещи в квадратные.

скачать

Noise Reduction

Noise Reduction мягенько убирает зернистость.

скачать

Perfect Effects 4 Free

Perfect Effects 4 пачка бесплатных эффектов для обработки фотографий.

скачать (необходима регистрация)

Luce

Luce плагин для генерации лучей света. Позволяет «умно» и «подробно» работать с источником света.

скачать

3D Shadow

3D Shadow — 3D-тени с кучей настроек.

скачать

Eraser Classic

Eraser Classic стирает из изображения выбранный цвет. Все просто: выбираем оттенок пипеткой, настраиваем tolerance и прочие нюансы.

скачать

Grain Natural 2

Grain Natural 2 позволяет генерировать зернистость.

скачать

Lens Correction

Этот плагин исправляет бочкообразные и подушкообразные дисторсии. Перемещайте ползунки налево, чтобы исправить бочкообразную дисторсию, и вправо, чтобы — подушкообразную. Не работает на Мас. скачать >>плагин Lens Correction

плагин Lens Correction фильтр Lens Correctionфильтр Lens CorrectionLens CorrectionLens Correction

Local Contrast Enhancement

Этот плагин увеличивает контрастноть изображения. Содержит доволбно большое количество настроек, очень удобен и легокв использовании. Позволяет получать хороший результат (см. рисунок). Не работает на Мас. скачать >>плагин Local Contrast Enhancement

плагин Local Contrast Enhancement фильтр Local Contrast Enhancementфильтр Local Contrast EnhancementLocal Contrast EnhancementLocal Contrast EnhancementLocal Contrast EnhancementLocal Contrast Enhancement

Luce

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

плагин Luce фильтр Luceфильтр LuceLuceLuce

Mosaic

Mosaic придает вашей фотографии вид мозаичной плитки. Большое количество позволяет получать бесконечное число вариантов мозаики. Совместим с Мас и РС. скачать >>плагин Mosaic

плагин Mosaic фильтр Mosaicфильтр MosaicMosaicMosaicMosaicMosaicMosaicMosaic MosaicMosaic

Perspective Transformations

Иногда невозможно оптимальный угол при фотографировании, например, зданий и фотографии получаются с испорченной перспективой. Но с помощью этого фильтра можно попятаться исправить перспективу на уже уже сделанной фотке. Этот фильтр можно применить и для противоположных целей — исказить нормальную переспективу, для каких-нибудь художественных целей. скачать >>плагин Perspective Transformations

плагин Perspective Transformations фильтр Perspective Transformationsфильтр Perspective TransformationsPerspective TransformationsPerspective Transformations Perspective TransformationsPerspective TransformationsPerspective TransformationsPerspective TransformationsPerspective TransformationsPerspective TransformationsPerspective TransformationsPerspective Transformations

Smart Refinement

Smart Refinement. Этот плагин усиливает резкость фото, изменяет глубину резкости (DOF) и уменьшает шум и пыль на изображении. Не работаем на Мас. скачать >>плагин Smart Refinement

плагин Smart Refinement фильтр Smart Refinementфильтр Smart Refinement

Soft Focus

Этот плагин создает эффект «мягкого фокуса» на фотографии, который часто применяется в портретной съемке. С помощью ползунков можно управлять степенью воздействаия фильтра на фото. Не работаем на Мас. скачать >>фильтр Soft Focus

фильтр Soft Focus фильтр Soft Focusфильтр Soft Focus

Color Replacer

Color Replacer. Этот фильтр выполняет функции замены цвета в фотографии. Подобен Фотошоповской команде Replace Color, но более гибок. Поэтому, возможно слегка окрасить серые области произвольным цветом (см. фото внизу), что может быть полезно для восстановления цвета в пересвеченных областях фотографии. скачать >>плагин Color Replacer

плагин Color Replacer фильтр Color Replacerфильтр Color Replacerфильтр Color Replacerфильтр Color Replacerфильтр Color Replacerфильтр Color Replacer

Eraser Classic

Eraser Classic позволяет удалять любой выбранный цвет в изображении (можно его задать как цифрами, так и воспользоваться пипеткой). Например, если использовать пипетку, то надо всего лишь её активировать, ткнуть в соответствующий цвет непосредственно в окне предварительного просмотра изображения, и отрегулировать допустимое отклонение от выбранного цвета. Не работает на МАС. скачать >>плагин Eraser Classic

плагин Eraser Classic фильтр Eraser Classicфильтр Eraser ClassicEraser ClassicEraser Classic Eraser ClassicEraser Classic

Face Control

Face Control позволяет вам изменять выражения лица людей на цифровых фотографиях. Очень удобная в работе программа. Можно использовать как человеческое лицо, так и морду животного или даже инопланетное лицо или чего у них там :). Работает только с РС. скачать >>плагин Face Control

плагин Face Control Анджели ДжолиАнджели Джоли

Fine Threshold

Fine Threshold. В отличие от традиционной команды Фотошопа для получения пороговых значений, Fine Threshold позволяет получать их быстро и с возможностью использования anti-aliase (т.е. с гладкими и в тоже время острыми краями). Он находит края даже у сильно размытого изображния (см. пример с крестом внизу). Работает только с РС. скачать >>плагин Fine Threshold

плагин Fine Threshold Fine ThresholdFine ThresholdFine ThresholdFine Thresholdплагин Fine Thresholdплагин Fine ThresholdFine ThresholdFine Thresholdфильтр Fine Thresholdфильтр Fine Threshold

Gradient Blur

Этот плагин применяет градиентое размытие к фотографии, что позволяет привлечь внимание к основному предмету на фото. Есть возможность управлять этим градинтом, его типом, Режимом Смешивания и т.д. скачать >>плагин Gradient Blur

плагин Gradient Blur фильтр Gradient Blurфильтр Gradient Blur

vavik96.com

6 плагинов для Photoshop, которые сэкономят ваше время (и нервы)

Adobe Photoshop – культовое программное обеспечение, сформировавшее современный мир графического дизайна.

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

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

Приступим.

Renamy

Первый плагин, который мы рассмотрим, называется Renamy и предназначен он для проведения массовых операций с названиями слоёв (layers).

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

Renamy позволяет переименовать несколько слоёв одним действием. Более того, он может осуществлять операции поиска и поиска с заменой прямо в названиях слоёв. Например, если вы хотите создать серию зелёных слоёв путём дупликации уже имеющихся красных, вот как просто это можно сделать:

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

Возможно, помимо названий слоёв вас интересует также порядок их взаимного расположения. Renamy поможет вам и с нумерацией слоёв.

Renamy доступен как для Windows, так и для MacOS. Цена плагина – $9,99, и надо сказать, что он более чем стоит своей цены. Есть также и бесплатная версия, но в ней не хватает некоторых полезных возможностей.

Pixel2Vector

Pixel2Vector – скромный, но полезный плагин от Orange Box, который поможет вам экспортировать почти любой ваш проект в векторный формат.

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

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

Pixel2Vector поддерживает Photoshop CS5, CS6 и CC.

Более того, этот плагин бесплатен, так что загрузите его прямо сейчас.

GuideGuide

Автор плагина GuideGuide – Кэмерон МакИфи. Его опыт работы с направляющими (guides) в Photoshop был не самым гладким, поэтому он решил реализовать в своём плагине более удобные методы создания и управления направляющими.

На практике этот плагин позволяет применить целый ряд приёмов, экономящих время дизайнера.

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

Второй приём – создание направляющих по краям текущего выделения или по его средней точке, автоматически вычисляемой плагином. Чрезвычайно полезная функция.

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

Плагин подходит ко всем версиям Photoshop.

TinyPNG

Плагин TinyPNG позволяет уменьшить размер файла в формате PNG. Файлы формата PNG чрезвычайно распространены из-за возможности сохранять прозрачность. Их понимают все браузеры и графические приложения. Несмотря на это, зачастую PNG-файлы в интернете имеют больший объём, чем нужно.

TinyPNG позволяет постепенно сократить количество цветов в палитре PNG-файла. Чем меньше палитра, тем меньше битов весит один пиксель, следовательно, тем меньше файл. Иногда таким образом можно сэкономить до половины объёма файла без ущерба его внешнему виду.

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

Этот плагин стоит $40, но если вам приходится обрабатывать много PNG-файлов, вы не пожалеете о потраченных средствах. Существует и бесплатная онлайн-версия TinyPNG, но она менее удобна в работе из-за необходимости каждый раз обращаться к браузеру. Что дороже: деньги или время, – выбирать вам.

TinyPNG поддерживает Photoshop CS5, CS6 и CC и имеет две версии: для PC и Mac. Загрузить плагин можно здесь.

SavePanel

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

Этот плагин будет наиболее полезен продвинутым пользователям Photoshop.

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

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

SavePanel для Photoshop CS5, CS6 и CC распространяется бесплатно здесь.

CSS Hat

CSS Hat – чрезвычайно полезный плагин для веб-дизайнеров, так как он способен преобразовывать слои Photoshop в CSS-файлы, которые могут быть внедрены в ваш веб-проект. Многообещающе, не правда ли?

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

Всё, что вам нужно сделать – установить плагин и перенести нужный слой на панель CSS Hat. Код CSS будет сгенерирован мгновенно.

Информация, выдаваемая плагином, включает в себя размеры блоков, цвета, выравнивание по оси Z и другие свойства, а также различные встроенные проверки. CSS Hat даже поддерживает популярные препроцессоры CSS: SASS, LESS и Stylus.

Лицензия CSS Hat стоит $34,99, но если вы активно занимаетесь веб-дизайном или вёрсткой, эта цена быстро окупится за счёт повышения вашей продуктивности. Также стоит заметить, что плагин лицензируется на пользователя, а не на устройство, так что вы можете купить один плагин и легально использовать его на домашнем и рабочем компьютере.

CSS Hat поддерживает PC и Mac, и может быть загружен отсюда.

Вот и всё! Эти шесть плагинов освободят вашу ежедневную работу с графикой от рутины и позволят вам сосредоточиться на искусстве дизайна.

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

Перевод статьи «5 Photoshop Plugins to Save Your Time (and Sanity)» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

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

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

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

Griddify
Griddify

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

Size Marks
Size Marks

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

Velositey
Velositey

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

Random User
Random User

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

Kaku
Kaku

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

LiveShare PS
LiveShare PS

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

LayerCraft
LayerCraft

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

Ink
Ink

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

Modular Grid Pattern
Modular Grid Pattern

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

Photoshop Social Shar
Photoshop Social Shar

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

Pngquant
Pngquant

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

Bounce
Bounce

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

Retinize It
Retinize It

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

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

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

Lighten / Darken Color (Script)
Lighten / Darken Color

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

Corner Editor
Corner Editor

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

Group Layer Renaming (Script)
Group Layer Renaming

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

Realsizer
Realsizer

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

Transform Each Beta (Script)
Transform Each

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

12 New Photoshop Tools for CS6
12 New Photoshop Tools for CS6

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

Free Lorem Ipsum Generator
Free Lorem Ipsum Generator

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

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

habr.com

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

Одним из методов ускорения работы в программе Adobe Photoshop является применение пользовательских панелей расширения.

Что такое панели расширения?

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

Посмотреть видеоуроки и скачать некоторые пользовательские панели расширения вы можете на нашем сайте:

Чудо-панель для Photoshop

Панель расширения для ретуши

Быстрая обработка фотографий

Использование расширений в Photoshop

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

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

На момент написания данной статьи доступна версия Adobe Configurator 4.

Процесс создания панелей

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

Запустите программу Adobe Configurator. Откроется окно приветствия, где кратко излагается инструкция по созданию собственной панели расширения.

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

Для того, чтобы перейти в меню создания панелей, нужно отдать команду File – New Panel. Программа предложит ввести название панели и выбрать, для какого приложения (Photoshop или In Design) и какой версии будет создаваться панель. Доступны версии Photoshop и In Design CS6 и CC.

Нажимаем ОК. Теперь можно приступать к созданию панели. Сначала необходимо заполнить поля, отмеченные стрелками.

Затем выбираем язык. Для этого в правой панели нужно нажать букву Т.

Выбираем в открывшемся окошке русскую локализацию и нажимаем стрелку вправо (посередине окна). Она должна добавиться к английской.

Если английская локализация вам не нужна, то нужно выделить русский язык и нажать кнопку Set Default. Затем выделяем английский язык и нажимаем стрелку влево.Теперь мы будем работать только с русскими командами.

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

Элементы панели помещаются в нее простым перетаскиванием нужного элемента из вышеуказанных наборов.

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

В панели также можно помещать экшены. Для этого нужно развернуть вкладку Action/Script и перетащить в панель элемент Action в необходимом количестве.

Затем нужно изменить названия, размер и положение кнопок с помощью атрибутов на правой панели.

Для того, чтобы присвоить кнопке экшен, нужно указать в атрибутах название набора и название экшена в соответствующих полях.

После того, как работа с панелью закончена, ее нужно экспортировать в Photoshop. Для этого нужно перейти в меню File – Export Panel. В окне проводника нужно выбрать папку: C:\Program Files\Adobe\Adobe Photoshop CC (64 Bit)\Plug-ins\Panels

Для 32-разрядной версии программы путь нужно будет соответственно изменить.

После экспорта панель появится в Photoshop в меню Окно – Расширения – [Название вашей панели]. Теперь ей можно пользоваться.

Я рассказал лишь о небольшой части функций, доступных в программе Adobe Configurator. Но этого вполне достаточно, чтобы создавать собственные панели для Photoshop.

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

Автор: Евгений Карташов

photo-monster.ru


Смотрите также