С тех пор как я начала делать бесшовные фоны (а это началось совсем недавно), на меня периодически нападают самые разные знакомые с просьбами научить их этому искусству. При этом выбрать время, собраться и поучиться вживую все как-то не удается, а уже имеющиеся учебные статьи в расчет не принимаются. Вот я и решила написать ЭТО. Туториал. Вам судить, насколько адекватно вышло.
Как я делаю бесшовные фоны
Туториал чайника-приключенца, любителя давить на все кнопки подряд
читать дальше, осторожно - трафик, ибо много картинок
Ну, начинаю я обычно с того, что бегаю с фотоаппаратом и снимаю что ни попадя. При этом часто обнаруживаю, что фотографии, не имеющие художественной ценности с точки зрения, скажем, композиции или цвета, часто имеют явное преимущество перед более эстетскими при изготовлении бесшовных фонов. Вот, например, цветы. Отдельно снятые офигенные растения в фоне нередко проигрывают небогатому по игре светотени сплошному ковру трав. Оно и логично: нарушение композиционной гармонии, неизбежно происходящее при «умножении» изображения, ярче заметно именно на контрастных участках, которые чаще встречаются при подчеркнутых отдельных деталях или объектах – фотохудожники их обычно и выделяют светотенью. Но это так, лирическое отступление.
Теперь собственно процесс. Расскажу на примере собственноручно сделанной на даче фотки.
Упомяну еще, что в Фотошопе (обычно это CS2 или CS5) моя рабочая среда, кроме инструментов и их параметров, состоит из следующих вкладок, которые можно включить в меню Окно, поставив галки напротив нужных пунктов: Навигатор, История, Слои – эти три окошка всегда присутствуют у правой границы моего экрана.
Перво-наперво, чтоб не убить саму фотку, делаю ее дубликат: верхнее меню - Изображение/Создать дубликат. И закрываю оригинал (мало ли чо).
Теперь, как указано и во многих других туториалах, делаем дубликат слоя: верхнее меню - Слой/Создать дубликат слоя. И, как обычно, новый получившийся слой (он называется «Задний план (копия)», если мы не задали другого названия) делаем невидимым - нажимаем изображение глаза во вкладке Слои, на строке этого слоя, после чего переходим на задний план.
Собственно, приступаем к главной задаче – убрать швы, которые появляются при «размножении» изображения на фоне. Для этого:
1. Применяем фильтр Сдвиг: верхнее меню - Фильтр/Другие/Сдвиг. В появившемся окошке двигаем ползунки так, чтобы горизонтальный и вертикальный швы на изображении скрещивались примерно в центре картинки. О.К.
2. Теперь мучаем получившиеся стыки любыми инструментами, которые позволяют замаскировать границы или сделать их гармонично переходящими друг в друга, где-то на одну треть от краев картинки. Целиком их маскировать смысла нет, т.к. центр, где границы скрещиваются, мы потом закроем новым слоем.
Инструменты для маскировки швов можно использовать лю-бы-е. 
Главное при этом помнить, что на краю изображения все маскирующие эффекты должны сходиться в одной точке – том месте, где начинается шов, и от нее уже расходиться веером. Если скрывающий слой или размазывание будут заходить на край изображения не в одной этой точке, то такие места будут потом видны как новые, неучтенные стыки, которые опять придется маскировать. Бесконечная работа.
Традиционно рекомендуется Размытие из левой вертикальной панельки инструментов (следует просто размыть границу, установив Интенсивность размытия в настройках инструмента от 50 до 100% и двигая «кисточку» поперек шва), но это не единственное решение – тут полный простор для творчества.
Я часто использую на травяных фонах и географических картах такой замечательный инструмент как Палец (он находится там же, где и Размытие, надо только мышкой «потащить» Размытие в сторону, и откроется меню выбора). Палец «тащит» за собой часть изображения, смазывая его. Таким способом очень удобно «продолжать» листья и травинки там, где они обрываются, и закрывать ими границу.
Можно обвести (лучше инструментом Лассо, т.к. ровная обводка Прямоугольной областью слишком заметна и очевидна) часть изображения вокруг границы и применить какой-нибудь странный фильтр, типа того же Размытия (верхнее меню – Фильтр/Размытие… выбираем что нравится) или Растушевки (верхнее меню – Фильтр/Имитация/Растушевка), потом чуть размываем границу выделения после его снятия или доводим Пальцем в особо заметных местах, чтоб граница применения фильтра слилась с остальным изображением – обычно достаточно нескольких штрихов. Ну или, если все лень, выделяем чуть бОльшую область и применяем тот же фильтр, но с меньшей интенсивностью, так, что он плавно переходит в основной фон.
Еще есть способ закрыть стыки инструментом Штамп. Он слева на панели инструментов. Чтобы задать область, с которой он будет копировать, надо навести в нужное место курсор и, нажав на клавиатуре Alt, щелкнуть разок левой кнопкой мышки. Теперь отпустить Alt и можно чирикать штамповой кисточкой, закрывая шов изображением из другого места, например листка или ветки.
Иногда, когда совсем уж не получается прилично замаскировать стык, я просто обвожу кусок из другой части рисунка, копирую его на новый слой и накладываю на шов. Задавая разную прозрачность слоя (вкладка Слои справа, свойство Непрозрачность наверху), где-то подтирая Резинкой (иногда делая ее полупрозрачной), можно так замаскировать границу, что никто и не вспомнит, что она там когда-то была.
Все это я делаю с активным использованием вкладки Навигатор, которая у меня справа: ползунком укрупняю изображение, когда маскирую шов, и уменьшаю, когда хочу проверить общий результат – быстро и удобно.
Ну вот, а теперь можно заняться и вторым нашим слоем.
В принципе, если на заднем плане размыть и спрятать границы целиком – это уже будет готовый бесшовный фон, но он будет скучно «квадратным» - повторяющиеся блоки будут выставлены как в таблице, ровными рядами. Для более естественного и приятного вида лучше иметь повторы изображения, расположенные в шахматном порядке. Для этого и есть наш второй слой. Переходим на этот слой во вкладке Слои и включаем «глаз» обратно.
Я не буду здесь рассматривать ту адскую бездну вариантов, когда можно подставить вторым слоем изображения из совершенно другого файла, сделать несколько слоев, просвечивающих друг сквозь друга, зеркально отраженные слои с кучей экзотических фильтров и прочие радости художника. Это я оставлю самостоятельно исследовать всем желающим. А здесь просто поставим то же самое изображение, чтоб «дубликаты» красиво располагались в шахматном порядке.
На этом слое мы будем работать в режиме Маски – это такой страшно удобный для наших целей режим, когда просто поменяв местами в левой панельке инструментов белый и черный квадратики (основной и фоновый цвета; меняются местами при нажатии на стрелочку рядом) мы можем добиться либо стирания изображения обычной кисточкой (впереди – черный квадратик, основной цвет), либо его восстановления из стертого состояния той же кисточкой (впереди – белый квадратик, фоновый цвет). Чтобы перейти в этот режим надо на вкладке Слои внизу, где строчка значков-инструментов нажать прямоугольный значок с кружочком внутри.
Итак, мы в режиме маски. И опять у нас есть полный простор для творчества.
Главная задача этого этапа – закрыть этим слоем оставшиеся незамаскированными в центре заднего плана границы, но при этом оставить открытыми края того же заднего плана, чтобы сохранить бесшовность картинки. То есть получается, что в центре, в районе швов, изображение должно быть максимально непрозрачным, а к краям истаивать и сходить на нет, как облако, и чтобы переход от заднего плана к верхнему слою был плавным и незаметным. Какой формы будет это «облако» зависит от имеющегося изображения и нашей прихоти.
Если у нас четкая фигура с конкретным контуром, то придется заморочиться и, задавая мягкой кисточке разную степень прозрачности, обвести нужный контур, делая вокруг него полосу все более и более прозрачного изображения: сначала задать, скажем, 20% прозрачности кисти, потом - больше. Если стерли лишнее – легко переключить основной цвет и фоновый (поменять местами черный и белый квадратики на левой панельке) и восстановить стертое. Можно также «выгрызть» дырочками в верхнем слое особо вкусные или нужные кусочки нижнего – на то она и маска, чтоб резать в ней дырки. Для проверки плавности и качества размывки отключаем и снова включаем задний слой – опять давим «глаз», только уже заднего слоя.
Если фон не имеет четкой фигуры, как, например, на картинке со сплошным травяным покровом или на старинной карте, то фигура может быть более простой. Обычно советуют размыть ромб с углами близко к точкам, где начинаются швы на нижнем слое. Но с тем же успехом это может быть круг или овал (да хоть амебообразная клякса!), главное, что эта форма позволяет закрыть необработанные швы. Если размывка плавная и красивая – все равно будет хорошо смотреться. Я сперва долго мучалась, чтобы сделать такую размывку, пока меня не осенило – Градиент! (Инструмент слева на панели инструментов в одном блоке с Заливкой, его можно вытащить так же, как Палец, если по умолчанию стоит Заливка). Инструмент Градиент в режиме маски дает прекрасную размывку в форме ромба или правильного круга. Главное настроить его как нам нужно.
А нужно нам, чтобы ширина размывки края в прозрачность не была слишком большой, а то изображения получается мало, оно еще не закрывает полностью швы, а прозрачные края широкой размывки уже заходят за границы картинки, чего допускать нельзя, ибо, как я уже говорила, образуются новые швы, которые убирать потом замучаешься. Наружный край размывки не должен пересекаться с краем картинки. Поэтому мы устанавливаем нужную ширину размытия края: наверху, в строке настроек Градиента надо выбрать вариант Градиента, который из основного цвета переходит в прозрачный (стрелка рядом с картинкой, изображающей размытие), потом щелкнуть нужную нам форму (кнопочки-картинки рядом: например, ромб), а потом щелкнуть по картинке самого размытия (не по стрелке рядом с ней!) – появится окно Редактора градиентов. Не вдаваясь в теорию, тут следует просто перетащить правые верхний и нижний ползунки на шкале влево до того, как в окошке Позиция не появится значение 35% (можно и меньше). О.К.
Вот мы и заузили ширину размытия, можем теперь применить этот Градиент.
Тут придется поработать методом тыка. Но у нас же справа есть вкладка История, отменять действие в которой можно бесконечно. Так что от центра картинки проводим Градиентом линию произвольной длины и направленности и смотрим что вышло. Если у нас размывается середина, а края остаются, то надо в настройках градиента (вторая строка после верхнего меню) убрать или поставить галочку в окошке Инверсия. Если все правильно, но не нравится результат – отменяем действие и проводим снова. Главное, чтобы размытие не уезжало на край картинки. Но в случае если таки уехало, а выглядит красиво, можно просто дочистить край кисточкой.
Если выбрать, к примеру, ромб и провести черту строго горизонтально или вертикально примерно по линии шва от центра до ближайшей границы картинки, то одним кликом получится тот эффект, который рекомендуют в одном из туториалов делать вручную, долго и тщательно размывая края верхнего слоя.
Конечно, такой способ применим не везде, но для скорости на однородных фонах он весьма хорош.
Собственно после этого, если результат нас устраивает, можно склеить все слои: верхнее меню – Слой/Выполнить сведение.
И после этого озадачиться композицией и размером полученного фона.
Что я имею в виду под композицией? Это когда ставишь красивейший фон непосредственно на свой дайрик и вдруг оказывается, что на свободную от текста полосу фона попадает самый беспонтовый его кусочек, а все самое вкусное закрыто текстом и меню. Ужас. Вот тут нам снова пригодится фильтр Сдвиг (верхнее меню - Фильтр/Другие/Сдвиг): надо подвигать ползунки так, чтобы композиционный центр изображения находился именно с краю (но не обрезался) так, как приятно смотрелся бы под дайриковским текстом с гармоничным отступом от левого (или правого) края экрана. При этом, кстати, становятся хорошо видны неучтенные швы, которые прямо тут можно подправить тем же Пальцем, например.
И последний штрих – надо подогнать размер. Ну, размер я обычно подгоняю опять-таки методом тыка, на глазок. Для Дайриков открытая полоса (типо «бордюр») возле текста имеет ширину около 8,5 см (я мерила линейкой экран монитора, да!). В Фотошопе есть удобные линеечки, по которым можно проверить, правильно ли выбран размер. Если они не включены, надо пойти в верхнее меню – кнопка Просмотр и поставить галку возле пункта Линейки. Вроде везде по умолчанию они в сантиметрах. Если потянуть мышкой вертикальную линейку, из нее можно «вытащить» ярко-зеленую Направляющую, ее я ставлю на 8,5 см от края картинки. Теперь понятно, что именно будет видно под текстом Дайриков при установке фона. Прикидываю, во сколько раз можно уменьшить его, чтоб в эти 8,5 см поместилось все нужное и иду в верхнее меню – Изображение/Размер изображения. Обычно в верхнем блоке размеров я меняю пиксели на проценты и выставляю нужный размер в процентах, но это уж дело привычки, кому как нравится. Не получилось с первого раза – отменяю действие и повторяю процесс с уточненными данными. Важно не забыть, что после изменения размера изображения Направляющая тоже смещается, ее надо заново поставить на 8,5 см, только тогда будет понятен результат изменения масштаба (для тех, кто забыл: Направляющую двигаем инструментом Перемещение с левой панели 
).
Последние действия – это проверка результата и сохранение.
Чтобы проверить, что у меня вышло, я совершаю следующую последовательность действий:
1. Верхнее меню – Выделение/Все
2. Верхнее меню – Редактирование/Скопировать
3. Верхнее меню – Редактирование/Определить узор
4. Верхнее меню – Файл/Новый
5. В новом файле: верхнее меню – Изображение/Размер изображения – ставлю 200%
6. Верхнее меню – Редактирование/Выполнить заливку – в верхнем блоке параметров «Содержимое» ставлю Использовать: Узор. Активируется окошко с выбором узоров, наш новый узор обычно стоит последним. Выбираю его и жму О.К.
7. Залитое узором пространство в Навигаторе довожу до размера 100% и вытаскиваю Направляющую, которую ставлю на 8,5 см от края. Теперь видно, что будет под текстом в дайрике, в натуральную величину. Заодно проверяю наличие пропущенных швов и разных дефектов.
После чего возвращаюсь в окно фона и сохраняю файл (или дорабатываю и сохраняю, если есть дефекты). Дабы получить нужный вес файла для бесплатного дневника делаю следующее:
1. Верхнее меню – Файл/Сохранить для Web
2. В левом нижнем углу, сразу под картинкой, смотрю ее вес (вторая строчка)
3. Нажимая на стрелку параметра Quality, открываю ползунок, которым регулирую вес файла так, чтобы он не превышал 70 кб (тока надо «отпустить» ползунок, чтоб комп посчитал вес 
, и только потом двигать снова)
4. Проверяю, чтоб галки лишние не стояли нигде кроме пункта Optimized, жму Save, комп что-то спрашивает про имена – жму О.К., закрываю полученный фон, на вопрос «сохранить?» отвечаю НЕТ. И иду любоваться на результат. Фсё.
В качестве дополнительных трофеев нам остается залитый новым узором файл, который можно сохранить для красоты, а можно и не сохранять, потому что по весу он в Дайрики обычно все равно не подходит. А также сам узор в каталоге узоров Фотошопа, которым всегда можно залить пустой документ любого размера, если захочется полюбоваться или выбрать вариант (ничто ведь не мешает опять залить новый документ и уменьшить масштаб так, чтобы, к примеру, на бордюр помещался не один цветочег, а два). Вот и все.
Сей, прости Господи, эпический труд царственным жестом разрешаю цитировать и постить, если оно кому-то нужно. Также прошу прощения у тех несчастных, кто уже хорошо знаком с Фотошопом, – думаю, я тут уж чересчур примитивно излагаю некоторые вещи, и это тяжело читать, но я вспомнила себя, когда только осваивала эту программу, содрогнулась и решила – пусть уж будет поподробнее. Ну и если какие-то замечания или дополнения появятся – делитесь, с удовольствием пообщаюсь на эту тему.
Тонны замечательных фонов на все вкусы, а также туториалы, по которым я сама училась делать бесшовники лежат тут: fonsru.diary.ru/
@темы:
туториал,
бесшовные фоны
-
-
14.12.2011 в 21:31www.photoshop-master.ru/ Только для того чтобы скачивать оттуда что-нибудь, нужна регистрация. Но это ерунда по сравнению с тем, что там можно найти! *____*
И да, можно тут прописаться? Здесь уютно. Очень.)))
-
-
14.12.2011 в 21:36Я тогда зарегестрируюсь и буду просвещаться
-
-
14.12.2011 в 21:53-
-
14.12.2011 в 22:01Спасибище за ссылку, будем региться и просвещаться.
Добро пожаловать, всегда рада.
Anarkia, а в чем конкретно проблема с аватарками? Может я просто посоветую чего-нибудь? А то писать инструкции долго. ))
-
-
14.12.2011 в 22:08Да и все остальное тоже - я даже фон менять еще не умею...))
-
-
14.12.2011 в 22:48Я сейчас попробовала сделать так:
В Фотошопе можно задать размер выделения заранее - в настройках инструмента вверху, под основным меню. Для этого нужно поменять Стиль выделения с Нормального на Заданный размер, ну и задать соответственно размер 120х120 пикселей. После этого инструмент Выделение будет одним щелчком мышки выделять область 120х120. Это очень удобно, если надо посмотреть что влезет в этот размер. Можно выделить, а потом двигать выделение по картинке, ища нужную композицию "в кадре". А еще сразу становится видно насколько надо уменьшить картинку, чтобы выделенное влезло в заданный размер.
Уменьшить можно стандартно, как в туториале выше:
верхнее меню – Изображение/Размер изображения. Обычно в верхнем блоке размеров я меняю пиксели на проценты и выставляю нужный размер в процентах, но это уж дело привычки, кому как нравится. Не получилось с первого раза – отменяю действие и повторяю процесс с уточненными данными.
Потом копирую то, что поместилось в нужный мне квадрат, создаю новый файл (Верхнее меню – Файл/Новый), вклеиваю туда то, что скопировала (Редактирование/Вклеить), склеиваю слои (Слой/Выполнить сведение). Закрываю картинку с которой брала изображение не сохраняя изменения.
Ну а потом сохраняю саму аватарку - новый файл, регулируя вес, если есть необходимость:
1. Верхнее меню – Файл/Сохранить для Web
2. В левом нижнем углу, сразу под картинкой, смотрю ее вес (вторая строчка)
3. Нажимая на стрелку параметра Quality, открываю ползунок, которым регулирую вес файла так, чтобы он не превышал 70 кб (тока надо «отпустить» ползунок, чтоб комп посчитал вес , и только потом двигать снова)
4. Проверяю, чтоб галки лишние не стояли нигде кроме пункта Optimized, жму Save, комп что-то спрашивает про имена – жму О.К., закрываю полученный фон, на вопрос «сохранить?» отвечаю НЕТ.
Недавно открыла для себя новый формат PNG. Если верить справочникам, то он позволяет сохранять изображения без такой сильной потери качества, как JPG. Так что в Файл/Сохранить для Web я теперь выбираю в окошке, где указан формат, PNG-8. Вес аватарки получается меньше, чем в JPG. Правда, как задавать вес картинке в PNG, я пока не разобралась, ползунок там регулирует что-то другое. )) Но она и так получается приемлемого веса.
-
-
15.12.2011 в 16:12-
-
15.12.2011 в 16:20-
-
30.01.2012 в 18:31Я просто хотела сказать Автору спасибо: благодаря Вашему посту я впервые четко разобралась, что делать с маской слоя и Штампом) Спасибо за внятный рассказ для чайников)
-
-
30.01.2012 в 19:26-
-
26.05.2012 в 11:35-
-
26.05.2012 в 16:48-
-
12.07.2012 в 01:33-
-
12.07.2012 в 07:44-
-
24.03.2014 в 11:43-
-
24.03.2014 в 11:52-
-
24.03.2014 в 12:00-
-
24.03.2014 в 12:24