Рисуем неоновый эффект (Фотошоп)

glow0.gif

Недавно в одной своей работе мне нужно было изобразить эффект неона. Порывшись в ФШ туториалах, нашла нечто похожее. По-английски такая штука называется Glow Effect. Выглядит очень красиво и кажется сложным для повторения. Но на самом деле все очень просто и доступно. Основной принцип: вначале используется инструмент Перо (Pen Tool), а затем к нему применяется свойство выбранной заранее кисти (Paintbrush Tool). Но обо всем по-порядку.

Создадим новый документ и зальем его темным фоном, например #1C1C1C. Все светящиеся эффекты очень красиво и натурально выглядят на черном или слегка подсвеченном черном фоне.

glow1.gif

Рисовать мы будем обычную кривую линию, но при этом светящуюся, словно след от пролетевшего сумасшедшего метеора. Включаем инструмент Перо (Pen Tool). При этом в свойствах инструмента должно быть включено Paths.

glow3.gif

Рисовать пером не просто, а очень просто. Ставите в том месте, откуда начнется линия первую точку, затем на некотором расстоянии ставите вторую точку и, не отпуская левой клавиши мышки, “тянете линию” в какую-нибудь сторону. В этот момент вы можете, двигая мышкой в разные стороны, изменять кривизну получившегося отрезка. Когда добьетесь нужной кривизны, отпускаете кнопку мыши, ставите следующую точку и действуете точно так же. У меня на рисунке получилось четыре таких точки.

glow2.gif

На следующем шаге выбираем инструмент Кисть (Paintbrush Tool). Кисточку возьмем с жесткими краями, но тонкую, в 5 пикселей толщиной. При этом цвет можно выбрать любой, так как потом мы все равно его изменим при помощи эффектов.

glow4.gif

Теперь нужно снова переключиться на инструмент Перо (Pen Tool). Добавим новый слой. Затем кликаем правой клавишей мышки по нашей линии и в выпадающем меню выбираем пункт Stroke Path. Появится диалоговое окно с соответствующим названием. В окне уже будет по-умолчанию выбран инструмент Кисть. Обязательно ставим галочку у Simulate Pressure для того, чтобы края нашей линии истончались “из пустоты в пустоту”. А теперь снова кликаем правой клавишей мышки на любом участке линии и в выпадающем меню выбираем пункт Delete Path. Получаем вот такую симпатичную загогулину:

glow5.gif

Яркий зигзаг на темном фоне уже кажется светящимся. Усилим этот эффект и добавим капельку гламура. Кликнем по иконке Add a layer style и последовательно добавим следующие эффекты:

glow6.gif

glow7.gif

glow8.gif

Последний из примененных эффектов Color Overlay делает зигзаг “раскаленным” добела. Именно по этой причине мы при выборе кисточки использовали первый попавшийся цвет. На выходе получаем вот такой красивый эффект

glow9.gif

Mannodesign

Похожие записи:

Комментарии (40)

  1. Павел

    Спасибо. Просто и понятно. Действительно линия как будто раскаленна. Очень красиво и самое главное просто делается.

    [Ответить]

  2. Кирилл Erlang

    Действительно, полезно. Спасибо, Настюш.

    [Ответить]

  3. Настя Манно

    Рада, что вам понравилось :) В следующем уроке перейдем от гламура к старым и потрепанным картинкам в стиле гранж :)))

    [Ответить]

  4. Найкрис Кроули

    Люблю этот эффект, а вот приминить нигде не удается :(

    “Настя Манно - веб-дизайнер, в узких кругах фигурирует под прозвищем “Гранж”, которое получила за любовь и частое использование данного стиля в своих работах”
    Выдержка из засекреченых документов шпиёнов блогсферы.

    [Ответить]

  5. Настя Манно

    :))) Настя Гранж - звучит неплохо!

    [Ответить]

  6. Найкрис Кроули

    Я рад, что ты оценила ;)

    [Ответить]

  7. Fr34k

    Привет Настюша, спасибо за размещение банера. извени но оч. похоже http://psdtuts.com/tutorials/tutorials-effects/advanced-glow-effects/(Англ.)

    [Ответить]

  8. Ildar

    Мне кажется что я никогде не освою все премудрости фотошопа, хотя итак знаю довольно таки мнего, но постоянно появляется что то новое

    [Ответить]

  9. vteatre

    Отличный эффект! Люблю темные фоны.

    [Ответить]

  10. Настя Манно

    Fr34k, привет! Конечно похоже! Я этот пример и брала за основу. Но так как это не дословный перевод, да и картинки использовала свои собственные, то и не стала давать ссылку на тот урок. Тем более, что он не единственный в своем роде :)

    [Ответить]

  11. Fr34k

    Настюша, я ведь нечего и не гворю =). Ты не подумай я нечего нехотел сказать тем камментом. просто почемуто спомнилось. Я даже за чтобы люди переводили или осуществляли какиета туторы по своем и выкладывали. Так что не всдумай обижаться ;)

    [Ответить]

  12. art

    о круто. теперь знаю как мигающую неоновую вывеску в мультике сделать (:

    [Ответить]

  13. Настя Манно

    Да я и не обижаюсь :) Лишнее это. Была бы польза от урока - вот что важно, а все остальное - суета :)))

    [Ответить]

  14. drsof

    Хороший урок для новичков, главное простой и интересный… молодец)

    [Ответить]

  15. Игорь

    Блин у всех фотошопы с англ переводом, а у меня русский. Что делать??? сам я новичек в нем, поэтому пока еще плохо разбираюсь…((((

    [Ответить]

  16. noir

    спасибо,я впринципе разобралась,но не доконца,тк у меня тож на русском все((

    [Ответить]

  17. Timon

    чувствую себя тупым. Почему, если я повторяю всё, что написано, у меня обязательно что-то да не получается. Тут контур удаляется, там к слою фильтр не применяется. *WALL* Убейте меня!!!

    [Ответить]

  18. Настя Манно

    Timon, все получится :) Главное - не спешить.

    [Ответить]

  19. Вадим

    Timon, в моем понимании, главная цель всех уроков - не повторить все от и до, а попытаться понять и начать думать. От того, что Вы повторите все по шагам, полностью воссоздав картинку - легче не станет. В этом случае, любое отсутпление на пол шага поставит вас в тупик.
    В фотошопе, часто одно и тоже можно выполнить несколькими способами. Возможно будут какие-то различия, но в целом будет похоже. Не получается, так как написано, попробуйте по другому. После пары дней тренировок и экспериментов, вы начнете рисовать то же самое уже не задумываясь, и тем, что будет под рукой. Утрирую, конечно, но смысл, надеюсь понятен.

    [Ответить]

  20. zakazchik81

    отличный фокус…..побольше таких уроков.ну или подобных связаных с гламуром …..Не повредит…..

    [Ответить]

  21. FOFOTO.RU :: Новости :: Рисуем неоновый эффект (Photoshop)

    […] материал c сайта: http://www.mannodesign.com/risuem-neonovyj-effekt-fotoshop […]

  22. Джон

    Спасибо огромное! 3 года в фотошопе работаю, и все узнаю и узнаю и узнаю))

    [Ответить]

  23. иван

    Блин это раскаленый эффект не получается))))) у мя другая версия сижу голову ломаю

    [Ответить]

  24. Михаил

    Привет, Насть. устанавливаю фотошоп, делаю все так же, все нормально, пытаюсь сделать во второй раз - у меня получается просто как буд-то простая линия закрашенная, без концов ((( Что делать? при переустановке 1 раз нарисую дальше опять так же(
    фотошоп cs2, английский. вроде рабираюсь в фотошопе

    [Ответить]

  25. Настя Манно

    Привет, Миш! Скорее всего глюк ФШ. Попробуй другую версию установить.

    [Ответить]

  26. Юлия

    Не получается закорючку сделать, stroke path - выделяются только точки, а не линия, соответственно при удалении только их и видно(( подскажите, плиз, как быть!

    [Ответить]

  27. Александры

    Раньше избегала работы с пером т.к.считала её очень сложной. Огромное спасибо!

    [Ответить]

  28. Анюта

    Я наверное полный лох…но у меня не получилось))нервы сдают,помогите пожалуйста я уже полтора часа сижу несколько раз с самого начала делала,но опять таж херня получается…все идет гладко до Add a layer style..настроив Drop Shadow и outer glow с нашей загогулиной ничего не произошло,но Перейдя к Color Overlay Весь фон резко стал Красным…не понятно мне=(я наверное какой то мелочи не замечаю, Настюш помоги пожалуйста)))

    [Ответить]

  29. Настя Манно

    Анюта, возможно вы применяете стили не к загогулине, а к слою с фоном?

    [Ответить]

  30. Анюта

    Настенька, а вы не подскажите как применить к загогулине?…вполне возможно что причина именно в этом)))я только учусь и вот видите узнаю все потихоньку))

    [Ответить]

  31. Настя Манно

    В палитре слоев нужно сделать активным слой с этой загогулиной. Просто кликнуть на нем левой кнопкой мыши.

    [Ответить]

  32. Анюта

    Настюш! ты прелесть, спасибо большое тебе!!!!

    [Ответить]

  33. Keyn

    Спасибо, давно искал что-то подобное, хотел сделать светящийся город. Думал не очень то простая задача, оказалось наоборот )

    [Ответить]

  34. Леха

    Огромное спасибо!!! Наконец понял суть, как это делается)))) Хотелось попробовать, да не знал как.

    [Ответить]

    Настя Манно

    @Леха, не за что, Алексей! :) Рада, что у вас получилось

    [Ответить]

  35. Маргарита

    Спасибо, Настенька!Благодаря Вашему описанию я,наконец,сделала это свечение,а на волне успеха,окрыленная,еще и елку с шарами сделала по этой методе.Боюсь,что теперь у меня все сиять будет.Я измучилась с этим свечением - десятки уроков,которые я пыталась сделать,ничего кроме раздражения не дали,а Ваш урок вернул мне уверенность в себе.Успехов Вам и мое почтение.

    [Ответить]

  36. Аее))

    спасибо большое, все получилось =)

    [Ответить]

  37. Жанат

    А у меня не получается. когда выбираю пункт “выполнить обводку контура” и ставлю галочку имитировать нажим, у меня одинаковая ширина по всей линии все равно получается. в чем дело? кто подскажет?

    [Ответить]

  38. abishka

    я не понял что такое Stroke Path и Delete Path у меня всё на русском

    [Ответить]

    Настя Манно

    @abishka, Обводка контура и Удалить контур

    [Ответить]

Пожалуйста, оставьте ваш комментарий. Спасибо!