Логотип SVGO

Дело было в ноябре. Мне написал Кир (deepsweet), попросил нарисовать логотип для его утилиты SVGO (SVG Optimizer), из названия которой совершенно очевидно для чего она предназначена. Я не долго думая согласился помочь другу, но на тему логотипов я совершенно неопытен, не умею придумывать оригинальные идеи, сколько не тренировался, все попытки заканчивались разочарованием в собственных творческих способностях. Но задача была не сложная, да и было время, чтобы с интересом окунуться в возню в графическом редакторе.
Кир показал на примерах и объяснил своё видение, я поделился своими мыслями, накидал на бумаге эскиз и завис в фотошопе. Через несколько часов я представил результат.


2D-версия понравилась заказчику, но не так чтобы очень, поэтому мы приняли решение сделать 3D-версию.
Этот вариант не устроил из-за отсутствия перспективы на объекте, а так как объект не был смоделирован, а все поверхности отрисованы векторами, то решили не переделывать, а остановиться на первой версии.
На следующий день Кир добавил логотип на гитхаб и показал своим фоловерам в твитере, один из которых совершенно справедливо заметил, что логотип в растре. Да я и сам размышлял, что как-то глупо получается — тулза для оптимизации SVG, а логотип в PNG, продолжая цепочку размышлений пришёл к тому, что нужен пример для оптимизации и было бы идеалным перерисовать лого в вектора.
Расчехлив «люстру», которую использую только для элементарных функций, я наткнулся на давно забытый подводный камень. Особенно сложным для меня оказалось то, что я не мог рисовать всевозможные градиенты, как в растре, кроме как линейный и радиальный, поэтому мы сначала решили попробовали нарисовать в плоском векторе


а потом я смекнул о том, что можно накладывать линейные и радиальные вектора друг на друга, получая разнообразные сочетания и формы, что я и сделал.


Это конечный вариант, полностью нарисованный в SVG, который можно скалировать без потери качества, оптимизировать с помощью SVGO и читать исходники.

Chrome Tab

Если вы пользователь браузера от Google, то скорее всего знакомы с изображением «замёрзшей» или «мёртвой» вкладки. Выполнены они в монохроме «увеличенными» пикселями. Использование такого стиля легко объяснить — эти картинки должны быть чрезвычайно просты, контрастны и эмоционально понятны.
Но, как говорится “Jast for fun”. Картинки под катом.

Браузер — это телевизор

Год назад с Киром задумали сделать свой вклад в борьбу с «неправильными» браузерами. Война со стариком IE6 продолжается и по сей день разными методами, но тогда был пик популярности оружия воздействующего на сознание пользователей, нерадивых сисадминов и веб-разработчиков. Создавалось оружие в виде различных пародийных картинок, комиксов и страниц-заглушек с предложением воспользоваться другим браузером. Мы более-менее определили задачу — рассказать пользователям о различиях в браузерах и почему надо избавляться от старого IE6, а потом и образ, через который будет происходить воздействие — «Браузер — это телевизор».

Таксофон АМТ-69

Вспомнил я на днях чудесный таксофонный аппарат АМТ-69…
С чего бы я вдруг о таксофонах начал вспоминать? Дело в том, что в помещении вокзала посёлка, в котором я жил, висел один из них. Примечателен он тем, что звонить с него можно было бесплатно на все номера районной АТС. Через его нутро прошли миллионы голосов — назначались встречи, кому-то нужна была помощь, нередко звонили для того, чтобы просто поговорить ни о чём, набрав номер наугад или преднамеренно похулиганить. Ремонтировался он редко (может и не ремонтировался вовсе, теперь я не помню) и соответственно был всячески изуродован — номеронабиратель оплавлен зажигалкой, на корпусе нацарапаны мантры подростков или опубликован номер местной «давалки» и т.д.

Модульные сетки в Photoshop

Modular Grid PatternНедавно познакомился с понятием «Модульные сетки» и знакомство это произошло благодаря циклу статей Алексея Черенкевича. Если вы ещё не в теме, то рекомендую почитать.
В четвёртой статье затрагивается тема построения модульных сеток в Photoshop, но из всего предложенного ни один из способов меня не устроил, после чего я решил эту задачу по своему. Встречайте — Modular Grid Pattern.
Несколько слов об использовании. После того, как определились с параметрами сетки сохраняйте .pat файл или копируете прямую ссылку на него. Следующий шаг — загрузка паттерна в Photoshop: Edit > Preset Manager… > Patterns > Load… Выбираете сохранённый файл или вставляете прямую ссылку в поле «Имя файла» и загружаете.
Использование: Layer > New Fill Layer > Pattern… Или в окне «Layers» делаете клик на нижнюю кнопку со значком контрастности > Pattern…
После этого сетку можно двигать, она сама заполнит всё пространство на холсте при изменении его размеров и никогда на закончится.
Работает в последних версиях правильных (не ie) браузеров.

UPD 11.04
Добавлено:
  • Сохранение паттерна в PNG для использования в GIMP.
  • Сохранение параметров с автоматическим восстановлением при последующих запусках.

Генератор комплекта шрифтов для @font-face

Порой наскучивает однообразие шрифтовых гарнитур из «Core fonts for the Web» и тогда на помощь приходит замечательное CSS правило @font-face, позволяющее подключать свои шрифты к веб-страницам. Техника загрузки удалённых шрифтов впервые была представлена в спецификации CSS2 и на данный момент поддерживается всеми современными браузерами, но в некоторых посредством своего формата.
В этом посте я сделаю обзор инструмента, который поможет вам быстро подготовить комплект шрифтов (TTF, OTF, EOF, WOFF, SVG), и более того сделает за вас CSS файл, который останется только включить в основной документ.

Иконки «Приём платежей»

После выхода очередного сборника иконок на Временно.нет, я понял, что иконок методов оплаты через российские платёжные системы не много, поэтому решил сделать собственный сет. Сразу отмечу, что распространяются иконки под CC BY, можете использовать их как вам угодно даже в коммерческих целях. Подробности смотрите под катом или можете сразу загрузить (zip, 122 kB).

UPD 4.05
Добавлено:
Платёжные системы:
  • Google checkout
  • В Контакте Merchant
  • Деньги@mail.ru

Банки:
  • Петрокоммерц
  • ПриватБанк
  • Райффайзен

Другое:
  • Наличные Американский доллар (USD)
  • Наличные Евро (EUR)
  • Наличные Гривна (UAH)
  • Наличные Белорусский рубль (BYR)
  • Наличные Казахстанский тенге (KZT)

Изменено:
  • Flattr

Иконки платёжных систем

Не храните пароли в матрасе

Выделю в этом уютном бложике место для поста про безопасность.
Неотъемлемой частью активной жизнь в Сети являются кучи аккаунтов, зарегистрированных на разных сайтах, и регистрировать их используя один и тот же пароль не безопасно. Но все пароли не запомнишь, а хранить на бумаге, флэшке или на диске не надёжно. Так вот, бальзам для моего параноидального воспаления состоит из двух частей: менеджер паролей KeePass и файловое хранилище DropBox.

Коробка — Вид сверху.

Нашёл иконки, которые предназначались для небольшого проекта, но так и остались невостребованные. Выкладываю, авось кому пригодятся.


Загрузить/Download (zip, 30.3 kB)

Creative Commons Attribution 3.0

Buska 1.20

Новая тема для Guifications (Нотификатор для Pidgin) под названием «Buska» числится под версией 1.20. Имеются 2 языковые версии: русская и английская.