Создаем макет для бизнес-сайта или сайта услуг

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

В этом уроке мы предлагаем создать сайт с необычным расположением блоков. Это актуальное и изящное решение поможет разместить на сайте много разнообразной информации одновременно.

Сложность: низкая Время: до 1 часа

Навыки для «прокачки»:

- создание разметки сайта - работа с векторными объектами в Фотошопе - растрирование объектов - работа со свойствами слоя

В этом уроке я покажу вам, как создать хороший бизнес-макет сайта. Этот макет может быть использован также для корпоративных целей. Если вы просматривали уроки web дизайна, то я думаю, вы заметите, что урок очень прост. Такой сайт легко применим для работы с движком Word Press и других открытых движков.

Начнем с создания нового документа. В уроке  используются следующие размеры: 960х900 пикс. Этот размер очень хорош, потому что он подойдет практически для всех мониторов. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Активируйте инструмент  Прямоугольник=Rectangle Tool , и создайте несколько форм. Да-да, располагать их на сайте можно так, как вам нравится, но соблюдая разметку. Затем активируйте Прямоугольник со скругленными углами=Rounded Rectangle Tool , и создайте еще одну форму. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Вы можете увидеть этот прямоугольник сверху, он выполнен другим цветом. Это только для того, чтобы вы лучше видели, что сделано. Вам необходимо делать все черного цвета. Выберите 3 слоя, как на картинке ниже. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп И объедините все три слоя в один (нажмите CTRL + E) Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Активируем Перо=Pen Tool, и создадим 2 маленьких треугольника, как на картинке ниже (обратите внимание, используется другой цвет, чтобы вы лучше видели, что именно было сделано) Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп У вас должно быть что-то вроде этого. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп В следующем шаге нужно будет растрировать одну из форм. Для растрирования=Rasterize формы нужно щелкнуть правой кнопкой мышки на форме. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Затем идем Выделение-> 3агрузить выделение=Select-> Load Selection. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Выберите инструмент Прямоугольная область=Rectangular Marquee Tool и переместите выделение как на картинке ниже. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Выберите слой, который мы сделали в начале урока, и нажмите Delete на клавиатуре. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Переместите выделение и на другую сторону и нажмите Delete. После того как вы все сделали, нажмите CTRL + D чтобы снять выделение. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Добавим следующие стили слоя для всех черных форм (дважды кликнув возле названия слоя). Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Вот наш результат на этом этапе. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Еще раз будем использовать инструмент Прямоугольник со скругленными углами =Rounded Rectangle Tool , и создадим несколько форм для наполнения блоков. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Для всех этих белых форм, добавим стили слоя. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Вот наш результат. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Добавим текст с помощью инструмента Горизонтальный текст=Horizontal Type Tool - ссылки категорий выполняйте с большим межстрочным расстоянием и подчеркнутым стилем. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Теперь скачайте этот набор иконок (Твиттер, РСС и другие). Теперь добавим изображения и логотип. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп С правой стороны мы изобразим блок слайд-шоу. Для начала будем использовать Прямоугольник со скругленными углами =Rounded Rectangle Tool , чтобы сделать 5 маленьких форм. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Теперь добавим изображение на пустое место. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп Макет почти готов. Создадим форму поиска. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп На верхней части макета добавим еще одно изображение с изображением 3D-моделей. Это наш окончательный результат. Я надеюсь, вам понравилось. Это был еще один урок из категории, уроки web дизайна. Создаем макет для бизнес-сайта или сайта услуг - уроки фотошоп

Автор: Razvan

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

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

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