Уроки Веб и приложения Виктория Лебедева 2 мая 2014

Красивая рамка для сайта в Фотошоп

Сложность урока: Средний

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

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

Финальное изображение

Подготовка фона

Нажмите Ctrl + N , чтобы создать новый документ. Установите ширину 1150px и высоту 860px . Установите цвет переднего плана на # dac9a4 и нажмите Alt + Backspace , чтобы заполнить фоновый слой этим цветом.

Затем создайте новый слой (нажмите Ctl+Shift+Alt+N) и назовите его «Фоновый узор».  Используйте Paint Bucket Tool ( Заливка), чтобы заполнить его вашим любимым узором. Если у вас нет таковых, просто выполните поиск в Google "бесплатные Photoshop узоры", и вы найдете множество замечательных узоров. Заполните вашу картину этим цветом # c8b690 (убедитесь, что ваш слой "Фоновый узор"  активен и нажмите Shift+Alt+Delete).

Вот как ваш фон должен выглядеть:

Рамка фона

Теперь давайте начнем создавать нашу рамку. Используйте Rectangle Tool (Прямоугольная область), чтобы создать новый прямоугольник с размерами 950px на 630px . Назовите этот слой «Рамка фона». Заполните его цветом # 4e432d. Дублируйте слой, нажав Ctrl + J, и залейте его немного более светлым цветом, что-то близкое к #b4a879. Щелкните правой кнопкой мыши по слою и выберите Rasterize Layer (Растрировать слой). Назовите его «Рамка с шумом». Как вы, наверное, поняли из названия слоя, мы собираемся добавить немного шума к ней.

Перейдите в меню Filter-> Noise-> Add Noise (Фильтр ->Шум ->Добавить Шум). Установите эффект шума  8% , распределение по Гауссу и убедитесь, что установлен Монохромный флажок. Нажмите Ok. Установите режим наложения Hard Light (Жесткий свет) и понизьте Opacity (Непрозрачность) до 55%.

Содержимое фона

Далее, нам необходимо создать фоновый слой для нашего будущего содержания.
Используйте Rounded Rectangle Tool (Прямоугольная область с закругленными углами), чтобы создать прямоугольник с размерами 930px на 610px и радиусом от 30px . Заполните его цветом #38301f и переименуйте его в «Содержимое фона». Давайте добавим 1px обводки к этому слою.
Дважды щелкните по слою «Содержимое фона», чтобы открыть  диалоговое окно стилей слоя. Используйте следующие параметры:

Теперь давайте добавим немного светлых областей к рамке фона.

Во-первых, удерживая клавишу Ctrl,  щелкните  по иконке слоя «Рамка с шумом», чтобы загрузить выделение. Затем создайте новый слой (Ctrl + Alt + Shift + N) чуть ниже нашего слоя «Содержимое фона». Затем перейдите в меню Layer-> Layer Mask-> Reveal Selection (Слой ->Слой-маска ->Показать выделенную область), чтобы добавить маску к нашему вновь созданному слою. Назовите слой «Осветление фона» и установите для него режим наложения Overlay (Перекрытие).

Установите цвет переднего плана на # fffbca и, используя мягкую кисть, сделайте несколько случайных светлых мазков (рис. 2.3).

Теперь ваша рамка должна быть похожа на изображение ниже

Детали рамки

Давайте начнем добавлять детали к рамке. Мы начнем с верхней части, но сначала нужно подготовить свои векторные элементы (если у вас нет таковых, просто воспользуйтесь Google, есть множество элементов в Интернете, которые можно скачать бесплатно). Вот какие элементы собираюсь использовать я. Оба элемента из Vecteezy.

Верхняя и нижняя границы

Создайте верхнюю сторону рамки, дублируйте и переместите наши векторные элементы. Для некоторых людей может быть легче сделать эту часть урока в Adobe Illustrator, поэтому, если вы знакомы с этим программным обеспечением вы можете также его использовать.
Взгляните на мою верхнюю границу:

Установите цвет переднего плана на # c6a730, заполните верхнюю сторону элемента этим цветом (Shift + Alt + Delete) и назовите его «Верхняя сторона». Затем дважды щелкните по слою, чтобы открыть  диалоговое окно Layer Style (Стили слоя) и введите следующие параметры:

Затем удерживая Ctrl, щелкните по иконке слоя «Верхняя сторона», чтобы загрузить выделение. Перейдите в меню Select-> Modify-> Contract (Выделение ->Модификация ->Сжать) и введите 2px . Создайте новый слой (Ctrl + Alt + Shift + N) и залейте выделение (Alt + Backspace) цветом # fffaa9. Назовите этот слой «Осветленная верхняя сторона».

Вот как ваша верхняя сторона должна выглядеть к настоящему времени:

Давайте сгруппируем все слои верхней стороны вместе.
Выберите слои «Верхняя граница» и «Осветленная верхняя сторона» и нажмите Ctrl + G. Назовите группу «Верхняя сторона». Затем щелкните правой кнопкой мыши по группе и выберите Duplicate Group (Дублировать группу). Назовите новую группу «Нижняя сторона» и расположите ее в самом низу нашей рамки. Теперь перейдите в меню Edit-> Transform-> Flip Vertical (Редактирование ->Трансформирование ->Отразить по вертикали). Вот и все, мы закончили с верхней и нижней частями рамки. А сейчас давайте перейдем к боковым сторонам.

Левая и правая стороны

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

Если у вас есть готовая сторона, поместите ее слева и залейте ее тем же цветом, что и верхнюю сторону (#c6a730). Назовите слой «Левая сторона». Затем щелкните правой кнопкой мыши по слою «Верхняя сторона»  и выберите Copy Layer Style (Скопировать стиль слоя). Вставьте скопированные стили для слоя «Левая сторона», щелкнув правой кнопкой мыши и выбрав Paste Layer Style (Вставить стиль слоя).

Давайте добавим несколько бликов на левой сторона так же, как мы сделали это с верхней сторона.
Загрузите выделение, зажав клавишу Ctrl, кликните кнопкой мыши по слою, затем перейдите в меню Select-> Modify-> Contract (Выделение -> Модификация -> Сжать) и введите 1px .Создайте новый слой (Ctrl + Shift + Alt + N) и залейте его цветом #fffbd9 . Уменьшите Opacity (Непрозрачность) слоя до 80% и измените режим наложения на Overlay (Перекрытие). Назовите слой «Осветленная левая сторона».

Теперь давайте создадим правую сторону точно так же, как мы создали нижнюю. Дублируйте левую сторону (не забудьте про группы слоев), переместите ее в правую часть рамки и отразите горизонтально (перейти в меню Edit ->Transform -> Flip Horizontal (Редактирование ->Трансформирование ->Отразить по горизонтали)). Измените имя группы на «Правая сторона». Отлично, теперь у нас есть все четыре стороны.

Внутренняя граница

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

Используйте Rounded Rectangle Tool (Прямоугольная область с закругленными углами) в режиме Paths (Контуры) (рис. 3.9), чтобы создать контур с размерами 930px на 610px и радиусом от 30px. Расположите его чуть выше слоя «Содержимое фона».

Создайте новый слой (Ctrl + Alt + Shift + N) и назовите его «Содержание границы». Далее, выберите Brush Tool (Кисть) и перейдите в меню Window-> Brushes (Окно -> Кисти), в открывшемся окне настроек кисти введите следующие настройки кисти и введите следующие параметры.

Установите цвет переднего плана на # 7d6000 . Сделайте активным Pen Tool (Перо)  правой кнопкой мыши щелкните по контуру и выберите Stroke Path (Обвести контур), из выпадающего меню выберите Brush (Кисть)  и нажмите кнопку ОК. Нажмите Delete (Удалить), чтобы удалить контур.

Давайте добавим несколько бликов точно так же, как мы делали это раньше.
Создайте новый слой и назовите его «Освещение рамки». Загрузите выделение, зажав клавишу Ctrl + клик по иконке слоя «Содержимое рамки». Перейдите в меню Select-> Modify-> Contract (Выделение ->Модификация -> Сжать) и введите 1px . Заполните выделение цветом # fff5d5.

Теперь нам нужно добавить 1px границы в верхней части слоя «Содержимое рамки».
Создайте новый слой и назовите его «1px Обводка». Затем загрузите выделение, нажав по иконке векторной маски слоя «Содержимое фона»  (обратите внимание на разницу, чтобы загрузить выделение для объекта вектора в Photoshop, вам нужно нажать на миниатюру векторной маски, а не миниатюру слоя). Установите цвет переднего плана на # 38301f и перейдите к Edit->Stroke(Редактирование -> Обводка).  Установите ширину в 1px , расположение Inside (Внутри), а затем нажмите ОК.

При активном еще выделении, создайте новый слой и перейдите в меню Select-> Modify-> Expand (Выделение -> Модификация -> Расширить), введите 1px и нажмите кнопку ОК. Теперь, используя команду Edit-> Stroke (Редактирование -> Обводка) еще раз только на этот раз с более светлым цветом (#debd54). Нажмите Ctrl + D, чтобы снять выделение.

В следующем шаге мы добавим немного растительности по сторонам рамки.

Растения

Вот изображения, которые я собираюсь использовать:

Используйте Magic Wand Tool (Волшебная палочка) или Quick Selection Tool (Быстрое выделение), чтобы удалить белый фон. Затем, скомбинируйте различные растения, дублируя их и перемещая. Используйте Eraser Tool (Ластик) с жесткими краями или Lasso Tool (Лассо), чтобы удалить части, которые вам больше не нужны.

Постарайтесь сделать так, чтобы ваша растительность выглядела как на картинке ниже:

Выберите все слои с растениями и нажмите Ctrl + G, чтобы сгруппировать их вместе. Назовите группу «Растения слева». Щелкните правой кнопкой мыши по группе и выберите Duplicate Group (Дублировать группу), назовите новую группу «Растения дубликат». Сделайте ее невидимой и переместите в нижнюю часть палитры слоев.

Теперь давайте сделаем наши растения немного ярче, увеличив контраст. Во-первых, щелкните правой кнопкой мыши по группе «Растения слева» и выберите Merge Group (Объединить группу). Затем перейдите в Layer-> New Adjustment Layer-> Curves (Слой ->Новый корректирующий слой - >Кривые) и создайте новый корректирующий слой. Убедитесь, что вы поставили флажок Use Previous Layer to Create Clipping Mask (Использовать предыдущий слой для создания обтравочной маски).
Сделайте кривую, как на изображении ниже.

Взгляните на нашу растительность с применением корректирующего слоя Curves (Кривые).

Теперь, когда мы довольны нашим слоем Curves (Кривые), можно объединить его со слоем «Растения слева». Просто выделите оба слоя и нажмите Ctrl + E.

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

Мы закончили с левой стороной, так что давайте теперь скопируем и переместим растения на правую сторону. Щелкните правой кнопкой мыши по слою «Растения слева», выберите Duplicate Layer (Дублировать слой) и назовите новый слой «Растения справа». Переместите этот слой вправо и отразите по горизонтали (Edit-> Transform-> Flip Horizontal (Редактирование ->Трансформирование ->Отразить по горизонтали)).
Взгляните на результат:

Мы почти закончили, все, что осталось сделать, это добавить некоторые незначительные штрихи и тень рамки.

Последние штрихи

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

Удалите белый фон так же, мы сделали это раньше (с помощью Magic Wand Tool (Волшебная палочка) или Quick Selection Tool (Быстрое выделение)). Расположите эти элементы на каждой стороне и измените их размер с помощью Free Transform Tool (Ctrl+T)(Свободная трансформация) по мере необходимости.

Теперь давайте добавим немного освещения в верхней части нашего фона. Создайте новый слой (Ctrl + Alt + Shift + N) и расположите его чуть выше слоя «Фоновый узор». Установите цвет переднего плана на #ffebc0 и, используя Gradient Tool (Градиент) создайте радиальный градиент, как показано на изображении ниже. Установите режим наложения Overlay (Перекрытие) и понизьте Opacity (Непрозрачность) до 70% .

Давайте создадим тень рамки.

Сгруппируйте (Ctrl + G) все слои рамки вместе (за исключением фона) и объедините их, нажав Ctrl + E (не забудьте создать резервную копию). Назовите этот слой «Рамка» и дублируйте его, нажав Ctrl + J. Назовите новый слой «Тень рамки» и расположите его непосредственно под слоем «Рамка».

Установите цвет переднего плана # 372a00 и заполните им слой «Тень рамки» (Shift + Alt + Delete). Установите для слоя режим наложения Multiply(Умножение) и понизьте Opacity (Непрозрачность) до 30% .  Примените фильтр Gaussian Blur (Размытие по Гауссу),  зайдя в меню Filter-> Blur-> Gaussian Blur (Фильтр –> Размытие –> Размытие по Гауссу). Установите радиус размытия в 1.6px . Теперь перейдите в меню Filter-> Blur-> Motion Blur (Фильтр –> Размытие –>Размытие в движении) и установите следующие параметры:

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

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

Автор: Serj Kozlov

Источник: serj.ca

Комментарии 17

Спасибо за урок

Я совсем новичок, в уроке многое было не понятно, поэтому моя работа "слегка" отличается)

Да, здорово, обязательно попробую!

Спасибо за урок!

Виктория, спасибо за перевод. Замечательный урок!

Спасибо большое за урок. Даже и не ожидала, что так будет интересно!

Очень интересный урок,спасибо!

Теперь у меня есть красивая рамка, которую я с удовольствием буду использовать в своих работах! Желаю всем пользователям Творческих успехов!
Спасибо уважаемому автору за труд и переводчику, за понятный и доступный перевод!

Спасибо!

Красиво - спасибо!

Спасибо за урок!

Очень полезный урок, спасибо

Спасибо за хорошую идею.Отличный урок.

Спасибо.Вот мой вариант.

Спасибо за перевод и урок.

Очень красивые благородные завитки у этой рамки! Сначала и не разглядела их, но в процессе урока оценила. Спасибо за такую красоту!

Где же ваша работа?

Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее