
Из этого урока веб дизайна вы узнаете, как создать интересный макет для сайта web хостинга, используя всего 2-3 цвета.
Навыки для «прокачки»:
- работа с фигурами
- работа со стилями слоя
Для начала мы должны создать новый документ. Размер
1000 1100 пикселей, и белым фоном.
Активируем инструмент
Прямоугольник (Rectangle Tool), и создадим две фигуры, используя следующие цвета: верхняя
# 393e43, и нижняя
# 373a3e.

Затем создадим еще две формы, как на картинке ниже.

Теперь добавим
Стили слоя (Add a layer style)




Инструментом
Произвольная фигура (Custom Shape Tool), добавим стрелки. И добавим те же
Cтили слоя (Add a layer style) как указано выше.

Теперь создадим кнопки, инструментом
Прямоугольник со скругленными углами (Rounded Rectangle Tool).

Снова добавим
Cтили слоя (Add a layer style).




Вот как будет выглядеть наша кнопка.

Далее поставим цвет переднего плана
# 25272a, и создадим две фигуры инструментом
Прямоугольник со скругленными углами (Rounded Rectangle Tool).

Для обеих форм добавим следующие
Cтили слоя (Add a layer style).




Вот что должно получиться.

В верхней форме добавим еще три фигуры, и добавим те же
Cтили слоя (Add a layer style). Здесь мы будем добавлять тарифы на хостинг. Если у вас более чем три позиции, то вы можете создать больше фигур.

Инструментом
Горизонтальный текст (Horizontal Type Tool), мы добавим текст, и в то же время добавим несколько изображений с серверами.

В уроке используется шрифт:
Myriad Pro (курсив)
В середине макета добавим хорошее изображение, и текст.