На Вашем компьютере обнаружен устаревший браузер!
(Доступ на сайт будет ограничен)
Советуем Вам скачать новую версию браузера:
Yara

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

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

Сегодня будет урок из категории уроки Интерфейсов и 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 оценок)
Loading ... Loading ...
Написать комментарий

Подписаться, не комментируя

.