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

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



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



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


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

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



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



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



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



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

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

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



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



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



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



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



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

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



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



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


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

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



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



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



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



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



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



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



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



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



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



Заключение


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



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

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

Добавлено: 09 Сентября 2013 10:10:45 Добавил: Андрей Ковальчук Нравится 0

Добавить