Повторяющийся фон для Вашего сайта

 

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

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

 

 

результат работы, повторяющийся фон

 

 

Давайте начнем.

 

Предварительные работы над нашем фоном

 

Для начала нам необходимо просто нарисовать какой либо фон.

  1. Создаем новый документ 600 на 600 пикселей

 

новый документ

 

  1. Я выбрал два цвета #F1F1F1 и #E4E4E4

 

выбранные цвета

 

  1. Теперь применяем к созданному документу фильтр Clouds. (фильтр -> Render -> Clouds)
  2. После чего несколько раз Difference Clouds. (фильтр -> Render -> Difference Clouds) В общем Вы должны получить приблизительно вот такую картинку:

 

первоначальный фон

 

 Если сейчас, данный фон попробовать размножить, то мы получим вот такую не красивую картинку:

 

вид границ стыковки фона

 

Как видите границы стыковки изображений очень четко видны, нам необходимо избавится от них!

 

Нарезаем изображение

 

  1. Давайте первым делом создадим копию нашего фона на новом слое, а сам фон зальем белым цветом

 

делаем копию фона

 

  1.  Теперь создадим, в левом нижнем углу, выделение 450 на 450 пикселей

 

создаем выделение

 

  1. Жмем Shift + Ctrl + J, таким образом мы вырежем из слоя с фоном выделенную область

 

новый слой с выделенной областью

 

  1. Теперь у слоя, на котором остались верхняя и правая граница, удаляем правый верхний угол

 

удаляем правый верхний угол

 

  1. Теперь выделяем правую границу и жмем Shift + Ctrl + J, для того чтобы верхняя и правая граница были на отдельных слоях.

 

вырезаем правую границу

 

Теперь у нас имеется четыре слоя:

  • Белый фон
  • Верхняя граница
  • Правая граница
  • Квадрат размером 450 на 450 пикселей

 

слои с нарезанными изображениями

 

Последнее что нам осталось сделать в данном пункте это поменять слои местами. Необходимо чтобы область размером 450 на 450 пикселей была ниже чем правая и верхняя граница. Слои должны быть вот в таком порядке:

 

правильный порядок слоев

 

Убираем границы у фона. Создаем повторяющийся фон

 

Для чего нам необходимо было нарезать фон на три части? Если верхнюю границу сдвинуть в самый низ, а правую влево, и чуть чуть с ними (с границами) по колдовать, то мы получим именно то, что создаем в данном уроке!! =)

  1. Давайте сдвинем границы и получим следующий результат:

 

двигаем границы

 

  1. Теперь нам необходимо у сдвинутой правой границы удалить один из углов. Смотрите скрин ниже

 

удаляем один из углов правой границы

 

Удалять необходимо именно под таким углом. Нам очень Важно что бы правая часть сдвинутой правой границы была не тронута

 

нельзя трогать вот эту сторону

 

  1. Теперь по колдуем ластиком, для того чтобы подогнать рисунок (при этом правую часть сдвинутой правой границы стирать нельзя)

 

подгон рисунка

 

  1. Теперь необходимо слить сдвинутую правую границу и сдвинутую верхнюю границу.

 

сливаем границы

 

  1. Далее нам необходимо удалить верхний и правый угол у наших, уже слитых, границ. Внимание на скрин

 

Удаляем углы у слитых границ

 

  1. Теперь нам необходимо (опять) подогнать рисунок с помощью ластика. Вот как выглядит изображение у меня:

 

подогнанное изображение

 

Вот вид обработанной границы. Думаю данный вид пригодится Вам для того чтобы понять как именно подтирать ластиком.

 

вид границы

 

Обратите внимание, что затирать можно лишь внутреннею сторону. Внешнюю трогать нельзя!

 

внешнюю сторону границы трогать нельзя

 

  1. Ну что же, осталось слить изображение

 

сливаем изображение

 

Заключение

 

Теперь если замостить данным фоновым изображением страницу сайта, то Вы не увидите границ, и очень сложно будет понять где именно изображение начинается, а где заканчивается =)

 

результат размножения изображения

 

Надеюсь данный урок Вам покажется полезным =) Если у Вас возникли какие либо вопросы, то пользуйтесь формой ниже =)

Если данный блог Вам показался интересным, то подпишитесь на RSS ленту блога через ридер, или же по почте.

Всего Вам наилучшего! На сегодня у меня все!

__________

P.S.: Я Вам ни раз рассказывал о замечательной РПГ которая изменила всю мою жизнь. Так вот, она вышла в далеком 2002-ом году. За ~9 лет компания Bethesda Softworks успела выпустить еще две части древних свитков. Последняя часть (Скайрим) вышла в ноябре 2011 года. Если Вы еще не играли в нее, и не знаете стоит ли, то могу посоветовать Вам посетить раздел скайрим на сайте arbse.net. Почитайте изложенную на данном ресурсе информацию, она поможет Вам определиться =)

 

Возможно Вам будут интересны следующие заметки

Комментарии (3)

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
Константин, 24 Июня 2012 г. 17:23 пишет:
Гость
Алексей, метод действительно интересный, но только в том случае, если речь идёт о чём-то вроде облаков. Вообще я в это случае просто разбиваю на 4ри одинаковых фрагмента, переставляю так, чтобы края стали при повторе подходить друг к другу, а потом шаманю над соединением несовместимых краёв. Самое хреновое, что зачастую фон получается заметно дублирующим. Тут приходится попотеть чтобы добиться нормального результата.

P.S. Алексей, рекомендую попробовать в элементах формы комментариев использовать атрибут placeholder (текст по умолчанию), а то неудобно постоянно стирать то, что написано. Удачи и сорь за оффтоп.
Rio-Shaman, 24 Июня 2012 г. 18:00 пишет:
Автор
Я применял данный подход почти к каждому фону, что делал. Разница пожалуй в том, что иногда не ластиком орудуешь (для подгонки узора изображения) а инструментом выделения (многоугольным лассо например)

P.S. У меня же к форме скрипт привязан, удаляет текст при щечке мыши на поле ввода. Так что стирать тут ничего не надо, само стирается.
Ответ для пользователя: Константин
Вася, 23 Ноября 2012 г. 11:55 пишет:
Гость
можно использовть flaming pear tessellation, делает все то же самое, только автоматически ;]