Поскольку время 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 структуры:
<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">© 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 и необходимыми материалами.
Ну и ссылка для тех, кто хочет пощупать лишь саму темку (да привью посмотреть).
По мотивам How to: CSS Large Background