Главная » Искусство » Рисуем «карбон» в Photoshop.

Рисуем «карбон» в Photoshop.

Не знаю какое кол-во раз у меня просили нарисовать карбон. Ну в смысле эффект карбона на ту или иную деталь, будь-то кнопка на сайте, капот авто на фото или еще что.
Эпоха карбона, чувствую, закончиться еще не скоро.
На простом примере покажу, и постараюсь разжевать, основы создания этого заветного карбона. :)

Что из себя представляет ?
Это диагональные, белые, полупрозрачные полосы.
Всё гениальное — просто.

Давайте возьмем к примеру простую кнопку для сайта, для которой необходимо сделать эффект карбона.

Заходим в Photoshop. Создаем прямоугольную кнопку произвольного размера, закрашиваем черным цветом:

1

Создаем новый документ (File -> New, или просто Ctrl+N), задаем размер 5x5px. Здесь мы создадим нужный Pattern (шаблон карбона, который позже добавим на кнопку).
Создаем новый слой, поверх слоя Background, назовем его karbon.
Слой Background делаем невидимым:

2

Выделяем слой karbon, выбираем инструмент Карандаш (Pencil Tool) задаем размер 1px и белым цветом по диагонали рисуем квадратики, что бы получилась диагональная линия:

3

На скрине фон черный, это для того что бы тебе было понятней. У тебя он должен быть прозрачным.
Нарисовали.
При выделенном слое karbon, берем инструмент Rectangular Marquee Tool и выделяем всю доступную область:

4

Теперь идем Edit -> Define Pattern, даем имя нашему шаблону, жмем ОК.
Всё шаблон готов, возвращаемся к нашей кнопке.

Конечно методов применения может быть очень много, тут уже фантазируйте, экспериментируйте.
Мы же просто наложим эффект карбона на всю черную часть кнопки.
Создаем новый слой, назовем его karbon1:

5

С помощью Rectangular Marquee Tool выделяем нужную область (на которую нужно накинуть карбон). Далее идем Edit -> Fill -> Use: выбираем Pattern -> Чуть ниже выбираем созданный нами ранее шаблон (см. скрин)

6

После чего жмем ОК и выделенная область закрашивается нашим шаблоном, т.е. карбоном:

7

Теперь нам нужно всего лишь поиграться с прозрачностью слоя karbon1. Например задать параметр Opacity на 25%:

8

Получаем:

9

Собственно всё. Дальше уже как захотите. Добавить текст, блик или еще что.
Я например добавил текст, вышло:

10

Будут вопросы, задаем в комментариях. :)

На правах рекламы!
Собрался в Женеву на новогодние праздники? Рекомендую почитать .

Запись опубликована в рубрике Искусство с метками , . Добавьте в закладки постоянную ссылку.

6 комментариев: Рисуем «карбон» в Photoshop.

  1. Gallaher говорит:

    Витя, спасибо огромное за мануал!) Очень помог мне! Вроде бы все получается, нужно еще эксперементировать).

    А вот вопрос, то, что ты нам кнопку делал, ты там более серый цвет выставлял, или что? Она немного отличается).

  2. extezy говорит:

    @Gallaher: Многое зависит от фона. Т.е. от цветовой палитры самой кнопки. От этого и может отличатся оттенок «карбона». :)

  3. Gallaher говорит:

    extezy, слу, а вот еще вопрос у меня назрел). Не подскажешь, что за эффект на этих аватарках?


    И что это за рамочка? Я перерыл фотошоп, не нашел… Вижу, что эффект этот похож на эффект «карбона, но все-равно не получается…

  4. extezy говорит:

    @Gallaher: Это этот-же эффект. :)
    Вот например смотри на мою аву — , только тут я делал линии не диагональные а горизонтальные.

    А рамка. Та к примеру двойной Stroke.
    Создал новый слой, выделил всю область, применил Stroke белого цвета в 3px.
    Над этим слоем создал еще один слой. выделил всю область и применил Stroke черного цвета в 1px.
    Вуаля —

  5. говорит:

    мде.. я может и не профи дизайна(больше по верстке даже) но этот карбоновый паттэрн у вас кривой, такие лет 5 назад были круты. Гляньте на текстуру настоящего карбона-то…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>