Повторяющийся фон для Вашего сайта ::: Блог RS
Давайте начнем.
Предварительные работы над нашем фоном
Для начала нам необходимо просто нарисовать какой либо фон.
- Создаем новый документ 600 на 600 пикселей
- Я выбрал два цвета #F1F1F1 и #E4E4E4
- Теперь применяем к созданному документу фильтр Clouds. (фильтр -> Render -> Clouds)
- После чего несколько раз Difference Clouds. (фильтр -> Render -> Difference Clouds) В общем Вы должны получить приблизительно вот такую картинку:
Если сейчас, данный фон попробовать размножить, то мы получим вот такую не красивую картинку:
Как видите границы стыковки изображений очень четко видны, нам необходимо избавится от них!
Нарезаем изображение
- Давайте первым делом создадим копию нашего фона на новом слое, а сам фон зальем белым цветом
- Жмем Shift + Ctrl + J, таким образом мы вырежем из слоя с фоном выделенную область
- Теперь у слоя, на котором остались верхняя и правая граница, удаляем правый верхний угол
- Теперь выделяем правую границу и жмем Shift + Ctrl + J, для того чтобы верхняя и правая граница были на отдельных слоях.
Теперь у нас имеется четыре слоя:
- Белый фон
- Верхняя граница
- Правая граница
- Квадрат размером 450 на 450 пикселей
Последнее что нам осталось сделать в данном пункте это поменять слои местами. Необходимо чтобы область размером 450 на 450 пикселей была ниже чем правая и верхняя граница. Слои должны быть вот в таком порядке:
Убираем границы у фона. Создаем повторяющийся фон
Для чего нам необходимо было нарезать фон на три части? Если верхнюю границу сдвинуть в самый низ, а правую влево, и чуть чуть с ними (с границами) по колдовать, то мы получим именно то, что создаем в данном уроке!! =)
- Давайте сдвинем границы и получим следующий результат:
- Теперь нам необходимо у сдвинутой правой границы удалить один из углов. Смотрите скрин ниже
Удалять необходимо именно под таким углом.
Нам очень Важно что бы правая часть сдвинутой правой границы была не тронута
- Теперь по колдуем ластиком, для того чтобы подогнать рисунок (при этом правую часть сдвинутой правой границы стирать нельзя)
- Теперь необходимо слить сдвинутую правую границу и сдвинутую верхнюю границу.
- Далее нам необходимо удалить верхний и правый угол у наших, уже слитых, границ. Внимание на скрин
- Теперь нам необходимо (опять) подогнать рисунок с помощью ластика. Вот как выглядит изображение у меня:
Вот вид обработанной границы. Думаю данный вид пригодится Вам для того чтобы понять как именно подтирать ластиком.
Обратите внимание, что затирать можно лишь внутреннею сторону. Внешнюю трогать нельзя!
- Ну что же, осталось слить изображение
Заключение
Теперь если замостить данным фоновым изображением страницу сайта, то Вы не увидите границ, и очень сложно будет понять где именно изображение начинается, а где заканчивается =)
Надеюсь данный урок Вам покажется полезным =) Если у Вас возникли какие либо вопросы, то пользуйтесь формой ниже =)
Если данный блог Вам показался интересным, то подпишитесь на RSS ленту блога через ридер, или же по почте.
Всего Вам наилучшего! На сегодня у меня все!
__________
P.S.: Я Вам ни раз рассказывал о замечательной РПГ которая изменила всю мою жизнь. Так вот, она вышла в далеком 2002-ом году. За ~9 лет компания Bethesda Softworks успела выпустить еще две части древних свитков. Последняя часть (Скайрим) вышла в ноябре 2011 года. Если Вы еще не играли в нее, и не знаете стоит ли, то могу посоветовать Вам посетить раздел скайрим на сайте arbse.net. Почитайте изложенную на данном ресурсе информацию, она поможет Вам определиться =)
Повторяющийся фон для сайта — Zefirka.club фото и картинки
Белый фон с узорами
Голубая текстура
Текстура пиксели
Обои Mr Perswall Flowers & Aquarelle
Абстрактный геометрический фон
Фон для сайта бесшовный
Обои Sandberg Flora Sandbergica
Ромбовидный фон
Гексагон паттерн 3d
Фон квадраты
Шестиугольник Гексагон
Прикольный фон
Абстракция прямоугольники
Фон геометрические фигуры
Паттерны для фотошопа
Технический фон для презентации
Геометрический фон
Обои Rasch Wallton 187717
Мелкий орнамент
Фон детская тематика
Фон лапки
Фон геометрический узор
Фон для сайта
Обои Borastapeter Wonderland 1454
Фон для иконки
Текстурные обои для стен
Технический фон для презентации
Белый фон для сайта бесшовный
Дизайнерский задний фон
Обои Erfurt 1003275
Бесшовные фоны
Обои Eco simplicity 3656
Фон ромбы
Бесшовный геометрический узор
Темный фон
Кордрой 118 ткань вип текстиль
Интересные текстуры
Геометрические узоры
Перфорированный металл текстура
Обои simplicity Eco Wallpaper
Паттерн мужской
Бесшовные фоны
Черные обои с узорами
Бесшовные фоны для Дневников
Фон геометрические фигуры
Текстура монитора
Бесшовный фон школа
Обои Borastapeter Wonderland
Фон паттерн
Графический фон
Обои Victoria Stenova Disco 889021
Паттерн зигзаг
Обои для стен текстура
Светлый фон для баннера
Обои рисунок
Обсидиан фон майнкрафт
Геометрический паттерн бесшовный
Erismann Millennium 3642-7
Повторяющийся фон
Серо синий фон
Стимпанк фон
Бирюзовый фон
Цветочный узор
Серебристо голубой фон
Мелкий узор текстура
Светлый фон для сайта
Обои Eco ARKIV Engblad 5382
Гексагональная сетка для ДНД
Стеклообои Holtex рогожка средняя (1х25 м)
Геометрические паттерны
Фон треугольники
Мелкий растительный узор
Паттерн детский
Обои обои Grandeco ur1321
Фон паттерн
Паттерн для сайта
Геометрический фон
Синяя текстура
Шведские обои Borastapeter, коллекция Wonderland by Hanna Werning
PLAYSTATION фон кнопки
Паттерн сетка
Фон соты
Фон Минимализм
Шведские обои Borastapeter, коллекция Wonderland by Hanna Werning
Фон квадратики
Мелкий узор
Шестиугольники Crysis
Фон повторяющийся узор
Паттерн компьютеры
Фон паттерн
Абстракция квадраты
Фон квадраты
Обои Borastapeter Soft feelings
Паттерн для фона сайта
Бесшовный фон деньги
повторяющихся фонов, дизайнов, тем, шаблонов и загружаемых графических элементов на Dribbble
- Посмотреть 👁️👁️👁️
👁️👁️👁️
- Просмотр геошаблонов
Геопаттерны
- Просмотр Превышение
Превышение
- Просмотр абстрактных фонов
Абстрактные фоновые узоры
- Посмотреть шаблон точек
Точечный рисунок
- Посмотреть исследование формы 006
Исследование формы 006
- Посмотреть 25 градиентных зернистых текстур
25 Градиентные зернистые текстуры
- Плоский дизайн овец бесшовный фон фоновой иллюстрации
Плоский дизайн овец, бесшовный фон, иллюстрация
- Взгляните на дзен повторяющихся паттернов
Дзен повторяющихся узоров
- View Ripples: анимированные фоны
Рябь: анимированные фоны
- Посмотреть фоновые изображения тематических групп специальных возможностей
Специальные возможности Тематические фоны команд
- Просмотреть фоны с градиентом цвета Etrales
Фоны с градиентом цвета Etrales
- View Dreams — анимированные 3D-пейзажи II
Сны — Анимированные 3D Пейзажи II
- Посмотреть минималистичные фоны
Минималистичные фоны
- Просмотр Bounce in Space 2 — фоны
Отскок в космосе 2 — фоны
Приглашение Джейка на бар-мицву | Фоны
- Посмотреть Абстрактные геометрические фоны
Абстрактные геометрические фоны
- Просмотр таблицы солнечных часов Weltevree
Стол для солнечных часов Weltevree
Сине-красный природный узор на белом
- View Harmony — элегантные градиентные фоны
Гармония — элегантные градиентные фоны
- Просмотр Bounce in Space 3 — фоны
Bounce in Space 3 — фоны
- Посмотреть Кошки Кошки Кошки!
Кошки Кошки Кошки!
- Посмотреть фоны для пасьянса
Фоны для пасьянса
- Посмотреть Дизайн логотипа и фирменного фона для крипто-гоночной игры
Дизайн логотипа и фирменных фонов для криптогоночной игры
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Загрузка еще…
Создание бесшовных фоновых узоров для Интернета — SitePoint
Узорчатые фоны стали очень популярны в современном веб-дизайне.
Благодаря расширенной поддержке браузеров все больше и больше дизайнеров интегрируют мозаичные текстуры и повторяющиеся узоры в свои макеты. Вы можете найти множество различных фоновых узоров в Интернете, но вы также можете создать свой собственный с помощью Photoshop.
Размер файла является важным фактором при создании пользовательского фонового изображения. Вы хотите, чтобы ваш файл фонового изображения был довольно маленьким, чтобы он загружался быстро. Существует несколько различных форматов файлов, которые вы можете использовать, но все они имеют довольно схожие размеры файлов. Лучшие фоновые узоры обеспечивают тщательный баланс между тем, чтобы быть достаточно маленькими (с точки зрения размера файла) для быстрой загрузки и достаточно большими (с точки зрения размеров), чтобы бесконечно повторяться в макете без каких-либо сбоев.
Шаг 1. Настройте документ
Откройте Photoshop и создайте новый документ. Стремясь сохранить небольшой размер файла, я создал квадратный холст размером 20 на 20 пикселей.
Квадратная форма холста чрезвычайно важна, потому что мы будем полагаться на симметрию, чтобы создать плавное вертикальное и горизонтальное повторение в одном изображении. Вы можете создать узор, используя различные формы, но убедитесь, что само изображение представляет собой квадрат.
Шаг 2: Показать линейки
Нажмите команду или Ctrl + «R», чтобы показать линейки, если они еще не видны. Отображение ваших линеек позволит вам применить направляющие на следующем шаге.
Шаг 3: Используйте направляющие, чтобы все было ровно
Щелкните и перетащите вертикальную и горизонтальную линейки к центру, чтобы применить направляющие к документу. Пересечение двух направляющих должно определять вашу центральную точку.
Шаг 4. Выберите инструмент для создания узора
Вы можете создавать свои собственные фигуры, используя инструмент выделения, перо или инструмент пользовательской формы.
Я выбрал инструмент нестандартной формы, с помощью которого можно выбирать из обычных фигур, таких как прямоугольники, эллипсы или многоугольники, или можно использовать нестандартные формы из параметра на верхней панели инструментов.
Шаг 5. Выберите набор фигур
Я выбрал инструмент пользовательской формы и щелкнул значок пользовательской формы со стрелкой раскрывающегося списка. В этом меню должен быть список форм по умолчанию, но если вы использовали его в предыдущем проекте, он может отображаться во всплывающем окне среди вариантов по умолчанию.
Шаг 6. Выберите форму
Нажмите всплывающее меню и выберите украшения. Я выбрал пять ромбов, образующих крест.
Шаг 7. Рисование фигуры
Щелкните и перетащите фигуру на холст, убедившись, что она находится точно в центре. Идея состоит в том, чтобы создать симметричный дизайн с равномерным интервалом между всеми четырьмя границами.
Шаг 8: Раскрашивание шаблона
Если вы выбрали инструмент формы, вы можете щелкнуть значок ползунка на слое формы и легко изменить цвет вашего изображения. Если вместо этого вы решили нарисовать фигуру самостоятельно с помощью инструмента «Перо», вам придется раскрасить ее, используя панель контуров и щелкнув значок внизу под названием «Заполнить контур цветом переднего плана».
Шаг 9. Выбор правильного фона для узора
Если вы создаете прозрачный узор, обязательно удалите фоновый слой или щелкните значок глаза, чтобы скрыть фоновый слой. Если вы собираетесь использовать непрозрачный файл .jpg для формирования узора, не забудьте добавить желаемый цвет к фону.
Шаг 10. Сохраните шаблон
Выберите «Файл» > «Сохранить для Интернета и устройств».
Шаг 11. Выберите формат файла, который вам подходит
В зависимости от ваших предпочтений, вы можете сохранять файлы в трех различных форматах.
Вы можете сохранить его как плоский файл .jpg с низким разрешением. Это не позволит вам иметь прозрачность, поэтому вам придется выбрать желаемый цвет фона и применить его к шаблону, прежде чем сохранять файл изображения. В противном случае вы получите белый фон в качестве фона вашего узора. Файл .jpg будет иметь очень маленький размер, что обеспечит быструю загрузку страниц.
Вы также можете сохранить изображение в формате .gif. С .gif вы получаете возможность иметь прозрачный фон, но если ваш шаблон сложный, вы можете столкнуться с потерей качества изображения. Вы можете увидеть неровные края или небольшую пикселизацию. Сохранение фона в виде файла .gif также даст вам небольшой размер файла, и это жизнеспособный вариант, когда вы не создаете сложные узоры с разными цветами.
Часто лучше всего сохранить файл в формате .png, который поддерживает прозрачность так же, как и .gif, но выглядит более четким и четким со сложными узорами, цветами и цветовыми градациями.
Выбор типа файла зависит от желаемого конечного результата. Если вам не нужна прозрачность, и вам нужен простой шаблон, то файл .jpg будет работать отлично. Если вы хотите быстро и легко изменить цвет фона с помощью CSS, выберите .gif или .png.
В этом примере я сохранил файл как прозрачный .png; Я хотел четкий повторяющийся узор с возможностью изменения цвета фона с помощью CSS.
Шаг 12. Реализация шаблона с помощью CSS
С помощью CSS я задал цвет фона #FFC (оттенок желтого), который хорошо сочетается с синим цветом, который мы выбрали ранее. Я также добавил шаблон, который я создал, и настроил его на повторение по осям X и Y. Вы делаете это, не указывая ось X или Y, заставляя шаблон повторяться по обеим осям по умолчанию.
корпус {
фон: URL-адрес #FFC (images/bluedia.png) повтор;
} В результате все ромбы выстроились в линию и образуют сетку с выбранным оттенком желтого в качестве фона.
Шаг 13: Вместо этого создайте повторяющийся узор границы
С небольшим изменением в коде CSS вы можете взять изображение, которое вы выбрали, и вместо этого сделать его рамкой или полосой.
Следует иметь в виду, что более толстые рамки потребуют более высоких или широких изображений, в зависимости от того, будет ли граница горизонтальной или вертикальной.
Шаг 14: Создание горизонтального узора
Измените повторение графического узора с «repeat» на «repeat-x». Вы можете указать верх, центр или низ, чтобы указать, где он будет повторяться.
Примечание: чтобы сделать нижнюю границу, замените «верх» на «низ» в приведенном ниже коде.
корпус {
фон: #FFC url(images/bluedia.png) repeat-x top; Шаг 15: Создание узора из горизонтальных полос
Если изменить «верх» на «центр», результатом будет горизонтальная полоса по центру макета.
корпус {
background: #FFC url(images/bluedia.png) Repeat-x center;
} Шаг 16: Создание вертикального шаблона
Для «repeat-y» вы можете указать слева, по центру или справа, и вы получите разные результаты.
Шаг 17: Создайте шаблон вертикальной границы
Примечание: чтобы сделать правую границу, замените «лево» на «право» в приведенном ниже коде.
корпус {
фон: URL-адрес #FFC(images/bluedia.png) повтор-y слева;
}
Шаг 18: Создайте узор из вертикальных полос
Изменение «слева» на «по центру» приведет к появлению вертикальной полосы в середине макета.
корпус {
фон: #FFC url(images/bluedia.png) повторяющийся центр; Заключение В Photoshop можно создать узор любой формы. Вы можете использовать диагональные линии, круги, простую текстуру шума, полосы, орнаменты или буквально все, что вы можете создать в Photoshop. Эффективное использование мозаичных и текстурированных паттернов может эстетически улучшить ваш дизайн, не снижая скорости вашего сайта и не влияя на функциональные аспекты вашего веб-сайта.