Оскільки час dial-up соеденений поступово відходить в історію, то все популярнішими стають дизайни сайтів використовують великі картинки в якості фонового зображення. Прикладів тому безліч, включаючи мій блог 😉

А тепер невеликий туторіал про те, як самому створити подібний дизайн за мінімальний час.

Для початку варто визначитися з тим – яка тематика Вашого блогу – мій вибір припав на урбан-стайл – бо модно, та й підійде більшості тінейджерів.

Тепер варто пошукати відповідні кліпарти, шрифти і пензлики для Фотошопа (ну у нас дійсно мало часу – вже минуло півхвилини)…
Для цього нам вистачить 3-х запитів до гуглу:

  • free urban texture – прийдемо сюди – http://urbandirty.com/
  • free photoshop urban brushes – тут багато чого можна знайти – але прийшов сюди http://invisiblesnow.deviantart.com/
  • free urban fonts – http://www.urbanfonts.com/

Щоб особливо не томити – мій вибір припав на наступні складові:

Текстура фону:

Шрифт аля графіті:

Пензлики урбан-стайл:

Тепер перейдемо до малювання (краще поєднувати читання з переглядів слайдів):

  • Відкриваємо Photoshop і створюємо новий файл розміру 1280х1024
  • Перетягуємо картинки в наш файл
  • Далі попер креатив – спочатку вибираємо шар містить текстуру для шапки сайту – заливаємо його напівпрозорим градієнтом – щоб приховати кордону (див. шар Body -> Gradient)
  • Потім виділяємо місце під наш заголовок, і знову заливаємо чорним
  • Таким же чином підготуємо місце під наш контент
  • Створюємо напис нашим модним шрифтом Graffiti
  • Тепер намалюємо нашої кнопки під шапкою, для цієї мети нам потрібно виділити гурток, залити його чорним, намалювати на ньому іконку пензлем з набору Urban Scrawl
  • Додам так само кілька графічних елементів з того ж набору пензликів – це стрілочки для посторінкового анімації, хмарка для підказок, і пару зовсім декоративних елементів
  • Використовуючи інструмент Slice Tool розріжу таку заготовку на складові частини – зверніть увагу, як багато включає верхня чать (header)





  • На даний креатив я витратив трохи менше 10 хвилин, тепер залишилося все це зростити з WordPress’ом.

    Почнемо з HTML структури:

    WordPress
    Home
    Online
    Archive
    RSS Feed

    © 2009 WordPress

    Основні махінації у нас відбуваються з тегом body і дивом з id=”body”:

    /* Велику картинку header.jpg ми розміщуємо вгорі по центру */
    body {
    background: #000 url(images/header.jpg) 50% top no-repeat;
    }
    /* div c id=”body” распологаем по центру */
    #body {
    width:1024px;
    margin:0 auto;
    }

    Якщо ж Ви захочете додати градієнт для фону, то краще всього це зробити додавши фонове зображення до тегу з id=wrap (нім повинен обертати div з id=body):

    #wrap {
    background: #ссс url(images/gradient.gif) repeat-x;
    }

    Після даної операції у вас буде вже прийнятна заготовочка для подальшого сайту, і найкраще буде почати з оформения “шапки” сайту – для початку виділимо місце під неї і спозиционируем всі посилання “абсолютно”:

    #header {
    height:320px;
    position:relative;
    }
    #header a {
    position:absolute;
    display:block;
    width:72px;
    height:72px;
    text-indent:-9999%;
    }

    Тепер кожну з кнопок на нашій фонової картинки зробимо “живий” – нам треба буде розмістити відповідні посилання в потрібних місцях:

    /* Відновлюємо наш заголовок */
    #logo {
    top:0;
    left:0;
    width:100% !important;
    height:96px !important;
    }
    /* Посилання з будиночком */
    #home {
    top:210px;
    left:244px;
    }
    /* Посилання з зведочкой */
    #online {
    top:116px;
    left:370px;
    }
    /* Посилання 42 */
    #archive {
    top:200px;
    left:520px;
    }
    /* Посилання на фід */
    #rss {
    top:110px;
    left:700px;
    }

    Тимчасово можете додати border – щоб було зручніше позиціонувати. Так само я додав спливаючу підказку для кожного елемента (як? – читайте у статті CSS меню для початківців).

    Доведення теми до розуму у мене зайняло ще деякий час, але тепер у мене вже є заготівля, використовуючи ону – розробка теми для WordPress у мене буде займати не більше п’яти-десяти хвилин 🙂

    Якщо Вам цікавий результат то можете його завантажити безкоштовно разом з вихідними кодами в PSD і необхідними матеріалами:

    Download4,77 МбUrban Black

    Ну і посилання для тих, хто хоче помацати лише саму темку (так прев’ю подивитися):

    Download0.2 versionUrban Black

    За мотивами How to: CSS Large Background