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

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

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

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


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

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

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


Создаем новый документ с размерами → 760x770 px (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")), с белым фоном. Дублируйте слой (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")) далее используем фильтр → Filter > Noise > Add noise (Фильтры > Шум > Добавить шум) настройки на изображении ниже: ↓


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

Затем Нажмите CTRL+I, чтобы инвертировать цвета. Вы будете иметь черный фон, не волнуйтесь, это нормально. Создайте новый слой выше этого последнего слоя (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), измените цвета переднего плана на: #f3b502 Основной цвет в Фотошопе и background color (фоновый цвет) Фон в Фотошопе: #da5d03 после чего используя инструмент Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G") провидите линию от вершины вашего рисунка до низа. После того, как Вы выпустите кнопку мыши, измените Blending mode (Режим наложения) на Difference (Разница).


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

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


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

Далее тем же самым инструментом создаем другую форму, на сей раз немного меньшую форму, и с легким серым цветом #ebebeb.


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

Теперь мы загрузим выделение для серой формы. Чтобы выполнить выделение нужно зажать CTRL и нажать на слой в палитре слоев, как на рисунке.


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

Результат. ↓

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

Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), затем нажмите на D., это действие перезагрузит цвета к черно-белому, теперь используем → Filter > Render > Clouds (Фильтр > Рендеринг > Облака).


Результат: ↓

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

Нажмите CTRL+D, затем понизите Opacity (Непрозрачность) к 40%.


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

Получится так: ↓

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

Теперь выберите все слои, и нажмите на CTRL+E (это действие сольет все слои в единственный).


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

Подберите кисти похожие на те что используються ниже в сети, и используйте (Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B")) как на рисунке (любые на свой вкус): ↓


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

Далее берем Eraser Tool Инструмет - Ластик (Инструмет Ластик / Клавиша "E") и стираем не нужное.


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


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

Используя красивые кисти нарисуйте на новом слое (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) подобные украшательства как на изображении ниже: ↓


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

И в конце добавьте рисунков и заполните текстом.


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

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

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