—»     —»   Photoshop в веб-дизайне: 5 плагинов, которые облегчат ваши рабочие будни
  Раздел: Инструменты   Комментариев: 1  

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



И по сей день многие веб-дизайнеры используют 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.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Photoshop
Опубликовал Design FactoRy   Прочитано (раз): 9089   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 28 августа 2013 @ 11:51
Написал: Евгений — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Как у становить SuperPNG ? куда нужно копировать ? Скопировал в папку плагинов, а SuperPNG нет негде.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Дома из клееного бруса
Строительство домов. Строительство деревянных домов
ecostroy43.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930