Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

179 799 чел. 377 178 работ 3 991 урок
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Сложная

Создай дизайн для автомобильного сайта в Фотошоп

В этом уроке мы будем создавать дизайн шаблона для автомобильного сайта в тёмных цветах.

Конечный результат:


(нажмите на изображение, чтобы увеличить)

Ресурсы урока:

Объёмный объект
Космическая туманность
Космическая туманность 2
Объёмный объект 2
Фоновое изображение

Архив

Шаг 1 – Создание документа
Создайте новый документ в Фотошопе (Ctrl + N) со следующими параметрами:

Шаг 2 – Создание фона
Откройте фоновое изображение, предоставленное в начале урока. Инструментом Перемещение (Move Tool) (V) перетащите его в первый документ и обесцветьте (Ctrl + Shift + U).

Вставьте объёмный документ в наш документ и расположите его в середине холста. Установите Режим наложения (Blending Mode) на Перекрытие (Overlay).

Сделайте копию слоя с объёмным объектом (Ctrl + J) и инструментом Свободное трансформирование (Ctrl + T) измените её размер. Повторите этот процесс пару раз, чтобы получить такой результат:

Создайте слой-заливку Градиент (Gradient Fill). Для этого кликните на иконке чёрно-белого круга в нижней части палитры слоёв.

Создайте ещё один слой-заливку Градиент (Gradient Fill) с другими параметрами.

Шаг 3 – Навигационная панель
Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) (U) со значением Радиуса (Radius) 10 пикселей создайте фигуру. Кликните дважды на слое с ней, чтобы открыть окно стилей. Примените стиль Наложение градиента:

Сделайте копию слоя с прямоугольником (Ctrl + J). Кликните правой кнопкой мыши на копии в палитре слоёв и выберите пункт Очистить стиль слоя (Clear Layer Styles). Расположите эту копию над оригинальным слоем с прямоугольником.

Установите цвет заливки на белый. Создайте новый слой (Ctrl + Shift + N) и инструментом Прямоугольная область (Rectangular Marquee Tool) (M) создайте выделение, как показано ниже.

Залейте выделение белым цветом (Alt + Backspace).

Сделайте выделение оригинального слоя с закруглённым прямоугольником (удерживая Ctrl, кликните на иконке слоя в палитре слоёв).

Инвертируйте выделение (Ctrl + Shift + I). На слое с белым прямоугольником нажмите Delete.

Шаг 4 – Создание разделителя
Создайте новый документ небольшого размера, затем создайте новый слой (Ctrl + Shift + N). Установите цвет заливки на #282828. Инструментом Прямоугольная область (Rectangular Marquee Tool) (M) создайте выделение и залейте его этим цветом.

Создайте ещё один слой и проделайте то же самое, только цветом #181818.

Расположите слой рядом и объедините их (Ctrl + E).

Инструментом Свободное трансформирование (Ctrl + T) сожмите слой, как показано ниже.


Инструментом Перемещение (Move Tool) (V) перетащите разделитель в наш документ.

Инструментом Горизонтальный текст (Horizontal Type Tool) (T) напишите названия разделов и сделайте несколько копий разделителя. Всё нужно расположить таким образом:

Шаг 5 – Основная область контента
Создайте закруглённый прямоугольник с радиусом 10 пикселей чёрного цвета. Примените к нему стиль Наложение градиента:

Создайте ещё один прямоугольник и примените к нему тот же стиль (можете его просто скопировать).

Под последним прямоугольником создайте ещё один для навигации по страницам. Радиус этого закруглённого прямоугольника должен быть 5 пикселей. Примените к нему стиль Обводка:

Шаг 6. Создайте новый слой над слоем с нижним прямоугольником (Ctrl + Shift + N) и объедините их (Ctrl + E). К этому слою добавьте маску слоя (кликните на иконке маски в нижней части палитры слоёв). Выберите инструмент Градиент (Gradient Tool) (G) и настройте так:

Сделайте выделение слоя с нижним прямоугольником (удерживая Ctrl, кликните на иконке слоя).

Цвет заливки - #636262. Сделайте заливку, как показано ниже.

Шаг 7 – Создание сайдбара
Создайте закруглённый прямоугольник с радиусом 5 пикселей справа. Примените к нему 1-пиксельную обводку цветом #636262.

Создайте новый слой (Ctrl + Shift + N). Инструментом Прямоугольная область (Rectangular Marquee Tool) (M) сделайте выделение внутренней части и залейте его цветом #0F0F0F.

Создайте новый слой и сделайте выделение слоя с внутренней частью. Выберите инструмент Градиент (Gradient Tool) (G), цвет заливки - #636262. Сделайте заливку, как показано ниже.

Создайте ещё один закруглённый прямоугольник. Повторите для него всё то же самое.

Шаг 8 – Разделители области контента
Создайте большой закруглённый прямоугольник, как показано ниже.

Примените стиль Обводка:

Установите Заливку (Fill) слоя на 0%.

Повторите процесс, чтобы добавить ещё два разделителя.

Шаг 9 – Кнопки сайдбара
Создайте обычный прямоугольник на сайдбаре и примените к нему стиль Обводка:

Сделайте много копий этого слоя и расположите их, как показано ниже, при помощи инструмента Перемещение (Move Tool) (V).

Шаг 10 – Навигационные кнопки
Создайте новый слой и установите цвет заливки на #252525. Инструментом Прямоугольная область (Rectangular Marquee Tool) (M) создайте выделение, как показано ниже. Затем залейте его (Alt + Backspace). Выберите текстовый инструмент и напишите “Previous Page”. Я использовал шрифт “Cambria Math”.

Подобным образом создайте несколько кнопок. У Вас должен получиться такой результат:

При помощи текстового инструмента добавьте текст на другие области.

Шаг 11 – Поисковое поле
Создайте прямоугольник цветом #CECECE. Затем напишите “search this  site” цветом #828282.

Выберите инструмент Произвольная фигура (Custom Shape Tool) (U) и выберите фигуру лупы.

Создайте иконку.

Шаг 12 – Активный раздел
Сейчас мы создадим маленький треугольник красного цвета, который будет показывать активный раздел на панели навигации. При помощи инструмента Произвольная фигура (Custom Shape Tool) (U) или Перо (Pen Tool) (P) нарисуйте треугольник.

Примените к нему стиль Тень (Отбрасывание тени):

Затем стиль Наложение цвета:

Шаг 13 – Световые эффекты
Откройте изображение туманности и вставьте его в наш документ.

Инструментом Свободное трансформирование (Ctrl + T) измените его размер и обесцветьте (Ctrl + Shift +U).

Установите Режим наложения (Blending Mode) на Линейный осветлитель (Linear Dodge).

Повторите процесс для второго изображения космической туманности.

Теперь добавьте второй объёмный объект и измените его размер.

Расположите слой с ним под слоями элементов сайта.

Создайте новый слой (Ctrl + Shift + N) и выберите инструмент Кисть (Brush Tool) (B). Задайте ему размер – 3 пикселя и Жёсткость – 100%. Цвет заливки – белый. Инструментом Перо (Pen Tool) (P) нарисуйте контур, как показано ниже. Кликните правой кнопкой мыши на холсте и выберите пункт Выполнить обводку контура (Stroke Path).

В появившемся окне выберите Кисть (Brush).

Шаг 17 – Добавление световых эффектов на навигационную панель
Вставьте второе изображение туманности в наш документ, измените размер и сотрите ненужные участки. Установите Режим наложения (Blending Mode) на Линейный осветлитель (Linear Dodge).

Если хотите усилить эффект, сделайте копию слоя.

Конечный результат:


(нажмите на изображение, чтобы увеличить)

Автор: Michaellee Patricio.

Комментарии 31

jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте,
jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Спасибо. Полезный урок!!!)))

Урок взят за основу, как идея оформления. Остальное от себя уже.

Спасибо! Урок полезный и познавательный. Но в некоторых местах, какой-то бестолковый. Не хватает мелочей, большую часть пришлось делать от себя. Получилось немного не так как в оригинальном варианте)

Спасибо большое за перевод урока, техники очень доступны и полезны. Вместо авто-тематики я предпочла тему PC-игр, а именно Resident Evil. Получилось отлично. Спасибо вам за труд, вы молодцы, ребята!

Спасибо за урок! (правда есть некоторые неточности), но тем больше опыта!

Спасибо за урок_))))

Неплохой урок спасибо,узнал много чего нового!

Спасибо за урок! Но..разве так можно писать(объяснять)?:)

Спасибо за урок!))) Интересно) Не знаю как оно всё на практике, но делать интересно было)

Спасибо за урок!

Спасибо, интересный урок!

RomanNad,рубрика называется графика для сайта,здесь представлены шаблоны сайтов,а веб-дизайн это совсем другое понятие, не путайте пожалуйста!!!!

@nika интересно что по вашему тогда web-дизайн если не это)) ...RomanNad, делают еще как, но только канеш все долго будет грузиться, если все нарисовать и вставить :) По поводу того чтоб не выкладывали, а почему бы и не выкладывать. Мне порой интересно глянуть как какой-нибудь элемент сделан, как будет вставлен итд, что можно выделить из этого дизайна, все равно не всегда ведь получается придумывать что то новое, а тут зашел посмотрел и какая-нибудь идея в голову пришла)

Обязательно нарисую

У меня ничерта не получалось как на скриншотах, пока я не перешла на источник урока. Перевод неверный!

Администраторы, пожалуйста не добавляйте подобные левые уроки по веб-дизайну...Так дизайн сайтов не делают же...уже надоели подобные вещи мозолить глаза

Ну так сделайте свой урок, как делают!!!!

Глеб, спасибо! Очень красиво и стильно!!!
А объёмные объекты — это, наверное то, во что превращается автомобиль, если водитель не умеет ездить. Автор юморист...

Спасибо, очень интересный дизайн

Здравствуйте админ сайта! А как все, что ты делал на фотошопе перенести в бокнот. чтобы это потом работало? Сделайте лучше видео на щёт таго как создать дизайн сайта, а потом как это поместить в блокнот. Там же надо коды прописывать. Добавьте меня в скайп пожалуйста: loxzorcost

Зделал шаблон сайта в Photoshop ..Довольно таки не плохо получилось..Но как зделать что бы все работало..Ну ссилки , меню ,Интерфейс кнопки ..Так то ето просто картинка..Ну фон..Обясните детально ПОЖАЛУЙСТА..

Разработчики! Уберите экранирующие "слэши" с "ковычек"! Научитесь обрабатывать уязвимости "инпутов" по-другому! =)

Deecay,наверное я не точно высказалась,так как я имела ввиду,что многие шаблон считают готовым сайтом(с рабочими ссылками!) поэтому и бесятся,что у них он не работает,мол как же так...Хотя я согласна с вами,что и цельный шаблон можно вставить,только долго это грузится.Извиняюсь за каламбур в предыдущем коменте )))) это и есть веб-дизайн

Еще 1 Комментарии
Добавить комментарий / работу
Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Пожаловаться Удалить

Оставить комментарий

(до 5 шт jpg, png, gif)
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Добавить комментарий / работу
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.