Рубрика: Photoshop Уроки | Урок прочитали: 501
 (голосов: 0)

Цветочная шапка для сайта

В данном уроке мы будем учиться создавать «цветовую» шапку для сайта.

Шаг 1. Создайте новый документ, размером 760x480 пикселов, и заполните его темно-синим цветом, с показателем: 152А31. Активизируйте инструмент Rounded Rectangle (Прямоугольник со скругленными углами) и установите радиус скругления  - 15 пикселов. Установите в цветовой палитре черный цвет в качестве основного, и создайте округленный прямоугольник поверх темно-синего фона.

Поверх черного прямоугольника создайте еще один, только меньшего размера, и заполните его цветом, с показателем: 8AD76B

Шаг 2. Установите в цветовой палитре белый цвет в качестве основного и активизируйте инструмент gradient tool (Градиент). Тип градиента установите linear gradient (Линейный).

В  редакторе градиента  установите тип: foreground to transparent  (От основного к прозрачному).

Рис.2.1

Шаг 3. Активизируйте выделение слоя с зеленым прямоугольником. Для этого, удерживая нажатой клавишу <Ctrl>, кликните по иконке со слоем с зеленым прямоугольником. После этого действия выделение будет загружено.

Не снимая выделения, создайте новый слой над слоем с зеленым прямоугольником. А для выделения примените сжатие: select > modify > contract  (Выделение – Модификация – Сжать), значение установите – 5 пикселов, и на этом новом слое создайте прозрачный градиент.

Шаг 4. Переместите прозрачный градиент таким образом¸ чтобы он совпал с вершиной зеленого прямоугольника.

У Вас должно быть 3 слоя. Разместите их в папке, названной "bar" и создайте новую папку с названием «Изогнутые формы». Для того, чтобы объединить слои в группу, выделите необходимые слои при нажатой клавише <Shift>,  и после этого нажмите комбинацию клавиш <Ctrl>+<G>. Группа будет создана, и необходимые слои будут находиться внутри нее.

Шаг 5. Теперь мы будем создавать разнообразные изогнутые формы. Для этого, создайте новый слой и активизируйте инструмент pen tool (Перо).

Шаг 6. Первую кривую начните рисовать, располагая ее немного ниже зеленого прямоугольника.

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

Шаг 7. Активизируйте инструмент convert point tool (Угол) и тяните сегмент левой стороны второй кривой к центру. Это позволит Вам создать другую кривую.

Вам нужно будет снова выбрать инструмент convert point tool (Угол), для того, чтобы создать третью кривую

Шаг 8. Создайте четвертую кривую и соедините ее с отправной точкой.

Один путь закрыт, и теперь нужно контур преобразовать в область выделения.

Шаг 9. Для наших кривых создайте папку и назовите ее «Кривые формы» и заполните выделение кривой черным цветом.

Шаг 10. Дублируйте только что созданный слой с кривой формой черного цвета. Загрузите выделение зеленого прямоугольника, и, наложите их на зеленый прямоугольник.

Шаг 11. Загрузите выделение зеленого прямоугольника, инвертируйте выделенную область, и нажмите клавишу <Backspace>. Таким образом, нижнюю часть кривых форм мы удалим, а верхние части кривых останутся на зеленом прямоугольнике.

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

Шаг 13. Работа над кривыми закончена.

Преобразуйте папку с кривыми в один слой, и перенесите этот слой в папку "bar".

Шаг 14. Теперь Ваше изображение станет похоже на этот рисунок:

Шаг 15. Далее, мы будем добавлять яркие пятна к заголовку шапки для сайта. Для этого создайте новую папку по названием "circles" (Круг). Создайте новый слой в этой папке и при помощи инструмента Elliptical marquee Tool (Овальная область выделения), нарисуйте небольшой круг и заполните его серым цветом.  Для выделения примените сжатие: select > modify > contract  (Выделение – Модификация – Сжать) и значение установите – 3 пиксела. В цветовой палитре установите цвет переднего плана зеленый, а цвет заднего плана - светло-зеленый. Используйте инструмент gradient tool (Градиент) линейного типа для того, чтобы заполнить цветом созданное сжатое выделение:

Шаг 16. Дублируйте круги несколько раз и разместите их на тех формах черного цвета, которые мы рисовали пером:

Преобразуйте папку с кругами в один слой, и обрежьте наши круги таким же способом, каким мы обрезали формы черного цвета, нарисованные пером в начале урока:

Шаг 17. Удалите части кругов за пределами фигур, нарисованных пером:

Шаг 18. Теперь к шапке нашего сайта мы добавим цветовое меню. Его можно выполнить по этому уроку. Скачать его psd файл автор предлагает здесь: цветовое меню.

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

Шаг 20. Для большей выразительности, к цветкам можно применить Цветовой тон и насыщенность: Image > Adjustments > Hue / Saturation (Цветовой тон/Насыщенность).

Шаг 21. Все слои, которые находятся в файле с цветовой шапкой, объедините в один.

Шаг 22. После того, как Вы объедите все слои, у Вас должно получиться вот что:

Шаг 23. Объединенные слои цветовой шапки поместите поверх созданного ранее зеленого прямоугольника.

Шаг 24. Мы практически подошли к завершению урока. Для того, чтобы нашей шапке для сайта придать законченный вид, мы добавим простую эмблему, заголовок и содержание. Шрифт для эмблемы Вы можете скачать здесь: шрифт. Параметры настройки шрифта показаны на рисунке:

Шаг 25. Для того, чтобы создать границу вокруг текста, загрузите выделение для слоя с текстом: select > load selection (Выделение – Загрузить выделенную область). Далее выберите: Выделение – Модификация – Граница. Размер ширины границы – 4 пиксела. Теперь созданное выделение границы заполните темно-синим цветом с показателем: 385963. Это нужно сделать на новом слое.

Шаг 26. Используя большой дополнительный цветок (шаг 19), можно украсить им область вокруг эмблемы. Создайте дубликаты этого цветка, и, используя инструмент transform tool (Трансформирование), придайте цветкам разные размеры: edit > free transform (Редактирование – Свободное трансформирование). Изменяйте оттенок цветка: Image > Adjustments > Hue / Saturation (Цветовой тон/Насыщенность).

Шаг 27. Возьмите зеленую овальную форму из файла с цветовой шапкой, и поместите на нее дубликат цветка:

Для текста заголовка можно установить такие параметры:

Шаг 28. Создайте границу заголовка, как в шаге 25:

Параметры для текста можно применить такие, как показаны на рисунке:

p>Шаг 29. Теперь можно продолжить создавать и другие секции. Посмотреть полноценное изображение шапки сайта: цветовая шапка сайта.

Урок завершен.
Желаю Вам успехов!

Перевод:  Луговских Татьяна
Ссылка на источник

           

Похожие файлы и публикации:

Цветочная шапка для сайта
В этом уроке мы будем создавать стильную черную навигацию для сайта. Вот так она будет выглядеть в конце урока:
Цветочная шапка для сайта
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Цветочная шапка для сайта
В данном уроке мы будем учиться создавать информационный блок для сайта.
Цветочная шапка для сайта
Сегодня мы будем учиться делать  привлекательное портфолио для веб-сайта.
Цветочная шапка для сайта
В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта.
Цветочная шапка для сайта
В этом уроке я расскажу Вам о том, как создать торшер с нуля.
Цветочная шапка для сайта
В этом уроке я расскажу, как создать иллюстрацию со скрученными световыми лентами.
Цветочная шапка для сайта
Вот такой домик получится после данного урока
Цветочная шапка для сайта
Сегодня мы будем рисовать вот такой карандаш.
Цветочная шапка для сайта
В процессе изучения этого урока вы научитесь создавать стильное меню для сайта.
Цветочная шапка для сайта
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Цветочная шапка для сайта
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Цветочная шапка для сайта
Изображение - существенный элемент в наборе любого дизайнера. Независимо от того - простой Ваш проект или что-то эксклюзивное, хорошее изображение будет всегда кстати. В этом уроке продемонстрированы способы того, чтобы помочь Вам создать своё собственное глянцевое изображение.
Цветочная шапка для сайта
Слейте изображения.  Layer – Merge Layers (Слой – слить слои). Примените автоматическую тоновую коррекцию (уровни). Image – Adjustments – Auto levels (Изображение – Коррекция – Автоматическая тоновая коррекция) (Shift + Ctrl + L). Перейдем к меню Channels (Каналы), которое  находится во вкладке рядом с панелью слоев,  Duplicate (дублируем) Blue(Синий) канал.
Цветочная шапка для сайта
В этом уроке Вы узнаете, как создать иконку в виде дома. Вот так будет выглядеть иконка в конце этого урока:
Цветочная шапка для сайта
Привет друзья! Вы знаете, как создать изображение женской туфельки в программе Фотошоп? Давайте посмотрим, как это можно сделать.
Цветочная шапка для сайта
Шаг 1. Создайте новый документ размером 500px на 400px с разрешением 72 dpi в режиме RGB.
Цветочная шапка для сайта
Привет друзья! Вы знаете, как в программе Фотошоп создать изображение электронных часов? Если нет, то я предлагаю освоить эту несложную технику рисования пером!
Цветочная шапка для сайта
Иногда, бывает нужно быстро применить какой-либо эффект и в этом на помощь придут экшены. Одним нажатием кнопки, Вы без труда воссоздадите нужный эффект.