В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта. ![](http://www.photoshop-master.ru/lessons/les1151/30.jpg) Шаг 1. Создайте новый документ размером 960x900 пикселов, и заполните его цветом с показателем: #292929 Активизируйте инструмент Rectangle Tool (Прямоугольник) и создайте на новом слое прямоугольник в верхней части фона с цветовым показателем: #111111 ![](http://www.photoshop-master.ru/lessons/les1151/1.jpg) Шаг 2. Активизируйте инструмент Line Tool (Линия) и создайте две линии. Толщина линии составляет 1 пиксел. ![](http://www.photoshop-master.ru/lessons/les1151/2.jpg) Шаг 3. Создайте новый слой комбинацией клавиш <CTRL+SHIFT+ALT+N>, и при помощи инструмента Brush Tool (Кисть) размером 300 пикселов создайте небольшое белое свечение в верхней части макета. ![](http://www.photoshop-master.ru/lessons/les1151/3.jpg) Шаг 4. Измените режим наложения для отпечатка кисти на Soft Light (Мягкий свет). ![](http://www.photoshop-master.ru/lessons/les1151/4.jpg) Шаг 5. Активизируйте инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами) и на основной части макета создайте три прямоугольные формы. Для удобства, можно эти формы создать на отдельных слоях. ![](http://www.photoshop-master.ru/lessons/les1151/5.jpg) Шаг 6. Для всех этих прямоугольных форм добавьте следующие стили слоя: ![](http://www.photoshop-master.ru/lessons/les1151/6.jpg) ![](http://www.photoshop-master.ru/lessons/les1151/6.1.jpg) Шаг 7. Вот, что у Вас получится: ![](http://www.photoshop-master.ru/lessons/les1151/7.jpg) Шаг 8. Под этими тремя прямоугольными формами создайте еще одну прямоугольную форму при помощи инструмента Rounded Rectangle Tool (Прямоугольник со скругленными углами) с цветом #e1e1e1 ![](http://www.photoshop-master.ru/lessons/les1151/8.jpg) Шаг 9. По левой стороне от серого прямоугольника создайте фигуру при помощи инструмента Pen Tool (Перо), как показано на рисунке: ![](http://www.photoshop-master.ru/lessons/les1151/9.jpg) Шаг 10. При помощи инструмента Rectangle Tool (Прямоугольник) создайте новую фигуру, и расположите ее, как по казано на рисунке: ![](http://www.photoshop-master.ru/lessons/les1151/10.jpg) Шаг 11. Активизируйте инструмент Custom Shape Tool (Произвольная форма) и выберите в панели с фигурами изображение стрелки: ![](http://www.photoshop-master.ru/lessons/les1151/11.gif) Шаг 12. Поместите фигуру со стрелкой с правой стороны прямоугольника, созданного в шаге 10. Заполните стрелку цветом, с показателем: #e1e1e1 ![](http://www.photoshop-master.ru/lessons/les1151/12.jpg) Шаг 13. Создайте еще несколько прямоугольных форм с цветом, с показателем: #cacaca при помощи инструмента Rounded Rectangle Tool (Прямоугольник со скругленными углами), и расположите ее на прямоугольной форме серого цвета. ![](http://www.photoshop-master.ru/lessons/les1151/13.jpg) Шаг 14. Для продолжения урока воспользуйтесь иконками. ![](http://www.photoshop-master.ru/lessons/les1151/14.jpg) Шаг 15. Откройте файл с иконками, и при помощи инструмента Rectangular Marquee Tool (Прямоугольная область выделения) выделите необходимую иконку. ![](http://www.photoshop-master.ru/lessons/les1151/15.jpg) Шаг 16. Обратите внимание на палитру layer (Слои) – В ней должен быть слой с иконками. ![](http://www.photoshop-master.ru/lessons/les1151/16.jpg) Шаг 17. После того, как выделена необходимая иконка, Вы можете вырезать ее на новый слой – для этого нажмите комбинацию клавиш < CTRL+J> ![](http://www.photoshop-master.ru/lessons/les1151/17.jpg) Шаг 18. Подобным образом перенесите необходимые иконки на макет сайта, как показано на рисунке: ![](http://www.photoshop-master.ru/lessons/les1151/18.jpg) Шаг 19. Измените opacity (непрозрачность) для слоев с иконками на 10%, как на рисунке: ![](http://www.photoshop-master.ru/lessons/les1151/19.jpg) Шаг 20. Вот что у Вас должно получиться: ![](http://www.photoshop-master.ru/lessons/les1151/20.jpg) Шаг 21. Активизируйте инструмент Horizontal Type Tool (Горизонтальный текст) и добавьте необходимый текст. ![](http://www.photoshop-master.ru/lessons/les1151/21.jpg) Шаг 22. Для написания слогана используйте шрифт Tahoma со следующими настройками: ![](http://www.photoshop-master.ru/lessons/les1151/22.jpg) Шаг 23. Для написания текста для меню используйте другой шрифт. Название шрифта и его настройки представлены на рисунке: ![](http://www.photoshop-master.ru/lessons/les1151/23.jpg) Шаг 24. Вот, как макет теперь выглядит: ![](http://www.photoshop-master.ru/lessons/les1151/24.jpg) Шаг 25. Используя похожие шрифты, добавьте еще текста к макету: ![](http://www.photoshop-master.ru/lessons/les1151/25.jpg) Шаг 26. Таким будет макет после всех проведенных манипуляций: ![](http://www.photoshop-master.ru/lessons/les1151/26.jpg) Шаг 27. В верхней части макета добавьте оранжевую прямоугольную кнопку в режиме слой - фигуры при помощи инструмента Rectangle Tool (Прямоугольник): ![](http://www.photoshop-master.ru/lessons/les1151/27.jpg) Шаг 28. Растрируйте слой с только что нарисованной кнопкой: ![](http://www.photoshop-master.ru/lessons/les1151/28.gif) Шаг 29. При помощи инструмента Rectangular Marquee Tool (Прямоугольная область выделения) выделите нижнюю часть оранжевой прямоугольной кнопки из шага 27: ![](http://www.photoshop-master.ru/lessons/les1151/29.jpg) Шаг 30. Нажмите клавишу < Delete> для того, чтобы удалить нижнюю часть кнопки. Это придаст кнопке «деловой» и законченный вид. А это – конечный результат: ![](http://www.photoshop-master.ru/lessons/les1151/30.jpg) Автор: Razvan Перевод: Луговских Татьяна
Источник: http://www.photoshop-master.ru |