В этом уроке Вы научитесь делать чистый и простой акварельный макет студии дизайна для блога.
Это будет Ваш окончательный результат.
1. Создайте новый документ с размерами 1024×1100. Высоту можете изменить, но я применил эти пропорции специально для этого урока.
2. Дальше мы хотим добавить фон. Я использовал большое изображение-текстуру, которое нашел, перейдя по ссылке deviantart here. Изображение недостаточно велико, поэтому масштабируйте его в соответствии со своим документом. Или загрузите PSD с конца урока и сохраните этот шаг.
3. Сначала я хочу разработать простой логотип. Используя шрифт Helvetica с цветом #000000 для слова “Vicinity”, сделал его четким шрифтом (вold), используя цвет #D75160 для слова “Designs”, использовал для него стиль шрифта Regular. Вы должны получить что-то на подобие этого
4. Сейчас мы хотим добавить слоган к нашому логотипу. Используя Rectangle Marquee tool (инструмент прямоугольная область) выделите область, так как показано ниже, и заполните ее белым цветом (#FFFFFF).
5. Снизьте непрозрачность вашего слоя до 90 %, что поможет ему лучше смешаться с фоном. Потом добавьте текст в новосозданную ячейку. Я использовал цвет #64685E.
6. Дальше мы хотим добавить место для Вас и Ваших клиентов, чтобы заходить на сайт. В правой стороне Вашего шаблона опять используем инструмент rounded rectangle tool (инструмент закругленный прямоугольник) и выделяем область, так как показано ниже, и заполняем ее черным цветом #000000.
8. Дальше мы хотим перейти к нашему навигатору. Используя опять инструмент rounded rectangle tool (закругленный прямоугольник), создайте такую же выделенную область, как показано ниже, и заполните ее черным (#000000).
9. Мы сейчас хотим снизить непрозрачность этого слоя до 70 %, чтобы придать ему хорошей прозрачности для заполнения нашим цветным фоном.
10. Теперь давайте покажем как наши линки будут отображаться. Для каждого линка мы будем иметь описание под ним, чтобы сделать их веселыми и дружескими. Используя инструмент rounded rectangle tool (закругленный прямоугольник) создайте такую же выделенную область, как показано ниже, и заполните ее цветом #303130.
11. Измените режим смешивания Вашей площади на «Мягкий свет» (Soft Light) и потом мы можем пойти дальше и добавить текст. Для линка я использовал цвет #FFFFFF и для описания использовал цвет #FFFFFF, но снизив непрозрачность слоя с текстом до 50 %.
12. Двигаясь вперед, повторим эти шаги для создания всех навигационных линков, которые нам будут нужны. Для моего активного линка я использовал #3CC1F9 вместо белого.
13. В дополнительное пространство вконце можете добавить некоторые опции для пользователей, чтобы подписаться на Ваш RSS-канал. Просто добавьте простой белый текст и Ваши RSS-иконки и Ваш документ станет выглядеть сейчас как-то так.
14. Дальше мы хотим передвигаться пространством, предназначенным для контента. Используя Rectangle Tool (инструмент прямоугольник), мы хотим продолжить и выбрать фон для нашего контента. Поэтому создайте выделение, такое же, как и следующее, и заполните его (#FFFFFF).
15. Сначала давайте продолжим, добавив заглавие для нашей области блога. Я выбрал для использования слова “Latest Articles” («Последние статьи») цвет #000000 и сделал их жирным шрифтом. Я потом использовал цвeт #3B3A3A для ряда точек под заглавием. Вы получите что-то такое
17. Теперь вставьте следующие режимы наложения слоев на этот слой, нажав на «blending options» («режимы наложения») с выпадающего меню.
19. Следующим мы должны сделать кнопку для нашей панели поиска. Итак, опять используя Rectangle Marquee (инструмент прямоугольная область) создайте такую же выделенную область, как показано ниже, и заполните ее цветом #000000.
20. Теперь вставьте следующие режимы наложения слоев на этот слой
21. Теперь, идя вперед, добавьте белый текст наверх Ваших кнопок и Вы должны получить что-то такое, что будет похожим на это (заметка. Я добавил маленький белый ободок вокруг края, но это на Ваш выбор).
22. Теперь добавим некоторый остроумный текст перед вашим текстовым полем и Вы должны получить что-то похоже на это
23. Давайте двигаться вперед и начинать с нашей боковой панели. Идея сделать ее простой. Дальше мы сделаем заглавие для нашего окна «Последние сообщения». Итак, используя Rectangle Marquee Tool (инструмент прямоугольная область) создайте такую же выделенную область, как показано ниже, и заполните ее цветом #D65863.
25. Следующим используйте Polygonal Lasso Tool (инструмент многоугольное лассо) для создания маленьких треугольных пулек и заполните их черным цветом (#000000). Дальше добавим текст, чтобы представить сообщения. Для ссылки я использовал цвет #2E92BC.
27. Последний шаг для окна – добавление ободка на кнопке высотой в 2 рх. Используйте Rectangle Marquee (инструмент прямоугольная область), чтобы сделать это и заполните ее цветом #000000. Снизьте непрозрачность этого слоя до около 10 % и он будет выглядеть примерно так
28. Теперь я просто повторил эти шаги для поля «Последние комментарии», но изменил фон заглавия на #B7D8CF. Ваш документ будет выглядеть примерно так
29. Теперь время создать лист сообщений. Используя Rectangle Marquee Tool (инструмент прямоугольная область), сделайте выделение, похожее с нижепоказанным и заполните его цветом #F1F1F1.
30. Следующим мы хотим сделать красивое округлое окно, где наш эскиз будет для каждого сообщения. Итак, используя Rounded Rectangle Tool (инстумент закругленный прямоугольник) с радиусом 10 рх, сделайте подобный прямоугольник (не важно какого цвета, мы выбрали этот)
31. Теперь в свой новосозданный закругленный прямоугольник добавьте следующие опции смешивания
33. Теперь все, что осталось, – это использовать text tool (инструмент текст), чтобы сделать что-то подобное. Для значка календаря я использовал пакет, который Вы сможете найти по этой ссылке (at this link).
35. Все, что осталось, – это подвал (футер). Идя дальше используйте Rectangle Marquee Tool (инструмент прямоугольная область),чтобы сделать выделение, похожее с нижепоказанным, и заполните его цветом #000000.
Это все! Когда вы все сделали, ваш шаблон должен, надеюсь, выглядеть приблизительно так, как следующий
Комментариев нет:
Отправить комментарий