Небольшой сет иконок для web интерфейсов, да и пример в довесок.

Основная идея – создать иконки, цвет которых зависит от подложки. На эту идею меня подтолкнули иконки из jQuery UI — они там просто генерируют их различного цвета О_о. Результат можно посмотреть на страничке с примерами.

Данный набор иконок планирую расширить в дальнейшем, если конечно они понравятся кому-нибудь :)

Download 256×256 Free Icons in PSD

P.S. Я знаю, что подобных иконок вагон и маленькая тележка, но чем больше выбор, тем лучше.

Другие посты на эту тему

• Бесплатные иконки для web-приложений

Для всех желающих – раздаю иконки собственного производства…

Я конечно не супер дизайнер, но иногда могу и порисовать, благо и девайсик прикупил, и вроде как вдохновение появилось, но от слов к делу, точнее к иконкам:

В качестве основного инструмента использовал Harmony, красил в ArtRage Studio, резал в Photoshop, паковал WinRar’ом:

Download 256×256 Free Scretch Icons

Другие посты на эту тему

• Немного бесплатных иконок

Но Дед Мороз нынче меркантильным стал – €17.75 за подарок, да еще €3.27 за износ саней…

Внутри обнаруживается книга формата А5 в мягком переплете, что с учетом цены слегка огорчает – более пары прочтений эта книга не выдержит…

Полиграфия конечно на уровне, иллюстрации очень яркие – приятно смотреть и читать:

Но от картинок к контенту:

• Дизайн пользовательских интерфейсов в современных web-приложениях — страницы с 10 по 27
• Искусство и наука в CSS-шаблонах — 30-61
• Типография: правила, руководства и частые ошибки — 64-119
• Принципы юзабилити современных сайтов — 122-153
• Руководство по использованию цветов — 156-181
• Оптимизация сайтов — 184-208
• Дизайн – как способ повышения продаж — 212-233
• Как превратить сайт в узнаваемый бренд — 236-251
• Слово экспертам – мнения бывалых — 254-286
• За кулисами: история The Smashing Magazine — 290-309

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

Мне сложно сказать – стоит ли эта книга своих денег. Конечно, меня очень огорчил мягкий переплет, чуть меньше меня огорчают опечатки в тексте, зато очень порадовали иллюстрации – очень наглядны и информативны – и я думаю, многим дизайнерам и web-разработчикам она окажется полезной. И всё же – держать эту книгу в руках приятно, и было бы вдвойне приятно получить её в качестве бесплатного подарка.

P.S. Да уж – обзор получился более чем скромный, если же хотите заказать сию книженцию – прошу на Smashing Magazine.

Другие посты на эту тему

• No Related Post

Как понятно из анонса – сайт MyWordPress.RU проводит конкурс на самую лучшую русскую тему для WordPress, и я решил тоже поучаствовать – благо как раз закончил работу над новой темой…

“Свежая” тема

“Свежая” темка для WordPress, в противостояние темного и светлого, ранее не опубликованая, свеже-созданная, только из под пера…

Что она из себя представляет можно просмотреть на следующих скринах (кликабельно):

Как видите существует две вариации темы – Orange и Lime, кроме этого можно настроить расположение и количество сайдбаров в админской части (кликабельно):

Данная тема идет с русской локализацией, хотелось бы так же создать и украинскую версию, но это уже в следующей версии…

Внимание!

Данная тема не доступна для скачивания, т.к. участвует в конкурсе, по этой причине скачивание будет доступно лишь по окончанию конкурса.

P.S. Для всех подписчиков на RSS ленту – в связи с изменениями чудо-сервиса FeedBurner используйте адрес http://anton.shevchuk.name/feed/ – по нему Вы всегда найдете мою ленту…

P.P.S. Я теперь и на twitter’e – follow me следите за обновлениями, в них всегда много вкусного…

Другие посты на эту тему

• No Related Post

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

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

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

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

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

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

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

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

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

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

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

Другие посты на эту тему

• No Related Post

Перед Вами QR код (“Quick Response”) — сие есть новое поколение штрихкодов разработанное японской компанией Denso-Wave еще в 1994 году, дабы заменить стандартный barcode, который уже не мог удовлетворить все потребности. На данный момент, широко используется в Японии и других азиатских странах, и по чуть-чуть идет к нам – взгляните хотя-бы на процессор в вашем компьютере – он тоже, скорей всего, промаркирован 2D кодом.

Перед обычным баркодом, у QR есть пара весомых преимуществ:

• Объём хранимой информации (до 4 296 символов, иль до 7 089 цифр)
• Поддержка коррекции ошибок (от 7% до 30% информации) – используется код Рида-Соломона

У QR кода есть версии, различаются они по количеству хранимой информации и конечно же размерами:

• Версия 1 содержит: 21 строку и колонку, максимум 25 символов
• Версия 2 содержит: 25 строк и колонок, максимум 47 символов
• …
• Версия 40 содержит: 177 строк и колонок, максимум 4,296 символов

Более детальную информацию Вы найдете на страницах Wikipedia (англ), иль даже Хабра

Сгененировать картинку с QR кодом Вы можете использую следующие сервисы:

• http://qrcode.kaywa.com/
• http://code.google.com/apis/chart/

Еще одно из преимуществ данного кода – его можно легко распознать при помощи Вашего мобильного телефона – достаточно установить соответствующий софт:

• http://reader.kaywa.com/
• http://i-nigma.com/personal/ или мобильная версия http://www.i-nigma.mobi/
• http://www.imatrix.lt/ – для iPhone
• http://www.quickmark.com.tw/En/basic/download.asp

Примечание: При генерации кода не используйте версию выше четвертой, т.к. есть большая доля вероятности – что сие не будет распознано мобильными телефонами.

Для разработчиков “ридеров” – вот ссылка на ZXing библиотеку для Java.

Еще советую заглянуть на сайт http://www.semapedia.org/ – они нынче активно занимаются популяризацией QR кода…

Далее информация для блоггеров – если Вы хотите разнообразить свой блог – то можете добавить к каждому посту QR код используя один из следующих способов:

QR Code плагин для WordPress

Скачать: QR Code (версия 0.1)

Плагин использует для генерации картинки Open Source библиотеку QR-code (картинки складываются в директории плагина).

Для установки Вам понадобится:

1. Распаковать архив с плагином в директорию /wp-content/plugins/
2. Выставить права на запись для директории /wp-content/plugins/a-qr-code/cache/
3. Активизировать плагин в админке

И немного отредактировать тему, добавив следующий код в файлы page.php, single.php, archive.php, index.php (по Вашему выбору – во все – не обязательно):

<?php while (have_posts()) : the_post(); ?>
...
<?php if (function_exists('aQRCode')) { echo '<img src="'.aQRCode(get_permalink()).'" alt="QR Code for '.the_title('','',false).'"/> '; }?>
...
<?php endwhile;?>

Сие добавит QR код к посту (или странице) в котором будет зашифрован URL страницы.

Функция aQRCode может принимать следующие параметры:

1. Данные для кодирования (string) – в примере использовалась строка возвращаемая функцией get_permalink()
2. Объём данных для коррекции (string) – L (7%), M (15%), Q (25%) или H (30%)
3. Формат (string) – J – для jpeg и other – для PNG
4. Размер (integer) – до 1480
5. Версия (integer) – от 1 до 40

QR Code плагин для WordPress (Google Charts API версия)

Скачать: QR Code (GCAPI) (версия 0.1)

Данный способ базируется на Google Charts API, и очень прост в установке:

1. Распаковать архив с плагином в директорию /wp-content/plugins/
2. Активизировать плагин в админке

Добавить в шаблон темы следующий код:

<?php while (have_posts()) : the_post(); ?>
...
<?php if (function_exists('aQRCodeG')) { echo '<img src="'.aQRCodeG(get_permalink()).'" alt="QR Code for '.the_title('','',false).'"/> '; }?>
...
<?php endwhile;?>

Функция aQRCodeG может принимать следующие параметры:

1. Данные для кодирования (string) – в примере использовалась строка возвращаемая функцией get_permalink()
2. Размер (integer) – до 546 пикселей
3. Кодировка (string) – Shift_JIS, UTF-8 или ISO-8859-1
4. Объём данных для коррекции (string) – L (7%), M (15%), Q (25%) или H (30%)
5. Отступ (integer) – по умолчанию 4 колонки/строки

QR Code для Blogspot

При помощи данного способа, Вы сможете с легкостью интегрировать QR код в Ваш блог на blogspot.com иль на любой иной хостинг, где у Вас есть возможность вставить следующий JavaScript код в страничку (данный способ так же базируется на Google Charts API):

<script type="text/javascript">
        // use current location as data
        var chl = new String(document.location);
        pos = chl.indexOf('#',0);
        if (pos >= 0) {
            chl = chl.substr(0,pos);
        }
             chl  = escape(chl); // escaped data
        var chs  = '150x150'; // Size: The largest possible area for all charts except maps is 300,000 pixels. As the maximum height or width is 1000 pixels, examples of maximum sizes are 1000x300, 300x1000, 600x500, 500x600, 800x375, and 375x800.
        var choe = 'UTF-8'; // Charset: Shift_JIS, UTF-8, or ISO-8859-1
        var chld = 'L'; // L allows 7% of a QR code to be restored, M allows 15%, Q allows 25%, H allows 30%
        var margin = 4; // margin in rows/columns

        document.write(unescape('%3Cimg src="http://chart.apis.google.com/chart?chs='+chs+'&cht=qr&chl='+chl+'&choe='+choe+'&chld='+chld+'|'+margin+'" alt="QR Code" /%3E'));
</script>

Для blogspot.com Вам необходимо добавить gadget именующийся как HTML/JavaScript, как это выглядит можете посмотреть на блоге php-team.blogspot.com

Другие посты на эту тему

• No Related Post

Вот такую аппетитную RSS иконку нарисовал Misha Kvakin для моего блога. На такую лучше не смотреть до обеда :)

Данная иконка была получена в рамках акции “Rss иконки на заказ“, так что этот пост – плата за бесплатную иконку. К сожалению, не уверен хватит ли у меня времени на интеграцию сего произведения в текущий дизайн, т.к. всё свободное время забирает проект Analyser, о котором я совсем недавно упоминал на своём блоге, но в любом случае – спасибо Мише за проделанную работу…

Другие посты на эту тему

• Порадуй своих читателей
• Отдам тему для Wordpress в хорошие руки
• Плагиат добрался до дизайна
• 12 сайтов, которые хотят увидеть ваш дизайн
• Свершилось…