Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

208 686 чел. 399 983 работы 4 093 урока
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Средняя

Делаем текстурный лейбл в Фотошоп

Текстурированные элементы в современном веб-дизайне сейчас модная тенденция. Узнайте, как создать собственную текстуру, а затем применить ее к своему лэйблу.

Шаг 1. Создайте новый документ 500х200px. Сделаем наши фоны. Создайте новый слой, выделите верхнюю часть слоя высотой 10px и залейте его темно-коричневым цветом.
Создайте выделение в 1рх и залейте его легким коричневым цветом. Создайте новый слой, на нём выделите область высотой в 75px от слоя в 1рх.
Залейте выделение коричневым цветом. Создайте новый слой и сделайте ещё одно выделение и примените к нему линейный градиент от светло-серого к более легкому серому оттенку. Поместите слой высотой в 1px белого цвета после коричневого слоя и более темно-серого слоя, также высотой в 1px на грани конца градиента. Всю остальную часть документа залейте белым цветом. Это мы сделали макет Web-стиля, подобным PSDTUTS.

Шаг 2. Создайте новый документ. В шаге 2a делают прямоугольник, который размером 240x100px. В шаге 2b используйте опорные точки, где Вы хотите срезать
углы у своего лэбла. Используйте направляющие, чтобы всё было ровно и красиво. В шаге 2c сделайте отверстие в лэйбле.
Снова используйте направляющие. Вот что должно выйти у Вас.

Шаг 3. Нам нужно повернуть изображение на 30 градусов. Редактирование>Трансформирование>Поворот

Примечание: автор для шага 2 и 3 использовал Illustrator, однако эти шаги можно выполнить и в Photoshop.

Шаг 4. Перенесите контур нашего лэйбла в документ, где создан Web-стиль.

Шаг 5. Создайте новый документ, размер которого в 2 раза больше размера нашего лэйбла: 580x200px.
Будем использовать этот слой для создания текстуры. Линейный градиент от светлого песочного цвета к более тёмному из левого угла к правому углу.

Шаг 6. Превратим этот градиент некую текстуру, используя ниже представленные параметры:

Шаг 7. Скопируйте структуру в наш главный документ и поверните её также на 30 градусов, как и лэйбл.

Шаг 8. Выделите контур нашего лэйбла, выберите слой с текстурой, сделайте инверсию выделения и удалите всё лишнее.
Снимите выделение, примените Стиль слоя, как показано ниже.

Шаг 9. Создайте слой размером 170х70рх. залейте его красным цветом. Напечатайте внутри любой текст, автор разместил внутри PSDTUTS.
Выберите слой с текстом и слой красного цвета, так же поверните их на 30 градусов. Нам нужно добиться того, чтобы был только контур букв, и не было бы никакого цвета.
Для этого с помощью Инструмента Волшебная палочка выделите каждую букву и удалите содержимое.

Шаг 10. Перенесите наш слой с текстом на главное изображение и примените режим наложение на Умножение.

Шаг 11. Используя инструмент Ластик , сотрите часть слоя красного цвета. Вы можете использовать ластик с такими настройками, как и автор, а можете и выбрать и другие параметры.

Шаг 13. Вы довольны тем результатом, которого добились? Но мы собираемся идти вперед и добавить реалистичности. Редактирование>Трансформирование>Перспектива

Фильтр>Резкость>"Умная" резкость

Шаг 14. Чтобы всё выглядело ещё более реалистичнее, используйте Инструмент Размытие (R) выполните несколько щелчков по правому нижнему углу.

Шаг 15. Используя Инструмент Перо , начертите линию, которая послужит контуром для шнура, держащего наш лэйбл.

Шаг 16. Щелчок правой клавишей по контуру > Выполнить обводку контура. Выберите Инструмент Карандаш с диаметром кисти 3px, Жёсткость 100%.
Удостоверьтесь, что у Вас цвет переднего плана чёрный. После чего с помощью Инструмента Ластик удалите ненужную часть шнурка, придав эффект того, что он проходит через отверстие в нашем лэйбле.

Шаг 17. Придайте эффект освещения. Скопируйте средний коричневый фон. Фильтр>Рендеринг>Эффекты освещения и используйте параметры как на изображении.

Шаг 18. Мы заставили копию фона светиться. Переместите этот слой в центр нашего документа. Вот что должно получиться у Вас.

Создание текстуры - вещь занимательная. Можно создавать уникальные в своём роде элементы.

Автор: Sean Hodge

Комментарии 36

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Спасибо, урок очень понравился!

Хороший урок. Спасибо.

Спасибо за урок, получилось.

Большое спасибо за урок!

Да... Текстура вещь полезная, благодарю за урок!

Уффф... Замучался на 2 шаге... Но сделал! Очень интересно получилось! Спасибо за урок, пригодиться!

отличный урок! выцепил пару фишек которых до этого не знал)

Урок хороший некоторым штучкам подучился :)

Спасибо за урок... А так же спасибо всем за коментарии - очень много почерпнула из них)) Ну и результат....

Попробовала сделать. Урок оказался совершенно не сложным. Цвета подбирала сама. Отличный урок))

Я в ентом нелегком деле новичок! Нарисовала - теперь вся во власти Чувства Собственного Величия! :)))
Спасибо за урок!!!

Очень понравилась идея! Спасибо!

Еще 30
Добавить комментарий / работу

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules