Креативный дизайн за 15 минут // Design
Поскольку время 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 и необходимыми материалами:
Ну и ссылка для тех, кто хочет пощупать лишь саму темку (да привью посмотреть):
Download0.2 versionBlack Urban
По мотивам How to: CSS Large Background