В этом уроке мы будем создавать простой и профессиональный дизайн веб-сайта, а точнее шаблон (макет) для бизнес сайта. Вы узнаете как создавать веб-макет при помощи Adobe Photoshop. 
Приблизительное время выполнения: 25 - 30 минут
Шаг 1. создайте новый документ размером 960 х 900 px. и залейте его цветом: #292929
Выберите инструмент Rectangle Tool  (Прямоугольник). В верхней части создайте прямоугольную форму цветом: #111111 (рис. ниже): 
Шаг 2. Выберите инструмент Line Tool  (линия) и нарисуйте две линии. Обе линии должны быть 1px. толщиной. 
Шаг 3. Создайте новый слой нажав клавиши (CTRL+SHIFT+ALT+N). Выберите инструмент Brush Tool  (Кисть) размером 300 px. создайте белое свечение в верхнем левом углу. 
Шаг 4. Измените режим смешивания (на том слое на котором только что применили кисть) на Soft Light (Мягкий свет). 
Шаг 5. Прямо под заголовком нарисуйте три прямоугольные формы. 
Для этого выберите инструмент Rounded Rectangle Tool  (Прямоугольник со скругленными углами). Желательно рисовать их на новом слое. Шаг 6. Для всех трех созданных фигур примените следующие стили: 
Шаг 7. В итоге у вас должно получиться что - то похожее на это: 
Шаг 8. Чуть ниже под тремя прямоугольными фигурами создайте еще одну прямоугольную фигуру используя инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами) как и ранее, но с цветом #e1e1e1 (рис. ниже): 
Шаг 9. В левой стороне постарайтесь создать похожую фигуру (как на рис. ниже) при помощи инструмента Pen Tool  (Перо): 
Шаг 10. Выберите интрумент Rectangle Tool (Прямоугольник) и создайте новую форму. Расположите созданную фигуру как на рисунке: 
Шаг 11. Выберите интрумент Custom Shape Tool  (Произвольная форма) и выберите фигуру как на рис. ниже: 
Шаг 12. Разместите созданную фигуру с правой стороны прямоугольника, которого мы создавали в шаге 10. Залейте фигуру цветом: #e1e1e1 
Шаг 13. Выберите инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами) и нарисуйте четыре прямоугольные формы цветом: #cacaca. Разместите созданные фигуры как показано на рис. ниже: 
Далее нам понадобятся иконки: 
(Вы конечно можете использовать свои иконки) Шаг 14. Откройте иконки в Adobe Photoshop и при помощи инструмента Rectangular Marquee Tool  (Прямоугольная область) выделите необходимую иконку: 
В палитре layer (Слои) должен быть слой с иконками: 
Что бы вырезать иконку на новый слой, нужно выделить необходимую иконку и нажать комбинацию клавиш (CTRL+J) 
Шаг 15. Таким образом перетащите все необходимые иконки на наш макет сайта и разместите их в тех местах как показано на рисунке: 
Установите opacity (непрозрачность) на всех слоях с иконками на 10% (рис. ниже): 
В результате должно получиться так: 
Шаг 16. Выберите инструмент Horizontal Type Tool  (Горизонтальный текст) и впишите ваш текст. 
Шаг 17. Для написания названия сайта (logo) используйте следующие настройки: 
Шаг 18. Для написания меню используйте следующие настройки: 
Вот что мы получаем в итоге: 
Шаг 19. Добавьте остальной текст на макет используя те же или похожие шрифты: 
После всех доработок мы получим вот такой макет: 
Наш макет уже красив, но не до конца. Осталась всего одна маленькая деталь. Шаг 20. Добавим копочку к нашему меню. Выберите инструмент Rectangle Tool (Прямоугольник) и создайте прямоугольную кнопку: 
Шаг 21. Нам необходимо Растрировать слой с нарисованной кнопкой. 
Шаг 22. Выберите инструмент Rectangular Marquee Tool (Прямоугольная область) и выделите нижнюю часть кнопки. 
Шаг 23. Теперь нам нужно удалить выделенный фрагмент кнопки. Нажмите Delete и нижняя часть кнопки будет удалена! В итоге мы получаем готовый макет бизнес шаблона!
( Увеличить изображение - 960х900px.) Урок подготовлен для Вас командой сайта www.clubdesigner.ru
Автор: Razvan
Источник урока: grafpedia.com Перевод: Команда сайта "Клуб дизайнера"!
| 
