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

Макет игрового сайта в Фотошоп

Итоговый результат:

Исходники:

  1. Фон
  2. Шрифт
  3. Иконки

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

Создайте новый документ (Ctrl+N) размером 1200х1340px и чёрным (#000000) фоном. Скачайте фон для сайта и скопируйте в документ. Расположите его так, чтобы солнечная вспышка находилась в правом верхнем углу. Добавьте маску слоя к фону, и залейте слой линейным градиентом снизу вверх, у Вас должно получится, примерно, то же, что и на картинке ниже.

Шаг 2. Создание логотипа

Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом в 10px (Это будет радиус по умолчанию) и создайте прямоугольник 360х105px.

Добавьте прямоугольнику следующие стили: Blending Options (режим наложения), Drop Shadow (Тень), Stroke (Обводка).

У Вас должно будет получиться что-то вроде этого:

Внутри прямоугольника добавьте название сайта и слоган, используя инструмент Текст (Type Tool).(Название сайта напишите шрифтом Virgo 01)

Стили для первого слова в названии сайта: Drop Shadow (Тень), Gradient Overlay (Наложение градиента).

Стили для второго слова: Drop Shadow (Тень), Gradient Overlay (Наложение градиента).

У Вас получится что-то вроде этого:

Шаг 3. Создание навигации.

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и нарисуйте под логотипом прямоугольник.

Добавьте к слою следующие стили: Blending Options (режим наложения), Drop Shadow (Тень), Inner Shadow (Внутренняя тень), Gradient Overlay (Наложение градиента), Stroke (Обводка).

Получится должно что-то вроде этого:

Теперь, Вам нужно будет создать узор. Создайте новый документ (Ctrl+N) 9x9px, выберите инструмент Лупа (Zoom Tool) и максимально приблизьте документ. Возьмите инструмент Карандаш (Pencil Tool) и нарисуйте то же, что и на картинке ниже.

После этого перейдите в Редактирование > Определить узор (Edit > Define Pattern), сохраните свой узор и вернитесь к шаблону. Загрузите выделение для слоя с навигацией.

Совет:
Для загрузки выделения зажмите кнопку Ctrl и кликните ЛКМ по иконке слоя в панели слоёв. Теперь возьмите инструмент Заливка (Fill Tool) и выберите свой узор в списке узоров.

На новом слое залейте выделение и установите Непрозрачность (Opacity), примерно, на 7%.

Возьмите инструмент Текст (Type Tool) и добавьте свои пункты меню.

Создайте оранжевый (#d88503) прямоугольник, используя инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), и поместите его под слой с текстовой навигацией.

Выберите инструмент Овальная область выделения (Elliptical Marquee Tool) и создайте небольшой овал в правой стороне навигации. Залейте овал белым (#FFFFFF) цветом и добавьте размытие по Гауссу, Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Guassian Blur), Радиус - 5px.

Добавьте стиль Внешнее свечение (Outer Glow) используя настройки ниже: Outer Glow (Внешняя тень).

Должно получится что-то вроде этого:

Шаг 4. Создание области контента.

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и создайте 3 прямоугольника.

Для каждого прямоугольника добавьте следующие стили слоя: Blending Options (режим наложения), Drop Shadow (Тень), Inner Shadow (Внутренняя тень), Gradient Overlay (Наложение градиента), Stroke (Обводка).

Получится что-то похожее на это:

Выберите слой со светящимся овалом и дублируйте его (Ctrl+J). Переместите его в правый верхний угол первого прямоугольника.

Шаг 5. Блок "Рекомендуемое".

Блок "Рекомендуемое" будет в виде слайдера. Поместите в левую часть прямоугольника изображение размером 555х250px.

После большого изображения добавьте 3 маленьких. Первое изображение должно быть уменьшенной копией большого изображения.

Теперь добавьте описание для каждой картинки. И добавьте разделители между слайдами используя дефисы (--).

Теперь добавим описание для большого изображения. Для этого возьмите инструмент Прямоугольная область выделения (Rectangular Marquee Tool) и создайте прямоугольное выделение. Залейте выделение чёрным (#000000) цветом и установите Непрозрачность (Opacity) на 75%.

Внутри получившегося прямоугольника добавьте своё описание.

Шаг 6. Блок со случайными новостями.

Внутри второго блока я решил добавить слайдер со случайным контентом. Слайдер состоит из 3 больших изображений.

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

Добавьте краткое описание под каждым изображением.

Шаг 7. Блок с контентом.

Внутри третьего блока я решил сделать 3 колонки с контентом. Выглядит всё это следующим образом:

Шаг 8. Создание футера.

Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и создайте прямоугольник такого же размера, как и навигация.

И добавьте к слою следующие стили: Blending Options (режим наложения), Drop Shadow (Тень), Inner Shadow (Внутренняя тень), Gradient Overlay (Наложение градиента), Stroke (Обводка).

Внутри блока футер добавьте свои копирайты и несколько социальных иконок из набора, который Вы скачали.

Дублируйте слой с фоном и отразите его по вертикали, для этого перейдите в Редактирование > Трансформирование > Отразить по вертикали (Edit > Transform > Flip Vertical), после этого переместите изображение в самый низ документа.

Итоговый результат:

           

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

Макет игрового сайта в Фотошоп
Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки:
Макет игрового сайта в Фотошоп
В этом уроке будем учиться создавать креативный дизайн для блога.
Макет игрового сайта в Фотошоп
Финальный результат
Макет игрового сайта в Фотошоп
Этот урок по Фотошопу покажет вам, как сделать дизайн сайта или портфолио.
Макет игрового сайта в Фотошоп
Если вы хотите знать, как сделать выразительные обои, тогда почитайте этот Photoshop урок.
Макет игрового сайта в Фотошоп
Этот урок посвящён тому, как с помощью Adobe Photoshop CS3 создать шаблон портфолио.
Макет игрового сайта в Фотошоп
В данном уроке мы будем учиться создавать информационный блок для сайта.
Макет игрового сайта в Фотошоп
Начнем наш урок с создания нового документа размером 960 x 900 пикселей. Я установил цвет переднего плана  #141414, затем, взяв инструмент Paint Bucket Tool (Заливка), кликнул один раз по изображению. Я взял инструмент Brush Tool (Кисть), и, выбрав мягкую круглую кисть, нарисовал на новом слое три большие точки на изображении, используя следующие цвета: #a864a8, #ed1c24, #662d91.
Макет игрового сайта в Фотошоп
Этот урок покажет вам как создать красивый медиа плеер используя средства Adobe Photoshop CS3. Для ясности мы все вам покажем.
Макет игрового сайта в Фотошоп
В этом уроке Вы узнаете, как создать стильный музыкальный мини плеер, используя векторные инструменты фотошоп и стили слоя.
Макет игрового сайта в Фотошоп
В этом уроке, я покажу Вам, как создать иконку адресной книги с помощью Фотошопа. Давайте начнём!
Макет игрового сайта в Фотошоп
В этом уроке мы создадим слайдер изображений, основным элементом дизайна которого являются лента. В сравнении с младшими версиями, в Adobe Photoshop CS6 легче работать с настройками Stroke (Обводка) и т.д. Мы будем пользоваться различными методами и техниками для создания такого восхитительного слайдера.
Макет игрового сайта в Фотошоп
Шаг 2. Создайте новый слой и назовите его “camera2”. Выделите содержимое слоя “camera1” (CTRL + клик по миниатюре слоя). Выполните команду “Select > Modify > Contract” (Выделение > Модификация > Сжать). Установите сжатие в 7 пикселей. Залейте выделение цветом.
Макет игрового сайта в Фотошоп
В процессе изучения этого урока вы научитесь создавать стильное меню для сайта.
Макет игрового сайта в Фотошоп
Совместно с Sohan Negi мы разработали урок, который в подробностях покажет вам, как создать иконку пары динамиков. Урок получился длинным, поэтому мы его разбили на две части.
Макет игрового сайта в Фотошоп
В этом уроке вы узнаете, как создать элегантный и стильный макет портфолио в Photoshop.
Макет игрового сайта в Фотошоп
Создайте новый документ произвольного размера. Чтобы края вашей сим-карты были закруглены, возьмите инструмент rounded rectangle tool (u) (прямоугольник с закругленными углами), нарисуйте прямоугольник и заполните его цветом, каким захотите.
Макет игрового сайта в Фотошоп
Создание привлекательных и функциональных веб-макетов – неотъемлемая часть жизни веб-дизайнера. В этом уроке мы будем создавать профессиональный макет сайта с нуля. В процессе урока Вы узнаете некоторые полезные трюки при создании дизайна.