Во фронтенде, кроме всех остальных, есть ещё и верстальщики.

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

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

Как работать в Figma

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

Фигма против фотошопа. Что выбрать новичку

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

Какие бывают картинки

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

Где найти бесплатные картинки для сайта

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

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

Люди на фотографии смеются за ноутбуками.
Фотография взята с сайта Unsplash

Чем растровая графика отличается от векторной

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

Как создать и анимировать SVG

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

Как добавить SVG на сайт

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

Скоро стартует курс по вёрстке (и ещё другие курсы)

И там навыки работы с графикой ой как пригодятся. Попробуйте, а промокод SKUCHNO даст приятную скидку в 1000 рублей на любой курс.

Хочу консультацию

Нажатие на кнопку — согласие на обработку персональных данных