Источник: http://webdesigncrowd.com
Перевод: Летописец. (За дословность не отвечаю, но доступность гарантирую)
Шаг 1.
Создаем новый документ с размерами 1265х1000 px.
Шаг 2.
Скачиваем текстуру Дерева.
И используем на нее следующие настройки:
Уровни (Канал RGB) - 40 , 1.0 , 240.
Цветовой баланс (Средние тона) - +60, 0, -30.
Яркость/Контрастность - -10, +5.
У вас должно выйти следующее:
Получившуюся текстуру уменьшаем до половины страницы и дублируем, заполняя оставшееся пространство и создавая неприрывную структуру дерева.
Выбираем инструмент Pen Tool (Свободное перо) и вырисовываем нашу будущую верхнюю часть меню.
Шаг 3.
К данной выделенной области применяем следующий стиль слоя:
Тень:
Режим: Multiply (Умножение).
Непрозрачность: 50%
Угол: 120%
Смещение: 5
Размах: 15
Размер: 20
Тиснение:
Стиль: Внутренний скос.
Метод: Плавный.
Глубина: 1000% (Нет, не опечатка)
Направление: Вверх.
Размер: 10
Смягчение: 16
Угол: -90
Высота: 32
Убираем галочку с "Глобальное освещение".
Режим подсветки: Умножение. Цвет: #482f1b
Непрозрачность: 30
Режим тени: Нормальный. Цвет: #000000
Непрозрачность: 0
Наложение градиента:
Режим: Умножение.
Непрозрачность: 50%
Градиент: Выбираем второй из стандартных (Черный полупрозрачный).
Масштаб: 125%.
Шаг 4.
Следующий наш шаг, это создание навигации. Для нее мы используем ту же текстуру, что и прежде. Но пред этим мы уменьшаем и размещаем ее горизонтально.
Далее мы применяем следующие настройки:
Яркость/Контрастность: -60, 40.
Цветовой баланс: (Средние тона) -30, +5, -10.
Шаг 5.
Переходим к заголовку сайта. В данном уроке использовался шрифт Danube, который вы можете найти на просторах интернета. Первоначальный цвет нашего текста #а9а9а9, а заливка 80%.
Применяем следующий стиль слоя:
Шаг 6.
Переходим к созданию кнопки поиска и панели ввода. Для этого используем нашу родную текстуру, придав ей овальную форму.
Для кнопки применяем следующий стиль слоя:
Тиснение:
Стиль: Контурное тиснение.
Метод: Плавный.
Глубина: 600%
Направление: Вверх.
Размер: 7
Смягчение: 0
Угол: 124
Высота: 32
Убираем галочку с "Глобальное освещение".
Режим подсветки: Осветление основы. Цвет: #ffffff
Непрозрачность: 29
Режим тени: Нормальный. Цвет: #000000
Непрозрачность: 15
Наложение цвета:
Режим: линейный затемнитель. Цвет: #640d00
Непрозрачность: 14%
Для панели ввода мы применяем следующий стиль:
Шаг 7.
Последний шаг нашей работы.
Создайте зеленый (#a1b10d) прямоугольник, который будет служить нашей лентой. Изгибаем край (Думаю многие знают как) и обрабатываем инструментом Затемнитель, что бы выглядело реалистично.
Применяем стиль слоя:
Тень:
Режим: Multiply (Умножение).
Непрозрачность: 30%
Угол: 120%
Смещение: 5
Размах: 0
Размер: 5
И наконец дорисовываем самый последний участок ленты, загибающийся под нашу панель. К нему применяем стиль:
Наложение градиента:
Режим: Перекрытие.
Непрозрачность: 44%
Масштаб: 50%.
Для основного фона в уроке использовалась данная Текстура.
На этом создание панели навигации законченно. Надеюсь данный урок, хоть и очень сжатый, вам поможет.