Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

4

16850
20-02-2010

Создаем текст с реалистичной джинсовой текстурой и белой отстрочкойТекстура денима в совокупности с белым стежком и грубым холстом на заднем фоне смотрится очень стильно и всегда выигрышно. В этом уроке мы достигнем этой цели при помощи инструментов «Контур», «Ластик», «Затемнитель». А также воспользуемся стилями слоя «Тень» и «Тиснение». Посмотрим, как дизайнеры из «Rich Works» добились такого замечательного результата.

 

Шаг 1.
Создаем в фотошопе новый файл размером 500х500 пикс и заливаем его светло серым цветом, как на рисунке ниже.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 2.
Теперь выбираем инмтрумент «Текст» (Type tool) и печатаем букву R. Или любую другую на ваше усмотрение. Автор урока использовал шрифт «ROLAND». Вы можете выбрать любой шрифт, это не имеет значения. Главное, чтобы у шрифта было поменьше углов и закруглений. Почему? Узнаете ниже.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 3.
Правой кнопкой мыши щелкаем по слою с текстом и выбираем пункт «Растрировать текст» (Rasterize layer). Теперь держивая Ctrl, щелкаем по слою с буквой и выделяем ее. В меню идем «Выделение» (Select) -> «Модификация» (Modify) -> «Сжать…» (Contract). Устанавливаем значение 8.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 4.
В верхнем меню в пункте «Окно» вызываем палитру «Контуры». Там, либо через выпадающее меню в правом верхнем углу палитры, либо через иконку внизу «Сделаем из выделенной области рабочий контур» (Make work path). Вы увидите, как выделение превратилось в путь.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 5.
Выбираем инструмент «Кисть» (Brush tool) и выбираем кисть с настройками, как показано ниже.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 6.
Создаем новый слой. На палитре цветов устанавливаем цвет — белый. На палитре «Контуры» либо через выпадающее меню в правом верхнем углу палитры, либо через иконку внизу выбираем «Выполнить обводку контура кистью» (Stroke path).Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

Должен получиться вот такой результат. После этого удаляем рабочий контур в палитре «Контуры».Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 7.
Для того, чтобы сделать стежки есть два пути. Первый — это перед Шагом 6 с помощью «Настроек формы и отпечатков кисти» добиться имитации стежков. Но автора урока этот результат не удовлетворил. И поэтому мы воспользуемся инструментом «Ластик» (Eraser) и будем вручную стирать часть белой обводки, которая у нас на отдельном слое. Стирать надо перпендикулярно белой линии!Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 8.
Теперь возьмем вот эту джинсовую текстуру.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 9.
Откройте картинку с текстурой в фотошопе и вставьте ее в основной документ между слоем с буквой и слоем со стежком. Слой со стежком должен быть сверху. Выглядит это приблизительно так.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 10.
Создаем обтравочную маску (Clipping mask). Для этого выбираем слой с текстурой и нажимаем Alt+Ctrl+G.Должно получиться как на рисунке.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 11.
Теперь на палитре инструментов выбираем инструмент «Затемнитель» и, используя мягкую кисть, затемняем края ткани по периметру буквы.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Шаг 12.
Сейчас сделаем следующее. Создадим новую группу поверх всех слоев. Назовем ее «Группа» Перейдем на слой с белым стежком, и, удерживая Shift, прощелкаем слой с текстурой и слой с буквой. Они будут выделенными. Теперь перетаскиваем их в новую группу. На слое «Группа» щелкаем правой кнопкой мыши и выбираем пункт «Преобразовать в новый смарт объект» (Convert to smart object).

 

Теперь можно применить стиль к получившемуся слою. Два раза щелкаем по слою и выбираем пункт «Тень» (Drop shadow). Выбираем установки как на картинке ниже слева. Режим «Multiply» — «Умножение».

 

Потом выбираем пункт меню «Тиснение» (Bevel and Emboss). Установки как на рисунке ниже справа. «Inner Bevel» значит «Внутренний скос», «Smooth» значит «Плавное», «Screen» значит «Экран», «Multiply» значит «Умножение.»Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

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

 

Шаг 14.
Можно положить текстуру на задний фон. Взять ее можно здесь.Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

 

Финал.
Вот окончательный вариант того, что было задумано автором!Создаем текст с реалистичной джинсовой текстурой и белой отстрочкой

  • Короткая ссылка на этот пост: https://www.designonstop.com/?p=1019
  • Поддержать DesingNonstop рублём!

Написать комментарий с помощью формы ВКонтакте

Комментариев 4 комментария

Замечательный урок, спасибо 🙂

Имхо, для пущего эффекта реалистичности, стоит:
— слой со стежками не брать в общий смарт-объект с буквами (цель чего мне вообще не понятна), а положить на него отдельный Bevel and Emboss, чтобы стежки смотрелись выпуклыми, и Texture с подходящими параметрами, чтобы понятно было, что они таки состоят из ниток;
— слегка «обгрызть» ластиком края букв, ибо нет ничего идеального под Луной;
— инструментами Burn и Dodge затемнить/высветлить подложку, чтобы немного «втиснуть» буквы в ткань.

Кроме прочего, опять же, сугубо имхо, обрабатывая ластиком промежутки между стежками, нельзя оставлять «угловые» стежки и стежки сложной формы.

И я использовал кожу на джинсе как более симпатичное мне сочетание материалов.
Мой вариант: http://www.flickr.com/photos/24437951@N05/4372943465/

И еще раз спасибо за урок, действительно оказался полезен.

ОтветитьОтветить

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

PS Про статью о математике в дизайне помню, но переведу чуть попозже. 🙂

ОтветитьОтветить

Неплохо. Только я тоже самое делал в Иллюстраторе.

ОтветитьОтветить

@Maksim Shaihalov
А почему бы и нет… Кому как удобнее, тем более, что результат сильно не отличается, я думаю

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!

43 queries in 0,235 seconds.