Графические редакторы

Преимущества макетов AI для верстальщиков

Есть несколько  причин, которые побудили меня написать эту статью. Первая — полное отсутствие разбора преимуществ программы Illustrator для верстальщиков и фронтендеров. Это удивительно, если принять во внимание тот факт, что в мире растет тенденция к внедрению SVG-изображений на сайт и использованию Retina-дисплеев. Вторая причина — в рунете верстальщики активно поддерживают друг друга во мнении, что дизайнер — это некое злое существо, которое пытается усложнить Вам работу. Так это или нет — разберемся.

Действительно, когда мне впервые скинули макеты в формате AI, я испытала легкую панику. Программа казалась настолько непонятной, что приходилось задаваться простыми, но очень важными вопросами: «Как вырезать картинку?», «Как сохранить её в нужном формате?», «Где искать данные по объекту?» и т.д. Но чтобы освоить ее — мне не потребовалось много времени. Так я смогла найти ряд преимуществ, которые очень помогают мне в работе.

Несколько монтажных областей (artboards)

В фотошопе один PSD-файл может иметь только одну страницу. Это хорошо, но только для одностраничных сайтов. А как быть с интернет-магазинами, новостными порталами, блогами и корпоративными сайтами? Представьте, как было бы удобно, если макеты всех страниц можно было бы просмотреть в одном файле? Adobe Illustrator позволяет создавать многостраничные документы. Это очень удобно, так как у Вас будет возможность увидеть общие элементы и стили, которые применяются для этих элементов. Это значительно сократит Ваши трудозатраты и улучшит верстку.

Все изображения в векторе у вас под рукой

Имея на руках векторный макет, отпадает необходимость просить дизайнера скинуть логотип и иные иконки в векторе. А это значит, что вы экономите свое время и быстрее сверстаете сайт. Еще один плюс в пользу AI-макетов. Возможно, кто-то спросит: «А зачем вообще мне векторные картинки?». Ответ прост: у вас появится возможность сохранить векторные изображения в SVG-формате, которые отлично будут смотреться на любых дисплеях, в том числе и на Retina. Следовательно, вы сможете создавать качественный продукт и просить за свою работу больше 🙂

Сохранить изображение в формате SVG довольно просто. Нужно перенести изображение в новый файл, далее переходим в File -> Save As, сохраняем в нужной папке, выбираем формат SVG и появляется следующее диалоговое окно (см. скрин ниже). Жмём ОК и получаем наш файл, который можно использовать на сайте.

Нет необходимости думать о слоях

Выбрав инструмент Selection Tootl (V), который располагает в верхнем левом углу в панели инструментов, можно сразу находить нужный элемент, не заглядывая в окно «Слои». Экономит время и отпадает необходимость заглядывать в «Слои», чтобы разгруппировывать элементы.

На мой взгляд, верстальщикам стоит отбросить свою лень и потратить немного времени, чтобы разобраться в Adobe Illustrator, чтобы создавать более качественный и отвечающий современным тенденциям продукт, радовать заказчиков и получать за свою работу больше.

Следующую статью я посвящу именно этому: расскажу об азах работы в Illustrator, которые необходимо знать веб-разработчикам.

Предыдущий пост

Глубокое погружение в CSS: показатели шрифтов, line-height и vertical-align

Следующий пост

Создание сайта на Github - это просто!

Комментарии

  • Zeliboba

    Пропустили букву в «отвечающий современным тенденция продукт». А за статью — спасибо. 🙂

    Reply to Zeliboba
    • tpverstak

      Не за что 🙂 Ошибку поправили

      Reply to tpverstak
  • Nikita

    Ну и ФШ уже имеет артборды! 😉

    Reply to Nikita
  • pipo

    а я все равно фотошоп люблю 🙂

    Reply to pipo
  • Lapka

    а как найти код SVG картинки?

    Reply to Lapka
    • tpverstak

      В статье описан метод сохранения SVG. После сохранения появляется файл, который можно открыть в браузере или в любом редакторе кода. Именно там он и будет.

      Reply to tpverstak
  • AFK Bachinky

    В последнее время тоже перешел в векторные программы из-за этих преимуществ

    Reply to AFK Bachinky

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *