Уроки Веб и приложения Руслан Гильзидинов 11 февраля 2014

Сайт в виде школьной доски в Фотошоп

Сложность урока: Средний

В этом уроке вы узнаете, как сделать уникальный и достаточно оригинальный макет под WP в стиле школьной доски. Если у вас возникнут какие либо вопросы, задавайте их в комментариях. Так же прошу заметить, что для скачивания доступен PSD конечного результата – это должно помочь вам.

Вот что у нас должно получиться в итоге:

Материалы для урока:

  1. Шрифт Eraser
  2. Шрифт Chalkboard (стандартный на Mac-е)
  3. Набор иконок
  4. Иконки
  5. PSD файл

Архив

Давайте приступим.

Шаг 1

Первое, что мы сделаем – мы создадим новый документ со следующими параметрами:

Шаг 2

В этом шаблоне фон будет темным, поэтому заливаем фон цветом #1C1C1C с помощью инструмента Paint Bucket Tool (Заливка).

Шаг 3

Создадим новый слой поверх фонового слоя и назовем его “Background Texture”. Заливаем его тем же цветом. Мы добавим немного шума, для этого жмем Filter > Noise > Add Noise (Фильтр > Шум > Добавить шум) и, выставив следующие настройки, жмем ОК.

После этого снижаем непрозрачность слоя до 30%.

Шаг 4

Самое время начать работу над шапкой. Для логотипа я использовал шрифт Eraser (выше я выложил ссылку на него) цветом #FFFFFF. Позади текстового слоя создадим некую «иллюзию мела». Выберите следующую кисть:

Шаг 5

Используя цвет #000000, нарисуйте что-то подобное на специально созданном для этого слое (вам нужно создать новый) и снизьте непрозрачность нового слоя до 20%.

Шаг 6

Для навигационного меню в шапке я использовал шрифт Chalkboard. Для активной ссылки выберем цвет #272727, для неактивной ссылки – пусть будет #FFFFFF. Сзади активной ссылки нарисуем небольшой мазок той же кистью, которой мы пользовались в предыдущем шаге, как показано на рисунке.

Шаг 7

Перейдем к созданию блока основного контента. Используя Rectangle Marquee Tool (Прямоугольная область), создайте прямоугольное выделение, как показано на рисунке, и залей его цветом #2E5A39. Назовите этот слой Green Back”.

Шаг 8

Теперь нам нужно дублировать новоиспеченный слой и выделить его, зажав Ctrl+J. Переименовываем дубликат в Noise” и применяем к нему шум, который мы использовали в третьем шаге. Меняем режим наложения на Lighten (Осветление) и понижаем непрозрачность до 40%.

Шаг 9

Теперь вернемся к слою Green Back” и применим к нему следующие настройки слоя:

Шаг 10

У вас должно получиться что-то подобное:

Шаг 11

Теперь приступим к созданию рамки нашей доски. Для этого создаем выделение, как показано на рисунке, с боку доски, используя Rectangle Marquee Tool (Прямоугольная область). Заливаем выделение цветом #323232.

Шаг 12

Теперь нам нужно добавить текстуру. Жмем Filter > Render > Fibers (Фильтр > Стилизация > Волокна) и выставляем параметр Variance (Отклонение) на 11 и параметр Strength (Интенсивность) на 28.

Шаг 13

Очевидно, что рамка не должна быть белой. Поэтому жмем Ctrl+U и в появившейся панели выставляем следующие параметры:

Шаг 14

Наша рамка выглядит немного плоской – мы это исправим, применив следующие настройки для стилей слоя:

Шаг 15

У вас должно получиться что-то вроде этого:

Шаг 16

Повторите предыдущие шаги для остальных сторон и получите что-то подобное. Однако удостоверьтесь, что слои с боковыми сторонами рамки лежат поверх слоев со слоями верхней и нижней рамки – это важно.

Шаг 17

С рамкой мы закончили! Чтобы сделать меню категорий, мы должны добавить текст в следующем стиле. Для активной ссылки Graphics” я использовал цвет #EEE2D5, для неактивных ссылок - #D8C0A8.

Шаг 18

На фон активной ссылки добавим небольшое поле, используя Rounded Rectangle (Прямоугольник со скругленными углами) с радиусом в 3рх и цветом #000000.

Шаг 19

Непрозрачность заливки снизим до 50% и поменяем режим наложения на Soft Light (Мягкий свет). Также применим следующие настройки для стилей слоя:

Шаг 20

Если у вас получилось что-то подобное – значит, все готово.

Шаг 21

Теперь поработаем с левой частью контента. Создадим небольшую надпись для заголовка, написав, например, «Latest Articles». Я использовал шрифт Georgia”. Для создания «иллюзии размытого мела», используем ту же технику, что и в четвертом шаге. Лучше использовать белый цвет, но вы можете и поэкспериментировать. Снижаем непрозрачность слоя до 7%.

Шаг 22
Наш пост не будет отображаться так, как в обычных шаблонах для Wordpress – мы будем использовать картинку с заголовком поверх. Поместите картинку размером 240х240рх и примените к ней следующие стили слоя:

Шаг 23
Теперь нам придется много работать с Rectangle Marquee Tool (Прямоугольная область) и с непрозрачностью. Иконку комментария можно взять в сборке Mono Icon Pack, ссылку на которую я разместил в самом начале статьи. Используя вышеперечисленные инструменты, создаем что-то подобное:

Шаг 24

Дублируем первую картинку и все примочки к ней и множим, меняя фон:

Шаг 25

Используя Rectangle Marquee Tool (Прямоугольная область), создаем полоску, как на рисунке, и заливаем её цветом #FFFFFF.

Шаг 26

Теперь жмем Filter > Blur > Motion Blur (Фильтр > Имитация > Размытие в движении). Ставим угол -90 градусов и значение 120рх – получится что-то такое:

Шаг 27

Теперь понижаем непрозрачность слоя до 50% и меняем режим наложения на Soft Light (Мягкий свет). Снова выделяем прямоугольную область, на это раз справа, как показано на рисунке и заливаем цветом #000000.

Шаг 28

Понижаем непрозрачность слоя до 30% и меняем режим наложения на Soft Light (Мягкий свет).

Шаг 29

Для заголовков сайдбаров используем тот же эффект, что и в шаге 21. Тот же шрифт и те же настройки:

Шаг 30

Для заголовка поиска делаем то же самое. Все, что я сделал для самого поля поиска, я взял кисть Chalk и поставил горизонтальный мазок, как на рисунке. Для цвета используем #515151.

Шаг 31

Последнее, что нам предстоит сделать для сайдбара – это добавить иконки социальных сетей. Иконки вы можете найти в самом верху урока – я давал на них ссылки. Единственное – нам нужно будет наложить сверху белый цвет, дабы они стали белыми. Для мела вверху снова используем кисть Chalk. 

Шаг 32

Последний шаг до того, как наш макет будет готов, это создание футера или подавала. Убедитесь, что все эти слои расположены под всем остальным, кроме слоев фона. Создайте выделение внизу и залейте его цветом #000000.

Шаг 33

Понижаем значение непрозрачности до 18% и добавляем немного текста:

Готово!

Автор: devisefunction

Источник: devisefunction.com

Комментарии 11

Спасибо за урок

Хороший урок для начинающих. Моя первая работа.
Интересно было урок реализовать в html-коде.

Спасибо за урок.)

Спасибо за урок)

Спасибо вам за интересный урок!

Ну как то так))) ПЕРВАЯ РАБОТА)))

Спасибо.Хороший урок.

Спасибо за урок.Олимпиаде УРА!

Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее