Здравствуйте, товарищи! Как вы все знаете, в интернете полно различных туториалов, клипартов, кистей, шрифтов и прочих материалов на тему ретро. Но ведь это ретро – буржуйское, забугорное, неродное и чуждое русской душе :) . Я решил исправить это недоразумение и создать дизайн (в будущем это будет тема Wordpress) в стиле советского ретро 50-60х годов, а так же, написать подробный, понятный всем и каждому урок. Начинаем-с.

Сперва нам понадобятся некоторые изображения:

Изображения старой бумаги – для фона шапки

Изображение старых часов

Старое фото №1

Старое фото 2

Советский рубль – лицевая сторона

Советский рубль – оборотная сторона

Советские монеты и значок октябриста (можете поискать другие)

1. Создаем новый документ размером 876х1158рх. Затем -направляющую View->New Guide. Параметры ставим как на скриншоте

2. Заливаем фон цветом #ffffee. И копируем в документ кусок старой бумаги, подгоняя под направляющую

3. Добавляем эффекты слоя -падающую тень.

4. Рисуем панель навигации – меню. Возьмите инструмент Rounded Rectangle Tool, раидус скругления – 10рх, режим – Fill Pixels. Эти параметры можно задать на панели параметров инструмента, которая находится под меню. Выберите основной цвет #a43121. И нарисуйте панель

Теперь добавьте эффекты

Можете поэкспериментировать с настройками сами, но результат должен быть примерно таким:

5. Самый творческий шаг :) . Из того клипарта, что я предложил составляем коллаж в нашей шапке, руководствуясь исключительно своим дизайнерским вкусом и чувством композиции. Конечно, для этого вам понадобятся навыки работы со слоями, но если вы читаете этот урок, то смею предположить, что таковые у вас имеются и не буду подробно останавливаться на этом.

Не обязательно повторять все как у меня – можете даже поискать другие изображения и составить совершенно другой коллаж. Добавляем падающую тень по вкусу.

6. Пишем текст меню и заголовка блога. Цвет белый, шрифты – в меню я использовал Arial полужирный 18pt, в заголовке – Arial Black обычный 48pt, в описании – Arial Black 21pt. В шапке к заголовку и описания я добавил падающей тени, чтобы выделить светлый текст на светлом фоне. При верстке и создании действующей темы Wordpress тень будет добавляться средствами CSS.

Вообще, весь текст, который мы будем добавлять в реальности, как вы понимаете, будет добавлятся во время верстки и  HTML программирования, но на макете показать всю типографику, как она будет выглядеть, мы обязаны.

7. Добавляем вертикальную направляющую. По ней будем рисовать сайдбар (боковую колонку).

8. Берем прямоугольное выделение и выставляем такие настройки на панели параметров

Шлёпаем выделение на это место

9. Заливаем его цветом #1D4FA8 на новом слое

10. Находим в любом поисковике качественную иконку RSS и копируем ее в документ, заливаем светло-желтым цветом #F7ED5D. Сделайте копию этого слоя (Ctrl+J).

11. К верхней копии применяем такие настройки

А к нижней – такие

12. Выбираем инструмент Custom Shape. Находим среди стандартных фигур фигуру с волнами и на новом слое рисуем ее белым цветом. Продублируйте слой с ней несколько раз и состыкуйте дубликаты

13. Добавьте эффекты к слою с синим прямоугольником

Добавьте надпись “Подпишись” шрифтом Pilotka и объедините все слои, принадлежащие этой плашке.

Совет: если вы объединяете слои с какими-либо эффектами, то получившийся объединенный слой эти эффекты наследует. В нашем случае обводка иконки RSS перенесется и на саму плашку и на волны. Чтобы этого не было, можно воспользоваться Smart объектами. Щелкните на нужном слое с эффектами правой кнопкой мыши и выберите команду Convert to Smart Object. После чего растрируйте слой при помощи другой команды того же меню – Rasterize Layer.

Для добавления эффекта гранжа воспользуйтесь гранжевым набором кистей и ластиком с прозрачностью не выше 50% нанесите потертости

14. Аналогично стоит поступить с панелью меню. Переведите ее в смарт-объект, растрируйте и потрите немного ластиком

15. Создайте еще 2 направляющие

Они определят область основного контента. Начните “заполнять” контентом макет, добавлять картинки, текст и т.д. Фон для контента залейте белым, шрифт для заголовка – Book Antiqua 20pt полужирный, шрифт для даты – Calibri 24pt жирный, шрифт для текста самого поста – Bookman Old Style 14pt  обычный. Цвета показаны на рисунке, но можете подобрать и свои

16. Дальше нужно добавить какой-то изюминки или уникальности кому как нравится. Я решил подвал записи (там где строка с кол-вом комментариев) оформить линией разреза (пунктир с ножницами).

Для этого при помощи Restangle Tool нарисуйте прямоугольник контуром (режим Paths).

Теперь добавим пунктира. Для этого я воспользовался интересным приемом – по данному прямоугольному контуру будет написан текст, который из себя представляет знак минуса с пробелами. То есть так: – - – - – - – - – - – - – - . Выберите инструмент текста и щелкните на любом участке контура. После чего начните набор. Обязательно оставьте место для значка ножниц

В палитре текста должны быть такие параметры

Добавьте значок ножниц при помощи Custom Shape (есть там такая форма)

17. Заполните весь сайт “контентом”. В том числе, добавьте сайдбар.

18. Над слоями, составляющими шапку слоя создайте 2 корректирующих слоя (Adjusment Layers). Подробнее про эти слои читайте в статье.

19. Вот и все. В заключении я решил заменить основной фон на #EBE0BA а тот светло-желтый, что был вначале, использовать в блоках сайдбара

Один комментарий на “В стиле советского ретро – рисуем макет сайта в Photoshop”

  1. Гостинки в городе Харьков.» Архив сайта » после нового года Says:

    [...] Photoshop.Особый шарм сайту придает макет в стиле ретро. В стиле советского ретро – рисуем макет сайта в Photoshop-и получаем качественный посещаемый [...]