Уроки Веб и приложения Stark 17 февраля 2012

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

Сложность урока: Сложный

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

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


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

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

Объёмный объект
Космическая туманность
Космическая туманность 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.

Источник: www.psdeluxe.com

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

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

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

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

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

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

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

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

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

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

oTpSanTo, постигай HTML и CSS и тогда ты сможешь "оживить" макет. В Photoshope, правда, есть инструмент нарезки страницы и конвертация в html-страницу, называется "Slice" ("Раскройка", по-славянски) и находится в группе инструментов "Выделение", но это то же самое, если бы унитаз в туалете был прикручен к потолку, а не к полу. Т.е. физически, может с ним и возможно что-то сделать, но ни разу не эффективно! =)
Набери в поисковике htmlbook и будет тебе счастье! =)

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

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

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

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

Хороший урок!!!

класный урок :)

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

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

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

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

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

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

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

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

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

Спасибо!

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

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

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

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

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

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее