среда, 6 июля 2011 г.

Акварельный макет блога студии дизайна

В этом уроке Вы научитесь делать чистый и простой акварельный макет студии дизайна для блога.

Это будет Ваш окончательный результат.

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.
7. Снизьте непрозрачность Вашего слоя до 30 %  и потом добавьте текст сверху, как показано ниже. Сделайте цвет текста белым (#FFFFFF).

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 для ряда точек под заглавием. Вы получите что-то такое

16. Теперь давайте сделаем панель поиска. Еще интересно? Используя опять Rectangle Marquee tool (инструмент прямоугольная область) создайте такую же выделенную область, как показано ниже, и заполните ее цветом #000000.


17. Теперь вставьте следующие режимы наложения слоев на этот слой, нажав на «blending options» («режимы наложения») с выпадающего меню.
18. Вы должны получить что-то такое, что будет похожим на это

 
19. Следующим мы должны сделать кнопку для нашей панели поиска. Итак, опять используя Rectangle Marquee (инструмент прямоугольная область)  создайте такую же выделенную область, как показано ниже, и заполните ее цветом #000000.
 
20. Теперь вставьте следующие режимы наложения слоев на этот слой

21. Теперь, идя вперед, добавьте белый текст наверх Ваших кнопок и Вы должны получить что-то такое, что будет похожим на это (заметка. Я добавил маленький белый ободок вокруг края, но это на Ваш выбор).

22. Теперь добавим некоторый остроумный текст перед вашим текстовым полем и Вы должны получить что-то похоже на это

23. Давайте двигаться вперед и начинать с нашей боковой панели. Идея сделать ее простой. Дальше мы сделаем заглавие для нашего окна «Последние сообщения». Итак, используя Rectangle Marquee Tool (инструмент прямоугольная область) создайте такую же выделенную область, как показано ниже, и заполните ее цветом #D65863.
 24. Теперь вытащите Text Tool (интстумент текст) и добавьте текст “Recent Posts” («Последние сообщения») в белом цвете (#FFFFFF).
 25. Следующим используйте Polygonal Lasso Tool (инструмент многоугольное лассо) для создания маленьких треугольных пулек и заполните их черным цветом (#000000). Дальше добавим текст, чтобы представить сообщения. Для ссылки я использовал цвет #2E92BC.

26. Теперь просто повторите эти шаги и получите что-то такое через 5 ссылок.

27. Последний шаг для окна – добавление ободка на кнопке высотой в 2 рх.  Используйте Rectangle Marquee (инструмент прямоугольная область), чтобы сделать это и заполните ее цветом #000000. Снизьте непрозрачность этого слоя до около 10 % и он будет выглядеть примерно так

 28. Теперь я просто повторил эти шаги для поля «Последние комментарии», но изменил фон заглавия на  #B7D8CF. Ваш документ будет выглядеть примерно так

29. Теперь время создать лист сообщений. Используя Rectangle Marquee Tool (инструмент прямоугольная область), сделайте выделение, похожее с нижепоказанным и заполните его цветом #F1F1F1.


30. Следующим мы хотим сделать красивое округлое окно, где наш эскиз будет для каждого сообщения. Итак, используя Rounded Rectangle Tool (инстумент закругленный прямоугольник) с радиусом 10 рх, сделайте подобный прямоугольник (не важно какого цвета, мы выбрали этот)
31. Теперь в свой новосозданный закругленный прямоугольник добавьте следующие опции смешивания

 32. Я пошел дальше и добавил эскиз с нашого сайта в качестве примера и это будет выглядеть примерно так

33. Теперь все, что осталось, – это использовать text tool (инструмент текст), чтобы сделать что-то подобное. Для значка календаря я использовал пакет, который Вы сможете найти по этой ссылке (at this link).
34.   Мы хотим иметь каждое второе сообщение с фоном, так что на второе сообщение я не добавлял фон и изменил значок календаря в один из других обновлений с пакета. Вы получите что-то на подобие этого

 35. Все, что осталось, – это подвал (футер). Идя дальше используйте Rectangle Marquee Tool (инструмент прямоугольная область),чтобы сделать выделение, похожее с нижепоказанным, и заполните его цветом #000000.
 36. Теперь снизьте непрозрачность новосозданного слоя до 70 % и потом добавьте текст подобно тому, как показано ниже

Это все! Когда вы все сделали, ваш шаблон должен, надеюсь, выглядеть приблизительно так, как следующий
http://psdvibe.com/2009/04/12/watercolored-design-studio-blog-layout/