Создаем брендирование с паттерном в качестве фона

2.1. создаем или выбираем изображение паттерна

паттерн можно поискать в интернете или создать самим (например, в Adobe Photoshop)
для примера подбираем картинку в интернете


немного о том, что такое паттерн.

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

простыми словами:
Паттерн понимается в этом плане как повторяющийся шаблон или образец. Элементы паттерна повторяются предсказуемо. Так, из графических паттернов складываются красивые узоры.


цвет фоновой заливки выбирается исходя из основных цветов паттерна и является так называеммым первым слоем подложки брендирования.

выберем цвет между "камнями" (rgb: 67,67,67; hex: #434343)

2.1. выбираем изображение; ширина 1920 пикселей, высота - от 200 до 1000 пикселей (например)



2.2. подготавливаем изображение

выбор за дизайнером:
можно использовать переход "в полупрозрачность"
или вообще не использовать переход
(для верхнего и нижнего изображения это вполне допустимо)

2.3. выбираем область для вставки информации (логотипы, текст, телефон(ы) и пр.)

ВАЖНО!!!
Исходя из того, что разрешение экранов мониторов ПК различных пользователей имеет обширный диапазон, мы НАСТОЯТЕЛЬНО РЕКОМЕНДУЕМ размещать всю информационную часть брендирования в пределах контентной части сайта (1024 пикселя).
Учитывая, что в данный момент условное среднее разрешение экранов 1366х768 пикселей, то эту область в исключительных случаях можно расширить до 1340 пикселей по ширине.
высота информационной области - 200 пикселей
расположение - вверху, строго по середине
помечаем область 1024х200 пикселей сверху по середине

2.4. расставляем информационные элементы



2.5. в результате мы получим

3.1. выбираем изображение; ширина 1920 пикселей, высота 300 пикселей (например)



3.2. подготавливаем изображение

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


3.3. выбираем область для вставки информации (логотипы, текст, телефон(ы) и пр.)

ВАЖНО!!!
Исходя из того, что разрешение экранов мониторов ПК различных пользователей имеет обширный диапазон, мы НАСТОЯТЕЛЬНО РЕКОМЕНДУЕМ размещать всю информационную часть брендирования в пределах контентной части сайта (1024 пикселя).
Учитывая, что в данный момент условное среднее разрешение экранов 1366х768 пикселей, то эту область в исключительных случаях можно расширить до 1340 пикселей по ширине.
высота информационной области - 300 пикселей
расположение - строго по середине
помечаем область 1024х300 пикселей по середине

3.4. расставляем информационные элементы



3.5. в результате мы получим следующее

4.1. создаем область; ширина 1920 пикселей, высота - до 1100 пикселей

ВАЖНО!!!
Исходя из того, что разрешение экранов мониторов ПК различных пользователей имеет обширный диапазон, мы НАСТОЯТЕЛЬНО НЕ РЕКОМЕНДУЕМ размещать на данном изображении никакой информационной нагрузки. т.к. у большинства пользователей она будет практически нечитабельной, или читабельной частично.
Учитывая, что в данный момент условное среднее разрешение экранов 1366х768 пикселей, то фактически пользователь с данным разрешением экрана будет видеть по краям
(1366[ширина экрана] - 24[средняя ширина скролл-бара] - 1024[ширина контентной части сайта]) / 2[две стороны] = 159 пикселей
такой ширины очень мало для размещения какой-либо нагрузки.

для примера создаем область 1920х1100 пикселей

ВАЖНО!!!
Верхняя и нижняя часть повторяющегося изображения (при использовании паттерна) ДОЛЖНА в обязательном порядке в финальном варианте переходить в полупрозрачность.
Это связано с тем, что высота страницы сайта имеет переменное значение и НИКОГДА НЕ ЯВЛЯЕТСЯ ВЕЛИЧИНОЙ ПОСТОЯННОЙ!!!
Вставка повторяющегося изображения происходит следующим образом (изначально запрограммированным методом):

• вычисляется конечная высота отстроенной страницы
• выбирается область за вычетом высоты верхнего и нижнего изображений брендирования
  [высота страницы] - [высота верхнего изображения] - [высота нижнего изображения] = [высота области заполнения]
• рассчитывается максимально возможное целое значение повторяющихся изображений, которое можно уместить в эту высоту
  МИНИМАЛЬНОЕЦЕЛОЕ([высота области заполнения] / [высота повторяющегося изображения]) = [максимально возможное количество для вставки]
• повторяющееся изображение расставляется полученым количеством раз между верхним и нижним изображениями брендирования с одинаковыми интервалами (промежутками). т.е. между изображениями чаще всего будут какие-то интервалы, и именно поэтому необходимо, чтобы сверху и снизу повторяющееся изображение переходило в полупрозрачность.

4.2. помечаем облать контентной части

расположение - строго по середине
помечаем область 1024х1100 пикселей по середине

4.3. расставляем графические элементы



4.4. в результате мы получим следующее