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

веб-дизайн html css

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

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

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

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

веб дизайн комикс

скачать исходникидемо

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

/images

/js

/style

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

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

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

И CSS:

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

html css

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

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

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

разметка css

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

Откройте в 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).

html css

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

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

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

html css

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

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

html css

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

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

html css

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

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

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

html css

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

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

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

html css

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

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

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

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

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

html css

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

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

html css

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

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

html css

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

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

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

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

html css

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

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

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

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

html css

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

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

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

html css

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

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

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

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

А вот CSS:

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

html css

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

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

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

html css

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

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

html css

Размещение

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

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

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

html css

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

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

html css

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

html css

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

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

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

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

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

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

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

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

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

html css

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

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

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

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

html css

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

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

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

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

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

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

html css

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

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

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

html css

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

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

html css

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

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

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

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

html css

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

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

html css

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

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

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

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

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

html css

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

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

название

неупорядоченный список и

div для завернутого уголка

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

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

html css

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

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

html css

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

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

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

html css

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

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

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

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

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

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

html css

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

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

html css

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

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

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

А теперь CSS:

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

html css

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

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

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

html css

Заключение

html css

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

Автор: Alvaro Guzman

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Хотите научиться создавать шикарные дизайны сайтов?

Получите пошаговую обучающую систему по веб-дизайну

Получить

Метки: , , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (17)

  1. Отец Виктор

    Огромное спасибо за урок!

  2. Rimma

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

  3. Наталья

    Спасибо! очень хорошие уроки и сайт у вас хороший. Вот только для меня это всё очень сложно, немного не туда залезла:)

  4. Саня

    Сделали бы серию уроков по созданию шаблона для wordpress, от дизайна до верстки(подробно)

  5. Victor

    Всё очень интересно, но пока что очень всё сложно надо сидеть и разбираться.

  6. Николай

    Ну, конечно, нравится. Все толково описано. Спасибо.

  7. Александр

    Спасибо за такой подробный труд.
    Вы говорите, что для любых CMS.
    Неужели при вставке в Joomla, Drupal, WordPress, Taba, не будет никаких особенностей?

  8. Александр

    скорей бы вышел урок для CMS WordPress.

  9. евгений

    Нет слов.Это все для меня очень подходит.
    Где — же я был раньше?

  10. Александр

    Продолжаем учебу!

  11. Игорь

    Увас уроки связаны CMS WordPress, а почему по Joomla нет ведь она тоже очень популярна, и хотелось бы например научиться писать, различные модули и плагины для CMS Joomla.

  12. Горлов Юрий

    Когда я открыл первый урок, то просто обалдел. В первом уроке я нашел такую основу, которую я не видел не в одном из уроков по сайтостроению. Но на третьем уроке я получил облом в виде доступа по паролю и логину. Ребята у меня такой вопрос: как мне продолжить обучение.

    • RohViktor

      Подписаться на Премиум уроки. К примеру на 1 месяц — 240 рублей, или на 3 — 570 рублей.

  13. meloff

    У кого есть доступ на 3ий урок, поделитесь плиз скриншотом веб страницы. Большое спасибо ;)

    • Андрей Кудлай

      Веб-страница аналогична той, что и во втором уроке практически на 100%.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree