Pavel Designer

Есть, в том видео показан сервис https://goanimate.com/

Самые обычные реалистичные (а пофакту «оттехдизайненные», если можно так выразиться) бывшие популярными с появлением скевоморфизма Эппл и до повального увлечения плоским.
https://www.shutterstock.com/search?search_source=...

Вы шутите, да?)

Всё что на фоне называется фоновым, геометрические фигуры все имеют название, что-то непонятное чаще называется абстрактным. Следовательно, если кратко, то всё это — фоновые изображения, фоновая графика, фоновые иллюстрации.
Соединяете слова в поисковый запрос (причём, лучше на английском языке) и находите искомое, но чаще красивая графика создаётся под проект т.к. на стоках всё давно устарело.

По примеру с Дрибла что можно найти на Шаттерстоке (просто как пример): всякие волны, пчелиные соты, всякие линии.

А еще быстрее сделать эти волны в Иллюстраторе за 2 минуты (нарисовал одну, окрасил в белый и скопировал трижды с разной прозрачностью), соты тоже за 5 минут (сделал одну, скопировал, повернул как надо, перекрасил и вставил в макет (если не в Иллюстраторе/Скетче делается вдруг).

Дополню на всякий случай: если фоновая иллюстрация повторяющаяся, то это узор (pattern), если без видимых стыков — это бесшовный узор (seamless pattern).

Вообще забавно, что 9 человек подписалось узнать что на фоне у нас фоновые картинки, а делаются они в графических редакторах)))

Вариант 1.
Шаги по созданию маски пропускаю)

1. Выделяем растровую картинку с маской

2. Меняем в Transparency режим наложения на любой, например, Multiply

3. Идем в Object > Flatten Transparency и выставляем настройки

4. Удалим лишние оставшиеся маски, разгруппируем и получаем обрезанную картинку по маске.
Вариант 2. Для прямоугольных форм.
Использовать Crop image tool и обрезать прямоугольником.

Просто обрезать также можно с помощью плагина Rasterino.

Делаются такие картинки в любом графическом редакторе (растровом или векторном — кто в чём умеет). Бывает их много разных, а самые популярные это продукция Adobe (Photoshop, Illustrator, например).

Подбирается фоновое изображение, поверх которого накладывается текст и другая графика. Как это делать — смотрите уроки к той программе, которую выберете (вот пример уроков для Фотошопа). В самом простом случае это размещение текста поверх изображения инструментом Type tool (есть во всех редакторах).

Шрифтов существует огромное количество. Начните с тех, что уже установлены в вашей системе. Как станет мало — погуглите и выберите парочку новых (но не надо качать сборники типа «100500 кириллических шрфитов» и устанавливать их все сразу себе). Существует масса статей с обзорами шрифтов, а также пабликов в соцсетях, где все выкладывается. Находится это все элементарно.

PS Найти уроки для того же Фотошопа проще простого, их тысячи и в текстовом виде с картинками и на Ютубе. Такие элементарные вещи проще самому посмотреть, но если это лень делать, отговариваясь типа «да я искал — не нашёл», то и здесь тоже не помогут =)

Если нужны готовые шаблоны для графического редактора, то их много. Photoshop banner template, psd instagram template если под какой-то конкретный формат, шаблон баннера вк и по такому принципу — благо подобного добра очень много. Очень много есть на Графикривер или Креатив маркет, а также онлайн-сервисы типа Canva.

Ответ обновлен в 2019 году.

Судя по разному исполнению иконок, это не сэт, а ассорти из разных. Говорю как дизайнер, сделавший очень много наборов иконок в самых разных стилистиках.

Все эти вопросы вы должны задавать не в интернете, а конкретному программисту т.к. только он и никто иной не знает что лучше именно в данном случае. Да, есть гайдлайны, которые соблюдаются через раз. Если смогут по одному макету собрать приложение — замечательно, делайте только под одно разрешение. Если же хотят грамотное отображение на всех устройствах и нужны макеты под разные разрешение и ориентации — делаете так.

Вам сейчас несколько человек скажут свое мнение и назовут конкретные разрешения, а в реальном проекте попросят совсем другое. Уточняйте все у конкретного клиента. Говорю это по собственному опыту. У меня были и те, кто ради экономии один макет адаптировали под разные платформы, а были и те, кто предпочитали иметь разные версии для разных нужд. Самый минимум — одно разрешение (чаще самое большое) и описание поведения для всех других, а далее как клиент/программист попросит.

Определитесь сначала что вам интереснее делать, а то ощущение что вы где-то услышали слово «веб-дизайнер», подумали что-то неправильно и захотели им стать. Вы хотите только рисовать макеты в Фш или еще и верстать их? Или, может, сразу делать сайты «под ключ»? Для полного цикла разработки вам потребуется знать гораздо больше озвученного в вопросе. Если же только макеты, то всякие нюансы фреймворков и CMS по ходу работы будут пояснять верстальщики, с которыми придется сотрудничать.

Что нужно знать для того чтобы быть хорошим веб-дизайнером?
Каждый из пунктов подойдёт для отдельного вопроса или целой статьи, но попробую вкратце.

• В первую очередь надо иметь вкус. Прививают хороший вкус, например, в художественных школах или просвещенные родители. Самостоятельно читать книги и полезные статьи, смотреть на работы других, сравнивать и понимать что хорошо, а что плохо и почему(!). Приходит со временем и опытом. Если понимание что хорошо, а что плохо не придёт, то лучше менять занятие во избежание траты времени.
  
• Нужно знать основы графического дизайна. Композиция (очень важно), визуальная иерархия, влияние пустого пространства, теория цвета. Виды графики (растр, вектор) и форматы изображений.
  
• Нужно знать типографику хотя бы на базовом уровне. Виды шрифтов, области применения, параметры шрифтов и т.п. Для этого читаем книги и статьи. Сначала может показаться, что это вообще не имеет отношения к дизайну, но везде, где есть текст она нужна очень сильно. Одной типографикой можно сделать прекрасный дизайн. А многие считают дизайном лишь наличие рюшечек и картиночек.
  
• Надо знать инструменты. Можно орудовать и одним, но существует много других, которые облегчают работу над определенными вещами. Не забываем, что помимо общего макета сайта еще потребуется подбирать материал для работы (фото и другую графику), создавать баннеры и иллюстрации, а также наборы иконок (не всегда прокатит скачивание из интернета старых и некрасивых клипартов), создавать коллажи и иную графику, присутствующую на сайте и т.п. Однозначно потребуется Фотошоп для растровой графики, Иллюстратор для векторной (Скетч, если работать на МАКе или КорелДРО, если он больше нравится). Причем, знать не просто на базовом уровне, а знать все инструменты, что они делают и как их можно применять. Это не сразу, с опытом, но не умея обращаться с рабочим инструментом вы не сможете работать быстро и качественно.
  Два редактора нужно обязательно вектор+растр. Причем, уже давно многие современные интерфейсы делаются в векторе из-за большего удобства, просто не все верстальщики хотят учиться верстать из него, плагинов-то под Фш гораздо больше.
  
• Нужно уметь проектировать сайт. Для этого помогут основы взаимодействия пользователя с интерфейсом, умение продумать логику работы, архитектуру. Изучить модульные сетки и их работу (типографика передает привет), определять цели проекта, аудиторию. Уметь прототипировать и знать инструменты для этого.
  
• Понимать что такое адаптивный и отзывчивый дизайн. Принципы построения и работы сетки при адаптивной верстке. Уметь подготовить макеты под неё. Знать особенности применения разных типов графики (растр, вектор).
  
• Нужно знать основы html и css. Важно понимать как все формируется в браузере и как те или иные визуальные элементы задаются в коде сайта. При желании можно совершенствоваться в плане полноценной верстки. Но одному человеку «под ключ» дают лишь малобюджетные сайты и сама верстка это лишь дополнение для несложных сайтов, не требующих использования CMS. Мое мнение, могу ошибаться.
  
• Нужно знать и понимать свою роль в процессе создания сайта. Уметь задать клиенту (или руководителю) правильные вопросы, ответы на которые помогут решить поставленную задачу. Уметь взаимодествовать с командой, уметь читать и помогать составлять ТЗ. Понимать как те или иные требования к сайту должны быть соблюдены. Уметь грамотно презентовать свои макеты (часто дизайнерские «фишки» не всем понятны на статичной картинке и нужно суметь объяснить задумку) и аргументированно объяснить свою позицию — почему сделано именно так, а не иначе.
  

И пара субъективных требований от меня.
1. Нужно знать и уметь пользоваться своим родным языком, знать разницу между типами кавычек, тире и дефисов. Уметь писать грамотно адреса и телефоны (для страниц контактных данных, например).
2. Никогда не использовать текст «рыбу» типа lorem ipsum или не подходящую по тематике. Делаете для строительства — погуглите про строительство, делаете для автомастерской — используйте текст на эту тему. Наличие правильного текста значительно упрощает восприятие макета. Идеальный вариант — работать по готовому контенту от клиента.

PS Главное помнить: чтобы стать хорошим специалистом в своём деле, надо потратить много времени на оттачивание навыков и наработку опыта. Это не происходит сразу, нужно несколько лет практики с хорошими проектами.
PPS Если нет определённости, то имеет смысл:
а) Пойти работать в офис новичком (или даже стажером) за малую з/п и с возможностью обучения на реальных проектах. Поймете ваше ли это и получите опыт.
б) Пойти на курсы по этой специализации. Сегодня существует ряд организаций и ВУЗов, обучающих этому. Выберите подходящий и там вам ответят на все вопросы и даже научат пользоваться этими знаниями.
В любом случае, путь самоучки-фрилансера это не самый простой и прибыльный путь. Хотя бы наставник, но нужен.
PPS Материалы для чтения можно легко погуглить. Даже здесь, на Тостере, много раз поднимались вопросы «что почитать» или «что нужно знать» такому-то специалисту. Воспользуйтесь поиском по запросам типа «книги веб дизайн», «что уметь дизайнеру» и т.п. Я серьезно.

Если что-то еще вспомню, то дополню.

В дополнение к ответу Nekto_Habr:

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

Можно попробовать в тематических группах соцсетей и на тематических сайтах behance, revision и т.п., они легко гуглятся (дрибббл не очень удобен для демонстрации сайтов). Вот только эффективность невысокая будет. Работу могут прокомментировать как хорошие специалисты, так и бездари, чьи советы могут только навредить. Плюс, велика вероятность получить бессмысленные комментарии типа «Круто!», «Хорошая работа» от любителей привлечь внимание к своему профилю ради лайков. Есть подобные темы с оценкой на форуме demiart и там, хотя бы, нет лайкодрочеров в таких количествах как на дрибббле или бихансе. Попробуйте погуглить и выбирать ресурс по активности пользователей.

Но лучше всего поработать с хорошим арт-директором (в конторе, на фрилансе или лично). Толку будет гораздо больше. Плюс, смотрите на работы других (чем больше разных источников будет, тем лучше и объективнее будет понимание), читайте профильные книги и интернет-ресурсы. Здесь, на тостере много раз задавались вопросы и про то и про другое.

НО! Нельзя оценивать сайт без принятия в расчет интерфейса и удобства пользования. Сайт это инструмент взаимодействия с пользователем и внешняя красота важна также как и удобство восприятия информации и навигации. А для коммерческих сайтов отсутствие конверсии из-за красивой, но неуместно расположенной кнопки может быть убийственным. Но это уже другая история © =)

На скриншоте текст уже выровнен по горизонтали и об этом сигнализирует иконка в верхней панели (собственно, там все выравнивание и делается). А выравнивания по вертикали внутри bounding box'a не предусмотрено в принципе (если захотеть, сделать можно руками, но специального инструмента нет).

Если очень нужно выровнять надпись относительно конкретного объекта (прямоугольника, например), то либо уменьшать bounding box до размеров надписи/текста и выравнивать, либо не использовать bounding box (т.е. не рисовать инструментом Type tool прямоугольник, а просто кликнуть в рабочей области и писать текст, таким образом, он будет без лишних границ).

PS Такое выравнивание по кнопке есть только в InDesign, а Ps и Ai лишены этой возможности. Это и логично, в общем-то.