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

Источник: designlessons
Razvan

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

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

Сложность: низкая
Время: до 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/

Выполнив все шаги урока вы получите примерно такое в вашем фотошопе:


Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=28084