Страница 1 из 11
Форум » Adobe Photoshop » Уроки для Photoshop » Шапка сайта в стиле Web 2.0
Шапка сайта в стиле Web 2.0
Reddy Дата: Вторник, 24.08.2010, 14:02 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Шагов: 6
Уровень: Средний
Дополнительные инструменты: Не требуются

01. Естественно, что сперва нужно выбрать фон для шапки. Тут уже каждый волен выбирать на свой вкус. Лично я выбрал данную картинку (к слову, на этой и остальных картинках, где изображена шапка, вы можете кликнуть на картинке для того, чтобы увидеть её в реальном размере):

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

02. Теперь закруглим верхние углы фоновой картинки. Выбираем инструмент Rounded Rectangle Tool. Выставляем настройки, как на картинке ниже:

Выделяем область с левого верхнего угла и ведём до правой стороны (нижние углы должны выйти за пределы рабочей области). В любом случае скруглённые углы должны быть только сверху! Кликаем правой кнопкой мыши на выделенной области, и выбираем Make Selection. Выбираем Select --> Inverse (Shift+Ctrl+I), затем нажимаем Delete. В результате получаем фон с верхними закруглёнными углами.

03. Пришло время добавить меню сайта. Для этого создаём новый слой, выбираем Rectangular Marquee Tool, и в нижней части шапки выделяем область необходимой Вам высоты (в данном варианте - 36 пикселей). Заливаем эту область чёрным цветом, и выставляем прозрачность порядка 75%

Создаём ещё один слой, и снова делаем выделение, но - в половину предыдущего (18 пикселей), заливаем белым цветом, и выставляем прозрачность в 25%

04. Теперь переходим к оформлению менюшки - создадим ещё один новый слой, и с помощью Pencil Tool делаем на фоне меню вертикальные полоски любого цвета, которые станут разделителями между пунктами меню, затем добавляем к ним стиль Gradient Overlay (цвета: #7f7f7f - #7f7f7f (49%) - #ffffff (50%) - #ffffff)

Результат:

Добавляем необходимый текст:

05. Осталось добавить название и\или логотип сайта. Нам снова потребуется инструмент Rounded Rectangle Tool с теми же настройками, что и в шаге №2, кроме радиуса - вместо 20 выберем 6. Выбираем слой "Background", и на нём выделяем необходимое пространство для нашего лого. Кликаем правой кнопкой мыши на выделенной области, и выбираем Make Selection, нажимаем Ctrl+C, затем - Ctrl+V (Выделение не удаляем!). Появившейся слой назовём "Blur". Создаём ещё один слой (Поверх "Blur"), только теперь это же выделение заливаем белым цветом, и уменьшаем его прозрачность до 10%.

Применим следующие стили:
Inner glow:

Stroke:

Возвращаемся к слою "Blur". Добывим немного размытости - Filter --> Blur --> Gaussian Blur со значением радиуса 1.5

06. Осталось добавить название сайта, и шапка готова:

yes

спец по кнопачкам
 
Reddy Дата: Понедельник, 13.09.2010, 22:10 | Сообщение # 2
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Дальнейшие действия подразумевают процесс превращения картинки в полноценную шапку и меню сайта.

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

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

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

Сохраняем изображение и переходим к созданию кода самого меню.

спец по кнопачкам
 
Naf_naf Дата: Среда, 18.01.2012, 23:20 | Сообщение # 3
Naf_naf
Прохожий
Сообщений: 1
Репутация: 0
Страна: Российская Федерация
Город: Казань
Область: Татарстан
Статус: Offline
Спасибо большое очень помогло, отличный ресурс....+) так держать!
 
Reddy Дата: Среда, 18.01.2012, 23:39 | Сообщение # 4
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Quote (Naf_naf)
Спасибо большое очень помогло


всегда пожалуйста :)

Quote (Naf_naf)
так держать!


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

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