Уроки фотошопа Скачать Показуха Вопросы & Ответы О нас
Урок по рисованию в фотошопе шапки для сайта
уроки фотошопа вода 3D обои наши новости логотип для сайта анимация грандж растения брызги пена верстка DesignArts.RU мусор Windows Vista Ron Deviney абстракции обработка фото грязь кисти для фотошопа скин день Святого Валентина новый год портфолио аватар кнопка для сайта дизайн сайта иконка афиша трава
24

Шапка сайта в фотошопе

Guljay S.V.
Уроки фотошопа
25 июля 2007

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

Назначение данного урока — показать принцип рисования шапки сайта и не больше, многому остальному (рисованию) я вас уже научил в прошлых уроках.

В следующих уроках про создание шапки сайта я сделаю что-нибудь посложнее, а пока вперёд лезть не нужно.

Меньше разговоров, больше дела. Вооружайтесь фотошопом и приступайте к уроку.

Шапка для сайта в фотошопе

1. Создаём новый рисунок размером 800x150 px:

шапка сайта в фотошопе

2. Заходим в Layer Style (кликните правой клавишей по слою, там выберите Blending Options) на вкладку Gradient Overlay. Там настраиваем градиент следующим образом (красным цветом я написал шестнадцатеричные значения цветов):

шапка для сайта в фотошопе

Жмём везде Ok и получаем фон:

шапка сайта в PhotoShop

3. За тем выбираем инструмент Pen Tool и рисуем такую фигуру (можете подключить свою фантазию), цвет — #313e5a:

шапка для сайта в PhotoShop

4. Заходим в Layer Style на вкладку Drop Shadow и выставляем следующие параметры:

как нарисовать шапку сайта

После этого должно получиться примерно как у меня:

как нарисовать шапку сайта в фотошопе

5. Теперь выберите кисточку с пятнами краски (скачать можно в конце урока), создайте новый слой и что-нибудь «наляпайте» (фиолетовым цветом — #313e5a):

как нарисовать шапку сайта в PhotoShop

6. Снова создайте новый слой, смешивание (Blend Mode) измените с Normal на Overlay (данный параметр настраивается на панели слоёв Layers) и снова нарисуйте что-нибудь кисточками:

рисуем шапку сайта

7. Создайте новый слой и залейте его любым цветом (с помощью Paint Bucket Tool), затем непрозрачность заливки Fill уменьшите до 0%.

Зайдите в Layer Style на вкладку Inner Shadow и настройте следующие параметры:

нарисовать шапку сайта

8. А на вкладке Pattern Overlay настройте заливку текстурой. В качестве текстуры выберите какую-нибудь штриховку (как создавать подобную текстуру сказано, например, в начале урока о создании логотипа в фотошопе):

нарисовать шапку для сайта

Получиться должно вот так:

нарисовать в фотошопе шапку для сайта

9. А сейчас напишите название сайта:

нарисовать в фотошопе шапку сайта

10. Раскрасьте его по следующему принципу:

в фотошопе шапка сайта

11. Нарисуйте ещё что-нибудь и напишите слоган вашего сайта:

в PhotoShop шапка сайта

12. А сейчас создайте копию слоя с названием сайта (для этого перетащите слой на иконку создания нового слоя или кликните по слою правой клавишей и там выберите Duplicate Layer).

Отразите по вертикали копию слоя с названием сайта (Edit —> Transform —> Flip Vertical) и разместите её (надпись) ниже:

как рисуется шапка сайта

13. Добавьте маску слоя (на панели слоёв кликните по кнопке Add layer mask):

как в фотошопе рисуется шапка для сайта

14. Выберите инструмент Gradient Tool (градиент) и чёрно-белым градиентом залейте маску сверху вниз:

как в PhotoShop рисуется шапка для сайта

15. Снизу напишите названия основных разделов сайта:

шапка сайта в фотошоп

16. Создайте новый слой. С помощью инструмента Rectangular Marque Tool выделите верхнюю часть изображения и залейте её белым цветом (с помощью Paint Bucket Tool):

нарисовать в фотошоп шапку сайта

17. Добавьте к данному слою маску, как это мы делали ранее, и залейте её чёрно-белым градиентом сверху вниз:

в фотошоп нарисовать шапку для сайта

Вот мы и нарисовали в фотошопе шапку для сайта:

как нарисовать шапку для сайта

Удачных экспериментов! Если есть что сказать - оставьте свой комментарий. Нам интересно Ваше мнение!

• Шапка сайта, нарисованная при написании урока (в полном размере) | JPG, 800x150, 36,5 КБ • Скачать набор кисточек « Splatteris M1 » | ZIP, 385 КБ • Скачать шрифт « Hooge 05_55 Cyr2 » | ZIP, 15.2 КБ
Информация, которая должна быть на этом месте, доступна только авторизировавшимся посетителям!
21073 просмотра
посты с похожей тематикой
0
#3Surgut Jokil: Слушай а где найти этот Slice Tool?? у меня просто фотик тупит((
18 ноября 2011 в 21:33:47
158
#2Гуляй Сергей: Для [Вартичан Сергей]: есть несколько способов. Для вас самым простым будет следующий:

- Инструментом "Slice Tool" нужно обвести эти кнопки.
- После File --> Save for Web & Devices...
- На вкладке Optimized кликаем два раза по нужной части изображения (кнопке), которую хотите сделать ссылкой.
- В появившемся окошке в поле URL вводим ссылку (остальные поля заполняем по желанию). Жмем Ok.
- Выделяем все фрагменты (инструментом Slice Select Tool).
- Жмем Save и выбираем формат "HTML and Images". На выходе получаем изображения и HTML-код - откройте в веб-браузере и проверьте работоспособность ссылок.
11 января 2011 в 00:03:18
0
#1Вартичан Сергей: Есть лишь один вопрос.. Как прописать ссылочки к кнопкам на шапке? Не подскажите?
10 января 2011 в 21:11:32