Антон Шевчук // Web-разработчик

Креативный дизайн за 15 минут // Design

Дизайн за 15 минут

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

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

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

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

Дабы особо не томить – мой выбор пал на следующие составляющие:

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

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

Кисточки урбан-стайл:
Urban Style Brushes

Теперь перейдем к рисованию (лучше совмещать чтение с просмотров слайдов):

  1. Открываем Photoshop и создаем новый файл размера 1280х1024
  2. Перетаскиваем картинки в наш файл
  3. Далее попер креатив – выбираем вначале слой содержащий текстуру для шапки сайта – заливаем его полупрозрачным градиентом – дабы скрыть границы (см. слой Body -> Gradient)
  4. Затем выделяем место под наш заголовок, и опять заливаем черным
  5. Таким же образом подготовим место под наш контент
  6. Создаем надпись нашим модным шрифтом Graffiti
  7. Теперь нарисуем кнопки под нашей шапкой, для этой цели нам понадобиться выделить кружок, залить его черным, нарисовать на нем иконку кисточкой из набора Urban Scrawl
  8. Добавлю так же несколько графических элементов из того же набора кисточек – это стрелочки для постраничной анимации, облачко для подсказок, и пару совсем декоративных элементов
  9. Используя инструмент Slice Tool разрежу такую заготовку на составные части – обратите внимание как много в себя включает верхня чать (header)



Текстура с градиентом
Выделены две области
Заголовок
Кнопки
Декоративные элементы
Порезанный дизайн

На данный креатив я потратил чуть меньше 10 минут, теперь осталось все это срастить с WordPress’ом.

Начнем с HTML структуры:

<div id="body">
   <div id="header">
        <a id="logo" href="/" title="Wordpress">Wordpress</a>
        <a id="home" href="/" title="Home">Home</a>
        <a id="online" href="/online" title="Online">Online</a>
        <a id="archive" href="/archive" title="Archive">Archive</a>
        <a id="rss" href="/feed"  title="RSS Feed">RSS Feed</a>
   </div>
   <div id="wrapper">
   <div id="container">
            <div id="posts">
                   <div class="post">...</div>
            </div>
        </div>	
    </div>
    <div id="sidebar">
         <ul>
             <li>...</li>
         </ul>
    </div>
    <div id="footer">
         <p class="clear copy">&copy; 2009 WordPress</p>
    </div>
</div>

Основные махинации у нас происходят с тегом 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 MbBlack Urban

Ну и ссылка для тех, кто хочет пощупать лишь саму темку (да привью посмотреть):

Download0.2 versionBlack Urban

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

© Антон Шевчук 2007-2014