
Сегодня будет урок из категории уроки Интерфейсов и WEB дизайна, в котором мы будем создавать макет сайта для отеля или ресторана.
Сложность: низкая
Время: до 1 часа
Навыки для «прокачки»:
- создание композиции
- создание паттерна
- работа со стилями слоя
- работа с заливками и градиентами
Создайте новый документ размерами 1000*1100 пикселей.
Сохраните изображение ниже на вашем компьютере. Мы будем использовать это изображение, чтобы создать фон для нашего макета.

Откройте изображение в Photoshop, а затем перейдите к Редактирование-> Определить узор=Edit> Define Pattern.
Вы можете закрыть документ с этим фоновым изображением, а затем нужно добавить этот шаблон на наш документ. Чтобы добавить шаблон необходимо выбрать инструмент Заливка=Paint Bucket Tool. Убедитесь, что вы выбрали образец, который Вы только что создали.
![]()
Нажмите один раз на вашем документе. Вот что должно получиться.

Как вы видите, мы заполнили весь документ, если в нижней части макета что-то выглядит не очень хорошо, вы можете решить эту проблему очень быстро. С помощью инструмента Кисть=Brush Tool закрасим нижнюю часть макета. Очень важно, какой цвет вы выберите. Я рекомендую вам использовать инструмент Пипетка=Eyedropper tool.

Инструментом Прямоугольник со скругленными углами =Rounded Rectangle Tool создайте форму в середине макета.

Добавим следующие стили слоя:




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

Теперь это зависит от вас, что вы будете добавлять на это место. В уроке используется только изображение с рестораном, вы можете просмотреть наши предыдущие уроки Интерфейсов, и взять что-нибудь из них, или вы можете создать здесь хороший слайд-шоу.

Сверху создадим другую полукруглую форму. Эта форма будет преобразована в простое меню.

Добавим следующие стили слоя.



Вот наш результат.

Далее будем использовать еще раз Прямоугольник со скругленными углами=Rounded Rectangle Tool , чтобы создать три фигуры.

Для всех этих фигур, будем использовать следующие стили слоя.


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

Теперь используйте инструмент Перо=Pen Tool , чтобы создать подобную форму, как вы видите на картинке ниже.

Добавим следующие стили слоя.




Вот наш результат.

Дублируйте слой несколько раз, и разместите эти изображения как на картинке ниже.

Далее добавим текст и изображения на наш макет.

Используйте инстумент Перо=Pen Tool снова, чтобы создать что-то вроде изображения шарфа.

Как вы видите, нужно добавить тот же стиль слоя, что и для верхнего меню.
Теперь напишем "Добро пожаловать в Grafpedia". Это наш конечный результат!

Ссылка на источник: http://www.grafpedia.com/


(+3 баллов, 3 оценок)