Все о фотошопе

Все для фотошоп - видео уроки, плагины, PSD шаблоны, рамки, клипАрты - все бесплатно!

В закладки | Написать администрации



Скачивай без регистрации, обсуждай, добавляй свое

Навигация

    - Новости
    - Правила сайта
    - О проекте
    - Faq

PS Материалы

    - Картинки
    - Обои
    - Кисти
    - Макросы
    - Стили
    - Формы
    - Текстуры
    - Плагины
    - Рамки
    - PSD
    - Иконки
    - Шрифты
    - Патерны
    - Клипарты
    - Аватары

Программы

    - Графика
    - 3Dmax
    - Mac OS X
    - Разное

Уроки и книги

    - Видео уроки
    - Photoshop CS2
    - Photoshop CS3
    - 3DS MAX
    - Учебники

Шаблоны

    - Joomla
    - TemplateMonster
    - BoxedArt
    - DataLifeEngine
    - WordPress
    - Другие

3D материалы

    - 3D материалы





Уроки, Photoshop CS2, Photoshop CS3: Уроки Photoshop: Шаблон для сайта в деловом стиле
Опубликовал: WeLcOmE tO My LiFe   Теги: ---   

Автор www.photoshopbox.com. Оригинал статьи на английском

Создаем шаблон сайта в деловом стиле

Шаг 1. Для начала, создаем новый документ, нажав Ctrl+N или выбрав File>New (Файл>Новый). Задаем ширину 955 пикселей, высоту - 1000. Шаблон такого размера будет превосходно смотреться на мониторах с разрешением 1024*768.

новый доекмент

Шаг 2. Выбираем инструмент Rectagular Marquee Tool (Прямоугольное Выделение).

инструмент Rectagular Marquee Tool

Шаг 3. Теперь задаем параметры данного инструмента (на Панели свойств, наверху, прямо под основным меню). Выбираем Стиль>Заданный размер (Fixed Size), а в самих значениях - ширина - 100%, высота - 100px.

Fixed Size

Шаг 4. Щелкаем на странице и видим выделенную прямоугольную область с точно заданными ранее размерами. Кликаем до тех пор, пока наше выделение не установится точно наверху страницы.

выделение

Шаг 5. В палитре слоев кликаем на кнопке "Создание нового Регулирующего слоя (New Adjustment Layer)" и выбираем "Цвет (Solid Color)".

Создание нового Регулирующего слоя (New Adjustment Layer)


Шаг 6. В появившемся окне задаем, например, цвет #e5e5e5 (90% серый).

задаем цвет

Шаг 7. Теперь у нас есть регулирующий слой и маска слоя, созданная на основе нашего выделения. Шелкаем правой кнопкой мыши на значке слоя и выбираем Параметры Наложения (Blending Options)

параметры наложения

Шаг 8. В открывшемся окне Стиле Слоев (Layer Style) задаем параметры как на скриншоте внизу. Окей пока не нажимаем.

Layer Style

Шаг 9. После задания параметров для Наложение Градиента (Gradient Overlay), задаем их для Тень (Drop Shadow). Окей все еще не нажимаем.

Gradient Overlay

Шаг 10. И наконец, добавляем обводку. Этот эффект будет виден не сильно, но он придаст нашему шаблону более симпатичный вид. И вот теперь нажимаем Окей.

добавляем обводку

Шаг 11. Создание фона шапки нашего сайта можно считать законченным, и теперь будем работать над картинкой, помещенной на шапке. Открываем нужную картинку (у нас фотку), File>Open (Файл>Открыть).

шапка сайта


Шаг 12. Теперь скопируем эту фотку на наш шаблон (Ctrl+A, далее Ctrl+C).

копирование фотки

Шаг 13. До того, как поместить скопированный файл в наш шаблон, создадим выделение, куда и скопируем фотку, используя Marquee Tool (Прямоугольное Выделение) и вводим следующие параметры.

Marquee Tool

Шаг 14. Кликаем на документе и видим наше новое выделение. Положение выделение должно быть на самом верху.

выделение

Шаг 15. Теперь нажимаеи Ctrl+Shift+V, тем самым поместив фото в наше выделение.

alt

Шаг 16. У вас должна образоваться маска для появившегося слоя. Переместите этот слой вниз (как на рисунке) и переименуйте его в "Header Image", а верхний слой обзовите "Header" (Для смены имени слоя просто надо дважды щелкнуть по предыдущему и ввести новое).

маска


Шаг 17. Теперь, создадим меню для нашего сайта. Выберите Rectangular Marquee Tool (Прямоугольное Выделение), и введем параметы, как на рисунке внизу.

rectangular Marquee Tool

Шаг 18. Кликаем на документе и создаем выделение прямо под скопированной ранее фоткой.

создаем выделение

Шаг 19. На панели слоев нажимаем на кнопке New Adjustment Layer (Новый регулирующий слой) и выбираем Solid Color (Цвет).

New Adjustment Layer

Шаг 20. Переименовываем новый слой на "Background". Нажимаем Ctrl+G и переименовываем папку в "Menu", таким же образом как и слой.

группируем слои

Шаг 21. Теперь создадим панель меню. Выберим фоновый слой (Background layer) и нажмем Ctrl+J для копирования этого слоя. Переименуем этот новый слой (который должен находится прямо над фоновым) в "Menu Item".

alt

Шаг 22. Нажимаем Ctrl+T или идем в Редактирование>Трансформация>Масштаб (Edit>Transform>Scale) для выбора инструмента Трансформация и задаем в панели свойств значения как на картинке внизу.

alt


Шаг 23. Кликаем правой кнопкой мыши по рабочему слою (Menu Item) и выбираем Blending Options (Режимы наложения). В появившемся окне меню панели Layer Style (Свойство стиля) выбираем Gradient Overlay (Наложение Градиента) и забиваем следующие цифры.

alt

Шаг 24. Теперь выбираем подпункт Drop Shadow (Тень) и задаем:

alt

Шаг 25. И наконец, добавлем обводку для акцентирования внимания. Для этого выбираем стиль Stroke (Обводка), используя параметры, как внизу.

alt

Шаг 26. Сейчас выбираем инструмент Move Tool (Перемещение) на Панели инструментов. Щелкаем на этом инструменте и, удерживая Alt+Shift, передвигаем кнопку вправо. Как видим кнопка скопировалась на новый слой.

alt

Шаг 27. Теперь, удерживая Alt+Shift, распределяем наши клавиши как на рисунке внизу.

alt


Шаг 28. Выбираем Инструмент (Rectangular Marquee tool) Прямоугольное Выделение и выбираем для него тип Фиксированный (см. как на картинке). Это мы делаем доп.панель для акцентирования внимания на основном.

alt

Шаг 29. Создаем новый корректирующий слой Solid Color (Сплошной цвет или просто Цвет), кликнув на кнопке New Adjustment Layer (Новый Корректирующий Слой), и выбираем Solid Color (Цвет). Выберите цвет который хотите использовать для этой панели.

solid color

Шаг 30. Перемещаем этот слой наверх и переименовываем его в "Accent Bar".

перемещаем слой

Шаг 31. Создадим еще один Регулирующий слой Solid Color (Цвет), но на сей раз без выделения. Цвет будет такой - #e5e5e5. Поместим его над слоем "Background" и переименуем его тоже в "Background".

регулирующий слой

Шаг 32. Как вы уже догадались, мы опять будем работь над бекграундом нашего сайта. И для этого сперва выбираем инструмент Gradient Tool (Градиентная Заливка).

gradient tool


Шаг 33. Теперь для выбранного инструмента на Панели свойств задаем следующие параметры:

Панель свойств

Шаг 34. Для начала активизируем маску слоя. И используя выбранный градиент заливаем ее, как показано на рисунке.

маска слоя

Шаг 35. У вас должен получиться такой же замечательный градиент на картинке внизу.

градиент

Шаг 36. Теперь инвертнем его, нажав Ctrl+I или выбрав на панели меню Image>Adjustment>Invert (Изображение>Коррекция>Инверсия).

инвертирование

Шаг 37. Вот и готов наш шаблон для сайта. Осталось добавить контент.

добавляем контент

Шаг 38. Для начала добавим логотип с помощью импортирования File>Place (Файл>Поместить). Теперь у вас есть еще один новый слой, на сей раз с логотипом. Помещаем этот слой на самый верх и переименовываем в "Logo". C помощью инструмента Move Tool (Перемещение), передвигаем логотип в левый верхний угол.

импортируем логотип


Шаг 39. Теперь обозначим пункты в ранее сделанном меню, естественно с помощью инструмента Text Tool (Текст).

Text tool

Шаг 40. Вбиваем названия пунктов меню на различных слоях и после этого объединяем их в Группу Слоев.

группировка

Шаг 41. Вот и готов наш шаблон для сайта. Осталось добавить контент.

готовый шаблон

Шаг 42. Переименовываем слои с текстом в соответствии с пунктами меню.

переименовываем слои

Шаг 43. Мы сделали это. Вот он наш шаблон.

alt

Шаг 44. Теперь дополняем его другой информацией и можно отдавать кодеру.

кодируем



Похожие новости:


Раздел: Уроки, Photoshop CS2, Photoshop CS3 | сен 10 | Просмотров: 12148
#1 написал: Alllessons
сен 24 | ICQ: -- |



Группа: Гости
Регистрация: --
А почему вы не указываете с какого сайта был взят этот и несколько других уроков на вашем сайте? Перевод ведь не вы делали.
   
#2 написал: WeLcOmE tO My LiFe
сен 24 | ICQ: -- |



Группа: Администраторы
Регистрация: 20.11.2007
Цитата: Alllessons
А почему вы не указываете с какого сайта был взят этот и несколько других уроков на вашем сайте? Перевод ведь не вы делали.
Мы и не выдаем это за свою работу. http://alllessons.msk.ru
   
#3 написал: Alllessons
сен 24 | ICQ: -- |



Группа: Гости
Регистрация: --
Добавьте, пож-та, и в остальных уроках, взятых с сайта http://alllessons.msk.ru, ссылку на сайт, как сайт переводчика.
   
#4 написал: baskin100
мар 31 | ICQ: -- |



Группа: Гости
Регистрация: --

слышь умник, а тебе какое дело,на счет сайта переводчика.

Люди для тебя старались,искали инфу, и выкладывали здесь.

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

   
#5 написал: WeLcOmE tO My LiFe
мар 31 | ICQ: -- |



Группа: Администраторы
Регистрация: 20.11.2007
Цитата: baskin100
слышь умник, а тебе какое дело,на счет сайта переводчика. Люди для тебя старались,искали инфу, и выкладывали здесь. Чтоб ты,не рыскал по инету, убивая час за часом, в поисках инфы, а спокойно ее мог взять прямо здесь на сайте


Спасибо за поддержку.
Но Alllessons, является именно тем человеком, который переводил этот урок и спасибо ему за разрешение разместить переведенный урок у нас на сайте.
Друзья давайте будем вежливы друг перед другом.

--
Администратор
   
#6 написал: sparklingman
янв 24 | ICQ: -- |



Группа: Гости
Регистрация: --
"Шаг 44. Теперь дополняем его другой информацией и можно отдавать кодеру."

А куда?
   
#7 написал: WeLcOmE tO My LiFe
янв 24 | ICQ: -- |



Группа: Администраторы
Регистрация: 20.11.2007
Цитата: sparklingman
А куда?

Речь о  html-верстальщике.
   

Авторизация

  
 
  

Регистрация | Забыли пароль?



загрузка...


Наши партнеры

 


Статистика

Rambler's Top100


загрузка...
На нашем сайте представлены лучшие ресурсы в помощь дизайнерам и специалистам, которые профессионально занимаются рекламой и продвижением товаров, услуг, созданием графических объектов. Уроки и обучающие материалы любого уровня – для специалистов и тех, кто только начал изучение загадочного мира рекламы, и ищет способы воздействия на аудиторию, свой индивидуальный стиль. Динамика современного мира заставляет нас держать руку на пульсе модных тенденций современного искусства рекламы и дизайна. Наш сайт был создан в 2007 году, и обширная коллекция обучающих и демонстрационных видеоматериалов постоянно пополняется новыми ресурсами. Обучающие программы по работе с 3D – изображениями, различные версии программ Photoshop, инструменты работы в CorelDraw и многая другая полезная информация – иконки, коллекция разнообразных шрифтов, клипарты и паттерны, материалы для работы с анимацией, Вы можете бесплатно скачать на нашем сайте. Уроки любой степени сложности помогут вам освоить новейшие дизайнерские тенденции, а представленные шаблоны – воплотить в жизнь самые смелые, креативные идеи. Вы расширите рамки обыденности, почерпнете новые, эксклюзивные идеи для развития своего личностного и творческого потенциала! Мы работаем для Вас, чтобы сделать Ваш мир ярче, а профессиональные качества совершенными.
Главная  |  Правила сайта  |  Контакты администрации  |  RSS канал  |  Статистика      Copyright © 2007-2010г. Design.Ru-Deluxe.Ru