Графика для верстальщиков. 7 полезных статей

Если очень коротко, то главная задача верстальщика — отобрать у дизайнера графический макет и сделать из него страницу для сайта. У нас есть и более подробная версия — о том, что должен уметь верстальщик, чтобы его взяли на работу куда угодно.

Так как верстальщику нужно разбирать макеты на кусочки, то важнейшая часть его навыков — работа с графикой, выбор правильных изображений, форматов и способов работы с ними. С этим лучше разобраться в самом начале, поэтому быстренько расскажем, что нужно знать. А вы мотайте на ус. Ну или не на ус.

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

Если уже надумали сбежать из Фигмы, прочитайте аргументы за и против обоих редакторов. Возможно, вы передумаете. Главное помнить, что все макеты уже рисуют в Фигме, а фотошоп встречается всё реже.

Фотографии, картинки, схемы, графики, банеры нужны или для декора, или для иллюстрации. Разбираемся, что ставить, куда и в каких случаях.

Самый большой соблазн для всех, кто хоть раз открывал графический редактор по работе — взять первую картинку из гугла по запросу «люди» и вставить куда-то там по поводу и без. Статья о том, где брать бесплатные фотографии, о лицензиях и чистой совести.

Кстати, это мы с ребятами смеёмся над анекдотом про надувного коня:

Великая битва SVG против JPG, PNG и GIF не закончится примерно никогда. Всем важно знать основные этапы и отличия растра и вектора, чтобы через пару месяцев в компании друзей (как на фото выше) блеснуть этим знанием.

Ещё одно руководство по созданию и анимации векторных иллюстраций. Обязательно к изучению для верстальщиков и вообще всех, кто во фронтенде.

Вадим Макеев рассказал о нескольких способах. Говорит, правильного нет — есть подходящие. Самое время изучить и убедиться самостоятельно.