ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Эффект освещенного текста

Эффект освещенного текста

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

Создадим новый документ Файл ⇒ Создать и зальем его темно-серым градиентом.

Параметры нового документа

Праметры градиента

Фон изображения

Теперь перейдем в панель инструментов и выберем Горизонтальный текст с параметрами указанными на рисунке. Цвет текста # c2c8d4.

Параметры текста

Пишем текст.

Рисунок с текстом

Выделим текст, нажав клавишу Ctrl и щелкнув левой кнопкой мыши по текстовому слою. Создадим новый слой Градиент.

Рисунок с новым слоем Градиент

Выберем линейный градиент с параметрами указанными на рисунке.

Параметры градиента

Зальем слой градиентом снизу справа налево.

Рисунок после заливки градиентом

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

Новый слой Тень

Далее будем использовать такой прием. Передвинем выделение на 1 пиксель (нажмем один раз) вниз и вправо, используя клавиши стрелки на клавиатуре. Зальем передвинутое выделение снова черным цветом используя сочетение клавиш Alt + Backspace. И так повторим прием примерно 20 раз.

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

Рисунок после  выделения и заливки

Снимем выделение и при активном слое Тень откроем Фильтр ⇒ Размытие ⇒ Размытие в движении. Установим параметры фильтра согласно рисунка.

Параметры фильтра Размытие в движении

Установим режим наложения слоя Умножение, Непрозрачность 40%.

Панель слои

Рисунок примет следующий вид.

Рисунок после применения фильтра

Как видите тень выступает за пределы текста. Чтобы устранить это несоответствие сделаем следующее.

Нажмем клавишу Shift и удерживая ее нажмем стрелки на клавиатуре вниз и вправо. Тень переместится на 10 пикселей в обеих направлениях.

Примечание. На панели инструментов должен быть выделен инструмент Перемещение.

Рисунок примет следующий вид.

Рисунок после перемещения тени

Дублируем слой Тень и удерживая клавишу Shift переместим ее вниз и вправо.

Рисунок после создания копии слоя Тень

Откроем Фильтр ⇒ Размытие ⇒ Размытие в движении и установим параметры фильтра согласно рисунка.

Параметры фильтра

Установим режим наложения слоя Тень копия Умножение, Непрозрачность 20%.

Выделим слой с основным текстом и создадим новый слой Слой 1 поверх всех основных слоев.

Рисунок после создания нового слоя Слой 1

Зальем выделение Слой 1 белым цветом.

Новый слой Слой 1

С помощью клавиш Стрелки переместим выделение на 1 пиксель вниз и вправо и нажмем Delete.

Примечание. При использовании этого приема на панели Инструменты должен быть выделен инструмент Прямоугольная область.

Переименуем Слой 1 в слой Обводка и установим Непрозрачность 80%.

Панель Слои

Рисунок примет следующий вид.

Рисунок после создания слоя Обводка

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

Рисунок после создания слоя Свет

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

Свободное трансформирование слоя

Теперь можно передвигать маркеры.

Рисунок аосле использования трансформации Перспектива

Установим на слое режим наложения Оветленные основы Непрозрачность 20%.

Панель Слои

Рисунок примет следующий вид.

Рисунок после преобразования слоя Свет

Откроем Фильтр ⇒ Размытие ⇒ Размытие по Гауссу и установим параметры согласно рисунка.

Параметры фильтра Размытие по Гауссу

Рисунок примет следующий вид.

Рисунок после применения фильтра

Выделим слой Свет, активируем слой Обводка.

Рисунок после выделения слоя Свет

А теперь, чтобы избавится от лишнего добавим на слой Обводка Слой-маску.

Панель слои

Рисунок примет следующий вид.

Рисунок после добавления слоя-маски

Создадим над слоем Фон новый слой Слой 1 и зальем его розовым цветом # 9d506c. Установим на слое режим наложения Линейный свет, Непрозрачность 20%.

Рисунок после создания нового слоя

Создадим над розовым слоем еще один слой и зальем его белым цветом. Применим к слою Фильтр ⇒ Рендеринг ⇒ Эффекты освещения. Установим параметры фильтра согласно рисунка.

Параметры фильтра Эффекты освещения

Установим на слое режим наложения Линейный свет, Непрозрачность 20%.

Рисунок после установки фильтра Эффекты освещения

Теперь создадим копию этого слоя и установим Непрзрачность 40%.

Рисунок после создания копии слоя

И наконец последний штрих. Создадим копию последнего слоя Слой 2 копия и установим Непрозрачность 65%. Добавим на него маску слоя и зальем градиентом от белого к черному с левого верхнего угла к правому нижнему.

Панель Слои

Рисунок примет вот такой вид.

Финишный рисунок

Оригинал метода находится на сайте psd tuts+.