В этом уроке мы будем создавать интерфейс сайта в винтажном стиле с логотипом и горизонтальным меню. Для этого мы сначала сделаем фон красивого ретро цвета, придадим ему шероховатость и украсим крупным узором. Потом сделаем декоративную полоску темного цвета с треугольными зазубринами по краю. Это легко можно сделать с помощью подходящего шрифта. После приступим к оформлению логотипа и надписи под ним. Затем приступим к созданию флажка. Украсим его небольшим визуалом. И под конец напишем пункты горизонтального меню справа и слева от флажка.
Шаг 1. Создаем в фотошопе новый документ, заливаем цветом #0e6867.
Шаг 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. Винтажный интерфейс с логотипом и меню готов.
Спасибо, Наташа! Такие уроки у Вас я люблю больше всего!
Ответить
Наташа Клевер11-05-2012 . 20:08
#
7
@Марина:
Вам спасибо за такой комментарий!
Ответить
Павел12-05-2012 . 22:00
#
8
Извините, а где я могу найти
— применяем стиль слоя «Перекрытие узора» (Pattern Overlay)
в фотошопе? Нашел только пункт «Наложение узора»
Ответить
Наташа Клевер12-05-2012 . 22:17
#
9
@Павел:
Скорее всего это оно и есть. Просто перевод чуть-чуть другой…
Ответить
Марго14-05-2012 . 15:58
#
10
Наташа, подскажите, пожалуйста, как потом правильно разрезать фон с шумом, чтобы потом при верстке шум был равномерным, а не одинаковыми повторяющимися квадратами? Спасибо.
Ответить
Наташа Клевер15-05-2012 . 14:30
#
11
@Марго:
Я наверное дедовским способом делаю. Беру квадрат достаточного большого размера. Делаю его копию, снижаю прозрачность, прикладываю справа, пока рисунок не совпадет. Потом копию слева, снизу и сверху. То, что в центре и есть готовый паттерн )
Ответить
Марго20-05-2012 . 11:12
#
12
@Наташа Клевер:
да, это трудоёмко, мне терпения так и не хватило на поиски совпадения)
на vremenno.net подсказали вот такой способ создания непосредственно паттерна http://vremenno.net/q-and-a/design/question-522/
Ответить
Наташа Клевер20-05-2012 . 11:27
#
13
@Марго:
Спасибо за ссылку, пригодится ))
Ответить
Гоша27-01-2013 . 10:21
#
14
СУПЕР урок!У ВАС чудове відчуття кольору і графіки! Цікавий і потрібний сайт! Дякую!
Ответить
Наташа Клевер29-01-2013 . 15:32
#
15
@Гоша:
Спасибо! ))
Ответить
Катерина20-12-2013 . 15:35
#
16
Здравствуйте, Наташа! Замечательный урок, очень пригодился! Только скажите, где найти такой узор для шага 11? у меня в палитре узоров нет, а нарисовать, чтобы получилось так же, не выходит:( Заранее спасибо!
Ответить
Наташа Клевер28-12-2013 . 21:49
#
17
@Катерина:
Это простейший узор 3х3 пикселя. Вы можете попробовать поискать в интернете уроки про то, как сделать узор, там ничего сложного нет ))
Ответить
Написать комментарий с помощью обычной формы блога
Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!
Супер!) Красавец лобстер плюс оригинальная тень смотрится обалденно =)