В этом уроке Вы научитесь создавать текстуру «изношенная бумага» для веб-дизайна, используя базовые техники Photoshop. Дизайн включает несколько безплатних изображений, которые помогут Вам в миг создать прекрасный макет.
How to Create a “Worn Paper” Web Layout Using Photoshop – ссылка на этот урок:
Окончательный результат
Нажмите на изображение, чтобы посмотреть полномасштабный окончательный результат (full-scale final result).
Загрузки
Вы можете загрузить связанные исходные файлы этого урока ниже.
worn_paper_web_layout.zip (ZIP, 6.38 MB)
Настройка документа Photoshop
1. Сначала создадим новый документ с параметрами 1024px х 1050px.
Настройка фона
2. Выберите инструмент «Заливка» (Paint Bucket Tool (G)) с Палитры инструментов и заполните слой фона цветом #F9E9BB.
3. Теперь добавим до фона бесплатные фото. Я нашел прекрасное изображение мятой бумаги на deviantArt под. названием paper texture на akinna-stock. Я изменил его размер на соответствующий для этого урока и Вы можете его получить в источнике файлов, где он под. названим worn_paper.jpg. Открыв его в Photoshop, снизьте его непрозрачность до
50 %. Это будет выглядеть приблизительно так:
Создание главной навигации
4. Создайте подобное выделение с помощью инструмента «Прямоугольная область» (Rectangular Marquee Tool (M)) и заполниет его #000000.
5. Используя инструмент «Полигональное лассо» (Polygonal Lasso Tool (L)) сделайте остроконечное выделение, подобное изображенному ниже, по нижнему краю всей навигации. Выберите Редактировать>Очистить, чтобы удалить выделение:
6. Снизьте непрозрачность этого слоя до 85 % так что фон будет исчезать через некоторое время.
8. Давайте работать над отображением активной / наведенной курсором мыши ссылкой. Используя инструмент «Прямоугольная область» (Rectangular Marquee Tool (M)), сделайте выделение как показано ниже и заполните его #FFFFFF на отдельном слое.
10. Вы получите что-то подобное:
Проектирование ссылки RSS
11. С правой стороны навигатора мы будем иметь несколько ссылок RSS.
12. Вот цвета для ссылок: «Подписаться» - #FAE4B3; «Сообщение», «Комментарии» и «Email» – #F48F32.
14. Вот как станет выглядеть Ваш навигатор:
Логотип
15. Для логотипа я использовал прекрасный стиль шрифта ‘Sketch’ (Sketch Block) цвета #323232
Создание окна поиска
16. Мы сделаем поисковик простым. Используя инструмент «Прямоугольная область» (Rectangular Marquee Tool (M)), создайте выделение и заполните его #000000.
17. Снизьте непрозрачность этого слоя до 80 % и потом сделайте выделение (1px шириной) чтобы отделить поле поиска от кнопки отправки. После того как Вы его выбрали, выберите «Редактировать>Очистить» (Edit>Clear), чтобы удалить выбранную область.
18. Для иконки поиска можно использовать увеличительное стекло по умолчанию с инструмента Photoshop «Пользовательские формы». Удостоверьтесь, что цвет переднего плана - #FFFFFF и разместите его аналогично следующему рисунку. Снизьте непрозрачность слоя до 40 %.
19. Добавьте текст (#FAF3CF) в поисковое окно.
Создание вступительного окна
20. Вступительное окно создается, чтобы разместить описание к Вашему сайту. Используя инструмент «Прямоугольная область» (Rectangular Marquee Tool (M)), создайте выделение и заполните его #000000.
21.Снизьте непрозрачность слоя где-то до 80 %. Используя шрифт белого цвета (#FFFFFF), создайте предложение с описаним Вашего сайта.
22. Для второй группы текста я использовал цвет #C5AF6F и шрифт Myriad Pro.
Площадь контента
23. Для фона площади контента я использовал текстуру разленеенной бумаги с deviantART, которая называется Textures: Paper от Dioma. Вы можете найти измененную версію документа на источнике файлов под названием lined-paper.jpg
24. Добавим место для наших ссылок на категории. Используйте шрифт типа Helvetica черного цвета (#000000).
25. Используя инструмент «Горизонтальный текст» (Horizontal Textор Tool (T)), создайте новый слой и заполните его текстом _ _ _ _ _ _. Это изящный трюк для быстрого добавления разделителей под ссылками на категории. Сниззьте непрозрачность слоя до 30 %:
Разработка поля «Сообщение»
26. Сейчас поработаем над тем, как наши сообщения будут отражаться. Для моих миниатюр я использовал изображение с параметрами 224px x 79px и добавил следующие опции наложения.
27. Ваш документ будет выглядеть как показано ниже (я использовал случайные миниатюры, которые видете слева)
28. Используя инструмент «Прямоугольная область» (Rectangular Marquee Tool (M)), создайте выделение и заполните его #000000.
29. После заполнения слоя, снизьте его непрозрачность до 80 %. Сделайте Ваше заглавие, дату и другую информацию в подобном стиле к последующему изображению. Для ссылок я использовал цвет #CCDDFB, а весь остальной текст - #FFFFFF. Фон за датой – #B6636D.
30. Повторите шаги с 24 по 27 для остальных сообщений.
Создание боковой панели
31. Мы используем текстуру бумаги с того же пакета, где была и разленеенная бумага. Я использовал ее измененный вариант под названим green_paper.jpg.
32. Вставьте следующие опции наложения для слоя с green_paper.jpg:
33. Добавьте текст как заглавие (#232323) и ссылки (#064E6F) для Вашего отдела «Наиболее популярные сообщения».
34. Сделайте подобное для поля «Последние комментарии» и получится что-то подобное:
Создание футера
35. Вернитесь к навигатору вначале сайта и найдите слой на котором вырезали края. Активируйте его, порейдите в Слой>Дублировать слой (Layer > Duplicate Layer), чтобы скопировать слой.
36. Потом выберите Редактировать>Трансформировать>Отразить по вертикали (Edit > Transform > Flip Vertical) и разместите его на нижнем крае документа подобным образом:
37. Добавьте авторского текста в нижній части цветом #F7E1B0.
Поздравляю, Вы сделали!
Если вы следовали этому руководству, у Вас получилось что-то, что выглядит так:
Комментариев нет:
Отправить комментарий