Уроки Веб и приложения Татьяна Луговских 6 мая 2010

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

Сложность урока: Средний

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

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

Архив

Шаг 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. Теперь к шапке нашего сайта мы добавим цветовое меню. Его можно выполнить по этому уроку

Шаг 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. Теперь можно продолжить создавать и другие секции. Посмотреть полноценное изображение шапки сайта: цветовая шапка сайта.

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

Автор: flash-game-design

Источник: www.flash-game-design.com

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

Урок офигенный,очень понравилось!делала пару часов,хочу побольше таких ярких уроков!Спасибо за перевод!

Спасибо! Долго же траву делала...)

Спасибо за урок! вот что получилось у меня:

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

Спасибо!

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

это мой вариант

Спасибо за урок. Правда перо вытянуло из меня все жилы:)
P.S: По ссылке "Скачать его psd файл автор предлагает здесь: цветовое меню." требуется регистрация:(

Урок креативный и то что надо для таких как мы - продвинутых людей. Респект автору и переводчику..
Постараюсь на днях выложить свою работу

по-моему классно получилось! Спасибо за урок!

Спасибо классный урок=))) Главное терпение в достижении цели, и все получиться! Думаю со мной многие согласны??

спасибо, хороший урок;)

Урок классный, с помощью таких можно свой сайт слепить :)

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

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

Очень позитивный дизайн!

Спасибо за красочный и яркий урок, правда не стала скачивать готовое меню с цветочками - рисовала сама по предложенному англоязычному. Воть! ))

МММ... классный урок. спасибо... узнал много нового. например как испортить все прелестные ощущения от работы с фотошопом. (надеюсь мой коммент не будет удален - ведь негативные комментарии - это тоже комментарии)

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

я здесь один "текст в цепях" заметил!?=)

Замечательный урок! Еще один повод вплотную заняться изучением инструмента Перо.

А как ставлять на свой сайт?...Например на Ucoz?

Спасибо!Урок классный)))))))

Классный урок! Будет время, обязательно попробую выполнить!

спасибо:)

Буду учиться.Мерси!Вот только бы перо освоить:)

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

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

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

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

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


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

Предыдущая Следующая
Добавлена {{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-адрес, помогающих нам сделать его удобнее для вас. Подробнее