Как создаются изображения на веб-сайтах с плоским дизайном?

Во-первых, я хотел бы знать, являются ли изображения в этом портфолио скриншотами?

Я не думаю, что мы можем знать наверняка, но я предполагаю, что да, это скриншоты. Поскольку этот сайт продает шаблоны, я предполагаю, что снимки экрана относятся к реальному веб-сайту шаблона, а не просто к макету. Но создатель мог бы сделать это в программе редактирования изображений.

Тогда являются ли изображения на этой веб-странице скриншотами веб-сайта? Иначе как дизайнер нарисовал эти образы?

Да, им нужно было нарисовать каждую деталь (если только они не использовали готовые объекты). На приведенном выше изображении много фигур с копией и вставкой. Для ноутбука дизайнер создавал внешний вид веб-сайта в 2D-плоскости, а затем искажал объекты, чтобы они соответствовали перспективе ноутбука.

как они вообще рисовались? Дизайнеру нужно было прорисовать каждую деталь?

Использование различных инструментов и текста, скорее всего, в программе редактирования векторов. Сначала это может показаться большим, но когда вы внимательно изучите графику, вы заметите множество повторяющихся объектов. Таким образом, никто не размещает каждую фигуру вручную, поскольку есть функции для копирования и вставки объектов на определенном расстоянии друг от друга.

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

Я переделал планшет, показанный на вашей картинке, примерно за 5 минут (я не все сделал, но вы поняли). Вероятно, это заняло бы немного больше времени, если бы я не копировал дизайн и не должен был думать, что создать.