Многим конечно такое высказывание не понравится, но согласитесь как можно делать дизайн сайта, если человек не знает с какими проблемами и трудностями можно столкнуться на важном этапе верстки.
Лично я думаю, что скоро появятся сервисы, которые позволят превращать макеты PSD в валидную и кроссбраузерную верстку, но в любом случае думаю достичь виртуозного кода не получится. В этой публикации я постараюсь рассказать о плагинах, которые облегчают мою повседневную работу превращения PSD макетов в реальную верстку. Так же постараюсь развернуто ответить на основные вопросы, которые возникают на этом этапе.
Для начала было бы разумно рассказать, какие есть основные плагины для удобства работы, этим и займусь:
- Плагин для вставки в макеты «рыбного» текста (или Lorem Ipsum).
- Плагин рандомного поиска лиц. К примеру при оформлении блока «отзывы клиентов» в своих макетах вместо унылой заглушки на месте фотографии человека лучше поставить фотографию реального человека, так намного привлекательнее.
- Нарезка изображений. Раньше чтобы вырезать картинку нужно было создать отдельный слой, перенести изображение на него и сохранить, сейчас же достаточно просто выделить слой и нажать одну кнопку. Вуаля и картинка сохранена, да да такой плагин действительно есть, о нем расскажу ниже.
- Вставка иконок. Резиновые иконки, которые без потери качества можно уменьшать или увеличивать, добавлять эффекты, менять цвет и вообще выполнять любые возможные манипуляции.
- Генератор CSS кода выделенного в PSD слоя. К примеру создали вы плашку, она имеет градиент, рамку и фоновый цвет. Вместо того, чтобы все в ручную прописывать по отдельности как «по старинке» можете выделить слой, нажать на кнопку и плагин выдаст необходимый код для дальнейшего переноса в css — фантастика!
Наверное я перечислил самые основные плагины, которые необходимы для дизайнера/верстальщика. Ниже хочу показать как они выглядят и где их можно скачать для работы. Процесс установки рассказывать не хочется — найдете сами, я, итак, уже устал печатать :)
Плагин «Lorem Ipsum»
Позволяет в один клик добавить рыбный текст Lorem Ipsum в ваш PSD макет. Эти плагины по своей технической начинке очень просты, ссылка на самый адекватный плагин раньше была здесь, но сайт перестал работать, поэтому Вам нужно поискать аналоги в интернете.
Плагин рандомного поиска лиц
Надеюсь вы прочитали описание выше, т.к. я старался все разъяснить, если вы бегло читаете через 2 строки, то придется повторить. Выбираете лицо мужчины или женщины через плагин и его фотография оказывается в вашем макете, далее уже можете создать обтравочную маску к слою и создавать свои красивые макеты. Кстати вот ссылка на этот плагин, он бесплатен.
Плагин для быстрой нарезки изображений
Выбрали нужный слой, нажали кнопку и картинка сохранится в указанную директорию. Самый удачный на мой взгляд плагин, выполняющую эту роль — PNG Hat. Не переживайте он умеет кропить и в формате JPG. Этот плагин платный, если вы покупаете лицензионный виндовс, тогда покупайте его на официальном сайте, если же хотите бесплатно — берите тут.
Плагин для быстрого поиска и вставки иконок
Для верстки лично я больше всего предпочитаю набор шрифтовых иконок — Font Awesome прекрасно подходит для этой задачи. Ну и плагин, само собой от них я и буду рекомендовать. Предлагаю посмотреть какие иконки есть в комплекте (заценить), потом сказать в слух как же это круто и какой я молодец, а потом скачать плагин для любимого фотошопчика тут.
Генератор CSS кода выделенного слоя
Ну это наверное самая крутая плюшка на мой взгляд, плагин 100% облегчит верстку верстальщику. Называется плагин CSS Hat, если читали все вышеизложенное, несложно догадаться, что PNG Hat и CSS Hat разработали одни и те же люди и он тоже платный.
Фух… не думал, что столько смогу напечатать. Говорим мне спасибо, я оценю свои старания, если лайки ниже будут хотя бы больше 10 штук. Делитесь, рассказывайте друзьям — я старался. Еще хочу отметить, что все плагины англоязычные, поэтому если вы дизайнер и не умеете верстать советую начать учить верстку и параллельно английский язык.
