Заливка с учетом содержимого
Заливка с учетом содержимого – это плавное заполнение выбранной части изображения содержимым, сходным со смежными участками фотографии. Для получения наилучших результатов выбранная область должна немного захватывать область, которую требуется воспроизвести.
Выберите часть изображения. Активизируйте инструмент выбора «Лассо» или «Область» .
Выберите «Редактирование» > «Выполнить заливку выделенной области» .
В диалоговом окне «Залить слой» в раскрывающемся списке «Использовать» выберите «С учетом содержимого» .
В случае неудовлетворительного результата выберите «Редактирование» > «Отменить» и примените другую заливку с учетом содержимого.
Как создать бесшовный фон при помощи Photoshop?
Теоретически фон для сайта или блога можно сделать из абсолютно любой картинки. Однако фон от картинки отличает способность первого ровно замостить предоставленное пространство так, чтобы не было заметно стыков. Кстати, особенно это важно для тех, кто пользуется 3DMax и периодически ищет себе текстуры.
Итак, как из любого понравившегося рисунка сделать себе бесшовный фон? Для начала находим необходимое изображение, внимательно его разглядываем и пытаемся оценить его сложность.
Открываем картинку в Photoshop’е (у меня версия CS4). Внимание! Далее я буду давать инструкции на английском и русском языке (для оригинальной и русифицированной версий), однако перевод может не совпадать с тем, что есть у вас — это зависит от версии русификатора! Щелкаем меню Image/Mode (Изображение/Режим) и убеждаемся, что у нас стоит галочка напротив RGB color (RGB цвет). Если нет, ставим ее.
Для своих работ я выбрала вот такую картинку (рис. 1, вверху). Как мы видим, она довольно абстрактна и — слава богу! — равномерно освещена. Однако на ней изображены крупные предметы, имеющие очень четкие линии. А как выглядит ваша картинка? Если у нее один край темнее противоположного, то начать нужно с освещения. Освещение можно подкорректировать несколькими способами.
Первый способ. Выбираем Filter/Render/Lights Effects (Фильтр/Освещение/Эффекты освещения) (рис. 2). Дальше настройки индивидуальны и зависят только от вашего рисунка. Покрутите овальчик слева, подергайте ползунки. Совет: если края картинки получаются темными (не хватает света), а при растягивании овала центр получается слишком ярким, увеличьте значение параметра Focus (Фокус). Смотрим на мой пример (рис. 3).
Второй способ. Если светлых (темных) мест совсем немного или же изменение незначительно, то можем воспользоваться кисточками с панели инструментов — Dodge или Burn (Осветление или Затемнение). Совет: кисточка для таких работ должна быть достаточно мягкой: уменьшаем параметр Жесткость (Hardness). Параметр Exposure (Экспозиция) отвечает за интенсивность, им вы можете регулировать для плавных переходов света.
Теперь, когда изображение равномерно освещено, идем Filter/Other/Offset (Фильтр/Другие/Сдвиг) и выбираем опцию Wrap around (Вращать вокруг, в некоторых версиях — Обернуть).
Ставим значения обоих ползунков примерно (точность несущественна) вполовину изображения (например, у меня исходная картинка разрешением 400×300 пикселей, значит, я выставляю значения 200 по горизонтали и 150 по вертикали). Итак, теперь наши швы аккурат посередине (рис. 1, внизу). Наша задача — сделать их как можно менее заметными.
Масштабируем изображение и берем инструмент Clone Stamp (Штамп клонирования). Теперь работа творческая. Зажимаем клавишу ALT и мышкой щелкаем по тому кусочку, который мы хотим клонировать. Отпускаем клавишу и начинаем ретушировать нужную нам область. Обратите внимание, что область штампа (ту, которую вы обозначили с помощью клавиши ALT) будет двигаться за курсором, пока вы не отпустите кнопку мыши.
Кстати, если ваша картинка не содержит никаких геометрических фигур и вообще достаточно однородна, можно попробовать другой способ. Открываем исходное изображение (до сдвига швов) и добавляем в текстуры Edit/Define Pattern (Редактирование/Задать текстуру). Теперь вновь сдвигаем швы (Offset) и берем инструмент Pattern Stamp (Текстурный штамп). Не перепутайте с другим штампом! В верхней панельке выбираем только что сделанную нами текстуру. Теперь молниеобразными движениями закрашиваем наши стыки. Если получается плохо и неаккуратно, то этот способ вам не подходит!
Я свою картинку ретушировала с помощью обыкновенного штампа, по маленьким кусочкам подрисовывая нужные элементы и стирая при помощи обыкновенной кисточки черного цвета ненужные элементы. Посмотрите увеличенный фрагмент изображения до ретуширования и после (рис. 4).
Когда наш бесшовный фон будет готов, добавляем его в текстуры (как я описывала ранее). Создаем новый документ в Photoshop, ставим ему размер намного больше нашей картинки, далее идем Layer/New fill layer/Pattern (Слой/Новое заполнение слоя/Текстура) и выбираем нашу новую текстуру. Смотрим, что получилось!
Если вы попытались сделать так, как я рекомендовала, но у вас что-то не получилось — не расстраивайтесь! Существует плагин для Photoshop под названием Tiler, который можно легко найти и скачать в Сети. С его помощью за один клик мыши можно сделать все, что мы с вами пытались сделать!
Только не надо сейчас произносить все слова, которые пришли вам на ум! Плагин этот не идеален, поэтому подойдет лишь для картинок туманов, облаков, шерсти и прочих подобных вещей. Посмотрите что получится, если применить его к моему рисунку (рис. 5)! Правда, у меня красивей?
Pattern в качестве фонового изображения
Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.
Чтобы было яснее, рассмотрим пример psd-макета страницы:
Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?
До недавнего времени я бы сделал так. Попытался визуально отыскать повторяющиеся фрагменты в фоне, одном и втором.
Если бы удалось обнаружить таковой фрагмент, то вырезал бы его с помощью инструмента “Crop”. Если бы фрагмент не обнаружил, то просто бы вырезал кусок фона размером побольше (что называется “на глазок”), опять-таки, с помощью инструмента “Crop”.
Немного позже я узнал, что существует три подхода к вырезанию фоновой картинки для будущего HTML-шаблона. Первые два способа простые и неточные. Третий способ — более медленный, но точный.
Ниже последовательно рассмотрим все три способа, начиная с самого простого и заканчивая самым трудоемким.
Описание выполняемых действий приведено в локализованной версии Photoshop.
Простое вырезание фона
Фон страницы на psd-макете представляет из себя растровое изображение, у которого имеется всего один слой. И при этом визуально не получается выделить повторяющиеся фрагменты в этом фоне.
В этом случае нужно поступить только одним способом.
Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E .
Инструментом “Crop” с зажатой клавишей Shift (чтобы получился квадрат) выделяем на фоне psd-макета квадрат побольше, размера
50x50px
100x100px
. Размер должен быть побольше именно для того, чтобы гарантировать бесшовность такого рисунка в фоне.
Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.
Вырезание фрагмента фона
Второй способ отличается от первого лишь только тем, что на этот раз удалось обнаружить в рисунке фона макета повторяющиеся фрагменты. При этом фон макета все также является растровым изображением.
Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.
Pattern в Photoshop
Третий способ основан на понятии
pattern
в Photoshop. Этот способ самый точный и надежный. В нем мы как-бы “опираемся” на силы самого Photoshop, который должен “помочь” нам обнаружить
pattern
в нарисованном дизайнером psd-макете.
Я не дизайнер (и никогда им не буду), поэтому могу сказать по поводу того, что такое
pattern
в двух словах.
Это образец узора какого-то определенного размера (который может быть любым) —
Затайливание картинок в Photoshop
Для приема и отправки почты я привык пользоваться популярной программой The Bat!.. «Подождите, подождите, какие овцы, — возразит читатель. — Мы тут, кажется, о Photoshop собираемся беседовать. При чем тут The Bat?! Видно, автор долго сидел за компьютером. » И правда, начинать разговор об обработке графики с упоминания почтовых программ, по меньшей мере, странно. Но, тем не менее, автор на момент написания статьи находился в здравом уме и доброй памяти. И никакой путаницы в словах нет :). Итак, для работы с почтой я привык пользоваться популярной программой The Bat! Одна из ее характерных особенностей — хорошие средства оформления писем. В частности, в «Бате» есть возможность использовать фоновое изображение. Когда текста слишком много или выбранная для фона картинка небольшого размера, она начинает повторяться — обычное дело. В этом случае нередко появляются весьма неприятные швы на стыке изображений. Существуют три выхода из этого положения: можно сделать вид, что так и задумано :), можно подобрать другую картинку или затайлить (от анг. tile — плитка) имеющуюся, т.е. сделать так, чтобы не было видно линий стыка у повторяемых изображений.
Вряд ли у многих пользователей при написании писем возникают подобные трилеммы. Поэтому я расскажу, где еще можно встретиться с необходимостью затайливания картинок. Например, вы желаете «поклеить» обои на рабочий стол, но хотите, чтобы ОС на вашем слабом компьютере загружалась быстро. В этом случае можно нарисовать/выбрать/найти небольшой рисунок, затайлить его, а потом просто замостить на рабочий стол. А вообще, затайливание — это неотъемлемый этап создания текстур. А текстуры, в свою очередь, широко используются при создании компьютерных игр и в веб-дизайне. Существует несколько способов решить перечисленные задачи. Посмотрим, как это сделать проще всего.
Сразу скажу, что десятиминутные поиски программ для тайлинга в интернете не увенчались успехом. Поэтому было решено обуздать природную лень и обратиться за помощью к Photoshop’у.
Итак, для операции нам потребуется картинка-доброволец, Adobe Photoshop, желание, немножко терпения и горсть свободного времени. Версия программы не имеет значения. Открываем редактируемое изображение и приступаем к работе.
Шаг 1. Для начала фильтром Filter -> Other -> Offset («Смещение») сдвинем картинку вверх и вправо, как показано на рисунке. Смещение по вертикали и горизонтали определяется исходя из конкретного случая. У нас обязательным является параметр Wrap Around («Завернуть»).
Шаг 2. Далее будем использовать инструмент Clone Stamp Tool (S). Он позволяет клонировать фрагменты изображения. Удерживая кнопку Alt, берем пробу и, отпустив Alt, начинаем красить. Выбор места для пробы зависит от того, что и где мы собираемся закрашивать. На самом деле разобраться в том, как работает инструмент, совсем не сложно. В нашем случае я использовал значение Opacity («Прозрачность») инструмента не больше 50%, а размер кисти — около 10 px. Для удобства рекомендуется масштабировать картинку. В тех местах, где детализация небольшая, можно увеличить размер кисти и уменьшить значение Opacity. На первый взгляд может показаться, что вместо Clone Stamp Tool можно использовать Blur или Smudge Tool («Размывка» и «Размазка», соответственно). Это не так. Посмотрите, к примеру, на область левее цветка. Этого нельзя добиться простым размытием. Да и качество было бы не то.
Шаг 3. Те места, где поработал Clone Stamp Tool, по сравнению со всей картинкой, стали немного размытыми. Выделим «помутневшие» области инструментом Lasso Tool (L) и с помощью фильтра Sharpen добавим резкости. Кстати, по части выделения объектов «Фотошопу», я считаю, нет равных.
Шаг 4. Вернем наше изображение в исходное положение. Для этого в полях Horizontal и Vertical фильтра Offset поставим минусы перед введенными на первом шаге значениями. Все, готово!
Посмотрите на изображения до и после тайлинга. Даже имея такую сложную картину, с помощью приведенного выше алгоритма можно добиться хороших результатов. На все про все было затрачено минут десять-пятнадцать. Но конечная цель, как видно, оправдала эти затраты.