Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Полезные статьи » Заголовок и навигация. Текстура: Дерево


Заголовок и навигация. Текстура: Дерево

Сообщений 1 страница 2 из 2

1

Источник: http://webdesigncrowd.com
Перевод: Летописец. (За дословность не отвечаю, но доступность гарантирую)

http://s1.uploads.ru/t/P/J/F/PJF0j.jpg

Шаг 1.
Создаем новый документ с размерами 1265х1000 px.

Шаг 2.
Скачиваем текстуру Дерева.
И используем на нее следующие настройки:
Уровни (Канал RGB) - 40 , 1.0 ,  240.
Цветовой баланс (Средние тона) -  +60, 0, -30.
Яркость/Контрастность - -10, +5.
У вас должно выйти следующее:
http://s1.uploads.ru/t/N/i/c/NicXy.jpg

Получившуюся текстуру уменьшаем до половины страницы и дублируем, заполняя оставшееся пространство и создавая неприрывную структуру дерева.

Выбираем инструмент Pen Tool (Свободное перо) и вырисовываем нашу будущую верхнюю часть меню.
http://s1.uploads.ru/t/Y/C/G/YCGH5.jpg

Шаг 3.
К данной выделенной области применяем следующий стиль слоя:
Тень:
Режим: Multiply (Умножение).
Непрозрачность: 50%
Угол: 120%
Смещение: 5
Размах: 15
Размер: 20
Тиснение:
Стиль: Внутренний скос.
Метод: Плавный.
Глубина: 1000% (Нет, не опечатка)
Направление: Вверх.
Размер: 10
Смягчение: 16
Угол: -90
Высота: 32
Убираем галочку с "Глобальное освещение".
Режим подсветки: Умножение. Цвет: #482f1b
Непрозрачность: 30
Режим тени: Нормальный. Цвет: #000000
Непрозрачность: 0
Наложение градиента:
Режим: Умножение.
Непрозрачность: 50%
Градиент: Выбираем второй из стандартных (Черный полупрозрачный).
Масштаб: 125%.

Ваш ожидаемый результат:
http://s1.uploads.ru/t/A/F/w/AFwVN.png

Шаг 4.
Следующий наш шаг, это создание навигации. Для нее мы используем ту же текстуру, что и прежде. Но пред этим мы уменьшаем и размещаем ее горизонтально.
Далее мы применяем следующие настройки:
Яркость/Контрастность: -60, 40.
Цветовой баланс: (Средние тона) -30, +5, -10.

И Стиль слоя:
http://s1.uploads.ru/t/m/H/3/mH3My.png
http://s1.uploads.ru/t/U/e/k/Uekcl.png
http://s1.uploads.ru/t/2/9/R/29R1b.png
http://s1.uploads.ru/t/2/9/R/29R1b.png

Результат на данный момент:
http://s1.uploads.ru/t/g/2/b/g2bC3.jpg

Шаг 5.
Переходим к заголовку сайта. В данном уроке использовался шрифт Danube, который вы можете найти на просторах интернета. Первоначальный цвет нашего текста #а9а9а9, а заливка 80%.
Применяем следующий стиль слоя:
http://s1.uploads.ru/t/S/c/f/ScfK0.png
http://s1.uploads.ru/t/q/o/Y/qoYsb.png
http://s1.uploads.ru/t/r/Q/p/rQpOL.png
http://s1.uploads.ru/t/N/W/I/NWIKd.png

Шаг 6.
Переходим к созданию кнопки поиска и панели ввода. Для этого используем нашу родную текстуру, придав ей овальную форму.
Для кнопки применяем следующий стиль слоя:
Тиснение:
Стиль: Контурное тиснение.
Метод: Плавный.
Глубина: 600% 
Направление: Вверх.
Размер: 7
Смягчение: 0
Угол: 124
Высота: 32
Убираем галочку с "Глобальное освещение".
Режим подсветки: Осветление основы. Цвет: #ffffff
Непрозрачность: 29
Режим тени: Нормальный. Цвет: #000000
Непрозрачность: 15
Наложение цвета:
Режим: линейный затемнитель.  Цвет: #640d00
Непрозрачность: 14%

Для панели ввода мы применяем следующий стиль:
http://s1.uploads.ru/t/f/w/Q/fwQNM.png
http://s1.uploads.ru/t/9/P/G/9PGVM.png
http://s1.uploads.ru/t/G/j/0/Gj04S.png
http://s1.uploads.ru/t/l/w/h/lwhts.png

Шаг 7.
Последний шаг нашей работы.
Создайте зеленый (#a1b10d) прямоугольник, который будет служить нашей лентой. Изгибаем край (Думаю многие знают как) и обрабатываем инструментом Затемнитель, что бы выглядело реалистично.
Применяем стиль слоя:
Тень:
Режим: Multiply (Умножение).
Непрозрачность: 30%
Угол: 120%
Смещение: 5
Размах: 0
Размер: 5
И наконец дорисовываем самый последний участок ленты, загибающийся под нашу панель. К нему применяем стиль:
Наложение градиента:
Режим: Перекрытие.
Непрозрачность: 44%
Масштаб: 50%.

Для основного фона в уроке использовалась данная Текстура.

На этом создание панели навигации законченно. Надеюсь данный урок, хоть и очень сжатый, вам поможет. :)

+2

2

Спасибо.
Ценная информация, пригодится.

0


Вы здесь » Кот » Полезные статьи » Заголовок и навигация. Текстура: Дерево


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC