Еще один перевод урока от известного автора и дизайнера проекта — Colis. В этом уроке он
покажет и расскажет способы создания эффекта стекла с помощью стилей в Photoshop. Colis
мастер веб дизайнов и знает смысл в создании красивых элементов, который приятно смотрятся
на экране вашего монитора. На месте Colisa я бы использовал маски слоя, заместо прямой
заливки градиента и обрезки бликов. Даже в этом легком деле не нужно делать необратимые
изменения в дизайне. Но хватит длинных прелюдий.
В этом уроке фотошопа для начинающих при помощи стилей слоя, мы изготовим стеклянную
букву в программе ФотоШоп. Буква достаточно красивая и элегантная, которая сделана для веб
графики. Потому что стилей слоя достаточно много, в конце урока можно будет скачать PSD
исходник, где можно разобрать все стили.
Вначале нарисуем мягкий и приятный задний фон рабочей области. Не смотря на то, что главный
градиент в Фотошопе двухцветный, вы сможете создать любое кол-во цветов. Для этого просто
надо выбрать инструмент Gradient Tool и нажать по полоске градиента вверху меню настоек. Я
добавил всего три цвета. Вариант зеленого и переход к двум оттенкам синего цвета.
Разноцветный градиент создает задний фон более своеобразным. Также можно
воспользоваться радиальным градиентом. Вот номера цветов: #2e5b15 #103533 #090e13
Нам нужна любая буква. Я выбрал букву Q. Она достаточно красиво смотрится в стиле serif.
Шрифт такой: Adobe Caslon Pro, он входит основным в Фотошопе. Цвет моей буквы, очень
приятный зелено-голубой. Номер цвета #41a993
После того, что мы сделали я просто открыл диалоговое окно стилей и попробовал с разными
стилями. Точные настройки моих открытий вы сможете посмотреть в PSD
файле. В общем я
сделал вот что:
Снизил невидимость слоя через Fill
где-то на 20%. Fill
создает невидимый слой, но никак не стили
слоя.
Затем, создал большой ряд стилей, которые бы имитировали объемность моей буквы и блики. Так
же я использовал ряд разных режимов наложения к моим стилям.
Если у вас множество объектов вы сможете с легкостью скопировать стиль слоя с одного на другой
объекта. Для этого нужно просто нажать правой кнопкой мыши по слою и из меню нажать Copy
Layer Styles
.
Нужно обрать внимание на то, что я сделал стиль так, что свет на стеклянную букву исходит снизу.
Теперь нам нужно зажать CTRL
и нажать по картинке слоя буквы Q
, для того чтобы загрузить
выделение. Затем, создайте еще один новый слой и примените к нему градиент от прозрачного
до белого.
Для того, чтобы задать градиент нужно выбрать инструмент Gradient Tool
и нажать по полоске
градиента в панели настроек вверху. Ранее, мы делали подобное в нашем уроке. В окне
редактора градиента вы увидите ползунки градиента. Верхний задает степень прозрачности, а
нижний задает цвет.
Градиент от белого к прозрачному довольно таки полезен. Он хорошо
подходит для изготовки разного рода стеклянных эффектов, пластика или
хромирования. Готовый градиент приглушите режимом наложения Overlay
.
Затем снова нажимаем CTRL
и кликаем по нашему слою буквы, для того чтобы загрузить новое
выделение. Снова делаем новый слой и заливаем новый градиент, но уже с другой стороны. Приглушим его, сделав невидимость 40%
Opacity
в настройках слоя.
Затем, на этом же нашем слое нужно выбрать инструмент Elliptical Marquee Tool и создайте область выделения. Нажмите снова CTRL+SHIFT+I , для того чтобы инвертировать его и нажмите Select >Inverse . Затем, просто удалите выделенную часть блика.
Теперь стекло красиво блестит, добавим совсем немного дополнительных бликов. Нужно выбрать
инструмент Polygon Tool
, на панели ваших настроек инструментов, затем выбираем настройку Star
и 99%
. Вы так же можете нарисовать звезды с режимом Fill Pixels
на первом слое, но лучше всего, конечно работать с режимом Layer Shapers
и векторными фигурами.
Вот окончательный вариант нашей с вами стеклянной буквы в Фотошопе.
Стеклянные спецэффекты почти во все времена дизайна считаются актуальными и востребованными, поэтому и мы не можем обойти эту тему. В данном уроке мы попробуем создавать стеклянный, прозрачный текст, и помогут нам в этом стили слоя (Layer Styles) имеющиеся в арсенале Photoshop.
То что мы хотим получить:
Используемые материалы:
Начинаем с выбора картинки с задним планом, подходим с умом, чтобы на его фоне стеклянный шрифт выглядел особенно эффектно, но при этом не оттягивал на себя внимание. Для примера используем фон с текстурой Боке.
Создаём документ размером 850 x 550 px, перемещаем в него текстуру с боке, размещаем её над слоем с задним фоном. Используем масштабирование для подгонки к границам, затем объединяем оба слоя.
Ещё один важный момент – выбор шрифта. Наилучший вариант – полужирный курсив тонкими линиями. Определившись с ним, выводим нужную надпись заглавными буквами, в нашем примере это шрифт Rialto, 220 pt.
Минимизируем Заливку (Fill) слоя с текстом до нуля, после чего создаём три копии слоя с текстом, чтобы в итоге получить 4 слоя.
Кликаем два раза по оригиналу с текстом и применяем такие Стили слоя (Layer Style):
Для параметра Обводка (Stroke):
Для параметра Внутренняя тень (Inner Shadow):
Задирая значение Непрозрачности (Opacity) мы сделаем эффект более выраженным.
Для параметра Тень (Drop Shadow):
По-экспериментируем с параметром Угол (Angle), чтобы настроить угол искривления тени, также можно щёлкнуть мышкой по ней с одновременной тягой тени в нужную сторону.
На данном этапе, эффект начинает получать конкретные очертания, но это ещё далеко не всё.
Два раза кликаем по первой копии слоя с текстом, и применяем к нему такием Стили слоя (Layer Style)
Для параметра Тиснение (Bevel and Emboss):
Этим мы добавим надписи большего блеска, особенно по границам.
Два раза кликаем по следующей копии текста, и активируем к нему такие Стили слоя (Layer Style).
Для параметра Тиснение (Bevel and Emboss):
Для параметра Контур (Contour):
Два раза кликаем по третьей копии слоя с текстом, чтобы активировать к нему такие Стили слоя (Layer Style).
Для параметра Тиснение (Bevel and Emboss):
В этом уроке вы узнаете, как создать реалистичный стеклянный текстовый эффект, используя очень простые инструменты и методы такие, как стили слоя и режимы наложения. Этот урок научит применять прозрачную глянцевую текстуру к форме буквы, а также заполнять лабораторную посуду жидкостью, пузырьками воды и паром. Также вы узнаете, как добавить метрическую шкалу на поверхность стекла, как сделать тени и отражение.
Финальное изображение
Задаем размер буквы «В» около 500х500px с разрешением 300px/inch. Это может быть важно, поскольку от размера зависят настройки эффектов стилей слоев для стеклянной текстуры и коррекции жидких эффектов.
Для того чтобы создать более реалистичный стеклянный эффект используйте округлый и жирный шрифт. Из буквы шрифта Val создайте рабочий контур и преобразуйте кривые, этим мы исправим силуэт буквы, придав ему более сферическую форму и объемный вид. Я не использовала типографские шрифты в этом уроке, только векторные формы. Вы можете создать свою собственную форму с помощью Pen (Перо) и Convert Point (Преобразовать точку).
Чтобы создать реалистичный эффект стекла вам понадобится всего лишь два слоя. Примените Fill (Заливка) 0% для созданной формы буквы и добавьте эффекты стиля слоя из скриншотов ниже.
Вы сможете найти коды цветов, контуры и параметры градиентов внутри файла glass_letter_tutorial.psd
Примените радиальный градиент в нижней части формы, чтобы создать эффект стеклянной пробирки.
Используйте по умолчанию Photoshop узор Nebula (Туманность) для создания намека отражения на поверхности стекла. Масштаб текстуры 1000%.
Дублируйте форму буквы. Примените новые стили слоя к нему.
Подведем итог. Стеклянный эффект сделан. Теперь мы можем добавить больше деталей, чтобы создать стиль химической лабораторной посуды. Давайте добавим метрическую шкалу на поверхность стекла. Выберите инструмент Line Tool (Линия). Создайте несколько 2px линий, как показано ниже. Примените следующие эффекты стиля слоя.
Введите число рядом с большой линией. Здесь использовался шрифт “Arial”.
Добавьте несколько эффектов стиля к слою цифры.
Сгруппируйте созданные линии и дублируйте созданную группу несколько раз. Расположите группы друг над другом. Измените значение внутри каждой группы на номер ‘50’, ‘100’, и т.д..
Теперь перейдем к созданию жидкости внутри стеклянной формы. Создайте новый слой ниже слоев со стеклянными формами и поместите его в группу «Жидкость». С помощью инструмента Ellipse Tool (Эллипс) создайте овальную форму.
К овальной форме примените Fill (Заливка) 0%. Добавьте стили слоя.
Возьмите Rectangle Tool
(Прямоугольник) и создайте прямоугольник ниже овального слоя. Верхний край прямоугольника должен быть в центре овальной формы.
Вернитесь к слою с овальной формой, сделайте овальный контур активным. Перейдите в меню Edit>Copy
(Редактирование>Копировать).
Вернитесь к прямоугольной форме снова и вставьте скопированный овальный контур. Нажмите Subtract from shape area (Вычесть из области фигуры). Овальная область прямоугольника должна быть пустой.
Добавляем градиент к созданной форме.
Дублируйте прямоугольный слой.
Сделайте активным овальный контур скопированного слоя и нажмите на иконку Add to the shape area (Добавить к области фигуры). В этом случае вам надо добавить овальную область к прямоугольной форме.
Примените к данному слою Fill (Заливка) 0% и стиль слоя Overlay Gradient (наложение Градиента).
При создании градиента используйте режим наложения Color (Цветность), чтобы сохранить прозрачность.
Вы можете использовать различные градиенты, чтобы создать жидкость другого цвета. Вот пример использования фиолетового цвета.
Вернемся к нашей первоначальной зеленой/прозрачной жидкости и добавим текстуру пузырьков. Вставьте текстуру “Пузыри”. Расположите его под прямоугольными слоями, но расположите этот слой внутри группы «Жидкость».
Вставьте текстуру “Пар”. Поместите слой с паром выше всех слоев жидкости и оставьте в той же группе «Жидкость»
Выделите фигуру прямоугольника с вычтенной областью
(Ctrl+клик по иконке формы). Перейдите в меню Select
>
Inverse
(Выделение>Инверсия).
Затем нажмите на значок Layer Mask (Слой-маска), чтобы добавить маску слоя к текстуре пара. Вы должны сделать пар внутри жидкой области невидимым.
Загрузите выделение для стеклянной формы «В» (Ctrl+клик по миниатюре формы). Сделайте активной группу «Жидкость».
Перейдите в меню Select > Modify > Contract (Выделение>Модфикация>Сжать). Укажите значение 8px.
Затем нажмите на значок Layer Mask (Слой-маска), чтобы удалить текстуру за пределами выделенной формы буквы.
Если вам хочется создать тень или отражение на букве в виде посуды, следуйте инструкциям ниже. Загрузите выделение формы «В» еще раз. Перейдите в меню Edit>Copy Merged (Редактирование>Скопировать совмещенные данные)
Вставьте созданный объект ниже всех слоев буквы, но выше фона. Преобразуйте объединенную букву в смарт-объект (правый клик мыши по слою, выберите Convert to Smart Object (Преобразовать в смарт-объект)), дублируйте его. Эти слои нам понадобятся для создания тени и отражения нашей буквы.
В этом очень простом уроке вы узнаете, как с помощью фильтров и стилей слоя создать красочный, искрящийся стеклянный текст.
Финальный результат:
Материалы для урока:
Создаём новый документ (Файл - Создать) со следующими параметрами: Ширина: 1250, Высота: 750 px, разрешение 300.Далее нам необходимо залить созданный нами документ чёрным цветом. Дублируем слой нажатием клавиш (Ctrl+J).
В палитре цветов установите следующие цвета: передний план: чёрный (000000) цвет фона: (ffffff). Теперь мы должны создать небольшое “Северное Сияние” на котором будет располагаться наш текст. Переходим в Фильтр - Рендеринг - Волокна (Filter - Render - Fibers) и настраиваем его. Несовпадения 20 и интенсивность 5.
Переходим в Фильтр - Размытие - Размытие в движении (Filter - Blur - Motion Blur), изменяем угол на 90 градусов и Смещение на 1000.
Измените режим наложения на “Линейный затемнитель ” (Linear Burn). В итоге наш слой останется пустым, черным цветом но это не беда цвета мы добавим позже.
С помощью инструмента “Горизонтальный текст (T)” (Type tool) и шрифта “Playball” (ссылка на скачивание доступна в предисловии) латинскими буквами напишите любое слово или предложение.
Стоя на текстовом слое измените значение “Заливки” до 0 и дублируйте слой нажатием клавиш (Ctrl+J).
Дважды кликните по оригинальному текстовому слою и примените следующие параметры:
Тиснение: Стиль-Внешний скос, Метод-Жесткая огранка, Контур глянца-Перевёрнутый конус, ставим галочку возле “Сглаживание” Режим подсветки-Линейный свет, Режим тени-Умножение, Цвет-Серый (b5b5b5).
Контур: Перевёрнутый конус, и ставим галочку возле “Сглаживание”.
Обводка: Размер-7пикс, Положение-Снаружи, Режим наложения-Нормальный, Непрозрачность-0%, Тип обводки-Цвет, Цвет-Белый (ffffff).
Тень: Режим наложения-Умножения, Цвет-Тёмно-серый (474747), Непрозрачность-75%, Ставим галочку на “Глобальном освещении”, Смещение - 11пикс, Размах - 0%, Размер - 8пикс.
И вот мы создали первый слой стеклянного текста.
Дважды кликните по копии текстового слоя и примените следующие параметры:
Тиснение:
Стиль - Внутренний скос, Метод - Плавное, Глубина - 100%, Направление - Вверх, Размер - 13пикс, Смягчение 0 пикс, Контур глянца - Волнистый нисходящий уклон, Ставим галочку возле “Сглаживание”.
Контур: Контур - Инверсия по Гауссу, и ставим галочку воле “Сглаживание”.
Внутреннее свечение: Режим наложения - Перекрытие, Непрозрачность - 75%, Шум - 100%, Цвет - Белый (ffffff), Метод - Мягкий, Источник - Из Центра, Стягивание - 0% Размер - 20пикс.
