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

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

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

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


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

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

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


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


Я выбрала эту, она немного темноватая, но выглядит красиво.


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

1. Создайте новый документ (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")), 750*550 пикселов, заполните его цветом #cce1d6.


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

2. Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")). Используя Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M"), создайте вот такое квадратное выделение, как показано на картинке и заполните его любым цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")).


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

3. Layer > Layer Style > Blending Options (Слой > Стиль слоя > Параметры наложения), и примените следующие настройки к выделенной области: ↓


Drop Shadow (Тень): ↓

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

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

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

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

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

Градиент - переход между цветами #dcdcdc и #ededed, с цветом #ffffff посередине.


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

Промежуточный результат: ↓

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

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


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

5. Разместив фотографию в заголовке, дублируйте ее (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")), и выберите Single Row Marquee Tool Инструмент - Область(горизонтальная строка) (Инструмент "Область(горизонтальная строка)").


6. Поместите эту линию где-то в середине заголовка, Нажмите Ctrl+T, чтобы трансформировать слой, и тяните его вверх и вниз как показано на картинке: ↓


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

Ок, вот что у вас должно получиться: ↓


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

7. Теперь нажмите Filter > Artistic > Sponge (Фильтр > Художественный > Губка) и примените эти параметры настройки: ↓


Кликните Ок.


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

8. В панели слоев уменьшите Opacity (Непрозрачность) слоя до 51: ↓


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

Это - то, что Вы получили .. хороший дождливый и мрачный пейзаж...


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

9. Инструментом Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") сделайте прямоугольное выделение в верхней части заголовка: ↓


10. Filter > Blur > Motion blur (Фильтр > Размытие > Размытие в движении). Примените эти параметры настройки размытия изображения к этому слою.


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

11. Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), и заполните выделенную все еще область любым цветом (я использую темно-зеленый, случайно выбранный из палитры).


12. Image > Adjustments > Brightness/Contrast (Изображение > Коррекция > Яркость/Контрастность) и затемните эту область.


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

13. Layer > Layer Style > Blending Options (Слой > Стиль слоя > Параметры наложения). Поставьте вот такие настройки для Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

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

И Bevel and Emboss (Тиснение и рельеф), придав вашему будущему навигационному меню красивую глубокую границу.


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

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

Это - результат применения стиля. Вы можете стереть немного верхнюю часть шаблона, чтобы навигационное меню было больше похоже на отдельный слой.


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

14. Выберите инструмент Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T") и напечатайте в навигационном баре все слова, которые позже станут навигационными кнопками. Здесь я использовал шрифт - Franklin Gothic 15 px.


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

15. Дублируйте слой текста (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")) и перетащите его вниз.


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

16. Edit > Transform > Flip Vertically (Правка > Трансформация > Отразить по вертикали) к слою с текстом, чтобы создать иллюзию отражения.


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

17. Установите Opacity (Непрозрачность) дублированного слоя 32%, что сделает его более светлым.


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

18. Кликаем на - Добавить маску слоя (Add layer mask), тем самым добавив маску к этому отраженному слою.


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

19. Выберите инструмент Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G"), с "reflected gradient effect" (Зеркальный градиент) и приведите линию градиента от основания навигационного меню до низа оригинального слоя текста.


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

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


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

21. Повторите шаги 15, 16, 17, 18, 19 и 20, но на сей раз с названием сайта, Lorelei Web в нашем случае.


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

Вот что получилось.. ↓


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


22. Создайте новый слой, выберите инструмент Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") и создайте прямоугольную область, приблизительно 1/3 ширины макета.


23. Select > Modify > Smooth (Выделение > Модификация > Сгладить...), для округления краев выделения.


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

24. Layer > Layer Style > Gradient Overlay (Слой > Стиль слоя > Наложение градиента), и примените следующий эффект градиента.


Я использую #485b29 для темно-зеленого и #959c7f для более светлого оттенка.


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

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

Примените также тень: ↓


Drop Shadow (Тень): ↓

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

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


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

25. Повторите шаги 22, 23 и 24, чтобы сделать еще одну часть, на сей раз для сохранения 2/3 макета.


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

26. Выберите Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B"). Я использую 21 px, но Вы можете использовать больший или меньший размер.


27. Начертите линию в том месте, где заголовок соприкасается с "телом" макета. Я выбрала зеленый цвет с заголовка, #1a3a0e.


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

28. Выберите другой оттенок, посветлее, #475b28 - и меньший размер кисти, 17px, и начертите линию внутри.


29. Повторите еще раз все снова и снова более тонкой кистью и более светлым цветом, в этом примере - #7e8b60.


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

Вот и все.


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

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

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