Pattern в качестве фонового изображения
Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.
Чтобы было яснее, рассмотрим пример psd-макета страницы:
Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?
До недавнего времени я бы сделал так. Попытался визуально отыскать повторяющиеся фрагменты в фоне, одном и втором.
Если бы удалось обнаружить таковой фрагмент, то вырезал бы его с помощью инструмента “Crop”. Если бы фрагмент не обнаружил, то просто бы вырезал кусок фона размером побольше (что называется “на глазок”), опять-таки, с помощью инструмента “Crop”.
Немного позже я узнал, что существует три подхода к вырезанию фоновой картинки для будущего HTML-шаблона. Первые два способа простые и неточные. Третий способ — более медленный, но точный.
Ниже последовательно рассмотрим все три способа, начиная с самого простого и заканчивая самым трудоемким.
Описание выполняемых действий приведено в локализованной версии Photoshop.
Простое вырезание фона
Фон страницы на psd-макете представляет из себя растровое изображение, у которого имеется всего один слой. И при этом визуально не получается выделить повторяющиеся фрагменты в этом фоне.
В этом случае нужно поступить только одним способом.
Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E .
50x50px
100x100px
Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.
Вырезание фрагмента фона
Второй способ отличается от первого лишь только тем, что на этот раз удалось обнаружить в рисунке фона макета повторяющиеся фрагменты. При этом фон макета все также является растровым изображением.
Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.
Как называется фон с повторяющимся рисунком
Здравствуйте. Подскажите, как называется повторяющиеся раисунки, которые ставишь на фон сайта они размножаются и получается целый единый фон?
Фоны для сайта тупо звучит, у них есть какое-то название. Подскажите
автор: ЯСА (31.07.2012 в 17:30) письмо автору
Это так и называется «фоном, в свойство которого background-repeat имеет значение repeat» или просто «фоном».
Ничего тупого в этом нет, потому что значение repeat — оно во всех браузерах стоит по умолчанию.
Слово «рАисунки» посоветую вам заменить на «картинки» — в нём меньше возможностей показать, что вы не читатель, а зритель 🙂
автор: Lelik (31.07.2012 в 17:38) письмо автору
фоны — нормальное название, но периодически фон называют паттерном.
автор: confirm (31.07.2012 в 17:45) письмо автору
Изображение (а не изображения), которое предназначается для размножения на поверхности, в частности бесшовного, называется текстурой.
автор: Yuriev (31.07.2012 в 19:43) письмо автору
Раппорт — базовый элемент орнамента, часть узора, повторяющаяся многократно
автор: confirm (31.07.2012 в 21:03) письмо автору
Даже выделено жирным, это в смысле самый верный вариант? И зря — в компьютерной графике такое понятие не применяется.
В компьютере все рисуется на канве, у которой, кстати, нет фона, это просто холст. Его можно залить локальным цветом, градиентом, задать кисти стили, а также указать изображение, которое будет служить текстурой, которой кисть и будет рисовать. В качестве таких текстур может служить и «Черный квадрат» Малевича, и «Мона Лиза Джоконда» Леонардо да Винчи, которые к орнаментам отношения не имеют. Причем текстура, это не обязательно означает повторить многократно, это может быть один мазок кисти — в HTML одно изображение в элементе.
Порепетируйте с применением текстуры в GD.
автор: Yuriev (31.07.2012 в 22:14) письмо автору
Вопрос то был «как называется повторяющиеся рисунки», а не про один мазок Малевича.
автор: confirm (31.07.2012 в 22:18) письмо автору
Ну вопрос же в контексте HTML, а не орнаментальной вышивки.
автор: Yuriev (31.07.2012 в 22:22) письмо автору
А мне показалось, что вопрос в «контексте русского языка» (или другого, возможно)
А например текстура
ТЕКСТУРА, -ы; ж. [от лат. textura — ткань, связь, строение] Спец.
Характер строения твёрдого вещества, расположения его составных частей (кристаллов, зёрен и т.п.). Перламутровая т. Т. горных пород. Т. древесины
как бы, к повторению элементов, как вы, confirm, правильно заметили, отношения не имеет
автор: confirm (01.08.2012 в 07:02) письмо автору
Лучше почитайте WinAPI и о графике компьютерной.
автор: Yuriev (01.08.2012 в 10:34) письмо автору
И что? WinAPI и компьютерная графика — это толкование русского языка?
автор: confirm (01.08.2012 в 10:43) письмо автору
Ну вообще-то понятие текстура вряд-ли имеет русское происхождение.
Просто в WinAPI описано не только как собственно происходит рисование, но и что такое кисть, какие стили ей можно задать, и в том числе текстуру.
А в компьютерной графике термин текстура выбран не по мотивам латыни (собственно и она об этом говорит, так что может и поэтому), а потому, что данное понятие — это преимущество (или повторение) в ориентации некоторых элементов, из которых состоит материал, что-то типа этого.
Этот термин наверняка вы встречали и в области не связанной с графикой, например, телефон текстурированный под металл, дерево.
автор: cheops (01.08.2012 в 07:46) письмо автору
Текстура, это текстура, вопрос изначально был о тайлящихся текстурах (по крайней мере в компьютерном сленге принят именно такой термин).
автор: confirm (01.08.2012 в 07:50) письмо автору
Ну ведь текстуры все равно. ) Это уже как вариант применения текстуры, если затронуть 3D графику, то это можно еще более расширить, но в основе все равно термин текстура.
автор: cheops (01.08.2012 в 10:05) письмо автору
Ну, да термин, конечно, текстуры и в области 3D им посвящаются целые фолианты. просто посылать людей изучать WinAPI на мой вкус — перебор :))), человеку явно нужно парочку мотивов для фона и уж явно он не движок задумал писать.
автор: confirm (01.08.2012 в 10:20) письмо автору
Ну так я не автора вопроса отослал к WinAPI 🙂
А если автор вопроса будет искать именно текстуры, то уж точно попадет на набор нужного, или наверняка найдет урок по созданию в фотошоп бесшовной текстуры (заодно и ознакомиться с понятием тайлящейся текстуры), что собственно чаще и нужно.
как называется рисунок, в котором объект повторяется?
например:
Дополнен 12 лет назад
и где подобное можно найти в интернете?
Лучший ответ
к примеру в кайме, как меандр у греков
повторяющаяся часть рисунка на ткани, трикотажном полотне, вышивке
Остальные ответы
Похожие вопросы
Ваш браузер устарел
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.
Как называются картинки для заполнения фонов на веб страницах?
Как называются вот такие картинки для заполнения фонов на web-страницах.
- Вопрос задан более трёх лет назад
- 10821 просмотр
1 комментарий
Оценить 1 комментарий
Владимир Красносельских @karavaiker Автор вопроса