Блог

Веб интерфейс для автомобльного сайта

Подготовительные работы:
Нам понадобится несколько хороших изображений спортивного автомобиля. В данном уроке была использована Тойота FT-HS Hybrid. Вы можете найти картинки просто задав на поисковых сайтах слова «спортивные автомобили». Все права на эти ресурсы принадлежат их уважаемым владельцам.

Шаг 1- Установка заднего фона Создайте новый документ размером 900x550 пикселей. Установите цвет переднего фона на #6D6C67, а заднего на #FFFFFF. Заполните слой фона Линейным градиентом

(Linear Gradient) сверху вниз.

Шаг 2а – Формирование шапки Откройте передний вид автомобиля и определите на картинке те части, которые могут быть использованы для формирования шапки. В этом уроке использовано часть бампера, т.к. он имеет красивые изгибы. Используя инструмент Перо

(Pen Tool), обведите нужную часть.

Шаг 2b – Формирование шапки Кликните правой клавишей мышки по контуру и выберите Образовать выделенную область (Make Selection). Выберите инструмент Перемещение

(Move Tool) и перетащите выбранный фрагмент в документ выше слоя заднего фона. Зайдите в Редактирование > Трансформирование > Отразить по вертикали (Edit > Transform > Flip Vertical) и поместите фрагмент возле правого верхнего угла.

Шаг 2c – Формирование шапки Теперь потребуется увеличить длину верхней полосы. Используя инструмент выделения Прямоугольная область

(Rectangular Marquee Tool) выделите небольшой кусочек верхней полосы. Нажмите Ctrl+C для копирования и Ctrl+V для вставки. Возможно, эту операцию придется повторить, даже несколько раз. Объедините все вставленные полосы с помощью инструмента Перемещение

(Move Tool), как показано на изображении внизу.

Шаг 2d – Формирование шапки У нас есть готовая часть шапки. Теперь займемся нижней частью. На одном из изображений есть тоже красивые изгибы. Используя инструмент Перо

(Pen Tool), повторите шаги 2a и 2b, за исключением трансформирования.

Шаг 2e – Формирование шапки Поместите вырезанную часть ниже верхнего изображения так, чтобы было похоже на рамку. Если нужно, используйте инструмент Ластик

(Eraser Tool) с малой жесткостью, чтобы соединить 2 изображения. Обычно достаточно немного убрать края.

Шаг 2f – Формирование шапки Так же как в шаге 2c, нам нужно растянуть нижнюю часть шапки. Используйте инструмент выделения Прямоугольная область

(Rectangular Marquee Tool), сделайте выделение нижнего фрагмента на 1 пиксель. Зайдите в Редактирование > Свободное трансформирование (Edit > Free Transform) и затем растяните полосу в левую сторону.

Шаг 2g – Формирование шапки Теперь перейдем к последней части шапки. С помощью инструмента Перо

(Pen Tool) вырежьте одно из колес. Не забудьте включить некоторые части машины также, потому что они будут полезны для дальнейшей работы.

Шаг 2h – Формирование шапки Перетащите фрагмент с колесом в документ и поместите его как показано ниже. С помощью инструмента Ластик

(Eraser Tool) с малой жесткостью, соедините все 3 изображения, чтобы они выглядели как одно целое.

Шаг 3a – Формирование боковой части На изображениях-источниках не было возможности найти подходящие формы для боковой части. Поэтому, просто создайте новый слой ниже шапки (назовите его «белые линии»), и нарисуйте 3 вертикальные полосы. Использовались следующие цвета (слева направо): #BDC0C5, #FFFFFF и #DAD7E0.

Шаг 3b – Формирование боковой части Создайте новый слой ниже слоя «белые линии». Назовите его «черные линии». В данном случае была нарисована линия цветом #222222. Это для того, чтобы создать контраст в том месте, где белые внешние линии соприкасаются черными внутренними частями.

Шаг 3c – Формирование боковой части Найдите другую часть, которая может быть использована как фрагмент боковой части. Вырежьте понравившуюся часть с помощью инструмента Перо

(Pen Tool) и перетащите его в документ.

Шаг 3d – Формирование боковой части Зайдите в Редактирование > Трансформирование > Отразить по горизонтали (Edit > Transform > Flip Horizontal). Используйте Свободное трансформирование (Free Transform) для поворота фрагмента так, чтобы он подошел к уже существующему фрагменту.

Шаг 4а – Формирование навигационной панели На данном этапе нам нужно сформировать площадку для навигационных кнопок. Вырежьте часть картинки с помощью инструмента Перо

(Pen Tool) как показано ниже.

Шаг 4b – Формирование навигационной панели Поместите фрагмент как показано ниже. Используйте инструмент выделения Прямоугольная область

Шаг 4c – Формирование навигационной панели Объедините все созданные слои, кроме заднего фона. Продублируйте этот объединенный слой и зайдите в Редактирование > Трансформирование > Отразить по горизонтали (Edit > Transform > Flip Horizontal). Совместите 2 части, согласно ширины Вашего будущего интерфейса. Создайте новый слой ниже интерфейса, назовите его «основа». Заполните пустое место разными цветами. В данном случае использовались цвета #000000, #8E352C и #131315.

Шаг 4d – Формирование навигационной панели Создайте новый слой выше слоя «основа» и назовите этот слой «линии». Нарисуйте двойные линии для отделения кнопок. Используйте цвета #BA594A и #5C0000

Шаг 4e – Формирование навигационной панели Создайте новый слой выше слоя «линии» и назовите этот слой «тени». Используя инструмент Мягкая Кисть

(Soft Brush Tool) с цветом #000000, нарисуйте несколько теней вокруг навигационных кнопок как показано ниже.

Дополнительно: Теперь можете добавить картинки и надписи для завершения интерфейса. Например, в этом уроке использовались логотип и скриншоты из Midnight Club 3. Данный урок показывает только базовые методы для создания интерфейса с помощью изображений машин. Можно использовать даже мотоциклы и грузовики.

Наслаждайтесь уроком.