Страница 1 из 11
Форум » Adobe Photoshop » Уроки для Photoshop » Шапка сайта (рисуем)
Шапка сайта
Reddy Дата: Среда, 08.12.2010, 01:36 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Шагов: 5
Уровень: Средний
Дополнительные инструменты: Не требуются

01. Создаём в Photoshop новый документ необходимого размера - в данном случае это 990х150 пикселей. Выбираем цвета для градиента (для примера - #ff0000 и #9f0000) и заливаем фон:



02. Создаём новый слой, и в верхней части делаем выделение на всю ширину шапки и высотой 20 пикселей. Полученное выделение заливаем нужным нам цветом (я использовал #7f0000). Добавим этому слою Stroke:



В результате должно получится что-то похожее на это:



в левом верхнем углу можно разместить текущие дату и время:



03. Следующий шаг - добавление названия сайта. Выбираем нужный нам шрифт (в данном примере - SF Grunge Sans SC Italic ) и необходимый цвет:



Далее необходимо сделать зеркальное отражение нашего текста - подробнее об этом можно прочитать тут

Теперь добавим несколько стилей к тексту:

Drop Shadow:



Gradient Overlay (цвета: #efefef, #bfbfbf (49%), #ffffff (51%, #ffffff)):



Stroke:



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



04. Теперь нужно добавить панель навигации. Создаём новый слой, и в правом нижнем углу делаем выделение под горизонтальное меню. Заполняем его тем же градиентом, что и основной фон нашей шапки (#ff0000 - #9f0000)



Далее делаем плавный переход для левой стороны навигации. В панели слоёв выбираем "Add Layer Mask" (отмечен красной рамкой), и выставив градиент от чёрного к прозрачному проводим мышкой, как показано на картинке:



Чем больше данный отрезок, тем плавнее будет переход.

Осталось добавить стиль Bevel & Emboss:



И основание для нашего меню готово.



05. Добавим пункты необходимые нам пункты меню:



и добавим разделители: для этого проводим две вертикальные линии - цвет первой #ff0000, второй - #9f0000. Дублируем её необходимое количество раз, и равномерно размещаем между пунктами меню:



Всё, наша шапка готова. Финальный штрих - добавить отблеск (подробнее - здесь):



На основе данного урока

© www.otherside.ws
спец по кнопачкам
 
Форум » Adobe Photoshop » Уроки для Photoshop » Шапка сайта (рисуем)
Страница 1 из 11
Поиск:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

© 2010-2017 Other Side | Хостинг от uCoz