Батоноблог

Сегодня я продолжаю руководство по фотошопу небольшим собственным уроком! Итак, мы будем говорить об освещении на веб-страницах, акцентировании и выделении с помощью него, и реализации всего этого дела в… фотошопе.

Для затравки — сайты о том, что я имею в виду. Собственно, смотреть нужно только на внешний вид, а содержание сейчас для нас не имеет никакого смысла.

Освещённые и яркие

okb.es	45royale.com
rareview.com	newism.com.au
wakeuptowhatsnew.com	ditley.com
rustybones.net	starbuckscoffeeathome.com

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

Теперь посмотрим, как подобное делается в фотошопе.

Blend Modes

Нужный эффект достигается простыми тайными знаниями о режимах смешивания (blend modes).

Прямые источники света

Рассмотрим вариант, когда на странице сидят источники света, которые светят прямо на нас. Объяснять буду в картинках.

Создаём чёрный фон и тыкаем на четыре разных слоя 4 ярких красивых тыка обычной кисти. Это наши будущие светлячки.

Теперь самый важный момент :) Что бы заставить вести их подобно реальным источникам света, что бы они смешивали свет друг друга, нужно поставить на всех слоях режим смешивания «Освещение» (blend mode «Screen»)

Всё. Теперь у нас есть полноценные светлячки, совмещение которых будут давать красочное сочное сочетание света.

Когда окошки логотипа винды сближаются очень сильно, середина светит белым светом :)

Супер красочное и яркое меню (для текста выставлено внешнее свечение также со смешиванием «освещение»)

Источник со стороны посетителя

Другой, противоположный вариант — размещение источника со стороны посетителя. Источники как бы светят в монитор, и мы улавливаем отражённый (и рассеянный) свет от них.

Создаём тёмный фон. Кидаем на него шум + я еще добавил эффект Crosshatch. В общем, просто создаём какую-то фактуру. Мы её будем освещать прожекторами.

Кидаем на фон белые кружки на разные слои — следы прожекторов. Теперь есть два варианта:

• Если фон у нас глянцевый, и отражает много света — ставим для кружков режим смешивания «Наложение» (blend mode «Overlay») или «Яркий свет» (Vivid light). При последнем кружки нужно сделать чуть темнее белого, иначе получите полную белую засветку.
• Если фон у нас матовый, отражает мало света — «Мягкий свет» (Soft light)

Глянцевый фон. Наложение. Overlay.

Матовый фон. Мягкий свет. Soft light.

Вот так всё просто.

Дополнение к прошлому параграфу.

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

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

И постовым для данного поста становятся: Красивые и оригинальные flash-сайты. Сайты, которые удивят Вас креативными идеями и грамотным воплощением этих идей.

Кроме данной статьи, по этой теме вам будет интересно:

• Чисто шрифт
• Акция! Дружественное предложение «Блогролл 2.0»
• Лучшие фотошоп уроки по созданию сайта

Ссылки, иногда в тему:

Спасибо Вам за упоминание о статье у себя:

Также, вы можете быть в курсе последних обновлений Батоноблога, подписавшись на мою RSS-ленту напрямую, или по почте; добавив меня в Твиттере, или через Google Buzz, где, кроме материалов блога, я выкладываю множество интересных и полезных ссылок о дизайне и веб-технологиях.

RSS rss2email Twitter Google Buzz