Дизайн блога в стиле ретро

/ 👁 2187

Сегодня будем создавать дизайн блога в стиле Ретро. Особенностью такого дизайна является его необычность и индивидуальность. В процессе дизайна мы создадим ретро-композицию в шапке сайта, а также самостоятельно сделаем текстуру в стиле ретро. Такой сайт обязательно привлечет внимание!

дополнительные материалы к урокам

демо версия урока

1. Создадим новый документ в Photoshop. Размер 1024 пикселя шириной и 768 пикселей высотой. Разрешение 72. Теперь расставим направляющие: горизонтальные на 718 пикселей, 265 пикселей и 230 пикселей. Вертикальные на: 785 и 40 пикселей.

2.Из дополнительных материалов загрузите фотографию со зданием (91.jpg). Поместите ее в наш документ. Используя свободную трансформацию Ctrl +T уменьшите картинку и разместите примерно так как на скриншоте (до второй горизонтальной направляющей). Нажмите Enter, после поместите слой с картинкой под основным прозрачным слоем.

3. Переходим на верхний слой, берем круглую кисть размером примерно 300 пикселей, жесткостью 0% и непрозрачностью (opacity) – 60%. Цвет кисти – белый. Находясь на верхнем слое, проводим штрих по ширине всей картинки, чтобы получилось примерно вот так:

4.Добавим новый слой коррекции цветов, используя нижнее меню (кнопка ) – Hue/Saturation. И подкорректируем цвета примерно до такого результата:

5.Откройте изображение патефона в Фотошопе и аккуратно удалите фон, используя волшебную палочку с толерантностью около 30-35. Далее поместите изображение без фона в наш рабочий файл. Подкорректируйте размеры с помощью свободной трансформации. Примените к слою режим наложения Pin Light:

6.Загружаем изображение фотоаппарата из дополнительных материалов. Вырезаем белый фон и помещаем изображение без фона в наш документ. Уменьшаем размеры, с помощью свободной трансформации. А теперь применим к нашему изображению Слой маски ( ). Возьмем мягкую круглую кисть черного цвета с непрозрачностью около 50% и немного пройдемся по краям фотоаппарата. После чего поменяем режим наложения слоя на Difference.

7.Загружаем изображение девушки. С помощью волшебной палочки с толерантностью 40 удаляем голубой фон. Весь он не удалится. Это ничего страшного. Поместите получившееся изображение в наш документ, в левую часть шапки. Уменьшите его до нужных размеров и отразим по горизонтали. После этого примените к слою Слой маски и черной круглой кистью с непрозрачностью 80% аккуратно пройдитесь по остаткам фона, стирая его. Должно получиться примерно так:

8.Теперь загрузим изображение с бабочками. Удалим белый фон с помощью волшебной палочки. Переместим изображение в наш рабочий документ и подкорректируем его размер, а также наклон, с помощью Свободной трансформации. Должен получиться эффект вылета бабочек из патефона. Теперь применим к слою режим наложения Luminosity.

9.Загрузим в наш документ из дополнительных материалов изображение шара. Сделаем еще 2 копии этого шара и поменяем у этих копий размеры так, чтобы они были отличны друг от друга. Расположим наши шары примерно так:

10.Теперь в инструментах найдем Castom Shape Tool ( ) и выберем фигуру, которая называется Registration Target 2 ( ) нарисуем ее большого размера и расположим справа, у края нашей композиции. Пусть она немного выходит за пределы документа. Сам слой с фигурой мы расположим почти в самом низу, только над слоем с картинкой фона. После чего нажимаем на слой с фигурой, удерживаем Alt и щелкаем левой кнопкой мыши. Таким образом фигура обрежется точно по нашей картинке фона. Все выходящие края фигуры скроются. Также придадим фигуре эффект Outer Glow. В настройках этого эффекта выставим размер где-то на 13 пикселей.

11.Теперь в том же Castom Shape Tool найдем изогнутую стрелку. Применим белый цвет и нарисуем ее. После чего скопируем, чтобы у нас получилось 2 стрелки и переместим вторую стрелку чуть ниже (смотрите скриншот). Выделим оба слоя со стрелками и с помощью свободной трансформации повернем их примерно так, как показано на скриншоте ниже. После чего применим к каждому слою эффекты (Drop Shadow серого цвета, Bevel & Emboss и Texture). Должно получиться вот так:


12.После этого удерживая клавишу Alt скопируйте эффект и на вторую стрелку:

13.Из дополнительных материалов загрузите шрифт Lot. Чтобы это сделать нужно открыть архив, а далее перетащить данный шрифт в папку Fonts Вашего компьютера, которая находится в C:/Windows. С помощью этого шрифта напишим название блога (у меня будет RETRO BLOG). Учтите, что шрифт будет отображаться корректно только на английском языке. Если для названия Вы используете русские буквы, подберите какой-то другой шрифт на Ваше усмотрение. Каждое слово я написала на разных слоях, после чего придала им нужные цвета и применила эффект обводки (Stroke) 2px. Далее с помощью свободной трансформации повернула оба слова на -30 градусов и расположила одно ниже другого. При этом пришлось немного подкорректировать расположение патефона и бабочек, чтобы изображения не накладывались друг на друга. Получилось примерно так:

14.Загрузим из дополнительных материалов текстуру бумаги. Перетащим ее в наш документ, с помощью свободной трансформации повернем на 90 градусов и растянем по всей ширине. Слой с текстурой должен быть самым верхним. Теперь применим трансформацию и скроем этот слой. Встанем на слой под ним и одновременно нажмем Ctrl Alt Shift E. Все видимы слои объединятся в один и образуют объединенный слой. Теперь сделаем слой с текстурой снова видимым, встанем на него, зажмем Alt и кликнем левой кнопкой мыши. Текстура наложится на объединенный слой. А теперь поставим режим смешивания на Hue. Получается вот так:

15.Скопируем верхний слой с текстурой и применим к нему. Filter – Pixelate – Color Halftone. Max radius ставим на 5. Нажимаем Ок и устанавливаем непрозрачность слою 60%:

Для удобства я создаю папку с названием шапка и помещаю все наши слои туда. После чего блокирую всю папку, чтобы при последующей работе случайно не внести нежелательные изменения. Советую Вам, при создании какой-либо группы элементов в дизайне, которая относится к конкретной части сайта (например к шапке или навигации), после создавать для этой группы отдельную папку с соответствующим названием – потом гораздо проще будет что-то найти!
16.Теперь займемся блоком справа. По нашим направляющим нарисуем прямоугольник цветом # 877825. Теперь возьмем белую круглую кисть с непрозрачностью 40% и жесткостью 0, и на новом слое проведем кистью вдоль прямоугольника. А теперь, стоя на слое с линией от кисти зажимаем Alt и щелкаем левой кнопкой мыши, когда увидим знак прикрепления данного слоя к нижнему. Должно выглядеть так:

17.Давайте сделаем на прямоугольнике ретро-текстуру. Сначала возьмем инструмент «Прямоугольное выделение» и выделим на нашем большом прямоугольнике более тонкий прямоугольник (выделение должно быть по всей длине большого прямоугольника). Создадим под это выделение новый слой:

18.Теперь окрашиваем выделение цветом # d4ad2c и двигаем выделение вправо. На следующей позиции окрашиваем другим цветом. Время от времени оставляем зазоры, чтобы в некоторых местах проглядывал цвет нашего основного прямоугольника. Для каждой новой позиции выделения создавайте новый слой (так будет проще исправлять, если что-то не понравится):

19.В качестве окраски я использовала следующие цвета: # d4ad2c, #bf360c, #946026, #999e2a, #e0c76d. Когда Вы всем будете довольны – объединяйте все эти слои в один:

20.А теперь применим к получившемуся слою режим смешивания – Screen. А далее – Filter – Pixelate – Color Halftone. Max radius ставим на 4. Нажимаем Ок и устанавливаем непрозрачность слою 25%:

21.Скопируем из шапки слой с бабочками. Поставим бабочек поверх нашего правого блока. Отразим из по горизонтали и вертикали, с помощью Свободной трансформации. И сделаем непрозрачность равную 49%:
Объединим слои в одну папку и назовем ее правый блок.

22.Создадим фон контента. Опять воспользуемся прямоугольным выделением. Сделаем выделение по направляющим, которые образуют центральную часть страницы. Создадим новый слой. Возьмем инструмент Заливки (Градиент) и установим градиент от цвета # efdbcd к цвету # b2a44b. Немного подкорректируем маркеры как на скриншоте. После этого с зажатой клавишей Shift проведем градиент справа налево в выделенной области:

23.Перейдем в папку Правого блока, встанем на слой с фоном блока, создадим прямоугольное выделение по всей длине и шириной 40 пикселей. Скопируем выделение (Ctrl + C), вставим (Ctrl + V) и с помощью инструмента Move Tool (черная стрелка), перенесем в левую часть нашей страницы:

24.Скопируем получившуюся полоску еще раз, повернем на 90 градусов. Скопируем получившуюся полоску, отразим по горизонтали. Поставим одну к другой так, чтобы получилась одна сплошная полоса. Объединим 2 новых слоя. Получившийся слой поставим в зону футера и с помощью Свободной трансформации подкорректируем высоту и ширину так, чтобы полоска вписалась в зону футера, установленную направляющими:

25.Теперь займемся верхним меню. Установим вертикальные направляющие на отметки: 250, 300, 500, 550, 750 пикселей.
Теперь делаем прямоугольное выделение от 50 до250 пикселей. Становимся на слой с фоном контента. С помощью стрелки вниз на клавиатуре, спускаем выделение вниз так, чтобы оно полностью стояло на фоне контента. Копируем ((Ctrl + C), создаем новый слой для кнопки, встаем на него, вставляем (Ctrl + V). А теперь с помощью мышки и инструмента Move Tool поднимаем получившийся градиентный прямоугольник в предназначенную ему область.
Все то же самое проделываем для двух других кнопок. Соответственно градиент у каждой будет свой. Для каждой кнопки создавайте отдельный слой:

26.Добавьте для каждой кнопки эффект Drop Shadow с параметрами как на скриншоте:

27.Сделаем еще и блики нашим кнопочкам. Для этого встаем на слой с кнопкой, берем инструмент Перо и рисуем плавную линию поверх кнопки, после чего замыкаем ее в геометрическую фигуру произвольной формы (см. скриншот). Нажимаем Ctrl + Enter. Получается выделение. Создаем новый слой над слоем с кнопкой. Встаем на новый слой и заливаем выделение белым цветом. Теперь с зажатой клавишей Alt прикрепляем новый слой к слою с кнопкой. Таким образом белая область обрежется точно по кнопке. Убавляем непрозрачность, чтобы получился эффект блика. И то же самое проделаем для двух других кнопок:

28.Подпишем кнопочки. Выберите шрифт, который Вам больше понравится. Я использовала шрифт Georgia и также применила к тексту эффект Bevel & Emboss:

29.Заполним правый блок сайта. Здесь можно разместить ссылки на заметки. Выберите шрифт, который Вам нравится и заполните правый блок, примерно так:

30.Теперь займемся содержимым центральной части. Отметим расстояние от краев блока контента: справа и слева по 30 пикселей и сверху 25 пикселей от меню. Добавим надпись приветствия:

31.Теперь создадим формы, в которых будет выводиться краткое описание заметки. Нарисуем прямоугольник для вывода краткого описания заметки. Я использовала цвет #eeeeea. Теперь сделаем ему рамку из сделанной нами ранее текстуры. Для этого найдем слой с полоской из текстуры, которая расположена в левой части нашей страницы. Скопируем слой, повернем на -90 градусов, сделаем немного уже и длиннее так, чтобы получилась верхняя рамка для нашего прямоугольника. Скопируем получившуюся рамку, отразим по вертикали и подставим вниз. Сделаем 2 боковые рамки, скопировав одну из предыдущих, развернув и уменьшив по стороне прямоугольника. Должно получиться примерно так:

32.Объединим все слои рамки в один (выделяем все слои с зажатым Ctrl, щелкаем правой кнопкой мыши и выбираем Merge Layers). Скопируем слой 2 раза так, чтобы получилось 3 поля для заметок и разместим их друг под другом примерно на равном расстоянии. Осталось заполнить эти поля:

33.На блоге бывает очень много заметок, но если их все выводить на одной странице, то страница будет очень длинной. Поэтому, часто принимается решение сделать постраничную навигацию на блог. Мы тоже изобразим такую постраничную навигацию в низу:

34.И наконец в футере Вы можете разместить контактную информацию или какие-либо ссылки! Поздравляю! Ретро дизайн готов!

Leave a Reply