вторник, 2 августа 2011 г.

Как создать веб-макет «Изношенная бумага»


В этом уроке Вы научитесь создавать текстуру «изношенная бумага» для веб-дизайна, используя базовые техники Photoshop. Дизайн включает несколько безплатних изображений, которые помогут Вам в миг создать прекрасный макет.
How to Create a “Worn Paper” Web Layout Using Photoshop – ссылка на этот урок:
Окончательный результат

Нажмите на изображение, чтобы посмотреть полномасштабный окончательный результат (full-scale final result).
Загрузки
Вы можете загрузить связанные исходные файлы этого урока ниже.
Настройка документа 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 % так что фон будет исчезать через некоторое время.
      7. Используя инструмент «Горизонтальный текст», добавьте несколько главных ссылок в левой части навигатора. Используйте цвет шрифта #FFFFFF и простой шрифт на подобие Helvetica.

       8.      Давайте работать над отображением активной / наведенной курсором мыши ссылкой. Используя инструмент «Прямоугольная область» (Rectangular Marquee Tool (M)), сделайте выделение как показано ниже и заполните его #FFFFFF на отдельном слое.
      9. На новосозданном слое вставьте следующие параметры наложения:

10.      Вы получите что-то подобное:

Проектирование ссылки RSS
11.      С правой стороны навигатора мы будем иметь несколько ссылок RSS.
         
12.      Вот цвета для ссылок: «Подписаться» - #FAE4B3; «Сообщение», «Комментарии» и «Email» – #F48F32.
13.      Скачайте иконку RSS с Feed Icons.
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.
Поздравляю, Вы сделали!
Если вы следовали этому руководству, у Вас получилось что-то, что выглядит так: