Дизайн элегантного шаблона сайта для отелей и ресторанов 0

Дизайн элегантного шаблона сайта для отелей и ресторанов - уроки фотошоп


Сегодня будет урок из категории уроки Интерфейсов и 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". Это наш конечный результат!

Дизайн элегантного шаблона сайта для отелей и ресторанов - уроки фотошоп

Сайт: designlessons.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте: vk.com/designlessons

И в Твиттере: twitter.com/DesignLessons

Информация
Автор / Разработчик
Автор не указан
Перевел
Автор перевода не указан
Сложность
Легкая
Источник
Добавил
Yara
Дата
17-06-2019, 21:25
Метки:  еще статьи

Поделиться ссылкой

Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии (0)

Имя
Эл. почта
Комментарий
Вопрос: 6 + 1 =

Для активации данной функции необходимо зарегистрироваться и авторизоваться на сайте.

Ваш IP: 204.236.235.245
Последние уроки
Вконтакте
Архив сайта
.