Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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



Дизайн сайта «Пираты Карибского моря»


Шаг 1. Создание документа


Создайте новый документ в Фотошопе (Ctrl + N) с такими параметрами:

Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Вставьте текстуру цемента в наш документ.

Дизайн сайта «Пираты Карибского моря»


Создайте заливочный слой Цвет (Fill Layer – Solid Color): #2e210c. Установите режим наложения на Жёсткий свет (Blending Mode – Hard Light).

Дизайн сайта «Пираты Карибского моря»


Понизьте непрозрачность слоя текстуры до 40%, а фоновый слой залейте цветом #151005.

Дизайн сайта «Пираты Карибского моря»


Шаг 2. Создание меню


Создайте новую группу (Create New Group) и назовите её «The menu». Вставьте изображение папирусной ленты.

Дизайн сайта «Пираты Карибского моря»


К слою с навигационной лентой примените стиль Отбрасывание тени (Layer Style – Drop Shadow):

Дизайн сайта «Пираты Карибского моря»


Вырежьте череп с саблями из одного их этих изображений и расположите в центре навигационной панели.

Дизайн сайта «Пираты Карибского моря»


Создайте новый слой под слоем черепа и мягкой кистью нарисуйте тень под ним.

Дизайн сайта «Пираты Карибского моря»


Установите шрифт «Pieces of Eight» и инструментом Горизонтальный текст (Horizontal Type Tool) напишите названия разделов сайта. К текстовым слоям примените стиль Отбрасывание тени (Layer Style – Drop Shadow).

Дизайн сайта «Пираты Карибского моря»


Напишите название сайта и примените следующие стили:

Отбрасывание тени: Режим – Умножение.

Дизайн сайта «Пираты Карибского моря»


Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Дизайн сайта «Пираты Карибского моря»


Наложение узора: Режим – Перекрытие.

Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Шаг 3. Создание слайдера


Загрузите деревянную текстуру и вставьте её в наш документ.

Дизайн сайта «Пираты Карибского моря»


Добавьте маску к слою с текстурой и вырежьте середину, как показано на скриншоте.

Дизайн сайта «Пираты Карибского моря»


Создайте копию слоя-заливки, который мы создавали для фона, и поднимите её над деревянной рамкой. Создайте обтравочную маску (Ctrl + Alt + G), чтобы затемнить только рамку.

Дизайн сайта «Пираты Карибского моря»


Вставьте в деревянную рамку какое-нибудь изображение, относящееся к фильму «Пираты Карибского моря». Примените к нему стиль Внутренняя тень (Layer Style – Inner Shadow):

Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Шаг 4. Создание факелов


Откройте это изображение в Фотошопе. Инструментом Прямоугольная область (Rectangular Marquee Tool) выделите правый факел и перенесите его в основной документ. Инструментом Ластик (Eraser Tool) сотрите всё лишнее.

Дизайн сайта «Пираты Карибского моря»


Создайте новый слой и выберите мягкую кисть с 20% непрозрачностью. Белым цветом нарисуйте дым от факела.

Дизайн сайта «Пираты Карибского моря»


Создайте два новых слоя под факелом. На одном нарисуйте белое свечение от факела, а на другом – оранжевое. Для обоих слоёв установите режим наложения Перекрытие (Blending Mode – Overlay).

Дизайн сайта «Пираты Карибского моря»


Объедините все слои факела в группу (Ctrl + G) и создайте копию. Поверните второй факел в другую сторону (Transform – Flip Vertical) и поставьте его на другой край деревянной рамки.

Дизайн сайта «Пираты Карибского моря»


Шаг 5: Новостные блоки


Создайте новую группу «treasure» и вставьте деревянную доску под слайдер. Можете вырезать её из той же текстуры дерева, которую мы использовали для рамки слайдера. Создайте заливочный слой, чтобы сделать доску тёмно-коричневой.

Дизайн сайта «Пираты Карибского моря»


К доске примените тот же стиль Отбрасывание тени, чтобы и к главному меню.

Дизайн сайта «Пираты Карибского моря»


Текстовым инструментом напишите приглашение к игре.

Дизайн сайта «Пираты Карибского моря»


Вырежьте сундук и череп из этого изображения.

Дизайн сайта «Пираты Карибского моря»


Создайте новый слой под сундуком и черепом и нарисуйте тень.

Дизайн сайта «Пираты Карибского моря»


Создайте ещё один такой блок. Используйте старую картну в качестве иконки.

Дизайн сайта «Пираты Карибского моря»


На данный момент всё должно выглядеть так:

Дизайн сайта «Пираты Карибского моря»


Шаг 6. Секция видеороликов


Создайте новую группу «box movie 1». Вырежьте из текстуры дерева доску и вставьте её в наш документ.

Дизайн сайта «Пираты Карибского моря»


Создайте несколько копий доски и расположите их так:

Дизайн сайта «Пираты Карибского моря»


При помощи слоя-заливки сделайте рамку коричневой.

Дизайн сайта «Пираты Карибского моря»


В одном из углов рамки создайте небольшой круг (гвоздь) инструментом Эллипс (Ellipse Tool). Примените к нему несколько стилей:

Отбрасывание тени: Режим – Перекрытие.

Дизайн сайта «Пираты Карибского моря»


Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Дизайн сайта «Пираты Карибского моря»


Обводка: Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Линейный.

Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Создайте три копии гвоздя и поставьте их на остальные углы.

Дизайн сайта «Пираты Карибского моря»


Вставьте кадр из фильма в деревянную рамку и примените тот же стиль Внутренняя тень, что и для изображения слайдера.

Дизайн сайта «Пираты Карибского моря»


Создайте новую группу «le player». В центре рамки создайте круг цветом #453522.

Дизайн сайта «Пираты Карибского моря»


Примените к кругу следующие стили:

Внешнее свечение: Режим – Перекрытие, Метод – Мягкий.

Дизайн сайта «Пираты Карибского моря»


Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Дизайн сайта «Пираты Карибского моря»


Наложение узора: Режим – Перекрытие.

Дизайн сайта «Пираты Карибского моря»


Обводка: Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет.

Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Создайте треугольник цветом #14110b при помощи инструмента Произвольная фигура (Custom Shape Tool).

Дизайн сайта «Пираты Карибского моря»


Создайте три копии видео рамки и расположите их справа.

Дизайн сайта «Пираты Карибского моря»


Шаг 7. Кнопка для слайдера


Создайте копию кнопки воспроизведения и расположите её на изображении слайдера. Увеличьте кнопу в режиме Свободное трансформирование (Free Transform) и измените стили:

Внешнее свечение: Режим – Перекрытие.

Дизайн сайта «Пираты Карибского моря»


Наложение градиента:

Дизайн сайта «Пираты Карибского моря»


Наложение узора: Режим – Перекрытие.

Дизайн сайта «Пираты Карибского моря»


Обводка: Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет.

Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Шаг 8. Секция подписки


Вставьте деревянную доску в самый низ сайта.

Дизайн сайта «Пираты Карибского моря»


Скопируйте гвозди на доску.

Дизайн сайта «Пираты Карибского моря»


Текстовым инструментом напишите «Get In Touch With Us» и примените стиль Отбрасывание тени: Режим – Перекрытие.

Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Создайте поле для ввода e-mail при помощи кисти цветом #0e0b06.

Дизайн сайта «Пираты Карибского моря»


Примените следующие стили к полю:

Отбрасывание тени: Режим – Перекрытие.

Дизайн сайта «Пираты Карибского моря»


Внутренняя тень: Режим – Умножение.

Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Текстовым инструментом подпишите поле.

Дизайн сайта «Пираты Карибского моря»


Справа от поля для ввода e-mail создайте ещё одну деревянную кнопку. Примените к ней стиль Отбрасывание тени: Режим – Перекрытие.

Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Напишите на кнопке «Send».

Дизайн сайта «Пираты Карибского моря»


Шаг 9. Информация о правах


Напишите информацию по правах и примените стиль Отбрасывание тени с теми же настройками, что и для заголовка сайта.

Дизайн сайта «Пираты Карибского моря»


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



Дизайн сайта «Пираты Карибского моря»

Дизайн сайта «Пираты Карибского моря»


Ссылка на источник урока

написал : Kite

Спасибо за урок и сайт отличный!!!

---------------


написал : positive11

Kite, рады, что Вам понравилось!

---------------


написал : Aleksei

Урок - супер. Очень благодарен!!!)))

---------------


написал : Вячеслав

как Вставьте текстуру цемента в наш документ.????

---------------


написал : Radu

Superrrrrr....... wink

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: