Как замостить фон в фотошопе

October 01, 2014

Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.

Чтобы было яснее, рассмотрим пример psd-макета страницы:

Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?

До недавнего времени я бы сделал так. Попытался визуально отыскать повторяющиеся фрагменты в фоне, одном и втором.

Если бы удалось обнаружить таковой фрагмент, то вырезал бы его с помощью инструмента “Crop”. Если бы фрагмент не обнаружил, то просто бы вырезал кусок фона размером побольше (что называется “на глазок”), опять-таки, с помощью инструмента “Crop”.

Немного позже я узнал, что существует три подхода к вырезанию фоновой картинки для будущего HTML-шаблона. Первые два способа простые и неточные. Третий способ — более медленный, но точный.

Ниже последовательно рассмотрим все три способа, начиная с самого простого и заканчивая самым трудоемким.

Описание выполняемых действий приведено в локализованной версии Photoshop.

Простое вырезание фона

Фон страницы на psd-макете представляет из себя растровое изображение, у которого имеется всего один слой. И при этом визуально не получается выделить повторяющиеся фрагменты в этом фоне.

В этом случае нужно поступить только одним способом.

Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E .

Инструментом “Crop” с зажатой клавишей Shift (чтобы получился квадрат) выделяем на фоне psd-макета квадрат побольше, размера или . Размер должен быть побольше именно для того, чтобы гарантировать бесшовность такого рисунка в фоне.

Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.

Вырезание фрагмента фона

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

Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.

Pattern в Photoshop

Третий способ основан на понятии в Photoshop. Этот способ самый точный и надежный. В нем мы как-бы “опираемся” на силы самого Photoshop, который должен “помочь” нам обнаружить в нарисованном дизайнером psd-макете.

Я не дизайнер (и никогда им не буду), поэтому могу сказать по поводу того, что такое в двух словах.

Это образец узора какого-то определенного размера (который может быть любым) — , или же . Этот образец узора может быть любого рисунка (завитушки, полосочки, цветочки и т. д.).

Вся задача pattern’а — служить образчиком, которым дизайнер выполняет заливку слоя. То есть, ситуация получается в точности такая, как у верстальщика. Имеется маленький кусочек рисунка, которым дизайнер “мостит” весь слой.

Задача верстальщика при нарезке psd-макета — выделить этот из psd-макета в отдельное изображение. Чтобы увидеть, что в данном слое используется , достаточно открыть палитру “Слои” и активировать нужный слой. В качестве примененных к слою эффектов должно стоять “Наложение узора”:

Все! Наша задача наполовину выполнена — мы знаем, что для этого слоя дизайнер применил в качестве заливки каким-то там рисунком.

Осталось только найти этот , что является задачей чисто технической. И нам в этом поможет сам Photoshop.

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

То есть, Photoshop показал, какой использовал дизайнер в анализируемом нами слое. Нам осталось “вычленить” этот и в этом нам снова поможет Photoshop:

В этом же окне нужно навести курсор мыши на окошко с ‘ом (окно “Узор”) и немного подождать, пока рядом с курсором мыши не появиться всплывающий tooltip, в котором будут показаны размеры данного ‘а.

Запоминаем (или записываем на листике бумаги) эти размеры — они нам понадобятся в дальнейшем.

Щелчком мыши на маленькой стрелочке справа от окна с образцом ‘а открываем палитру паттернов ( ):

В этой палитре нам необходимо добавить выбранный нами в свою коллекцию паттернов. Это нужно для того, чтобы потом использовать этот в своих “коварных” целях. Для этой цели кликаем на круглой кнопочке со стрелкой — далее можно разобраться, что и как добавлять.

Закрываем окно “Стиль слоя” и создаем новый документ Ctrl+N с размерами, как у нашего ‘а:

Здесь самое главное — правильно указать размеры будущего документа (как правило, все ‘ы имеют форму квадрата), все остальное для нас неважно.

Создаем новый документ. Затем в меню Photoshop переходим по пути “Слои” — “Новый слой-заливка” — “Узор”. И в открывшемся окошке “Новый слой” просто кликаем по кнопке ОК , все остальное для нас опять неважно:

Откроется еще одно окошко, в котором выбираем нужный нам :

Как результат получаем новый документ с заливкой слоя выбранным нами ‘ом. Это хорошо заметно чисто визуально, в основном окне. В палитре “Слои” также видно, что к слою была применена заливка узором:

Картинка для фоновой заливки готова! Осталось только экспортировать ее для Web и применить на странице силами CSS.

Например, таким образом:

Все — задача выполнена!

Заключение

Вот мы и познакомились с тремя способами вырезания фонового изображения из psd-макета.

Angular — именованные outlets

Для меня немного запутанная картина с именованными областями отображения и главное — с правильной настройкой. Нужно немного прояснить для. … Continue reading

Теоретически фон для сайта или блога можно сделать из абсолютно любой картинки. Однако фон от картинки отличает способность первого ровно замостить предоставленное пространство так, чтобы не было заметно стыков. Кстати, особенно это важно для тех, кто пользуется 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)! Правда, у меня красивей?

Зачастую фотографии, которым придано художественное оформление выглядят намного красивее и необычнее. Любая замена фона – это, по сути, разделение фотографии на две или больше частей, каждая из которых затем размещается в отдельном слое. После этого самая важная часть фотографии остается неизменной, а второстепенные детали и задний план ретушируются или вообще заменяются.

Как поменять фон в Фотошопе

Рассмотрим инструкцию по замене фона в Фотошопе (версия CS6 и позднее):

Открыть исходную фотографию.
Открыть фотографию для заднего плана.
Добавить фотографии в программу Photoshop. Подобрать примерно одинаковые фотографии по размерам.
Сделать активным основное фото кликнув левой кнопкой мыши (ЛКМ) по вкладке с названием фотографии.
В правом нижнем углу появится загруженная фотография с названием “Фон”.
Используя инструмент «Быстрое выделение» выделить нужный фрагмент.
Для выделения волос и других сложных элементов использовать инструмент «Уточнить край».
По нажатию на данную кнопку отобразятся настройки.
Применив нужные, провести вдоль краев выделяемой фотографии до получения аккуратного результата.
В случае, когда после выделения на фото остаются нежелательные цвета, нужно использовать очистку цветов. Для этого изменением положения ползунка в области «Вывод» под названием «Очистить цвета». Чтобы использовать выделение в области “Вывод” нужно перейти в режим «Новый слой со слоем-маской». Нажимаем «Ок».
В палитре отобразится новый слой-маска.
Приступим к замене. Перейти к фотографии “Фон”.
Зажав ЛКМ перетянуть эту вкладку на вкладку с основной фотографией. Удерживая ЛКМ опустить курсор на появившееся изображение. Курсор изменит свой внешний вид на стрелку с добавлением выделения. Отпустить кнопку мыши. Должен получиться такой результат:
Между первой картинкой и вырезанным из нее фрагментом вставится выбранная картинка.
При необходимости изменяем размеры картинки. Сделать активным новый объект и с помощью «Редактирование» — «Свободное трансформирование» или комбинации клавиш Ctrl+T изменить размер.
Вокруг появится рамка трансформирования. Зажать Shift и переместить углы рамки трансформации так, чтобы они совместились с основным.
После того как трансформация закончена нажать на клавишу Enter.
Произвести масштабирование переднего плана, для чего сделать активным слой с выделенным фрагментом.
Нажать Ctrl+T, активировать свободное трансформирование, удерживая Shift изменить размеры. Нажать Enter.
Обрезать оставшиеся части основного изображения с помощью «Кадрирования».
Кликая по точкам кадрирования и перетаскивая их подогнать рамку выделения под размеры картинки. Нажать Enter. Если бы начальные фотографии были одинаковыми по размеру – кадрирование бы не использовалось
После детального рассмотрения можно понять, что яркость на заднем плане и выделенном объекте отличается. Скорректировать яркость позволяет инструмент «Кривые».
На панели свойств «Кривые» нажать на кнопку применения коррекции к нижнему слою, а кривую в области светлых полутонов опустить до получения нужного результата.
Объединить все слои изображения нажав Shift+Ctrl+Alt+E.
Добавить тень для реалистичности. Создать новый слой.
Применить к нему режим наложения «Мягкий свет», кликнуть «Выполнить заливку нейтральным цветом (серым 50%)». Нажать «Ок».
Выбрать Кисть черного цвета.
Установить непрозрачность 10-15%, режим кисти «Нормальный» и жесткость 0%. Размер – на выбор.

В итоге получаем качественную замену фона в Photoshop.

Действия с фоном

Растровый редактор Adobe Photoshop дает возможность с легкостью работать со слоями. Наличие нужных инструментов позволяет обрабатывать изображения веб-дизайнерам и профессиональным фотографам. Используя функции фоторедактора можно легко изменить фон на фотографии, добавить несколько слоев для цветовой коррекции изображения.

Начинающим фоторедакторам и дизайнерам пойдут на пользу описанные способы работы с фоном изображений.

Затемнение

Для затемнения придерживаемся следующей инструкции:

Нужно применить к изображению параметр «Кривые».
Откроется окно настроек. Левой кнопкой мыши кликнуть по кривой и тянуть вниз до тех пор, пока результат не будет соответствовать требованиям.

Далее следует убрать затемнение с модели, для этого нужно:

Выбрать палитру слоев, затем активировать маску «Кривые».
Выбрать кисть: размер 35.
Тип кисти — “Мягкая круглая”, размер — 35 пикселей:
Непрозрачность – 40%.
Установить черный цвет, закрасить маску на модели.

Изменить цвет

Чтобы изменить цвет задней части изображения в Фотошопе необходимо:

Открыть фото с однотонным фоном. В данном случае используется картинка с фруктом.
Выделить объект любым удобным способом.
Кликнув правой кнопкой по выделенной области выбрать пункт “Вырезать на новый слой”. Эта операция позволит оставить нужный объект без изменений.
В меню слоев сделать активным ”Фон”, выбрать пункт “Цвет”.
Изменить цвет, получить результат.

Замостить

Для того чтобы замостить фон, нужно:

Выбрать картинку с узором, открыть его в Photoshop.
Далее, перейти к меню “Редактирование” – “Определить узор”.
В открывшемся окне задать название для узора и нажать “ОК”.
Создать новый холст, указать нужные размеры и применить к нему параметры наложения.
Выбрать инструмент “Заливка”.
В левом верхнем углу рабочей области найти тип заливки, выбрать параметр “Узор”.
Выбрать нужный узор.
Залить его на холст.

Также можно ознакомиться с видео:

Увеличить фон

Есть два варианта увеличения заднего плана.

Монотонный фон

Для увеличения однородного фона следует:

Выбрать изображение, которое необходимо увеличить.
Открыть его в Фотошопе.
Перейти в меню “Изображение” – “Размер холста”, или нажать комбинацию клавиш CTRL+ALT+C.
В открывшемся окне указать тип измерения “Пиксели”.
Указать нужный размер холста, нажать кнопку “ОК”.
Выделить область любым удобным способом.
Провести инверсию выделенной области.
Активировать инструмент “Пипетка”.
С ее помощью выбрать цвет, которым будет залита задняя часть изображения.
Активировать инструмент “Заливка”.
Кликнуть по выделенной “белой” области.
Если остались неаккуратные границы – “переходы”, убрать их с помощью кисти.
Результат:

Сложный фон

Для работы со сложным фоном нужно:

Открыть изображение в Фотошопе.
Перейти к меню “Изображение” – “Размер холста”.
Увеличить размеры холста.
Выделить области из трёх частей фотографии и скопировать их на отдельный слой:
левая сторона;
переместить скопированный фрагмент левее, заполнив пустое пространство;
правая сторона;
в палитре следует выделить все 3 слоя, затем кликнуть правой кнопкой мыши по ним и выбрать “Объединить слои”;
такие же манипуляции следует проделать с нижней и верхней частями. В результате должно получиться нечто похожее:
Не стоит обращать внимание на то, что есть несовпадения в тонах и в расположении объектов, они будут скорректированы в ходе работы.
Используя инструменты “Штамп” и “Кисть” добиться нужного результата. Работа очень кропотливая.
Результат: