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

Влад Мержевич

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

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

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

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

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.