Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS

Давайте начнем! Для быстроты изложения я опущу объяснение основ (вроде того, как создать слой-маску или отредактировать обработчики или векторную фигуру). Вам нужно иметь понятие о Слоях, Направляющих, Векторных масках и Слоях-масках, Кистях, инструменте Перо, и уметь работать с типографской разметкой текста (Символы и Параграфы).

Активы этого учебника:

Бумажный узор – Клочья

Фигуры «солнечные лучи»

«Комиксовые» шрифты из Font Squirrel (Komika Title и Komika Text)

Набор иконок социальных сетей от Komodo Media

Первым шагом мы создаем макет, грубый рисунок, или даже просто набросок разметки на салфетке. Черновик структуры сайта позволяет легко разместить элементы дизайна. Ниже приведен простой набросок, показывающий следующие элементы:

Заголовок с логотипом, поисковой полосой и ссылками на социальные сети, кроме основной навигационной колонки.

Баннер с представленными постами – обратите внимание, как текст поста размещен поверх изображения в «словесном пузыре» (talk bubble) для подчеркивания «комиксового» стиля.

Область контента со списком постов располагается в двух колонках и содержит ассоциированную картинку, а текст также представлен в «словесном пузыре».

Нижний колонтитул со списком категорий блога, архивом, популярными постами и последними комментариями, а также информацией о копирайте.

Шаг 1: Устанавливаем документ

Откройте Photoshop, скачайте шаблон Photoshop’а 12 колонок из 960 Grid System или создайте новый документ в 960px и нарисуйте несколько Направляющих/Guides на левом и правом краях.

Увеличьте рабочую область, чтобы посмотреть, как она выглядит при более высоком разрешении, а также увеличьте высоту. Я устанавливаю размеры документа на 1420px ширины и 1200px высоты. Наконец перейдите на Слой/Layer > Новый слой-заливка/New Fill Layer > Плотный цвет/Solid Color…) и установите черный (#000000) фон холста.

Шаг 2: Фон заголовка

Начертите горизонтальную Направляющую/Guide примерно в 450px от верхнего края, мы будет использовать ее в качестве Применив инструмент Прямоугольник/Rectangle, начертите широкий прямоугольник, воспользовавшись в качестве переднего фона этим цветом (#AA0001). Затем примените к прямоугольнику черно-белую Слой-маску с градиентом/Gradient Layer Mask для того, чтобы скрыть его нижнюю часть.

Подсказка: никогда не пользуйтесь Слоем с градиентом/Gradient Layer для фонов, потому что при увеличении высоты холста (обычная практика в веб-дизайне) фон искривляется.

Шаг 3: Добавляем узор фона

Откройте из ресурсов Бумажный узор/Paper Texture, Скопируйте/Copy и Вставьте/Paste его над слоем с красным градиентом. Масштабируйте его для того, чтобы вместить в границы модели и измените Режим наложения/Blending Mode слоя на Линейный затемнитель/Linear Burn. Мы разложим его на слои как большое фоновое изображение, но для более высокого разрешения нам нужно сделать искусное соединение края бумаги с черным фоном, для этого при помощи инструмента Затемнение/Burn затемните области, близко расположенные к левому и правому краям бумажной текстуры. Можете использовать большую мягкую Кисть/Brush (0% Твердость/Hardness).

Правильно организуйте слои – положите оба слоя (Бумага/Paper и Прямоугольник/Rectangle) в папку под названием «Header Bg» (заголовок).