Главная > Инструменты > Photoshop в веб-дизайне: 5 плагинов, которые облегчат ваши рабочие будни

Photoshop в веб-дизайне: 5 плагинов, которые облегчат ваши рабочие будни


13 мая 2013, 13:30. Разместил: Design FactoRy
И по сей день многие веб-дизайнеры используют Photoshop в качестве черновика. Но это вызывает все больше и больше сложностей по мере того, как проект разрастается в формате HTML/CSS. Не удивительно, что сегодня сервисы, перегоняющие PSD-макеты в HTML-формат пользуются такой популярностью. Многие разработчики создают плагины, которые помогают легче справиться с задачей преобразования PSD в HTML. Сегодня мы хотим предложить вам одни из лучших опций.

1. Быстрое создание сеток при помощи GuideGuide

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

Photoshop в веб-дизайне: 5 плагинов, которые облегчат ваши рабочие будни

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

GuideGuide работает в Photoshop с версии CS5.

2. Экспорт фрагментов при помощи Cut&Slice me

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

Photoshop в веб-дизайне: 5 плагинов, которые облегчат ваши рабочие будни

Cut&Slice me будет действительно помогать вам, как только вы привыкните к синтаксису. Плагин производит экспорт на основе слоев и на основе специальных суффиксов вроде _BTN (который сообщает инструменту, что это кнопка, которая имеет более одного состояния). Дополнительные суффиксы: normal, hover, clicked и так далее, – определяют разные состояния, и экспортируются в отдельные изображения.

Cut&Slice me на данный момент работает с последней версией Photoshop, CS6.

3. Создаем favicon при помощи плагинов от Telegraphics и Sibcode

Photoshop в веб-дизайне: 5 плагинов, которые облегчат ваши рабочие будни

Favicon сегодня просто обязательно использовать. Посмотрите вокруг, и вы увидите, что большинство сайтов на сегодняшний уже имеют favicon. Они хранятся в ico-формате, и конечно же, в интернете есть великое множество плагинов, которые помогают их создавать. В то время как ICO-плагин от Sibcode позволяет вам размещать больше одной иконки в файле, плагин от Telegraphics такой возможности не представляет. Плагин от Telegraphics имеет преимущество в том, что работает с 64-битной версией Photoshop, а плагина от Sibcode для данной версии нет.

4. Шрифты в шаблонах

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

Photoshop в веб-дизайне: 5 плагинов, которые облегчат ваши рабочие будни

Лично мы рекомендуем использовать плагин от WebINK по той простой причине, что кроме доступа к личной библиотеке, он также позволяет вам произвести интеграцию с Google Fonts. Плагин от Fontshop также примечателен, так как позволяет вам напрямую покупать шрифты, если вы захотите использовать их в финальной версии вашего шаблона.

5. Оптимизация PNG при помощи SuperPNG

Photoshop в веб-дизайне: 5 плагинов, которые облегчат ваши рабочие будни

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

SuperPNG работает с Photoshop от версии CS5.
Вернуться назад