Сегодня будет урок из категории уроки Интерфейсов и WEB дизайна, в котором мы будем создавать макет сайта для отеля или ресторана.
Навыки для «прокачки»:
- создание композиции- создание паттерна- работа со стилями слоя- работа с заливками и градиентамиСоздайте новый документ размерами 1000*1100 пикселей.
Сохраните изображение ниже на вашем компьютере. Мы будем использовать это изображение, чтобы создать фон для нашего макета.
Откройте изображение в Photoshop, а затем перейдите к Редактирование-> Определить узор=Edit> Define Pattern.
Вы можете закрыть документ с этим фоновым изображением, а затем нужно добавить этот шаблон на наш документ. Чтобы добавить шаблон необходимо выбрать инструмент Заливка=Paint Bucket Tool. Убедитесь, что вы выбрали образец, который Вы только что создали.
Нажмите один раз на вашем документе. Вот что должно получиться.
Как вы видите, мы заполнили весь документ, если в нижней части макета что-то выглядит не очень хорошо, вы можете решить эту проблему очень быстро. С помощью инструмента Кисть=Brush Tool закрасим нижнюю часть макета. Очень важно, какой цвет вы выберите. Я рекомендую вам использовать инструмент Пипетка=Eyedropper tool.
Инструментом Прямоугольник со скругленными углами =Rounded Rectangle Tool создайте форму в середине макета.
Добавим следующие стили слоя:
Вот что должно получиться.
Теперь это зависит от вас, что вы будете добавлять на это место. В уроке используется только изображение с рестораном, вы можете просмотреть наши предыдущие уроки Интерфейсов, и взять что-нибудь из них, или вы можете создать здесь хороший слайд-шоу.
Сверху создадим другую полукруглую форму. Эта форма будет преобразована в простое меню.
Добавим следующие стили слоя.
Вот наш результат.
Далее будем использовать еще раз Прямоугольник со скругленными углами=Rounded Rectangle Tool , чтобы создать три фигуры.
Для всех этих фигур, будем использовать следующие стили слоя.
Вот что должно получиться.
Теперь используйте инструмент Перо=Pen Tool , чтобы создать подобную форму, как вы видите на картинке ниже.
Добавим следующие стили слоя.
Вот наш результат.
Дублируйте слой несколько раз, и разместите эти изображения как на картинке ниже.
Далее добавим текст и изображения на наш макет.
Используйте инстумент Перо=Pen Tool снова, чтобы создать что-то вроде изображения шарфа.
Как вы видите, нужно добавить тот же стиль слоя, что и для верхнего меню.
Теперь напишем "Добро пожаловать в Grafpedia". Это наш конечный результат!
