Уроки / Интрефейсы

18828

08-05-2012

В этом уроке мы будем создавать интерфейс сайта в винтажном стиле с логотипом и горизонтальным меню. Для этого мы сначала сделаем фон красивого ретро цвета, придадим ему шероховатость и украсим крупным узором. Потом сделаем декоративную полоску темного цвета с треугольными зазубринами по краю. Это легко можно сделать с помощью подходящего шрифта. После приступим к оформлению логотипа и надписи под ним. Затем приступим к созданию флажка. Украсим его небольшим визуалом. И под конец напишем пункты горизонтального меню справа и слева от флажка.

Шаг 1.
Создаем в фотошопе новый документ, заливаем цветом #0e6867.

Шаг 2.
Воспользуемся «Фильтр» (Filter) > «Шум» (Noise) > «Добавить шум…» (Add Noise…) со значением 3, равномерный, монохромный.

Шаг 3.
Воспользуемся инструментом «Произвольная фигура» (Custom Shape Tool) и выберем из стандартного набора фотошопа какой-нибудь узор, цвет #011a1a.

Шаг 4.
Меняем режим наложения узора на «Умножение» (Multiply) и снижаем прозрачность слоя до 10%.

Шаг 5.
Сверху создаем узкую полоску, заливаем ее цветом #011a1a.

Шаг 6.
Воспользуемся шрифтом Lot (N16 из этого набора шрифтов) и многократно печатаем английскую букву v. Цвет #011a1a.

Шаг 7.
Передвинем созданные треугольники к краю темной полоски.

Шаг 8.
Воспользуемся шрифтом Lobster (N4 из этого набора шрифтов) и напечатаем слово DesigNonstop. Цвет #d0f4f4.

Шаг 9.
Применим к тексту стиль слоя «Тень» (Drop Shadow).

Шаг 10.
Результат выглядит так.

Шаг 11.
Теперь делаем дубликат слоя с текстом DesigNonstop, передвигаем дубликат под оригинальный слой, меняем цвет текста на #06605f, отключаем стиль слоя «Тень» (Drop Shadow) и применяем стиль слоя «Перекрытие узора» (Pattern Overlay).

Шаг 12.
Сдвигаем нижний дубликат текста на 4 пикселя вниз и 4 пикселя вправо.

Шаг 13.
Под DesigNonstop пишем фразу «все о веб-дизайне», цвет #000c0c.

Шаг 14.
Применим к тексту стиль слоя «Тень» (Drop Shadow).

Шаг 15.
Получили такой результат.

Шаг 16.
Теперь воспользуемся знаком = и слева от текста 8 раз напечатаем его.

Шаг 17.
Применим стиль слоя из Шага 14.

Шаг 18.
Делаем дубликат слоя с полосками и ставим справа от текста.

Шаг 19.
На новом слое создаем оранжевую фигуру такой формы. Цвет #.a53517

Шаг 20.
Делаем ее дубликат, трансформируем по горизонтали, совмещаем длинные края и объединяем слои. Получили флажок.

Шаг 21.
Применим стиль слоя «Обводка» (Stroke).

Шаг 22.
Цвета градиента от черного к #a53517.

Шаг 23.
Применяем стиль слоя «Перекрытие узора» (Pattern Overlay).

Шаг 24.
Применим стиль слоя «Тень» (Drop Shadow).

Шаг 25.
Получили такой результат.

Шаг 26.
Теперь воспользуемся каким-нибудь значком. Можно выбрать любую понравившуюся иконку на ваше усмотрение из этого набора иконок для веб-разработчиков. Я воспользовалась такой иконкой.

Шаг 27.
Меняем режим наложения узора на «Затемнение основы» (Color Burn) и снижаем прозрачность слоя до 80%.

Шаг 28.
Теперь пишем текст меню ДОМОЙ. Цвет #a53517.

Шаг 29.
Потом пишем текст меню ПОРТФОЛИО. Цвет #679a99.

Шаг 30.
И в заключение напишем еще два слова меню БЛОГ и КОНТАКТЫ. Цвет #679a99. Винтажный интерфейс с логотипом и меню готов.