Создаем макет дизайна сайта футбольной команды в Фотошопе

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим процесс создания макета дизайна сайта футбольной команды.


Финальный результат

Создаем макет дизайна сайта футбольной команды в Фотошопе

Приступаем к уроку Фотошопа


Создаем новый документ в Фотошопе (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")).

Размер 760 X 770 пикселей. Фон - белый.


Мы должны создать новый узор травы. В других уроках Вы можете посмотреть, как создавать узоры с нуля.

В данном уроке это не потребуется, в можете использовать уже готовый узор (вернее готовое изображение), который распологаеться чуть ниже: ↓


Создаем макет дизайна сайта футбольной команды в Фотошопе

Откройте это изображение в Фотошопе.

Нажмите Ctrl+A (выделится все изображение).

Идите Edit > Define Pattern... (Редактирование > Определить узор...).

Выберите имя для вашего узора и нажмите ОК.


Теперь давайте вернемся к нашему футбольному шаблону.


Создайте новый слой (нажмите Ctrl+Shift+Alt+N).

Возьмите Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G").

Выберите наш узор с травой. ↓


Создаем макет дизайна сайта футбольной команды в Фотошопе

Затем один раз нажмите на ваш холст. Я не показываю вам мой результат, потому что это очень простой шаг.


Затем зайдите в Filter > Render > Lightning Effects (Фильтр > Рендеринг > Эффекты освещения) и используйте следующие настройки. ↓


Создаем макет дизайна сайта футбольной команды в Фотошопе

Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")).

Теперь возьмите наш Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") и создайте фигуру на траве.

Установите радиус скругления в 15 пикселей.


Создаем макет дизайна сайта футбольной команды в Фотошопе

Затем примените следующие стили слоя для этого прямоугольного слоя (Blending Options (Параметры наложения)).


Inner Shadow (Внутренняя тень): ↓

Создаем макет дизайна сайта футбольной команды в Фотошопе

Gradient Overlay (Наложение градиента): ↓

Создаем макет дизайна сайта футбольной команды в Фотошопе

Параметры градиента: ↓

Создаем макет дизайна сайта футбольной команды в Фотошопе

Текущий результат: ↓

Создаем макет дизайна сайта футбольной команды в Фотошопе

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


Создаем макет дизайна сайта футбольной команды в Фотошопе

Создаем макет дизайна сайта футбольной команды в Фотошопе

Выберите Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M"), нажмите на Subtract from selection ("Вычитание из выделенной области").


Создаем макет дизайна сайта футбольной команды в Фотошопе

Затем начните вычитание с начального выделения, как на следующем изображении. ↓


Создаем макет дизайна сайта футбольной команды в Фотошопе

Когда вы отпустите кнопку мыши, у вас будет такое результат: ↓


Создаем макет дизайна сайта футбольной команды в Фотошопе

Теперь создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")).

Выберите Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G"), и залейте ваше выделение белым цветом.


Создаем макет дизайна сайта футбольной команды в Фотошопе

Затем нажмите Ctrl+D, чтобы снять выделение.

И измените Opacity (Непрозрачность) слоя.


Создаем макет дизайна сайта футбольной команды в Фотошопе

Текущий результат: ↓

Создаем макет дизайна сайта футбольной команды в Фотошопе

Теперь вы должны добавить текстовые кнопки на ваш макет → Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T").


Создаем макет дизайна сайта футбольной команды в Фотошопе

Затем выберите Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U"), установите радиус 5 пикселей и создайте новый прямоугольник.


Убедитесь, что вы перетащили этот слой под слой с большой фигурой.

Вы можете добавить те же настройки слоя как и выше.


Создаем макет дизайна сайта футбольной команды в Фотошопе

Теперь выделите эти 2 слоя (первый слой - текстовый слой с кнопками, а второй - фигура, которую вы только что создали).


Создаем макет дизайна сайта футбольной команды в Фотошопе

Продублируйте эти слои (чтобы продублировать эти слои, вы должны например → перетащить их на кнопку "Create new layer" ("Создать новый слой").

Затем убедитесь, что у вас выделены эти 2 новых слоя (копии), и нажмите Ctrl+E (вы соедините слои в один).


Затем перетащите новый соединенный слой на верх вашей палитры слоев.


Создаем макет дизайна сайта футбольной команды в Фотошопе

С этим выделенным слоем зайдите в Edit > Transform > Flip Vertical ("Редактирование > Трансформирование > Отразить по вертикали").

Затем передвиньте вниз ваш отраженный слой с помощью клавиш со стрелками (клавиши на клавиатуре).


Создаем макет дизайна сайта футбольной команды в Фотошопе

Теперь нажмите на Добавить маску слоя (Add layer mask).


Создаем макет дизайна сайта футбольной команды в Фотошопе

Выберите Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G") и сделайте маленькую линию как на следующем изображении (сверху вниз) снизу: ↓


Создаем макет дизайна сайта футбольной команды в Фотошопе

Текущий результат: ↓

Создаем макет дизайна сайта футбольной команды в Фотошопе

Как вы видите мы создали прекрасное отражение, но наши начальные кнопки спрятаны. Мы исправим эту проблему прямо сейчас.


Создаем макет дизайна сайта футбольной команды в Фотошопе

Текущий результат: ↓

Создаем макет дизайна сайта футбольной команды в Фотошопе

Теперь мы добавим немного текста (Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T")). Вы можете сами добавить ваш текст. Это не так тяжело.

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

Вы уже знаете как добавлять прямоугольник.


Создаем макет дизайна сайта футбольной команды в Фотошопе

Сейчас я добавлю немного изображений, а также и логотип.


Создаем макет дизайна сайта футбольной команды в Фотошопе

Конечно мы добавим другие детали.

Например, я думаю, что он будет очень хорошо смотреться с прекрасной тенью под большой фигурой.


Выбираем Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U"). Устанавливаем наш основной цвет на темно- серый и делаем простую фигуру, как на следующей картинке.


Создаем макет дизайна сайта футбольной команды в Фотошопе

С этим выделенным слоем идем в Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу).

Фотошоп спросит вас, хотите ли вы растеризовать фигуру. Нажмите ОК.

И используйте след. настройки: ↓


Создаем макет дизайна сайта футбольной команды в Фотошопе

Текущий результат: ↓

Создаем макет дизайна сайта футбольной команды в Фотошопе

Теперь давайте добавим какую-то тень для большого мяча.

Выберите Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") и создайте фигуру (расположите этот слой под слоем с мячом на вашей палитре слоев).


Создаем макет дизайна сайта футбольной команды в Фотошопе

Затем зайдите в Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) и используйте те же настройки, что и выше.


Текущий результат: ↓

Создаем макет дизайна сайта футбольной команды в Фотошопе

Теперь вы можете добавить также некоторые простые детали. Например, я выберу инструмент Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T") и я напишу на моем холсте простые знаки минус "---------".


Создаем макет дизайна сайта футбольной команды в Фотошопе

Затем я добавлю еще одну деталь. Это всего лишь набор изображений.

Вот и все. Надеюсь вам понравился этот урок.


Финальный результат

Создаем макет дизайна сайта футбольной команды в Фотошопе

Урок подготовлен для Вас командой сайта PhotoshopPro.ru