Стеклянный текст в Фотошопе

Очередной перевод урока от известного дизайнера и автора проекта psd.tutsplus.com — Collis. В этом уроке Collis  расскажет и покажет способы создания эффекта стекла с помощью стилей в Фотошопе. Коллис является мастерским веб дизайнером и знает толк в создании красивых веб элементов, приятно смотрящихся на экране монитора. Тем не менее на месте Коллиса я бы использовал маски слоя, вместо прямой заливки градиента и обрезки бликов через удаление. Даже в таком простом деле никогда не следует создавать необратимые изменения в дизайне. Но хватит длинных прелюдий. Перевод подготовлен для www.hronofag.ru

В этом уроке при помощи стилей слоя и немного магии фотошопа, мы создадим стеклянную букву в Фотошопе. Буква достаточно элегантная и красивая. Предназначена для веб графики. Так как стилей слоя очень много, в конце урока можно будет скачать PSD исходник, в котором можно воочию разобрать все стили.

Создаем фон

Для начала нарисуем приятный и мягкий задний фон рабочей области. Не смотря на то, что обычный градиент в Фотошопе двух цветный, вы можете задать любое количество цветов. Для этого надо выбрать инструмент Gradient Tool и кликнуто по полоске градиента на верху в меню настроек. Появится Редактор градиента Gradient Editor в котором можно добавить любое количество цветов. Я добавил три цвета. Вариацию зеленого и плавный переход к 2м оттенкам синего цвета.

Много цветный градиент делает задний фон более своеобразным. Я так же воспользовался радиальным градиентом. Вот номера цветов: #2e5b15, #103533, #090e13

Пишем текст

Теперь нам нужна буква. Я выбрал букву Q. Она особенно хорошо смотрится в стиле serif. Шрифт Adobe Caslon Pro, он входит по умолчанию в Фотошоп. Цвет буквы приятный зелено-голубой. Номер цвета #41a993

Стили для стеклянной буквы

После проделанной работы я просто открыл диалоговое окно стилей слоя и экспериментировал со стилями. Подробные настройки моих комбинаций вы сможете посмотреть в PSD фаиле. В общих чертах я делал вот что:

[list style=»arrow»]

  • Понизил невидимость слоя через Fill примерно до 20%. Fill делает невидимым слой, но не стили слоя. Подробнее об этом можно прочитать в Продвинутых режимах наложения.
  • Создал ряд стилей, которые бы имитировали объемность буквы и блики. Я так же использовал ряд различных режимов наложения к этим стилям.

[/list]
В случае, если у вас несколько объектов мы можете легко перекопировать стиль слоя с одного объекта на другой. Для этого кликните правой кнопкой мышки по слою и из меню выберите Copy Layer Styles.

Стеклянная буква

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

Создаем блики

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

Чтобы задать градиент выберите инструмент Gradient Tool  и кликните по полоске градиента в панели настроек на верху. Мы уже делали подобное в этом уроке. В диалоговом окне редактора градиента вы увидите ползунки градиента. Нижний задает цвет, а верхний степень прозрачности.

Градиент от белого к прозрачному очень полезен. Отлично подходит для создания разного рода стеклянных эффектов, хромирования или пластика. Получившийся градиент приглушите режимом наложения Overlay.

Опять нажимаем CTRL и кликаем по слою буквы, чтобы загрузить новое выделение. Опять создаем новый слой и заливаем новый градиент но с другой стороны. Приглушите его выставив 40% невидимости Opaсity в настройках слоя.

Теперь на этом же слое выберите инструмент Elliptical Marquee Tool и создайте область выделения. Затем нажмите CTRL+SHIFT+I чтобы инвертировать его или нажмите Select > Inverse. После чего удалите выделенную часть блика.

Дополнительные блики для стекла

Теперь стекло блестит, давайте добавим ещё немного дополнительных бликов. Выберите инструмент Polygon Tool и на панели настрок векторных инструментов выберите настройку Star и 99%

Можете нарисовать звезды с режимом Fill Pixels на одном слое, но лучше, конечно работать с векторными фигурами и режимом Layer Shapers.

Окончательный вариант

Вот законченный вариант стеклянной буквы в Фотошопе.

Скачать макет в PSD

P.S. Кончается зима, пришла пора взяться за себя основательно. Помочь начать здоровый образ жизни поможет фитнес клуб ВАО, в котором каждый сможет найти себе занятие по душе. Тренажерный зал или занятия единоборствами. Солярий, массаж и даже танцы.