Уроки Веб и приложения Оксана Гудкова 2 октября 2009

Волшебная ночь

Сложность урока: Сложный

На создание этого дизайна автора вдохновила картина Винсента Ван Гога «Звёздная ночь», вот что у нас получится после нескольких часов работы.

Посмотреть работу в большем размере можно здесь.

Трудно получить тот же самый результат, но Вы должны использовать свое воображение и хороший вкус, чтобы получить кое-что подобное или лучшее, чем этот проект.

Материалы для урока:

Штормовые облака

Испанский берег

Кисть Гранж

Star field brushes

Star Brushes

Кисточки redheadstock's Clouds II

Луна

Свиток

Воздушный шар

Архив

Шаг 1. Создайте новый документ 960x1000 px, вытащите направляющие инструментом «Перемещение» (Move Tool).  Восстановите цвета по умолчанию, нажав клавишу D и в меню Изображение\Размер холста (Image\Canvas Size) измените размеры документа, увеличьте ширину холста (1460 x 1000 px),  "цвет расширения холста" (canvas extension color)  -  "фон" (мы будем знать, как выглядит наша работа при большом разрешении)

Шаг 2. Вытащите ещё направляющую и используйте её, чтобы заполнить фоновый слой темно-синим Радиальным Градиентом (#0D2B53 - #010D1F), вытащите ещё направляющие. Возможно, что далее мы изменим высоту документа, так что создайте новый слой и на палитре слоёв расположите его под фоновым слоем, залейте цветом #010D1F.

Шаг 3. Так как один из читателей PSDTUTS предложил использовать реальные картины вместо классического фильтра Облаков, мы попробуем воспользоваться этим предложением  в этот раз. Используем изображение штормовых облаков, вставьте на новый слой и назовите «облака»,  измените режим наложения на «Перекрытие» (Overlay). Далее Слой\Слой-маска\Скрыть всё (Layer\ Layer Mask\ Hide all) и применим Радиальный Градиент от белого к черному (#FFFFFF - #000000), протяните его посередине изображения, начиная сверху. Идём в меню Изображение\Коррекция\Уровни чтобы сделать облака более темными.

Шаг 4. Теперь вставьте испанский берег на новый слой, назовите «горизонт», немного уменьшите изображение. Создайте новый корректирующий слой Микширование каналов (Adjustment Layer\ Channel Mixer) и выберите стиль: чёрно-белый с синим фильтром (RGB) (Black & White with Blue Filter (RGB)). Чтобы применить этот эффект только к слою "горизонт", создадим обтравочную маску. Для этого нажмите клавишу Alt и наведите курсор мыши между корректирующим слоем и слоем «горизонт», как только вместо курсора появятся два кружочка (черный и белый), жмите, или клик ПКМ по корректирующему слою на палитре слоёв и из контекстного списка выберите «Создать обтравочную маску».  Далее для слоя «горизонт» поменяйте режим наложения на «Перекрытие» (Overlay).

Шаг 5. Примените к слою «горизонт» Слой\Слой-маска\Показать всё (Layer Mask\ Reveal all) и используя большую чёрную мягкую кисть сгладьте края изображения. Кистью в стиле гранж (автору особо нравятся кисточки 250 и 181) делаем края нерегулярными.

Шаг 6. Используя инструмент «Текст» (Тype Tool), шрифт «Scriptina» напишите "Magic", примените стили слоя: Внешнее свечение\Outer Glow - цвет: (#9EB6D0) и Наложение градиента\Gradient Overlay (#70ABF6, #FFFFFF, #B4CBE7, to #FFFFFF). Выделяем все слои относящиеся к фону и помещаем в группу (Ctrl+G), назовите «фон», текстовый слой помещаем в группу «Logo».

Шаг 7. Теперь добавим звёздочек нашему проекту, Вы можете воспользоваться любыми кисточками, автор же использовал эти Star field brushes . Выберите кисточку 550 из набора и нарисуйте звёзды белым цветом на новом слое «звёзда1» в группе «звёзды», примените стиль слоя Наложение градиента\Gradient Overlay используя цвета (#3A8FEF, #FFFFFF, и  #66C9FC).

Шаг 8. Затем, используя кисточку 615 из набора, добавьте больше звезд на небо на новом слое "звезда2", инструментом «Ластик» (Eraser Tool) с мягкими краями уберите звёзды со зданий, примените стиль слоя Внешнее свечение\ Outer Glow (#8AB2FF) к слою "звезда2".

Шаг 9. Добавим ещё звёзд на слое "звезда2", с помощью ластика удалим лишнее и применим стиль слоя  Наложение градиента\Gradient Overlay, используя цвета  #6AB1D1, #FFFFFF, #94CFED, и #FFFFFF.

Шаг 10. Теперь загрузите эти кисти Star Brushes , выберите кисть 148, размер 65 px, цвет белый и на новом слое «звезда» нарисуйте звезду над буковкой «i», примените стиль слоя Внешнее свечение\ Outer Glow (#00BCF9).

Шаг 11. Дублируйте текстовый слой "Magic" (Ctrl+J) и напишите слово "Night", примените стили слоя Внешнее свечение\ Outer Glow  и Наложение градиента\Gradient Overlay (#F9DA5B, #FEAE00, и #FFD403).

Шаг 12. Добавим облака. Загрузите кисточки redheadstock's Clouds II, выберите кисть под номером 2464, размер 960px, установите цвет переднего плана #234B7F и рисуем одно облако на новом слое «облако1», поместите в группу «фон», немного трансформируйте облако (Ctrl+T)

Шаг 13. Используя инструменты «Осветлитель» (Dodge Tool) и «Затемнитель» (Burn Tool) осветлите область около букв и затемните основание облака, измените непрозрачность (Opacity) для слоя  «облако1» на 50%.

Шаг 14. Добавьте ещё одно облако на новый слой «облако2», вы можете нарисовать любое облако, используйте цвет #5F83A5, осветлите нижний край облака.

Шаг 15. Повторите предыдущий шаг, но на этот раз используйте другую кисточку и цвет #36638C, измените размер и поработайте инструментами «Осветлитель» (Dodge Tool) и «Затемнитель» (Burn Tool).

Шаг 16. Инструментом «Ластик» (Eraser Tool) с мягкими краями большого размера удалите основание слоя «облако1» чтобы создать эффект исчезновения.

Шаг 17. Добавим фон для контента, используя инструмент «Прямоугольник» (Rectangle tool) в режиме фигур нарисуйте прямоугольник, цвет (#0A1D37) на новом слое ниже группы «облако» (прямоугольник находится в пределах направляющих). Далее применим маску Слой\Слой-маска\Показать всё (Layer\Layer Mask\ Reveal all), залейте чёрно-белым линейным градиентом, вытащите направляющие.

Шаг 18. Добавьте другой прямоугольник, цвет #091525 с правой стороны, примените маску и добавьте градиент.

Шаг 19. На этом шаге завершим дизайн шапки, добавим некоторые детали. Вставьте луну на новый слой "moon-rss", трансформируйте и добавьте жёлтый оттенок (Ctrl+U), примените стили слоя Внешнее свечение\Outer Glow и Внутреннее  свечение\Inner Glow.

Шаг 20. Добавьте небольшое облако, цвет #7997B3 на новом слое, на палитре слоёв расположите выше слоя с луной, инструментом «Ластик» (Eraser Tool) с мягкими краями сотрите края  облака.

Шаг 21. Добавьте классическую кнопку RSS (#DCA30B) между слоем с луной и облаком (принцип создания RSS кнопки вы можете посмотреть здесь), примените стили слоя Наложение градиента\Gradient Overlay, Внешнее свечение\Outer Glow, Тень\Drop Shadow. Добавьте звезду (шаг 10).

Шаг 22. Вставьте изображение со свитком на новый слой, будем использовать как фон для навигационной панели. Трансформируйте и примените Деформацию Флагом  (Flag warp).

Шаг 23. Инструментом «Затемнитель» (Burn Tool) затемните участки свитка.

Шаг 24. Чтобы улучшить структуру свитка, примените стиль слоя Наложение градиента\Gradient Overlay (#045F96 и #FBF4BD) и Перекрытие узора\Pattern Overlay.

Шаг 25. Добавим тень свитку. Вы можете применить стиль слоя Тень\Drop Shadow или применить следующий способ: дублируйте слой со свитком (Ctrl+J), на палитре слоёв расположите его под оригиналом, далее (Ctrl+U) и ползунок Яркость (Lightening) на  -100, примените Фильтр\Размытие\Размытие по Гауссу  (Filter \Blur\Gaussian Blur) с небольшим радиусом, примените деформацию искажение.

Шаг 26. Добавим облако поверх свитка на новом слое, трансформируйте, осветлите, затемните (шаг 15). Инструментом «Текст» (Тype Tool), шрифт Georgia – Italic, цвет #0B1827 – для стандартных ссылок и цвет #211808 для ссылок, изменяющих цвет при наведении мышки. Добавьте звёзды и линии, непрозрачность для слоя со звёздами понизьте до 40%.

Шаг 27. Создайте новый слой над слоем со свитком, выберите  «Кисть» (Brush Tool) из стандартного набора и сделайте акварельные мазки разными цветами.

Шаг 28. Добавьте текст к RSS, шрифт Aria, 10 px, цвет жёлтый (#F2C90D) и белый (#FFFFFF), не забываем использовать текст с параметрами сглаживания Anti-aliasing или None (палитра «Символ»), браузеры не поддерживают сглаживание текста.

Шаг 29. В качестве дополнительных деталей добавим воздушный шар, примените стиль слоя Наложение цвета\Color Overlay (#1F416E – режим наложения (Blending Mode): перекрытие (Overlay)), немного затемните левую сторону воздушного шара.

Шаг 30. Затем используя кисть 615 из набора Star field brushes (см. Шаг 8), добавляют больше звезд выше воздушного шара и свитка, рисуем линию 3 рх инструментом «Линия» (Line Tool и ластиком уберём лишние звёзды.

Шаг 31. Пишем название и дату на новом слое "Post", добавляем звезду возле даты.

Шаг 32. Добавляем информацию. Добавим изображение с левой стороны 200 px на 200 px, примените стиль Обводка\Stroke, размер 1px и краткое описание с правой стороны, также справа добавим комментарии просмотра. Для области комментариев, создайте новую группу под названием "Комментарии" и добавьте маленький фон с небольшим облаком и звездами. Нарисуйте инструментом «Линия» (Line Tool) линию, цвет (#1D324F). Дублируем группу "Post", добавляем контент. Увеличьте высоту документа, как в шаге 1., увеличьте высоту фонового слоя и слоя, который мы создавали в шаге 2.

Шаг 33. Создадим форму для поиска в правой части. Создайте новую группу, в ней создайте новый слой, рисуем новое облако, как показано ниже. Используя инструмент «Прямоугольник со скругленными углами» (Rounded Rectangle Tool), нарисуйте фигуру, как показано ниже, примените стиль слоя Обводка\Stroke, размер 1px, цвет (#697372), установите Заливка (Fill) 50%.

Шаг 34. Добавьте звёзд выше слоя с облаком, удалите лишние звёзды. Дублируйте слой с воздушным шаром, далее в меню Редактирование\Трансформирование\Отразить по горизонтали (Edit\Transform\Flip horizontal), расположите этот слой в группе «поиск». Добавьте текст, шрифт Georgia Italic, цвет жёлтый (#D5A934). Добавьте кнопку "Go!" и яркую звезду позади текста.

Шаг 35. Добавьте текст, названия, ссылки, и поместите каждую секцию в отдельную группу, не забываем про звёзды и направляющие.

Шаг 36. Удалим часть фона с помощью маски слоя в нижней части справа, добавьте облака и звёзды, дублируйте воздушный шар ещё раз.

Шаг 37. Создадим подвал, сделаем края более мягкими – создайте маску слоя и пройдитесь мягкой кисточкой. Добавим облака, тёмное облако (#0B1C38) и маленькое облако (#223E63). Облака будут фоновым изображением, так что постарайтесь избежать пересечения с верхней направляющей, помещаем все слои в группу «подвал»

Шаг 38. Затемняем облака, рисуем звёзды, стираем лишнее

Вот и всё! Автор надеется, что Вы найдёте в этом уроке много полезного для себя.

Желаю удачи!

Автор: Alvaro Guzman

Источник: www.psd.tutsplus.com

Комментарии 135

Спасибо за урок,

Спасибо за урок)

Ох, и повозилась но оно того стоило)) спасибо за урок)

Думала, что никогда не закончу, столько с ним возилась...Но урок действительно очень классный и финальный результат потрясающий! Спасибо автору.

Отличный результат!

Было не легко. Спасибо автору за урок!

Спасибо! Увлекательный урок!)

Спасибо за урок)))

С первых дней на сайте заинтересовал этот урок.

Спасибо за работу!Повозиться действительно пришлось не мало.

Пришлось повозиться)

Трудный и очень интересный урок, спасибо:)

Спасибо за урок

Спасмбо за прекрасный урок!

Спасибо за прекрасный урок и подробное объяснение!

Я влюбился в этот шаблон :)
Теперь буду верстать и перепрограммировать под тему WordPress! Обязательно! Но сначала подредактировать тему - чтобы было не только красиво но и практично!

Я решила сразу после "Основы работ" перескочить на "Усложненные". И, в общем, вот что получилось. Это моя первая серьезная работа в фотошоп) Очень долго с этим провозилась, практически целый день... Но очень-очень много узнала нового для себя и полезного.

Очень красивый урок!

Огромное спасибо за перевод столь шикарного урока

Спасибо, урок был шикарный!

Как то так :)

Я так понял что здесь собрались уже продвинутые веб мастера? Урок не просвещённому понятен на половину не понятно с направляющими. зачем они надо. как делать боковую панель, как удленнять вниз с сохранением фона. Короче, не получилось ни чего, а главное в каком формате сохранять, так как при открытие сохраненного файла в формате GIF пишет постоянно ошибку. типа не открыть плеером.

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

Спасибо за такой очень полезный урок!!Получается очень красиво.

Спасибо большое! Урок очень полезный!

Действительно "Волшебная ночь". Очень долго делала.

Здорово!

Спасибо! Получилось очень красиво!

мне самому очень понравилось;)

Еще 30
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее