Графика для верстальщиков. 7 полезных статей
- 20 июля 2021
- 3 мин
- 2 884
Во фронтенде, кроме всех остальных, есть ещё и верстальщики.
Если очень коротко, то их главная задача — отобрать у дизайнера графический макет и сделать из него страницу для сайта. У нас есть и более подробная версия — о том, что должен уметь верстальщик, чтобы его взяли на работу куда угодно.
Так как верстальщику нужно разбирать макеты на кусочки, то важнейшая часть его навыков — работа с графикой, выбор правильных изображений, форматов и способов работы с ними. С этим лучше разобраться в самом начале, поэтому быстренько расскажем, что нужно знать. А вы мотайте на ус. Ну или не на ус.
Как работать в Figma
Figma — удобный графический редактор для верстальщиков и их друзей-дизайнеров. По ссылке — подробное руководство, как установить, осмотреться, что-нибудь сделать и не сбежать обратно в Фотошоп в первые пять минут.
Фигма против фотошопа. Что выбрать новичку
Если уже надумали сбежать из Фигмы, прочитайте аргументы за и против обоих редакторов. Возможно, вы передумаете. Главное помнить, что все макеты уже рисуют в Фигме, а фотошоп встречается всё реже.
Какие бывают картинки
Фотографии, картинки, схемы, графики, баннеры нужны или для декора, или для иллюстрации. Разбираемся, что ставить, куда и в каких случаях.
Где найти бесплатные картинки для сайта
Самый большой соблазн для всех, кто хоть раз открывал графический редактор по работе — взять первую картинку из гугла по запросу «люди» и вставить куда-то там по поводу и без. Статья о том, где брать бесплатные фотографии, о лицензиях и чистой совести.
Кстати, это мы с ребятами смеёмся над анекдотом про надувного коня:

Чем растровая графика отличается от векторной
Великая битва SVG против JPG, PNG и GIF не закончится примерно никогда. Всем важно знать основные этапы и отличия растра и вектора, чтобы через пару месяцев в компании друзей (как на фото выше) блеснуть этим знанием.
Как создать и анимировать SVG
Ещё одно руководство по созданию и анимации векторных иллюстраций. Обязательно к изучению для верстальщиков и вообще всех, кто во фронтенде.
Как добавить SVG на сайт
Вадим Макеев рассказал о нескольких способах. Говорит, правильного нет — есть подходящие. Самое время изучить и убедиться самостоятельно.
Ещё из рубрики «Статьи»
Что такое CMS и как под них верстать
И что это вообще за системы управления контентом?
Как составить план развития: неочевидные советы
Как расти по плану, а без плана не расти.
Как одновременно работать, учиться и не сойти с ума
«…с тайм-менеджментом я не очень дружу: всё делаю медленно, часто опаздываю». Узнали? Согласны?