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

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

Сегодня будет урок из категории уроки Интерфейсов и 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/

Комментариев 2

  1. Офлайн
    Максим
    Максим 22 августа 2011 10:34
    + 0 -
    когда рисуеш макет сайта просят чтобы при наведении курсора на текст он менялся. Что нужно рисовать в фотошопе чтобы при вставке макета люди могли при наведении курсора увидеть изменившийся текст
  2. Офлайн
    Татьяна
    Татьяна 3 января 2012 14:57
    + 0 -
    Этот эффект достигается не при помощи Фотошоп, а при кодировке сайта, с помощью css, java-script, и других дополнений к веб-дизайну.

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика