14:55 Создание бесшовного фона для сайта в Photoshop | |
Создание бесшовного фона для сайта в Photoshop
Наверное, вам всегда было интересно, каким же образом веб-дизайнерам удается создавать такие замысловатые текстуры для фона веб-страниц, когда маленькая картинка заполняет фон и стыки при этом абсолютно не видны? Подобный фон называется бесшовным. Добиться такого результата намного проще, чем вы думаете. Вы можете пойти двумя путями. Простой путь — это посещение специализированного сайта с самыми разнообразными текстурами для фонов. Сложный — попробовать добиться эффекта бесшовного фона самостоятельно. Все, что для этого нужно — прочесть данный урок Photoshop . Необходимо сразу отметить важный момент. Теоретически, для создания бесшовного фона может подойти любая картинка, однако органично ли она впишется в дизайн — это вопрос. Вы должны понимать, что чем больше мелких деталей содержит картинка, тем сложнее ее «подогнать» (цветы, галька, облака и т.д.). И, наоборот, работать с изображениями с четкой геометрической структурой намного легче (кирпичная кладка, деревянный забор, книжные полки и т.д.). Мы в нашем эксперименте не будем использовать фотографии из сети, а сделаем все «с нуля», используя Photoshop. Так вам будет проще уяснить принцип и, к тому же, результат работы будет на 100 % оригинальным. Итак, рисуем дизайн сайта сами. Шаг 1: Рабочий слой Независимо от того, насколько искусно обработано исходное изображение, чем оно меньше, тем визуально заметнее, что фон состоит из многократно повторяющихся элементов. Мы возьмем достаточно большое изображение. Конечный результат мы сохраним в формате JPG, то есть наша картинка будет легкой и на скорость загрузки страницы существенно не повлияет.
Создайте новый документ (500 на 500 пикселей, разрешением 72 пикс/дюйм, RGB). Залейте этот слой относительно темным цветом, используя инструмент «Заливка». Можете выбрать какой угодно цвет. В данном случае мы используем светлый сине-голубой (#488dc6).
Эффект боке очень популярен в последнее время. Заодно попробуем научиться его имитировать. Фон будет выглядеть более живо, нежели текстура ткани, бумаги или каменной плитки. Создайте новый документ и новый прозрачный слой в нем. В центре слоя жесткой круглой кистью поставьте черную точку.
Необходимо добавить немного внешнего свечения, чтобы добиться эффекта боке (Параметры наложения… → Внешнее свечение).
Теперь сохраните созданную вами кисть (Редактирование → Определить кисть…)
Теперь новой кисти необходимо установить дополнительные параметры, чтобы она «разбрасывала» пятна света. Теперь, когда у нас есть подходящая кисть, нарисуем пятна света на нашем рабочем слое. Не слишком усердствуйте, так как чем больше элементов будет на нашем изображении, тем сложнее его будет «подогнать» под эффект повторяющегося узора.
Этот шаг является ключевым. Небольшой фокус с помощью фильтра «Сдвиг» (Фильтр → Другие → Сдвиг), при котором наше изображение оказывается углами в центре. Параметры, которые вы должны указать, будут равняться половине стороны нашего изображения, то есть 225 пикселей по горизонтали и по вертикали.
Шаг 5: Зачистка швов Если бы мы работали с фотографией, то нам бы не оставалось ничего, кроме как «штамповать» элементами изображения вдоль швов, чтобы их скрыть. Поскольку мы используем изображение с монолитным цветом, то нам всего лишь нужно пройтись кистью. Ничего, если в процессе нам придется избавиться от каких-то долей. Проблемные участки мы завуалируем в следующем шаге.
Шаг 6: Добавление дополнительных пятен В настройках эффектов кисти, которую мы с вами сделали, отключите рассеивание. На изображении, там, где остались незаполненные места, добавьте несколько пятен света одиночным нажатием. Каждое пятно делайте отдельным слоем, чтобы можно было регулировать прозрачность каждого нового пятна. Помните, что залезать за границы изображения категорически не следует.
Сохраните конечный результат в формате JPG. Можно использовать сжатие, чтобы уменьшить размер получившегося файла. Тем самым он не будет влиять на скорость загрузки страницы.
Создание бесшовного фона для сайтаИнтересные записи | |
|
| |
| Всего комментариев: 0 | |