Рубрика: Photoshop Уроки | Урок прочитали: 520
 (голосов: 1)

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

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

Шаг 1- Установка заднего фона
Создайте новый документ размером 900 на 550 пикселей. Установите цвет переднего фона на #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 – Формирование навигационной панели
Поместите фрагмент как показано ниже. Используйте инструмент выделения Прямоугольная область (Rectangular Marquee Tool), сделайте выделение  нижнего фрагмента на 1 пиксель. Зайдите в Редактирование > Свободное трансформирование (Edit > Free Transform) и затем растяните полосу в левую сторону.

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

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

Шаг 4e – Формирование навигационной панели
Создайте новый слой выше слоя «линии» и назовите этот слой «тени». Используя инструмент Мягкая Кисть (Soft Brush Tool) с цветом #000000, нарисуйте несколько теней вокруг навигационных кнопок как показано ниже.

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

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

Автор: Johnson Koh
Переводчик: Андрей Кулаков
Ссылка на источник

           

Похожие файлы и публикации:

Web-интерфейс для автомобильного сайта
Шаг 1. Настройка заднего фона Создайте документ размером 750х550 px. В качестве переднего плана используйте цвет #FF84C3 и для заднего фона цвет #AE1D51. Залейте фоновый слой линейным градиентом (linear gradient) сверху вниз.
Web-интерфейс для автомобильного сайта
Скачайте Экшн от Night Fate здесь
Web-интерфейс для автомобильного сайта
Идите в Filter > Sharpen > Sharpen ( Фильтр – Резкость – Резкость). Назовите слой S1. Создайте новый слой под слоем S1 и воспользуйтесь инструментом Прямоугольная область (Rectangular marquee tool) для того, чтобы произвести выделение:
Web-интерфейс для автомобильного сайта
В этом уроке мы будем создавать стильную черную навигацию для сайта. Вот так она будет выглядеть в конце урока:
Web-интерфейс для автомобильного сайта
Сегодня шаг за шагом вы учитесь рисовать талисман львёнка в программе Photoshop. Данный урок использует основы применения инструмента Перо (Pen) и инструментов выделения для создания контуров, раскраски и затенения.
Web-интерфейс для автомобильного сайта
В этом уроке я расскажу, как создать красивый пейзаж с закатом. Я использовал несколько изображений, которые Вы можете скачать по ссылкам ниже. Ссылка на изображение с закатом. Ссылка на изображение с холмами. Ссылка на изображение с вигвамом.
Web-интерфейс для автомобильного сайта
В этом небольшом фотошоп уроке мы будем создавать разноцветные обои с эффектом трёхмерной радуги. Начнём с создания нового документа в Photoshop - около 1900 × 1200 пикселей, или какой вы захотите. Лучше использовать разрешение по умолчанию, 72 пикс./д. Теперь  применим инструмент прямоугольное выделение  (Rectangular Marquee Tool) для создания одной полосы примерно 1/7 холста и заполним выделенную область цветом  #490d69.
Web-интерфейс для автомобильного сайта
Шаг 1. Первым  делом, создайте новый документ с такими размерами  1280×1024  72 пикс. на дюйм  (File>New 1280×1024 px and 72 dpi).  Установите цвет переднего плана черный и с помощью инструмента Заливка (Paint Bucket Tool (G)), залейте фоновый слой.
Web-интерфейс для автомобильного сайта
В этом уроке я покажу, как нарисовать красную сумку для покупок. В этом уроке будут приведены основные приёмы рисования, такие как создание фигур, затемнение, и добавление теней.
Web-интерфейс для автомобильного сайта
Посмотрите на конечное изображение, которое получится после данного урока.
Web-интерфейс для автомобильного сайта
Сегодня я собираюсь показать Вам, как с помощью изображения модели и простых форм, можно создать потрясающий плакат. Вы узнаете, полезные советы для успешной работы с градиентами и стилями слоя. Давайте начнем!
Web-интерфейс для автомобильного сайта
В этом уроке я расскажу, как создать иллюстрацию со скрученными световыми лентами.
Web-интерфейс для автомобильного сайта
В сегодняшнем уроке я покажу, как создать простую шапку сайта в виде ленточки.
Web-интерфейс для автомобильного сайта
Здравствуйте уважаемые пользователи сайта photoshop-master.ru В этом уроке мы научимся рисовать красивые светящиеся баночки.
Web-интерфейс для автомобильного сайта
В этом уроке мы научимся рисовать губную помаду. Вот, что у нас получится.
Web-интерфейс для автомобильного сайта
В этом уроке мы узнаем, как нарисовать веселого мальчика в Фотошоп. Вот, что должно у нас получиться.
Web-интерфейс для автомобильного сайта
Здравствуйте, В этом уроке я хочу показать вам, как просто сделать смешной мультяшный рисунок!  Вам нужно всего лишь изображение текстуры травы, а всё остальные мы будем рисовать:  радугу, небо и облака.
Web-интерфейс для автомобильного сайта
В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта.