![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/ramka93.jpg)
Из этого урока веб дизайна вы узнаете, как создать интересный макет для сайта web хостинга, используя всего 2-3 цвета.
Навыки для «прокачки»:
- работа с фигурами
- работа со стилями слоя![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/114.jpg)
Для начала мы должны создать новый документ. Размер
1000 1100 пикселей, и белым фоном.
Активируем инструмент
Прямоугольник (Rectangle Tool), и создадим две фигуры, используя следующие цвета: верхняя
# 393e43, и нижняя
# 373a3e.
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/213.jpg)
Затем создадим еще две формы, как на картинке ниже.
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/33.jpg)
Теперь добавим
Стили слоя (Add a layer style)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/43.jpg)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/53.jpg)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/63.jpg)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/73.jpg)
Инструментом
Произвольная фигура (Custom Shape Tool), добавим стрелки. И добавим те же
Cтили слоя (Add a layer style) как указано выше.
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/83.jpg)
Теперь создадим кнопки, инструментом
Прямоугольник со скругленными углами (Rounded Rectangle Tool).
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/93.jpg)
Снова добавим
Cтили слоя (Add a layer style).
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/103.jpg)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/115.jpg)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/123.jpg)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/133.jpg)
Вот как будет выглядеть наша кнопка.
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/143.jpg)
Далее поставим цвет переднего плана
# 25272a, и создадим две фигуры инструментом
Прямоугольник со скругленными углами (Rounded Rectangle Tool).
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/153.jpg)
Для обеих форм добавим следующие
Cтили слоя (Add a layer style).
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/163.jpg)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/173.jpg)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/183.jpg)
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/192.jpg)
Вот что должно получиться.
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/202.jpg)
В верхней форме добавим еще три фигуры, и добавим те же
Cтили слоя (Add a layer style). Здесь мы будем добавлять тарифы на хостинг. Если у вас более чем три позиции, то вы можете создать больше фигур.
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/214.jpg)
Инструментом
Горизонтальный текст (Horizontal Type Tool), мы добавим текст, и в то же время добавим несколько изображений с серверами.
![Создаем макет для сайта web хостинга - уроки фотошоп Создаем макет для сайта web хостинга - уроки фотошоп](/uploads/2011/11/222.jpg)
В уроке используется шрифт:
Myriad Pro (курсив)
В середине макета добавим хорошее изображение, и текст.