Предлагаю читателям «Хабрахабра» подборку 22 дополнений (скриптов) помощников, необходимых фронтенд-разработчику.
![Hexy](https://habrastorage.org/r/w780q1/files/2f7/dad/840/2f7dad84076e4a269dcd5c2b2e89c2e9.jpg)
Печально выбирать слои в макете и каждый раз запускать палитру цветов только для того, чтобы получить шестнадцатиричное значение того или иного цвета. Hexy позволяет использовать инструмент «Пипетка»: нажмите на цвет объекта и скопируйте его непосредственно в буфер обмена.
![Griddify](https://habrastorage.org/r/w780q1/files/3ba/b9b/182/3bab9b18285649179f25622a705eb89c.jpg)
Griddify — маленький и быстрый. Он поможет вам создавать собственную сетку и сделать кучу других вещей по гайдам Adobe Photoshop.
![Size Marks](https://habrastorage.org/r/w780q1/files/51c/b85/acb/51cb85acb73446e68476a6c35e6067c1.jpg)
Size Marks — очень полезный скрипт для веб-дизайнера или фронтенд-разработчика. С его помощью легко замерять внешние отступы элементов.
![Velositey](https://habrastorage.org/r/w780q1/files/65f/9aa/f06/65f9aaf06fdc49849034308f3afe7ad8.jpg)
Velositey — полнофункциональное дополнение для Photoshop с открытым исходным кодом. Предназначено для создания скучных вещей, таким образом, вы сосредоточиваетесь над стилизацией сайта.
![Random User](https://habrastorage.org/r/w780q1/files/717/f1f/a17/717f1fa1736c4cf6a4d8e1b56b04867a.jpg)
Random User создает «пользователей» для заполнения макета при создании сайта, тем самым экономя ваше время.
![Kaku](https://habrastorage.org/r/w780q1/files/e70/705/b16/e70705b167754bd08fbf2b8377612bce.jpg)
Kaku — простой плагин для перевода названий слоев на разные языки.
![LiveShare PS](https://habrastorage.org/r/w780q1/files/cfb/087/3ee/cfb0873ee90c4931b614350c20eb1889.jpg)
LiveShare PS позволяет вести онлайн трансляцию демонстрации Photoshop документов.
![LayerCraft](https://habrastorage.org/r/w780q1/files/5f6/96e/bca/5f696ebcaa5249e088e2b11d9cbdee78.jpg)
Плагин экспортирует элементы пользовательского интерфейса из слоев.
![Ink](https://habrastorage.org/r/w780q1/files/ac3/153/bbe/ac3153bbe8634699a8c03e59405d1fb5.jpg)
Ink — плагин, который предоставляет вам дополнительную информацию о вашем макете, документируя ваши слои начиная типографией и заканчивая эффектами с размерами слоев.
![Modular Grid Pattern](https://habrastorage.org/r/w780q1/files/446/78a/5df/44678a5dfb35474ba12abb915ee8186b.jpg)
Modular Grid Pattern — это приложение для веб дизайнеров для быстрого создания сетки в Adobe Photoshop.
![Photoshop Social Shar](https://habrastorage.org/r/w780q1/files/71c/87d/56b/71c87d56bce641ceb11776ed3434c9b0.jpg)
Photoshop Social Shar — бесплатный плагин для розшаривания своего дизайна.
![Pngquant](https://habrastorage.org/r/w780q1/files/d5f/1ba/916/d5f1ba9161914f70a446e9b073d5851e.jpg)
Pngquant — обеспечивает сохранение .png лучше, чем при «Сохранить для Web». Созданные файлы на 60-70% меньше, чем 24/32-bit PNG при «Сохранить для Web» и, в отличии от 8-bit PNG, поддерживает полупрозрачный альфа-канал.
![Bounce](https://habrastorage.org/r/w780q1/files/eff/3df/66e/eff3df66e72240b193090d629afaa0d0.jpg)
Bounce — бесплатное дополнение, которое добавляет доступ к сообществу Dribbble в дизайнерских продуктах Adobe.
![Retinize It](https://habrastorage.org/r/w780q1/files/a84/034/48a/a8403448a46f42eeb053f2393200c648.jpg)
Retinize It позволяет подготовить ваш дизайн для устройств с retina-дисплеем.
![PS to SVG](https://habrastorage.org/r/w780q1/files/d3f/bc2/bf3/d3fbc2bf316848dd96037bea1bd15494.jpg)
Данный скрип позволяет пакетно сохранять векторные слои с расширением “.svg”.
![Lighten / Darken Color](https://habrastorage.org/r/w780q1/files/69b/c70/fd6/69bc70fd6e3141f5befbecaed892c94b.jpg)
Этот скрип помогает работать с цветом.
![Corner Editor](https://habrastorage.org/r/w780q1/files/cd5/39e/e41/cd539ee410b74891bf1f4df7259ab0b0.jpg)
Данный инструмент позволяет задавать скругления каждого угла отдельно. Судя по превью, это будет доступно в CS7, но так же будет полезным и в нынешней версии.
![Group Layer Renaming](https://habrastorage.org/r/w780q1/files/f2c/0a9/5d0/f2c0a95d0a58466a9b55f13038e7bcd6.jpg)
Скрипт пакетно переименовывает слои в макете, так же доступен экспорт слоев по тегам с их названий(аналог Slicy).
![Realsizer](https://habrastorage.org/r/w780q1/files/08d/bfc/7bd/08dbfc7bd752468c869eb6fb7a12343c.jpg)
Скрипт создан для разработчиков интерфейсов мобильных устройств. Позволяет просматривать и печатать дизайн в реальном размере.
![Transform Each](https://habrastorage.org/r/w780q1/files/189/cc9/413/189cc94136594ff1b36e8f771c789a76.jpg)
Transform Each позволяет пакетно трансформировать слои аналогично тому, как это сделано в Adobe Illustrator.
![12 New Photoshop Tools for CS6](https://habrastorage.org/r/w780q1/files/378/ad9/a22/378ad9a22a184f34b189c7d310d3abad.jpg)
Дополнительная панелька с 12-ю полезными инструментами.
![Free Lorem Ipsum Generator](https://habrastorage.org/r/w780q1/files/4c7/896/cd5/4c7896cd55a945f3bc8a430a5d9c02a9.jpg)
Генератор текста «рыбы» для Photoshop, Illustrator, InDesign & Dreamweaver.
Оригинал статьи
Hexy
![Hexy](https://habrastorage.org/files/2f7/dad/840/2f7dad84076e4a269dcd5c2b2e89c2e9.jpg)
Печально выбирать слои в макете и каждый раз запускать палитру цветов только для того, чтобы получить шестнадцатиричное значение того или иного цвета. Hexy позволяет использовать инструмент «Пипетка»: нажмите на цвет объекта и скопируйте его непосредственно в буфер обмена.
Griddify
![Griddify](https://habrastorage.org/files/3ba/b9b/182/3bab9b18285649179f25622a705eb89c.jpg)
Griddify — маленький и быстрый. Он поможет вам создавать собственную сетку и сделать кучу других вещей по гайдам Adobe Photoshop.
Size Marks
![Size Marks](https://habrastorage.org/files/51c/b85/acb/51cb85acb73446e68476a6c35e6067c1.jpg)
Size Marks — очень полезный скрипт для веб-дизайнера или фронтенд-разработчика. С его помощью легко замерять внешние отступы элементов.
Velositey
![Velositey](https://habrastorage.org/files/65f/9aa/f06/65f9aaf06fdc49849034308f3afe7ad8.jpg)
Velositey — полнофункциональное дополнение для Photoshop с открытым исходным кодом. Предназначено для создания скучных вещей, таким образом, вы сосредоточиваетесь над стилизацией сайта.
Random User
![Random User](https://habrastorage.org/files/717/f1f/a17/717f1fa1736c4cf6a4d8e1b56b04867a.jpg)
Random User создает «пользователей» для заполнения макета при создании сайта, тем самым экономя ваше время.
Kaku
![Kaku](https://habrastorage.org/files/e70/705/b16/e70705b167754bd08fbf2b8377612bce.jpg)
Kaku — простой плагин для перевода названий слоев на разные языки.
LiveShare PS
![LiveShare PS](https://habrastorage.org/files/cfb/087/3ee/cfb0873ee90c4931b614350c20eb1889.jpg)
LiveShare PS позволяет вести онлайн трансляцию демонстрации Photoshop документов.
LayerCraft
![LayerCraft](https://habrastorage.org/files/5f6/96e/bca/5f696ebcaa5249e088e2b11d9cbdee78.jpg)
Плагин экспортирует элементы пользовательского интерфейса из слоев.
Ink
![Ink](https://habrastorage.org/files/ac3/153/bbe/ac3153bbe8634699a8c03e59405d1fb5.jpg)
Ink — плагин, который предоставляет вам дополнительную информацию о вашем макете, документируя ваши слои начиная типографией и заканчивая эффектами с размерами слоев.
Modular Grid Pattern
![Modular Grid Pattern](https://habrastorage.org/files/446/78a/5df/44678a5dfb35474ba12abb915ee8186b.jpg)
Modular Grid Pattern — это приложение для веб дизайнеров для быстрого создания сетки в Adobe Photoshop.
Photoshop Social Shar
![Photoshop Social Shar](https://habrastorage.org/files/71c/87d/56b/71c87d56bce641ceb11776ed3434c9b0.jpg)
Photoshop Social Shar — бесплатный плагин для розшаривания своего дизайна.
Pngquant
![Pngquant](https://habrastorage.org/files/d5f/1ba/916/d5f1ba9161914f70a446e9b073d5851e.jpg)
Pngquant — обеспечивает сохранение .png лучше, чем при «Сохранить для Web». Созданные файлы на 60-70% меньше, чем 24/32-bit PNG при «Сохранить для Web» и, в отличии от 8-bit PNG, поддерживает полупрозрачный альфа-канал.
Bounce
![Bounce](https://habrastorage.org/files/eff/3df/66e/eff3df66e72240b193090d629afaa0d0.jpg)
Bounce — бесплатное дополнение, которое добавляет доступ к сообществу Dribbble в дизайнерских продуктах Adobe.
Retinize It
![Retinize It](https://habrastorage.org/files/a84/034/48a/a8403448a46f42eeb053f2393200c648.jpg)
Retinize It позволяет подготовить ваш дизайн для устройств с retina-дисплеем.
Free photoshop script: Export your vector layers from PS to SVG in a single click! It
![PS to SVG](https://habrastorage.org/files/d3f/bc2/bf3/d3fbc2bf316848dd96037bea1bd15494.jpg)
Данный скрип позволяет пакетно сохранять векторные слои с расширением “.svg”.
Lighten / Darken Color (Script)
![Lighten / Darken Color](https://habrastorage.org/files/69b/c70/fd6/69bc70fd6e3141f5befbecaed892c94b.jpg)
Этот скрип помогает работать с цветом.
Corner Editor
![Corner Editor](https://habrastorage.org/files/cd5/39e/e41/cd539ee410b74891bf1f4df7259ab0b0.jpg)
Данный инструмент позволяет задавать скругления каждого угла отдельно. Судя по превью, это будет доступно в CS7, но так же будет полезным и в нынешней версии.
Group Layer Renaming (Script)
![Group Layer Renaming](https://habrastorage.org/files/f2c/0a9/5d0/f2c0a95d0a58466a9b55f13038e7bcd6.jpg)
Скрипт пакетно переименовывает слои в макете, так же доступен экспорт слоев по тегам с их названий(аналог Slicy).
Realsizer
![Realsizer](https://habrastorage.org/files/08d/bfc/7bd/08dbfc7bd752468c869eb6fb7a12343c.jpg)
Скрипт создан для разработчиков интерфейсов мобильных устройств. Позволяет просматривать и печатать дизайн в реальном размере.
Transform Each Beta (Script)
![Transform Each](https://habrastorage.org/files/189/cc9/413/189cc94136594ff1b36e8f771c789a76.jpg)
Transform Each позволяет пакетно трансформировать слои аналогично тому, как это сделано в Adobe Illustrator.
12 New Photoshop Tools for CS6
![12 New Photoshop Tools for CS6](https://habrastorage.org/files/378/ad9/a22/378ad9a22a184f34b189c7d310d3abad.jpg)
Дополнительная панелька с 12-ю полезными инструментами.
Free Lorem Ipsum Generator
![Free Lorem Ipsum Generator](https://habrastorage.org/files/4c7/896/cd5/4c7896cd55a945f3bc8a430a5d9c02a9.jpg)
Генератор текста «рыбы» для Photoshop, Illustrator, InDesign & Dreamweaver.
Оригинал статьи