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

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

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

Шаг 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. Информация о правах

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

 

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

 

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

 

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

Heres an example http://collegewritingservice.org that happened just a couple of weeks ago.

Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©