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

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

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

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

  1. Плагин для вставки в макеты “рыбного” текста (или Lorem Ipsum).
  2. Плагин рандомного поиска лиц. К примеру при оформлении блока “отзывы клиентов” в своих макетах вместо унылой заглушки на месте фотографии человека лучше поставить фотографию реального человека, так намного привлекательнее.
  3. Нарезка изображений. Раньше чтобы вырезать картинку нужно было создать отдельный слой, перенести изображение на него и сохранить, сейчас же достаточно просто выделить слой и нажать одну кнопку. Вуаля и картинка сохранена, да да такой плагин действительно есть, о нем расскажу ниже.
  4. Вставка иконок. Резиновые иконки, которые без потери качества можно уменьшать или увеличивать, добавлять эффекты, менять цвет и вообще выполнять любые возможные манипуляции.
  5. Генератор CSS кода выделенного в PSD слоя. К примеру создали вы плашку, она имеет градиент, рамку и фоновый цвет. Вместо того, чтобы все в ручную прописывать по отдельности как “по старинке” можете выделить слой, нажать на кнопку и плагин выдаст необходимый код для дальнейшего переноса в css – фантастика!

Наверное я перечислил самые основные плагины, которые необходимы для дизайнера/верстальщика. Ниже хочу показать как они выглядят и где их можно скачать для работы. Процесс установки рассказывать не хочется – найдете сами, я, итак, уже устал печатать :)


Плагин “Lorem Ipsum”

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


Плагин рандомного поиска лиц

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


Плагин для быстрой нарезки изображений

Выбрали нужный слой, нажали кнопку и картинка сохранится в указанную директорию. Самый удачный на мой взгляд плагин, выполняющую эту роль – PNG Hat. Не переживайте он умеет кропить и в формате JPG. Этот плагин платный, если вы покупаете лицензионный виндовс, тогда покупайте его на официальном сайте, если же хотите бесплатно – берите тут.


Плагин для быстрого поиска и вставки иконок

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


Генератор CSS кода выделенного слоя

Ну это наверное самая крутая плюшка на мой взгляд, плагин 100% облегчит верстку верстальщику. Называется плагин CSS Hat, если читали все вышеизложенное, несложно догадаться, что PNG Hat и CSS Hat разработали одни и те же люди и он тоже платный (купить можно тут), а скачать бесплатно можно тут.


Фух… не думал, что столько смогу напечатать. Говорим мне спасибо, я оценю свои старания, если лайки ниже будут хотя бы больше 10 штук. Делитесь, рассказывайте друзьям – я старался. Еще хочу отметить, что все плагины англоязычные, поэтому если вы дизайнер и не умеете верстать советую начать учить верстку и параллельно английский язык.

Другие публикации