Фотошоп для фотографа 2013

Рисуем макет военного сайта используя Фотошоп

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

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


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

Рисуем макет военного сайта используя Фотошоп

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


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


Цвет фона: 3b3b3b.


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


Рисуем макет военного сайта используя Фотошоп

Теперь мы создадим новый узор.


Открываем новый документ размером 8х8 пикселей с прозрачным фоном.


Увеличиваем документ до 1600% и с помощью Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша "B") (размер кисти = 1 пиксель) рисуем следующее: ↓


Рисуем макет военного сайта используя Фотошоп

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


Выберите имя для вашего образца (узора) и нажмите OK.


Закрываем наш документ 8 на 8 пикселей.


И продолжаем работать над нашим макетом.


Выбираем слой с маленькой фигурой (светло-серого цвета) и добавляем следующие стили слоя (Blending Options (Параметры наложения)):↓


Drop Shadow (Тень): ↓

Рисуем макет военного сайта используя Фотошоп

Inner Glow (Внутреннее свечение): ↓

Рисуем макет военного сайта используя Фотошоп

Bevel and Emboss (Тиснение и рельеф): ↓

Рисуем макет военного сайта используя Фотошоп

Contour (Контур): ↓

Рисуем макет военного сайта используя Фотошоп

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

Рисуем макет военного сайта используя Фотошоп

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

Рисуем макет военного сайта используя Фотошоп

Теперь используем узор, созданный нами выше.


Pattern Overlay (Перекрытие узора): ↓

Рисуем макет военного сайта используя Фотошоп

Stroke (Обводка): ↓

Рисуем макет военного сайта используя Фотошоп

Вот мой результат: ↓

Рисуем макет военного сайта используя Фотошоп

Теперь выделим большую фигуру и добавим следующие стили слоя (Blending Options (Параметры наложения)): ↓


Drop Shadow (Тень): ↓

Рисуем макет военного сайта используя Фотошоп

Outer Glow (Внешнее свечение): ↓

Рисуем макет военного сайта используя Фотошоп

Inner Glow (Внутреннее свечение): ↓

Рисуем макет военного сайта используя Фотошоп

Bevel and Emboss (Тиснение и рельеф): ↓

Рисуем макет военного сайта используя Фотошоп

Редактирование контура: ↓

Рисуем макет военного сайта используя Фотошоп

Contour (Контур): ↓

Рисуем макет военного сайта используя Фотошоп

Contour (Контур): ↓

Рисуем макет военного сайта используя Фотошоп

Satin (Глянец): ↓

Рисуем макет военного сайта используя Фотошоп

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

Рисуем макет военного сайта используя Фотошоп

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

Рисуем макет военного сайта используя Фотошоп

Stroke (Обводка): ↓

Рисуем макет военного сайта используя Фотошоп

Вот мой результат: ↓

Рисуем макет военного сайта используя Фотошоп

Теперь самое время добавить немного изображений. Я добавлю пистолет и несколько пуль: ↓


Рисуем макет военного сайта используя Фотошоп

Затем я добавлю несколько текстовых кнопок вверху макета.

Рисуем макет военного сайта используя Фотошоп

Выбираем Custom Shape Tool Инструмент - Произвольная фигура (Инструмент "Произвольная фигура" / Клавиша "U"). Выберете следующую фигуру: ↓


Рисуем макет военного сайта используя Фотошоп

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


Рисуем макет военного сайта используя Фотошоп

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

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

Я также добавил немного текста в заголовок сайта.


Рисуем макет военного сайта используя Фотошоп

Теперь выбираем Line Tool Инструмент - Линия (Инструмент Линия / Клавиша "U"), устанавливаем высоту в один пиксел, и начинаем создавать некоторые линии.

Затем вы сами можете добавить некоторый текст или необходимое вам изображение.


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

Рисуем макет военного сайта используя Фотошоп

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