Згорнути %s Последние сообщения тем
Тема | Форум | Написано | Дата |
---|---|---|---|
|
|
Стильный баннер для сайта
Створив:
RUS_D
, 29 лип 2012 20:20
У темі одне повідомлення
#1
Надіслано 29 липень 2012 - 20:20
Прежде всего нам необходимо создать новый документ с размерами холста 500 × 300 пикселов и залить его цветом # 2d164d.
Затем, используя Rounded Rectangle Tool и нарисуйте форму с любым цветом
Затем для нового слоя мы используем следующие стили слоя: Gradient Overlay и Stroke:
И мы получаем следующее:
Затем создайте новый слой и объедините его с предыдущим (для этого отключите видимость самого нижнего "синего" слоя и затем нажмите Shift+Ctrl+E и снова включите видимость нижнего слоя (примечание переводчика)) , чтобы получить все эффекты в один слой.
Теперь мы применим на получившийся слой стиль слоя - Drop Shadow
Получили эффект, который вы можете видеть на рисунке ниже:
Давайте добавим объема нашему баннеру. Для этого мы используем Dodge Tool (130 px, Range: Midtones, Exposure: 25%.) и сделайте затемнение слева и справа. (удерживая Alt, Dodge Tool превращается в Burn Tool
После этого мы загрузим выделение: идемSelect > Load Selection
Затем создадим новый слой и, используемGradient Tool , чтобы заполнить выделенную часть градиентом от белого к прозрачному в верхней и в нижней части слоя.
Затем снимите выделение Ctrl + D , и измените режим наложения слоя на Overlay
И последний шаг в проектировании вашего баннера. Нам нужно добавить несколько бликов.
Для этого сделаем выделение по форме баннера (Ctrl + клик на иконке слоя с баннером в палитре слоев)
Берем Elliptical Marque Tool и удерживая клавишуAlt сделаем эллипс, тем самым сократим часть выделенной области. Вы должны получить тот же результат, как на картинке ниже.
После этого мы снова создадим новый слой и используем Gradient Tool , чтобы заполнить выделенную область градиентом от белого к прозрачному.
Снимите выделение (Ctrl + D) и измените режим наложения слоя на Overlay.
Затем примените для текущего слоя стиль Drop Shadow
Получили следующий эффект:
Теперь мы можем добавить немного информации на наш баннер. В начале мы добавим узор на баннер. Для этих целей мы можем использовать кисти.
Загрузите выделение баннера еще раз (Ctrl + клик на иконке слоя с баннером в палитре слоев) и, создав новый слой, сделайте узор кистью в выбранной области.
Снимите выделение Ctrl + D и измените режим наложения слоя на Overlay и понизьте прозрачность слоя до 30%.
Теперь настроим резкость, используяSharpen Too (Brush: 200px, Mode: Normal, Strength:50%).
Теперь я хотел бы добавить изображение. Давайте использовать Google Картинки или стоковые клипарты. К примеру это картинка ЖМИ
Откройте изoбражение, отделите его от фона, используя Polygonal Lasso Toolи скопируйте его в наш основной холст (Ctrl+C > Ctrl+V), сделаqnt его немного меньше и поверните с помощью Ctrl + T.
После этого мы собираемся выделить цветок. Для этого эффекта применим стиль слоя Outer Glow
Получили:
Давайте создадим новый слой и объединить его с предыдущим, чтобы получить все эффекты в один слой.
Теперь сделайте выделение баннера (Ctrl + клик на иконке слоя с баннером в палитре слоев) После этого инвертируем выделение с помощью клавиш Ctrl + Shift + I и нажмите Delete, чтобы удалить все что за рубежом баннера.
Теперь, удалите выделение Ctrl + D .
Пора добавить текстовую информацию. С помощью Horizontal Type Toolи введите строку "New Spa Saloon"белым цветом.
Шрифт который мы использовали, Avant Garde Gothic - коммерческий шрифт. Таким образом Вы можете использовать любой другой шрифт, если у Вас нет этого.
Теперь примените к этому слою с текстом стиль слояDrop Shadow
После этого, добавьте еще одну строку "Сlick here to enter" снизу цветом # 80bb00 и используйте тот же стиль слоя.
И последнее, что нам нужно сделать, это добавить имя. Введите слово "AQUA", используя белый цвет.
Примените следующие Blending Optionsэтого текста: Drop Shadow и Outer Glow:
У нас должен получится следующий результат:
Урок закончен, Желаем удачи!
#2
Надіслано 29 липень 2012 - 20:20
Прежде всего нам необходимо создать новый документ с размерами холста 500 × 300 пикселов и залить его цветом # 2d164d.
Затем с помощью Rounded Rectangle Tool нарисуйте форму ниже любым цветом.
После этого мы используем следующие стили для этого слоя: Gradient Overlay и Stroke :
И мы получаем следующее:
Затем создайте новый слой выше и объедините его с предыдущим, чтобы получить все эффекты на одном слое. После чего мы применим стиль слоя Drop Shadow для получившегося слоя:
Получим эффект, который вы можете увидеть на картинке ниже:
Теперь нам нужно добавить некоторый объем нашему баннеру. Для этого мы, используя Dodge Tool (130 px, Range: Midtones, Exposure: 25%),сделаем затемнения на левой и правой сторонах.
(Вероятно, тут у автора ошибка, скорее всего, имелся в виду инструмент Burn Tool - прим.PS-Studio.Info)
После этого мы загрузим выделение Select> Load Selection, а затем создадим новый слой и используем инструмент Gradient Tool, чтобы заполнить выделенную часть слоя градиентом от белого к прозрачному в верхней и в нижней части слоя.
Затем снимем выделение Ctrl + D, и изменим режим наложения слоя на Overlay.
И последний шаг в дизайне баннера. Нам необходимо добавить блики. Для этого мы создаем выделение формы баннера (Ctrl + клик левой кнопкой мыши по иконке слоя в палитре слоев). Используя Elliptical Marque Tool, при нажатой клавише Alt, вырезаем часть выделенной области. Вы должны получить тот же результат, как на картинке ниже.
После этого мы используем Gradient Tool, чтобы залить полученное выделение градиентом от белого к прозрачному на новом слое.
Снимите выделение с помощью Ctrl + D и измените режим наложения слоя на Overlay. Затем примените стили Drop Shadow для текущего слоя:
Получим такой эффект:
Теперь мы можем добавить какую-нибудь информацию на наш баннер. В начале мы разместим узор. Для этих целей можете использовать или сайтов-фотостоков. Я нашел это. Откройте изображение, отделите его от фона, используя Polygonal Lasso Tool и скопируйте в наш основной холст, сделав его немного меньше и повернув с помощью Ctrl + T.
После этого нам нужно как то выделить цветок на баннере. Для этого применим стиль Outer Glow для текущего слоя:
Получили такой эффект:
Создаём новый слой и объединяем его с предыдущим, чтобы сохранить все эффекты на одном слое. После чего загрузим выделение баннера (Ctrl + левой кнопкой мыши по иконке слоя баннера в палитре слоев). После этого инвертируем выделение с помощью клавиш Ctrl + Shift + I и нажимаем Удалить, чтобы удалить все, что оказалось за формой баннера.
Теперь снимаем выделение с помощью комбинации клавиш Ctrl + D. Итак, пришло время добавить текст. Используя инструмент Horizontal Type Tool, набираем строку New Spa Saloon белым цветом.
Выше я использовал шрифт Avant Garde Gothic. Вы можете использовать любой другой шрифт, если этот вам не нравится. Теперь применим к слою с текстом стиль Drop Shadow:
Сейчас мы получили что-то вроде этого:
После этого наберите еще одну строку текста, "Click here to enter" цветом #80bb00, используя тот же стиль слоя.
И последнее, что мы должны сделать, это добавить имя. Введите слово AQUA, используя белый цвет.
Примените следующие стили для этого текстового слоя: Drop Shadow и Outer Glow:
Результат применения стилей слоя на картинке ниже.