Четверг | 16.07.2026 | 10:03

 

Каталог статей

Главная » Статьи » Графика

Дизайн стильной абстрактной шапки для сайта
Шаг 1
Создайте документ размером 1200 х 600 пикселов (вы можете специально другой размер, который вам больше подходит для дизайна вашего сайта, этот размер может быть использован только для практики). Заполните задний фон черным цветом.
Создайте новый слой и назовите «Радиальный градиент» и выберите инструмент Gradient Tool (G) , Выберите опцию Radial Fill (радиальная заливка) и заполните слой как показано ниже (вы можете изменить цвет так, как вам нравится.)

Теперь создайте новый слой и назовите его «Угловой градиент» и установите режим наложения на "overlay"
Используйте инструмент Rectangular Marquee Tool чтобы выделить центральную часть слоя, снова используйте Gradient Tool (установите приоритетный цвет на белый с прозрачным фоном), в этот момент мы выбираем опцию Angle Gradient (угловой градиент) и заливаем выделение как показано ниже.

Шаг 2
Скопируйте слой «Угловой градиент» и измените настройки параметров наложения слоя на "overlay", и выберите Edit > Transform > Flip Horizontal чтобы отразить слой горизонтально. Объедините оба слоя вместе. Измените параметры наложения на "overlay" после объединения.
Примените "Drop Shadow" в параметрах наложения слоя к объединенному слою как показано ниже:

Затем уменьшите прозрачность слоя «Радиальный градиент» до 60% и сравните с результатом:

Теперь создайте новый слой между двумя предыдущими и назовите его «Центральный свет». Выберите большую мягкую круглую кисть (600 пикселей в моем случае), установите передний цвет на белый и сделайте один отпечаток кисти в центре слоя:

Установите параметры наложения слоя на "overlay" и вы должны получить вот такой эффект:

Шаг 3:
Я решила придать изображению больше глубины и ощущения трехмерности. Поэтому на слое «Угловой градиент» нажимаем Ctrl + T и тянем вверх с помощью инструмента свободной трансформации, выбираем опцию «перспектива» и трансформируем как показано ниже: (уменьшаем верхнюю сторону)

Вот результат после придания перспективы:

Шаг 4

Создаем новый слой и называем его «блестящая линия», используем Pen Tool чтобы создать часть работы как показано ниже: (Для кто с пером еще только на вы, есть множество обучающих уроков)

Затем нажмите правой кнопкой и выберите "stroke path" и выделите "brush" (придайте твердости вашему выделению с помощью мягкой круглой кисти)
Должно получиться так:

Шаг 5:
Скопируйте слой "блестящая линия" несколько раз, используйте инструмент Free Transformation Tool, чтобы повернуть, исказить, и изменить размер копий и смашать линии вместе:

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

Скопируйте объединенный слой, примените фильтр Gaussian Blur со следующими настройками:

Сравните результат:

Шаг 6
Создайте новый слой и назовите его «блестящие точки», загрузите выделение слоя «блестящая линия», затем нажмите правой кнопкой и выберите "Make Work Path":

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

Также примените опцию "Smoothing"
На слое «блестящие точки» обведите части с помощью кисти и вы получите следующий эффект:

Шаг 7
Сейчас мы мы можем добавить облако в основание наших линий. Чтобы сделать это мы просто создаем новый слой и используем инструмент Lasso Tool с шириной 40 пикселов чтобы выделить основание светящихся линий и используйте Filter > Render > Cloud и создайте немного облаков: (установите предний цвет на белый , а задний цвет на черный)

Я также использую Len Flare со следующими настройками чтобы высветить центр облаков:

Измените режим наложения слоя на "overlay" и вы получите следующий эффект:

И напоследок мы поместим название нашего сайта и навигацию на изображение:

Конечно, это всего лишь основа. Вы можете применять другие фильтры, менять цветовую схему и т.д.
Вот мое финальное http://arttower.ru/wiki/index.php?title=Изображение для этого урока:

Альтернативные варианты

Quote
Урок размещен с разрешения его автора psdvault и переведен
http://arttower.ru/forum/index.php?showuser=8842 с оригинала , доступного http://www.webdesign.org/web/photoshop/drawing-techniques/design-an-elegant-abstract-site-header-image-in-photoshop.17242.html .
Запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.

The original tutorial is written by psdvault and translated byhttp://arttower.ru/forum/index.php?showuser=8842.
No part of this tutorial can be copied/pasted on any other website without the author's express written permission.



Источник: http://arttower.ru/forum/index.php?act=Print&client=printer&f=9&t=14134
Категория: Графика | Добавил: Sweet (19.07.2009) | Автор: Светик
Просмотров: 1972 | Теги: уроки photoshop, графика для сайта, дизайн шапки | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Конструктор сайтовuCoz