Главная » Дизайн

Эффект “ауры” вокруг изображения

15 Февраль 2009 просмотров 2,607 комментариев 24


Наверное, многие из вас видели рекламу нового телевизора Philips Ambilight, который “расширяет границы изображения” за счет подсветки за рамками экрана. Выглядит это так:

Philips Ambilight

На мой взгляд, смотрится очень эффектно. Я решила реализовать этот эффект в Photoshop :)

Узнай коэффициент интеллекта бесплатно, пройди тест iq.
Эскхостинг
предоставляет лучший хостинг для блога! Домен в подарок! Предустановленный WordPress!

Исходная картинка (взята отсюда):

Исходное изображение

Эта картинка у нас будет находится на слое 1 (Layer 1), но для работы нам потребуется ее скопировать на второй слой: выделяем Layer 1 и нажимаем Ctrl+C, затем Сtrl+V. Теперь у нас появился Layer 2:

layer 2

Теперь нам необходимо расширить границы полотна, чтобы хватило место для “ауры”. Добавим по 50 пикселей по периметру:

нажимаем Alt+Ctrl+C, откроется окошко Canvas Size (размер полотна). Добавляем к ширине и высоте по 100 пикселей:

Изменяем размер полотна

Теперь перейдем непосредственно к эффекту. Переходим к слою 1 и применим к нему эффект Shape Blur (он и сделает всю основную работую): выбираем в меню Filter -> Blur -> Shape Blur:

Выбор фильтра Shape Blur

В появившемся окошке настроек Shape Blur: ставим радиус 40 и выбираем в качестве фигуры обыкновенный квадрат:

shape blur настройки

Вы сразу увидите как на рабочем полотне вокруг нашей картинки появилась подсветка:

После применения фильтра Shape Blur

Осталось только поработать со слоем 2: переходим на панели слоев к Layer 2 и делаем рамочку с помощью эффета Stroke.

Выбираем эффект stroke

В опциях выставляем такие значения:

Настройки Stroke

Готово!

Эффект ауры вокруг изображения

Понравился урок? Жду ваших комментариев :)

Блогун

Комментариев 24 »

  • ]]>greendazer пишет: ]]>

    Спасибо!  

    Цитировать

  • ]]>Настя Манно пишет: ]]>

    Очень красивый и легкий эффект получился. Спасибо за идейку! :) Уже есть задумка где ее применить.  

    Цитировать

  • ]]>Riska пишет: ]]>

    Отличная идея, сейчас тоже попробую, что то подобное сделать. спс.  

    Цитировать

  • ]]>Автор пишет: ]]>

    Спасибо! Ждем ответного поста с применением? :)  

    Цитировать

  • ]]>ioni пишет: ]]>

    Эффект хорош, я не спорю.
    Только, если можно, пометку на полях – технологии Ambilight не так давно исполнилось 10 лет…  

    Цитировать

  • ]]>Настя Манно пишет: ]]>

    Обязательно! :)))  

    Цитировать

  • ]]>Алексеева пишет: ]]>

    Очень эффектно.Здесь большое поле для творчества.Спасибо что научили :)  

    Цитировать

  • ]]>Владимир ( москва ) пишет: ]]>

    Прикольно, а у меня телик такой)!А с фотошопом ща разберусь)!  

    Цитировать

  • ]]>svistiboshka пишет: ]]>

    =) пиксельное свечение http://bezkomplexov.ru/f/pix.jpg
    так сказать производная )  

    Цитировать

  • ]]>Автор пишет: ]]>

    Тоже классно смотрится :)  

    Цитировать

  • ]]>Михаил пишет: ]]>

    Хороший урок. Кстати, копию слоя можно сделать гораздо быстрее – просто нажав Ctrl+J.  

    Цитировать

  • ]]>svistiboshka пишет: ]]>

    а можно ещё быстрее — просто перетащить слой на кнопку создания нового слоя =) даже на клавиатуре не придется ничего искать  

    Цитировать

  • ]]>Михаил пишет: ]]>

    Двигать мышью по экрану – не быстрее, особенно если монитор больше 17″. А кнопки нужно не искать, их нужно помнить рефлекторно. Тогда всё будет очень быстро.Посмотрите видеозапись с мастер-класса какого-нибудь мастера вроде Кэтрин Айсманн – они все работают одной рукой на планшете, а второй – на клавиатуре.  

    Цитировать

  • ]]>svistiboshka пишет: ]]>

    для дублирования текущего слоя может это и быстрей, для дублирования произвольно потребуется click+сочетание, что уже дольше, я вообще предпочитаю удерживая Ctrl+Alt мышкой перетащить слой в нужное мне место (в панели слоёв) и это будет тоже быстрей чем жать Ctrl+J а потом выбирать нужное положение для слоя  

    Цитировать

  • ]]>Дмитрий пишет: ]]>

    Тоже попробовал. Прикольная аура получается)  

    Цитировать

  • ]]>Доктор Портфолиус пишет: ]]>

    Симпатично получилось, согласен. Но не вполне себе представляю, где это можно использовать?  

    Цитировать

  • ]]>xAnder пишет: ]]>

    Классно) Описал супер, тоже так же сейчас попробывал, и очень даже не плохо получилось) еще раз спасибо)  

    Цитировать

  • ]]>Eugenia пишет: ]]>

    Спасибо за урок. Очень полезно. Пригодится :)  

    Цитировать

  • ]]>Eugenia пишет: ]]>

    Ммм, сразу задам вопрос. Можно ли перевести ваш урок на английский и разместить на своем сайте с указанием вашего авторства, разумеется? Это будет корректно с моей стороны?  

    Цитировать

  • ]]>Автор пишет: ]]>

    Я не против, с удовольствием :)  

    Цитировать

  • ]]>Максим Покровский пишет: ]]>

    Я бы еще рамку добавил вокруг блюра. Сейчас через чур размазано.  

    Цитировать

  • ]]>aedus пишет: ]]>

    строгие квадратированные границы не очень эффектно смотрятся. Хочется мягкости, а не квадратности  

    Цитировать

  • ]]>ingvarr пишет: ]]>

    красиво смотрится  

    Цитировать

  • ]]>черепашка пишет: ]]>

    Очень прикольно получается, мне понравилось. Обязательно где то использую.  

    Цитировать

Комментарии

Добавьте ваш комментарий, или трекбэк с сайта. Вы также можете подписаться на комментарии к этой статье через RSS.

Вы можете использовать теги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Чтобы получить аватарку, зарегистрируйтесь на Gravatar.