Рубрика: Photoshop Уроки | Урок прочитали: 586
 (голосов: 0)

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

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

Шаг 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
Перевод: Лукша Юрий.
Ссылка на источник

           

Похожие файлы и публикации:

Делаем текстурный лейбл в Фотошоп
Изображение - существенный элемент в наборе любого дизайнера. Независимо от того - простой Ваш проект или что-то эксклюзивное, хорошее изображение будет всегда кстати. В этом уроке продемонстрированы способы того, чтобы помочь Вам создать своё собственное глянцевое изображение.
Делаем текстурный лейбл в Фотошоп
Создайте новый файл, размером 773х220 px и разрешением 72. Используя следующий инструмент , разметьте документ как показано ниже.
Делаем текстурный лейбл в Фотошоп
Шаг 1. Создайте новый документ, размером 600px на 800px. Заполните его темно-синим цветом (#091417).
Делаем текстурный лейбл в Фотошоп
В процессе изучения этого урока вы научитесь создавать стильное меню для сайта.
Делаем текстурный лейбл в Фотошоп
Шаг 1. Откройте Photoshop и создайте новый документ. Я использовал размер 2600x2600 пикселей. Залейте фоновый слой черным цветом с помощью инструмента Paint Bucket (Заливка)  (G).
Делаем текстурный лейбл в Фотошоп
В этом уроке вы узнаете, как создать стильные удивительно красивые алмазы и научитесь создавать обои из них.
Делаем текстурный лейбл в Фотошоп
Идите в Filter > Sharpen > Sharpen ( Фильтр – Резкость – Резкость). Назовите слой S1. Создайте новый слой под слоем S1 и воспользуйтесь инструментом Прямоугольная область (Rectangular marquee tool) для того, чтобы произвести выделение:
Делаем текстурный лейбл в Фотошоп
 Чтобы приступить к работе, давайте сначала посмотрим на конечный результат.
Делаем текстурный лейбл в Фотошоп
Финальное изображение
Делаем текстурный лейбл в Фотошоп
Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки:
Делаем текстурный лейбл в Фотошоп
Хорошо, начнем с создания нового документа в Photoshop. Я создал новый документ размером 800 × 400 пикселей. Затем выберите подходящие цвета, например, # 161515, # 71777b и залейте документ линейным градиентом.
Делаем текстурный лейбл в Фотошоп
Шаг 1. Создайте новый документ 512x512 пикселей с белым или прозрачным фоновым слоем. Залейте фоновый слой серым (9D9D9D). Создайте вертикальную и горизонтальную направляющие для удобства.
Делаем текстурный лейбл в Фотошоп
Шаг 1: Создание формы Создайте новый документ в Фотошоп, залейте его белым (#FFFFFF). Создайте new layer (новый слой) и используйте инструмент Pen (Перо), чтобы нарисовать фигуру бейсболки (вы можете использовать в качестве  ориентира изображение бейсболки или этот контур, представленный ниже). После чего нажмите Ctrl+Enter, чтобы трансформировать контур в выделение. Затем залейте его цветом #1c1812.
Делаем текстурный лейбл в Фотошоп
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Делаем текстурный лейбл в Фотошоп
Шаг 1. Создайте новый документ. Дважды щелкните на фоновом слое, чтобы открыть стили слоя. Выберите Gradient Overlay (наложение градиента) и используйте черный и темно-синий цвет. Выберите радиальный стиль градиента.
Делаем текстурный лейбл в Фотошоп
Посмотрите на конечное изображение, которое получится после данного урока.
Делаем текстурный лейбл в Фотошоп
Восьмидесятые возвращаются - их влияние ощущается всюду, от моды до музыки, но нигде больше чем в цифровом искусстве.
Делаем текстурный лейбл в Фотошоп
Сегодня шаг за шагом вы учитесь рисовать талисман львёнка в программе Photoshop. Данный урок использует основы применения инструмента Перо (Pen) и инструментов выделения для создания контуров, раскраски и затенения.
Делаем текстурный лейбл в Фотошоп
В этом уроке Photoshop вы узнаете, как нарисовать реалистичный утюг с нуля. Вы также узнаете, как создавать реалистичные тени и блики на пластмассовых и металлических поверхностях.