Pattern в качестве фонового изображения
Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.
Чтобы было яснее, рассмотрим пример psd-макета страницы:
Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?
До недавнего времени я бы сделал так. Попытался визуально отыскать повторяющиеся фрагменты в фоне, одном и втором.
Если бы удалось обнаружить таковой фрагмент, то вырезал бы его с помощью инструмента “Crop”. Если бы фрагмент не обнаружил, то просто бы вырезал кусок фона размером побольше (что называется “на глазок”), опять-таки, с помощью инструмента “Crop”.
Немного позже я узнал, что существует три подхода к вырезанию фоновой картинки для будущего HTML-шаблона. Первые два способа простые и неточные. Третий способ — более медленный, но точный.
Ниже последовательно рассмотрим все три способа, начиная с самого простого и заканчивая самым трудоемким.
Описание выполняемых действий приведено в локализованной версии Photoshop.
Простое вырезание фона
Фон страницы на psd-макете представляет из себя растровое изображение, у которого имеется всего один слой. И при этом визуально не получается выделить повторяющиеся фрагменты в этом фоне.
В этом случае нужно поступить только одним способом.
Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E .
Инструментом “Crop” с зажатой клавишей Shift (чтобы получился квадрат) выделяем на фоне psd-макета квадрат побольше, размера
50x50px
100x100px
. Размер должен быть побольше именно для того, чтобы гарантировать бесшовность такого рисунка в фоне.
Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.
Вырезание фрагмента фона
Второй способ отличается от первого лишь только тем, что на этот раз удалось обнаружить в рисунке фона макета повторяющиеся фрагменты. При этом фон макета все также является растровым изображением.
Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.
Pattern в Photoshop
Третий способ основан на понятии
pattern
в Photoshop. Этот способ самый точный и надежный. В нем мы как-бы “опираемся” на силы самого Photoshop, который должен “помочь” нам обнаружить
pattern
в нарисованном дизайнером psd-макете.
Я не дизайнер (и никогда им не буду), поэтому могу сказать по поводу того, что такое
pattern
в двух словах.
Это образец узора какого-то определенного размера (который может быть любым) —
Как называются картинки для заполнения фонов на веб страницах?
Как называются вот такие картинки для заполнения фонов на web-страницах.
- Вопрос задан более трёх лет назад
- 10883 просмотра
1 комментарий
Оценить 1 комментарий
Владимир Красносельских @karavaiker Автор вопроса
Добавьте цвета! Как работают паттерны
Рассказываем, как графические дизайнеры используют паттерны в интерфейсах, оформлении и брендинге.
Иллюстрация: Colowgee для Skillbox Media
Ольга Кондратова
Знает всё о дизайне, фотографии и современном искусстве. Постоянный посетитель московских музеев и галерей.
В графическом дизайне у паттернов практически неограниченные возможности. Однако поначалу может показаться, что подобрать им применение непросто. Тут нужны опыт, насмотренность и понимание принципов работы этих структур. Рассказываем в статье, как используют графические паттерны в повседневности и в коммерческих проектах.
- где встречаются паттерны в повседневности;
- как используют паттерн в брендинге;
- актуальны ли паттерны в интерфейсах;
- какова практическая польза паттерна в промышленном дизайне;
- возможности генеративных паттернов.
Подробно о том, что такое паттерн в графическом дизайне и как он устроен, читайте в карточках.
В повседневном дизайне
С паттернами в обычной жизни мы встречаемся каждый день, часто даже не обращая на них внимание. Например, они популярны в дизайне обоев — рисунок можно продублировать во всю длину и ширину рулона, а при оклейкн большой площади стены место стыка бумажных полос будет почти незаметным.
Модный дом Gucci, известный в первую очередь одеждой и аксессуарами, выпускает обои со своими паттернами.
Обои с растительными паттернами были очень популярны в эпоху модерна. Об этом удивительном времени читайте в нашем материале.
Кроме того, что паттерны стыкуются без швов, у них есть ещё одно свойство — рисунок можно обрезать в любом месте, при этом он по-прежнему будет выглядеть хорошо. Поэтому паттерны часто используют в оформлении скетчбуков, блокнотов, тетрадей и открыток. При создании дизайна с паттернами для полиграфии можно не волноваться за вылеты под обрез.
Из-за того, что паттерны не боятся изломов и искривлённой геометрии, они так широко распространены в упаковке. Например, паттерн с мотивами под хохломскую и гжельскую роспись используется в дизайне стаканчиков «Шоколадницы».
Паттернами декорируют также обёрточную бумагу. Узор с паттернами можно нанести на лист любого размера, а если одного листа не хватит, то не проблема соединить несколько — место стыка практически не будет заметно. Точно так же можно отрезать и лишний кусок. Нанесённый рисунок замаскирует любые огрехи и складки.
Рисунок на ткани — это тоже паттерн. При пошиве отрез раскраивается на множество элементов, но рисунок всё равно остаётся узнаваемым. Плюс пёстрый орнамент может сделать незаметными швы. А некоторые модные дома в качестве рисунка используют фирменный паттерн.
Самый известный из них — монограмма модного дома Louis Vuitton.
Рассказываем в этом материале об африканских паттернах в моде и дизайне — как грамотно использовать и где ими вдохновляться.
В брендинге
В брендинге и айдентике чаще всего паттерны — дополнительный элемент фирменного стиля. Например, для кафе Tikithai была разработана линейка из шести узоров, которые не связаны с фирменным знаком, но удачно его дополняют. Поскольку образец можно обрезать под любым углом, это стало удачным решением для коробки с большим количеством элементов, у каждого из которых — свой рисунок.
Рассказываем о форматах и компонентах фирменного стиля.
Иногда паттерн может заполнить весь логотип — такое решение использовано в городской айдентике Мельбурна. Дизайнеры хотели показать динамичность разных городских инициатив города, который находится в постоянном развитии. Это хороший графический ход для динамичного дизайна, который не боится выглядеть по-разному, показывая разные стороны одного и того же продукта.
В случае более традиционных решений, фрагмент паттерна может дополнять фирменный стиль и стать его узнаваемым элементом. Например, у компании Cloudaware несколько фирменных паттернов, которые можно использовать и в качестве объектов, целиком заполняющих плоскость, и в качестве самостоятельного дополнительного знака.
Читайте подробный рассказ о работе над айдентикой Cloudware от «Логомашины» в этом материале.
Фирменный паттерн VK составлен из элементов логотипа, разобранного на части. Таким образом, фрагменты монограммы можно использовать практически в любой среде: в интерфейсах, буклетах, при оформлении блокнотов или подложек под значки.
Чтобы паттерн оставался узнаваемым и передавал настроение, заложенное айдентикой, он используется по строго определённой схеме. Поэтому применение паттерна прописывают в брендбуке. Вот так выглядит страница с правилами использования фирменного паттерна магазина «Пятёрочка»:
Рассказываем о том, что такое брендбук и почему он необходим для компании, в этой статье.
Ещё одно использование паттерна в брендинге — нанесение фирменного знака без изменений. Например, белорусская компания «Морозпродукт» делает паттерн из логотипа мороженого «20 копеек» и использует его для разных форматов упаковки. Далеко не всякий бренд готов пойти на такое вольное обращение со своей айдентикой, когда нужно «показать товар лицом» — часто это достаточно смелое решение.
Но есть и более скромное использование этого приёма. Оно построено на тех же принципах, что лежат в основе подарочной бумаги: лист с рисунком будет смотреться хорошо, даже если нельзя заранее предсказать форму и размер продукта. В брендированную бумагу заворачивают, например, сэндвичи, обувь внутри коробки, предметы одежды. Иногда для такого паттерна разрабатывают собственный узор, но часто это скромно дублируемый или даже полупрозрачный логотип. Обрезать лист можно в любом месте, и даже смятым он не будет выглядеть неопрятно.
В дизайне интерфейсов
В дизайне интерфейсов паттерны заменяют собою сплошную заливку фона. Это делает оформление ярче и разнообразнее, задаёт ему характер и динамику.
Раньше паттернами часто заполняли фон веб-страниц, поскольку было невозможно предсказать, каким будет разрешение экрана пользователя. Образец размножался и полностью закрывал поверхности как на малых, так и на больших экранах. При этом из-за небольшого размера изображения паттерна такой фон загружался быстро, что было важно при небольших скоростях интернет-соединений.
Современный дизайн адаптируется под разные расширения, а технологии позволяют заливать фон как достаточно крупными изображениями, так и делать разноцветные заливки средствами HTML, не используя графические файлы. Поэтому сегодня повторяющиеся паттерны дизайнеры выбирают редко. Чаще всего их используют для заливки малозначительных элементов дизайна, чтобы не оставлять их «пустыми», но и не привлекать к ним большого внимания.
Сейчас по-прежнему можно встретить сайты с паттерном на фоне, правда, они вызывают ощущение «ретро». Яркий фон может отвлекать от серьёзного содержания, но подобный подход уместен, например, в блогах.
По этому же принципу работает и подложка в мессенджерах. Фон делает страницу живой — цвет приятно дополняет диалог из коротких, простых по форме сообщений.
Ещё одно применение паттернов в современных интерфейсах — временное заполнение «пустого» пространства на сайте. Незаполненный профиль выглядит скучно, поэтому разработчики Last.fm в шапку интерфейса личной страницы загрузили паттерн — впоследствии пользователь его должен заменить собственным изображением.
В этой статье — полезные плагины для создания паттернов в Figma.
Ещё одно применение простых паттернов в проектировании — адаптация дизайна для людей с дальтонизмом (цветовой слепотой). Так, при цветовом кодировании можно использовать не только цвета, но и лёгкие текстуры, которые передадут разницу тем, для кого цвета неразличимы.
В промышленном дизайне
Часто паттерны выполняют прикладную функцию: например, рельефный рисунок на шинах и подошве обуви улучшает сцепление с дорогой.
В общественном транспорте паттерны гораздо предпочтительнее однотонной обивки, поскольку узор помогает скрыть грязь и царапины. Например, для московского транспорта в Студии Артемия Лебедева разработали паттерн со знаковыми зданиями Москвы. Его ещё и интересно разглядывать во время поездки.
Ещё один известный пример — армейский камуфляж. Но есть и более интересные варианты применения маскировки. Так, при помощи контрастных чёрно-белых паттернов прячут облик моделей автомобилей, находящихся в разработке. Узор делает неразборчивыми дизайн кузова и не позволяет сделать фотографии, которые могли бы утечь в прессу или к конкурентам раньше времени. Такой вид рисунка называется Dazzle — «ослепляющий камуфляж», его использовали военные для маскировки формы кораблей.
Генеративные паттерны
Классический паттерн — это один фрагмент, повторяемый многократно. Но с развитием технологий появились новые — генеративные — паттерны. В них нет единого образца — ни один из участков не повторяется. Такие паттерны представляют собою большую плоскость, заполненную элементами в едином стиле.
Генеративные паттерны создают нейросети, «придумывая» каждый кусочек заново на основе загруженных в программу рисунков и параметров. Поскольку в таких паттернах нет дублирования, то у них более узкий круг применения. Например, рисунок для текстиля должен быть размером с весь отрез ткани, который может быть длиной до 150 метров.
Читайте рассказ о дизайнерке Хелле Йонгериус, которая придумала и соткала трёхметровый паттерн для ткани Repeat.
Несколько лет назад агентство Ogilvy Italia запустило рекламный концепт Nutella Unica. Чтобы привлечь внимание к бренду, была создана «неповторимая упаковка» Nutella — каждая из семи миллионов баночек имела уникальную этикетку, которую сгенерировала нейросеть. Тираж был раскуплен за месяц.
Создать такой паттерн самостоятельно практически невозможно, поэтому для их разработки используют специальные программы и сервисы. Часто программисты даже делают свои алгоритмы специально под конкретную задачу.
В этом материале мы сделали подборку из 27 самых востребованных дизайн-студий и брендинговых агентств.
Подводя итог
Паттерн — универсальный инструмент. Он может заполнять поверхности любых размеров, следовать любой форме, скрывать заломы и швы.
Свойства паттерна нашли применение в брендинге, где он выполняет те же функции: оживляет дизайн и служит хорошим элементом в упаковке. А вот в интерфейсах классический паттерн больше не востребован — он уступил место графическим подложкам и генеративным паттернам, создаваемым нейросетями.
Читайте также:
- A.R.E: книга с оживающими картинами
- Группа Memphis: постмодернистский бунт в дизайне
- Типографика без правил: швейцарский панк
- Слово силы: динамичная айдентика для видеопродакшена OMA
- 49 полезных и интересных сайтов для художников и иллюстраторов
как называется рисунок, в котором объект повторяется?
например:
Дополнен 13 лет назад
и где подобное можно найти в интернете?
Лучший ответ
к примеру в кайме, как меандр у греков
повторяющаяся часть рисунка на ткани, трикотажном полотне, вышивке
Остальные ответы
Похожие вопросы
Ваш браузер устарел
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.