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

От автора: на прошлой неделе мы узнали, как создать веб-дизайн на тему комиксов. Сегодня примемся за вторую часть: пора разрезать проект-дизайн на слайсы (фрагменты изображения, прим. пер.) и превратить в рабочую разметку HTML, готовую к переносу в любую CMS. Давайте начнем!

Перед началом

Свою собственную PSD можно получить, следуя шаг за шагом процессу в предыдущем посте или просто скачав ее здесь.

Так как это учебник не для начинающих, я пропущу некоторые базовые объяснения — подразумевается, что у вас уже имеются рабочие знания HTML и CSS, а также небольшое умение разрезать изображения в Photoshop’е на слайсы.

Шаг 1 – Разметка HTML

Давайте начнем с создания рабочей папки; так как в этом учебнике не требуется применение языка серверной стороны, то она может находиться в системе где угодно. Создайте файл с названием index.html и три исходные папки:

Содержимое этих папок говорит само за себя.
Добавьте в index.html основные контейнеры страницы. Я все оборачиваю в div с названием page. Внутри этого div’а добавьте еще три с ID, соответственно, header, content и footer.

В папке style создайте новый файл с названием default.css и добавьте для удаления всех стилей по умолчанию функцию сброса (reset). Я использую Эрика Майера (Eric Meyer), но можете, не стесняясь, начать со своего любимого.

Для этого шага применяется следующий код HTML:

И CSS:

Опробовав код в Firefox, вы должны увидеть что-то вроде этого:

Шаг 2 – Основная разметка CSS

Сначала давайте назначим стили структуре разметки.

Мы оборачиваем весь контент в контейнер шириной 960px, а затем устанавливаем высоту внутренних div’ов. Чтобы получить точную высоту каждого div’а, можно применить инструмент Photoshop линейка (Ruler).

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

Откройте в Photoshop’е Comicastic.psd и скройте все, кроме папок Header BG и Footer BG. Применив инструмент «Разрезать на слайсы» (slice), начертите большой слайс слева сверху до расстояния в 575px ниже верхнего края. Далее начертите другой слайс от направляющей, ограничивающей фон нижнего колонтитула (взгляните на изображение внизу). Конечно, для получения аккуратного результата можно использовать направляющие.

С помощью инструмента «Выбор слайса» (slice selection) выберите два последних созданных слайса и соответственно назовите каждый из них — bg-body и bg-footer. Затем дважды щелкните на все автослайсы и смените Вид слайса (slice type) на «Нет изображения» (No Image).

Далее пройдите к «Файл» (File) > «Сохранить для веб и устройств» (Save for Web and Devices). Выберите два слайса, которые нужно сохранить (для многократного выбора придерживайте клавишу shift), установите «Вид файла» (file type) на JPG, а «Свойство» (Quality) на 70 и щелкните «Сохранить» (Save). Пройдите в свою рабочую директорию и выберите корневой файл (этот диалог автоматически сохранит ваши файлы в папку /images).

Теперь, когда у вас имеются фоновые изображения, давайте во все контейнеры добавим CSS.

Мы установим тестовую высоту div’ов за исключением заголовка (header) (который на самом деле 180px в высоту) и добавим несколько временных фоновых цвета в тестовых целях.

При тестировании в браузере у вас должно получиться нечто вроде изображения внизу.

Шаг 3 – Разделите заголовок и фоновые изображения с содержимым на слайсы

Теперь, когда вы знаете, как разделять на слайсы, давайте сделаем то же самое с изображениями заголовка и фона содержимого (или переднего плана). Для изображений заголовка создайте копию документа "comicastic.psd", скройте все, кроме папки Logo и слоев, связанных с фоном "Поиска" (Search) (плюс я добавляю здесь кнопку поиска после передвижения ее на несколько пикселей вправо). Теперь начертите слайсы вокруг видимых сегментов и назовите их соответственно logo, bg-search и search-button. Сохраните как PNG’и с прозрачными фонами.

Давайте продолжим работу баннером содержимого.

Покажите только папку Background внутри Top Banner, покажите папку Page Curl и слой Page Bg под Page Content, и папку Header Bg, включая общий черный фон. Затем, при этих видимых слоях, начертите два слайса: один для фона баннера под названием bg-banner и другой, маленький, для загиба страницы под названием content-page-curl. Теперь сохраните их оба как JPEG.

Добавьте в свой новый файл HTML новый div с названием logo внутри "header" и другой div с названием top-banner внутри "content".

И код CSS, чтобы они выглядели, как положено:

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

Шаг 4 – Верхняя навигация

Давайте добавим HTML верхней навигации. Добавьте следующий код внутрь div’а header под логотипом.

Самой сложной работой с этим div’ом будет его расположение. Мы заставим его плавать (float) справа и поиграем с отступом, чтобы установить его на нужное место. Добавьте следующий CSS:

Шаг 5 – Замещение шрифта

Так как я совершенно не собираюсь применять в этом проекте "Comic Sans", мы применим более интересный вид шрифта. Чтобы он классно выглядел в современных браузерах, воспользуемся достоинствами CSS3.

Во-первых, скачаем комплекты шрифтов CSS "Komika Title" и "Komika Text" и положим их в новую папку под названием /fonts. В каждом наборе есть группа файлов со шрифтами и файл .CSS, который мы импортируем в свой документ default.css, как здесь:

Когда шрифты импортированы, мы можем применять их на своем сайте где угодно. В каждом комплекте есть множество вариантов, из которых можно выбирать; можно употреблять их согласно графическому дизайну. Для начинающих мы установим ‘KomikaTextTightRegular’ для основного текста body, как тут:

И можно протестировать результат в браузере:

Шаг 6 – Определение стилей верхней навигации

Теперь обратно к файлу psd. Скройте все, кроме фона закладки, создайте новый слайс для закладки навигации с названием bg-main-navigation и сохраните его для веба как файл PNG.

В файл CSS давайте добавим стили для панели навигации, чтобы добиться требуемого эффекта при проведении мышью. Добавим к действию проведения мышью (hover) фон и создадим похожий стиль для случая a.selected. что касается типографской разметки текста, согласно графике мы применим "KomikaTextItalic" и добавим красивый стиль тени текста, чтобы он лучше выглядел.

На этой стадии разработки ваша страница должна выглядеть так:

Шаг 7 – Содержимое заголовка

Помимо логотипа и панели навигации, в раздел заголовка header нам понадобится добавить панель поиска и ссылки на социальные сети. Давайте начнем с создания блока контейнера в HTML и добавления следующего div’а внутри header div.

И несколько необходимых стилей:

При тестировании в браузере:

Шаг 8 – Панель поиска

Далее мы начнем определять стили области поиска. В основном это форма с полем ввода и кнопкой (см. Шаг 3). Для него добавьте следующий код внутри div’а "header-content":

И стили, чтобы он смотрелся хорошо:

Это должно дать в результате:

Шаг 9 – Ссылки на социальные сети

Под div’ом search добавьте div с id social_media. В него можно вставить список ссылок на социальные сети по вашему вкусу. Я использую Набор иконок социальных сетей (Social Media Icon Pack) от Komodo Media.

И в таблицу стилей:

Шаг 10 – Скользящий баннер

Примемся за баннер. Начнем с загрузки Easy Slider 1.5 и вставим файлы в папку с названием Banner.

В папке библиотеки есть несколько примеров– мы сымитируем 02.html. Переименуйте файл, если нужно, удалите весь ненужный код HTML и замените изображения на несколько изображений-образцов.

Итак, файл HTML для баннера должен быть примерно таким:

А вот CSS:

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

Не беспокойтесь, если слайдер немного глючный, через минуту мы это исправим.

Отрегулируйте расположение и замените стрелки-указатели

Разделите на слайсы две стрелки-указателя "Предыдущий" и "Следующий" (prev и next) и сохраните их как файлы PNG в папке с изображениями директории тестирования баннера.

Затем отрегулируйте CSS, чтобы он правильно работал с новыми указателями:

Из чего получается:

Размещение

Теперь мы установим расположение, ширину и высоту всех div’ов, связанных с баннером. Мы также приведем в порядок библиотеку JS, чтобы избежать любых проблем относительно дополнительного div’а bubble.

Вот измененный CSS:

И результат в браузере:

Фон речевого пузыря

Теперь разделите на слайсы фон содержимого поста. При видимых только речевых пузырях, в .PSD, начертите слайс под названием "bg-bubble" и сохраните его как файл .png.

Откорректируйте CSS, чтобы добавить фон и соответственно подогнать расположение div’а bubble.

Вот как это выглядит в браузере; удалите все временные фоновые цвета, если хотите.

Содержимое поста

Чтобы закончить раздел баннера, давайте добавим HTML содержимого поста.

Слияние с файлом основного шаблона

Пора соединить отдельный модуль с нашим основным документом.

Сначала скопируйте папку баннера /js в корневой шаблон, затем добавьте все изображения баннера в папку /images во временной директории.

Далее добавьте внутри тэга <head> файла index.html следующий код:

И добавьте соответственно div’ы баннера в div top_banner.

И завершенный CSS, чтобы баннер заработал

Вскоре мы назначим стили содержимому популярного поста. Однако в данный момент у вас должно получиться что-то похожее на следующее изображение:

Шаг 11 – Упаковщик содержимого и фон

Продвигаясь далее с разработкой макета, добавьте под верхним баннером div с названием content_wrapper, а внутри него другой div с названием page_content, который будет содержать актуальную информацию.

Затем, для того, чтобы это смотрелось как задумано, мы применим CSS3 для добавления закругленных углов к div’у page_content и загиб страницы, который мы разрезали на слайсы в Шаге 3.

В этот момент наша страница должна выглядеть так:

Шаг 12 – Изображение поста и название

Давайте сделаем макет тестового поста.

Согласно проекту нам понадобится квадратное изображение с названием поста и список категорий, размещенный над ним на двух полосках. Давайте сначала займемся HTML.

Создайте div с названием post и поместите его внутри div’а page_content. Затем добавьте в контейнер изображение, название и метаданные.

CSS для этой части хитрый, так как каждый пост должен быть шириной 50% относительно контейнера page_content, плюс полоски должны находиться перед картинкой. Чтобы все удалось, нам придется поиграть с относительным позиционированием и отрицательными отступами.

У вас сейчас должно быть что-то вроде этого:

Шаг 13 – Фон содержимого поста и расположение

Теперь мы добавим div, содержащий контент поста.

Разрежьте на слайсы фоновое изображение для div’а post_content и сохраните его как файл PNG.

Сначала мы установим его позиционирование в файле CSS.

Смотрим в браузере:

Шаг 14 – Содержимое поста

Добавим контейнеры для краткого содержания поста, информацию о нем и комментарии:

Стили для хорошего внешнего вида:

И с постом мы закончили!

Шаг 15 – Добавьте еще постов

Давайте продолжим и добавим в свой макет еще постов. Продублируйте этот блок столько раз, сколько вам нужно div’ов post. Вам следует избавиться от временной высоты, которую мы присвоили div’у page_content. Если все выполнялось правильно, разметка увеличит свою высоту по мере того, как мы добавим еще постов к своей домашней странице.

Шаг 16 – Содержимое популярного поста

Теперь, когда мы закончили определение стилей основному посту, давайте проделаем это с содержимым популярного поста. Помните, как мы вставляли следующий код в div bubble?

Добавьте следующий CSS и повторите bubble во всех слайдах нашего вращающегося баннера.

Я также добавил скользящему изображению край и тень блока:

Должно выглядеть так:

Шаг 17 – Виджеты нижнего колонтитула

Вместо классической боковой колонки я хотел добавить нижний колонтитул, подготовленный к добавлению виджетов. Добавьте следующий код внутрь div’а footer. Внутри боковой колонки будет другой контейнер, под названием widget, а внутри этого div’а:

Сначала позаботимся о списке категорий.

Теперь в файле PSD разрежьте на слайсы угол, назовите его widget-curl и сохраните изображение для веба как файл JPG. Снова разрежьте на слайсы крошечную стрелку рядом с ссылками, назовите ее arrow и сохраните как файл PNG.

И отредактируйте файл CSS как здесь:

При тестировании в браузере вы должны получить что-то похожее на следующее изображение:

Шаг 18 – Еще виджеты

Повторите код HTML, чтобы добавить второй или даже третий виджет списка. На этот раз мы добавим в нижний колонтитул архивы. Вы теперь можете протестировать разметку, добавив несколько копий div’а widget, чтобы посмотреть, как это выглядит. Область нижнего колонтитула будет оптимально увеличиваться, когда вы станете добавлять еще виджеты.

Вот как это смотрится, когда добавлена архивная секция:

Шаг 19 – Панель закладок

Как пример более сложного виджета, давайте добавим панель закладок с тремя разными видами содержимого в каждой закладке.

Сначала добавьте следующий код HTML в качестве основной разметки: неупорядоченный список для закладок и div’ов с разными id для контента. Я добавляю основной класс с названием tab ко всем div’ам содержимого для того, чтобы избежать дублирования кода в файле CSS.

Давайте создадим документ JavaScript с названием tabs.js и сохраним его в папку /js. Включите его, добавив эту строку в тэг <head>.

Теперь присоедините основную панель закладок jQuery, добавив в файл tabs.js следующий код.

Добавим стили при работающей функции JavaScript, чтобы сделать ее красивой. Сначала нам понадобится разрезать на слайсы маленькую стрелку, указывающую на выбранную закладку. Назовите ее tab-arrow и сохраните как PNG.

Теперь добавьте в файл CSS следующий код:

Теперь вам нужно заставить работать панель закладок; давайте добавим внутрь содержимое!

Шаг 20 – Содержимое закладок

Продолжим и добавим в закладку содержимое. Посмотрев на графику, вы обнаружите, что у нас имеется список из трех постов (последний и популярные) с названием и резюме, а также пейджер с нумерацией страниц внизу для навигации по постам.

Вставьте в закладку следующий код:

А теперь CSS:

Повторите HTML для каждой закладки. Вот как это должно выглядеть:

Шаг 21 – Нижний колонтитул (Футер)

Наконец, добавьте панель навигации нижнего колонтитула и информацию о копирайте:

Теперь линию градиента в 1px из файла PSD, назовите его "bg-footer-line" и сохраните как JPG. Наконец, отредактируйте CSS для установки всего этого.

Заключение

Вот оно! Мы закончили процесс преобразования. Код, указанный здесь, был протестирован во всех основных браузерах. Если вам нужна совместимость с IE6 и 7, не будет большим трудом написать для них отдельно несколько решений проблемы. Наш проект уже готов к интегрированию в любую CMS в качестве оболочки. Удачи вам и огромное спасибо за прочтение!

Автор: Alvaro Guzman

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.