Категория «Дизайн»

Dribbble

Dribbble.com

Наконец-то получил свой инвайт на Dribbble. Если кто не знает, это такой «Твиттер для картинок», созданный дизайнерами для дизайнеров. В Твиттере можно использовать 140 символов, в Дрибббблере же вам доступно 120 000 пикселей. :) Все клёвые западные, и многие наши дизайнеры уже там и не переставая постят разные картинки. К слову, свой инвайт я ждал около месяца, хотя и висел почти всё время в топе «перспективных» (prospects — список мечтающих получить инвайт).

Дизайнеры выкладывают то, над чем работают в данный момент: иллюстрации, интерфейсы, иконки, логотипы, шрифты. В общем, всё что может быть интересно любому дизайнеру. Естественно, картинки можно отмечать, нажимая «Like». Можно грабить корованы оставлять комментарии. Картинки с наибольшем количеством «лайков» появляются в топе. Тут ничего необычного:

Dribbble.com

Зачем это всё нужно? Да этот сайт — просто нескончаемый источник вдохновения. И своим вдохновением тоже можно и нужно делиться. И удовлетворять своё тщеславие, куда же без этого. :3

Дебютировал я на «Дрибббле» со своей задротской иконкой-переростком Canon 5D Mark II, набрал за сутки более ста «лайков» и полдня провисел на главной. :3 Что, в общем-то, предсказуемо, там такое любят. Правда, больше мне пока выкладывать нечего, всё новое очень сильно не дотягивает до «Марка», боюсь разочаровать фолловеров. :)

Я уже отметил «лайками» более 800 картинок. В основном это интерфейсы и иконки. Периодически пересматриваю и всячески вдохновляюсь, так сказать.

Из подобных сервисов ещё есть forrst, но он не настолько популярен, видимо из-за большей закрытости. Но там помимо картинок можно постить ссылки, текст, куски кода и просто текста. Так что сервисы немного разные. Причём, инвайт туда мне выдали уже через несколько минут после того как я его запросил. :)

И ещё есть ember, но там открытая регистрация. Никакой «элитарности» — кому он такой нужен? :D

Фирменный стиль HTML5

Покажите мне хоть одного веб-дева который не отписался сегодня в своём уютном о новом логотипе HTML5:

Логотип HTML5
Мощь! Внушает. Но… зачем? :)

Очевидно же — хотят заработать на футболках и стикерах. ;)

Также были нарисованы иконки для семейства HTML5-технологий:

Логотип HTML5
А вот эти уже и правда могут пригодиться…

Например, для членомерной кнопочки, которую можно сгенерить на этом же сайте:

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage
Хм, действительно, выглядит довольно фаллично :D

Я не буду ставить этот шильдик у себя в блоге, хотя некоторые его части уже используют новые теги и CSS3. Потому что это мне чем-то это напоминает время когда все ставили картинки «Valid XHTML», «Valid CSS» (некоторые и до сих пор ставят), а ещё в более давнее время «Best viewed in Internet Explorer 6». Who cares?

P.S. Эх, немного саркастичный пост получился, на самом деле круто это всё. И сайт приятный и типографика. И вообще — нраица.

Canon 5D Mark II в векторе

Рисовал тут на днях в фотошопе маленькие иконки для одного сайта. Одной из них была иконка фотоаппарата:

Иконка фотоаппарата

И вспомнил я, что давно хотел научиться рисовать большие иконки. В векторе… И тут меня переклинило (да так, что остальные иконки для сайта так до сих пор и не сделал :D ) — я начал изучать инструмент Gradient Mesh в Adobe Illustrator. А так как переклинило меня на иконке фотоаппарата, то через три дня получилось вот это:

Canon 5D Mark II в векторе

Это не трейс. Всё ручками, ручками:

Canon 5D Mark II в векторе — сетка
Векторная сетка

В фотошопе дорисовал только «кожаное» покрытие ручки и чуть покрутил кривые.

Потраченного времени нисколько не жалко, так как теперь я могу очень быстро хреначить мэшами и кривыми в векторе. Кстати, без планшета я бы точно не стал за это браться, так как ушло бы гораааздо больше времени.

Сюжеты фильмов в диаграммах

Ох, круть какая — диаграммы отображают взаимодействие персонажей фильмов:

In the LotR map, up and down correspond LOOSELY to northwest and southeast respectively.
По клику — большая картинка

UPD. Большая картинка на русском.

Принципиально новая Miranda Me

С момента выпуска предыдущей версии сборки прошло более чем полгода… Запуск новой версии был запланирован на 1-е сентября. Но, не сложилось. Miranda Me 0.10.5 была выпущена 5-го сентября:

Miranda Me 0.10.5
Больше всего изменился интерфейс. А в остальном — это старая добрая Miranda Me.

Miranda Me базируется на лучшем ICQ-клиенте — Miranda IM, который поддерживает и множество других популярных IM-протоколов, таких как Jabber, Mail.Ru, MSN и благодаря поддержке плагинов обладает практически неограниченными возможностями расширения.

В связи с таким событием был полностью переделан сайт и запущен новый форум на современном и быстром «движке» Vanilla (phpbb тяжеловат). Также у проекта появился официальный твиттер. Надеюсь, что всё это поспособствует дальнейшему развитию проекта.

Советы, хитрости и приёмы вёрстки CSS и HTML

Иконка CSS Edit 2
Это иконка CSS Edit 2, хотя в статье не будет ни слова о CSS Edit 2 :)

В этой статье я собрал все приёмы и хитрости, которые я использую в процессе вёрстки (и о которых я бы очень хотел бы знать пару лет назад). :) А также ошибки, с которыми я часто встречался при просмотре чужого кода.

Оправдательный дисклеймер: статья написана на правах Капитана Очевидности — я не претендую на оригинальность, большую часть этих приёмов и советов можно встретить в различных статьях и книгах.

Для начала, пара провокационных советов:

1. Пришло время прекратить поддержку Internet Explorer 6

Возможно, меня закидают камнями, но, сколько можно? Этому браузеру 9… Да, девять лет! Сейчас им пользуется около пяти процентов пользователей рунета, Microsoft делает всё возможное для уменьшения этой цифры. К сожалению, предлагая скачать не намного более современную 8-ю версию своего браузера.
Нет, я не ратую за отказ в доступе к сайтам с устаревших браузеров. Лучшим решением представляется уведомление пользователя, например: «ваш браузер устарел и не поддерживается — функциональность данного сайта может быть ограничена» и ниже привести список рекомендуемых современных браузеров. Так уже сделали на YouTube, Google Docs (к концу 2010 года планируют прекратить поддержку в Google Mail и Calendar) и на многих других популярных сайтах и порталах. Я думаю, это очень хороший повод для того чтобы начать делать так же. А время, которое было бы потрачено на поддержку IE6, лучше потратить на разработку новой полезной функциональности.

2. CSS3

Большинство расценивает CSS3 только как возможность сделать закруглённые уголки и добавить тень. Но, на самом деле, возможностей гораздо больше: загружаемые шрифты, outline, транформации, flexible box layout, многоколоночная вёрстка, текстуры для контуров, медиа-апросы и многие-многие другие чрезвычайно полезные штуки.

Хотя CSS3 ещё в разработке, большинство современных браузеров уже поддерживают основные возможности, зачастую с префиксами (например: -moz-border-radius и -webkit-border-radius для Firefox и Safari/Chrome соотвественно).
Не стоит забывать, что по статистике большая часть пользователей до сих пор пользуется браузерами, не поддерживающими CSS3 (все версии Internet Explorer). Но начинать применять CSS3 стоит уже сейчас.

Ещё 39 приёмов и советов по CSS

Обзор Adobe Creative Suite 5 CS5

Не пропустите! В мае, на всех торрентах планеты!

CS5 boxes
Очень красивые коробки

Ну чтож, свершилось — сегодня Adobe официально представила пакет Creative Suite 5 (CS5). С предсказанием иконок я таки облажался, да. :D У меня, конечно, была мысль, что они могут использовать третье измерение, но… В итоге они сделали нечто параллелепипедо-папкообразное. Передняя плоскость один в один повторяет то, что было в CS3 и CS4, а шрифт теперь обрёл цвет. Мне, конечно, больше нравится мой вариант с белым фоном, но эти тоже вполне ничего:

CS5 icons
Не могу дождаться того момента, как они появятся в доке. :)

Шон Черис, главный дизайнер Adobe’s Desktop Brand, немного рассказал про то как создавался дизайн:

Когда мы начали думать о том, что бы мы хотели сделать для CS5, единственное, c чем мы все согласились, это было то, что мы хотели вернуть бренду чувство радости. Нашей целью было выйти за рамки монолитных образов в CS3 и CS4 и создать более динамичный образ. Мы хотели вернуть вдохновляющие и возвышенные качества системе идентификации, усиливая успешные модели, которые мы использовали в CS3 и CS4. Все скучали по причудливым образам, которые были большей частью наследия Adobe и хотели удивить и вдохновить наших пользователей и дать им что-то новое.

CS5 icons
История развития бренда
CS5 icon grid parts
Части грида, использованные в дизайне

Ладно, хватит уже о дизайне бренда, рассмотрим вкусности нового пакета. Начнём с самого интересного:

Photoshop CS5

iPad

iPad
iPad

Споры на тему нужности этого девайса продолжаются. После презентации iPad-а у меня случилось небольшое дежавю… Ах да, презентация iPhone. На этот раз ситуация почти повторяется — Apple опять представила шедевр: тонкий, красивый и стильный корпус, IPS-матрица, 10 часов работы от батарей и «всего» за $499. Не думал, что они модифицируют айфоновскую ось, ожидал увидеть десктопную с какой-либо оболочкой (тут почему-то вдруг вспомнился Стив Баллмер, пытающийся попасть пальцем в полосу прокрутки на планшете от HP). :D

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

Я пользуюсь айфоном уже более двух лет и заменю его разве что на новый айфон, и мой новый ноутбук/настольный компьютер точно будет от Apple. В первую очередь, дело в интерфейсе, удобстве и эстетической красоте — успех их продукции можно объясняется этим, маркетинг идёт потом. Я бы не стал покупать макбук, будь на нём Windows (за такие деньги, имеется ввиду :D ). Стыдно вспоминать, но изначально я хотел купить какой-нибудь Asus и поставить туда хакинтош.

Когда смотрел первый видеообзор iPad’а, уже спустя 30 секунд я начал испытывать непреодолимое желание пощупать эту штуковину, а когда досмотрел видео до конца, уже начал думать о внесении данного девайса в бюджет на 2010 год. Примерно тоже самое было когда смотрел первые обзоры айфона. :)

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

P.S. В итоге iPad в моём бюджете так и не оказался. А вот в подарок с удовольствием бы принял, день рождения уже не за горами. ;)

В принципе, когда появился айфон, я даже не задумывался о его покупке. Но вот у меня сломался мой «Сони Эрикксон», и через пару недель айфон был уже в моих лапах. Хотя сейчас, вроде, и ломаться нечему, но я всё равно не удивлюсь, если айпад вдруг внезапно окажется у меня в руках. :)

P.P.S. Ну вот, iPad вышел. Спорам конец? Я уверен в одном, что за эту неделю айпад успеет всех зае всем надоесть.

P.P.P.S. Ну вот, и подтверждение последней фразы не заставило себя долго ждать — Обзор сами-знаете-чего от Engadget на Хабре стал постом зла. Я тоже попал под раздачу. :)

Афиша «Metal Warriors II»

Год назад я делал афишу для первого «Metal Warriors». В этом году сделал плакат для второго:

Афиша «Metal Warriors II»
Афиша «Metal Warriors II»

Не стал придумывать что-то новое, повторил стиль первой афиши. Но на этот раз гораздо больше времени уделил типографике и сетке — применил, так сказать, новые познания. :D Кстати, тень на фоне я сделал из фотографии с концерта Nightwish.

Ну и, по модным ныне тенденциям, сделал ещё мини-афишку для богомерзкого вконтакта:

Афиша «Metal Warriors II»
При наведении на эту картинку, можно увидеть версию, пожатую вконтактом. Красные цвета поплыли. Отвратительно. :(

P.S. Который раз убеждаюсь в том, что есть истина в словах: «чем меньше и дешевле заказ, тем чаще придётся что-либо переделывать». :!:

Ambilight для тега видео

Новая фишка в бложике — посты-ссылки. Это когда мне лень что-то писать, но хоть что-то написать надо. :) И первая пост-ссылка ведёт на реализацию известной фишки в телевизорах Philips от известного технолога Сергея Чикуёнка. Очень впечатляет! Как это было сделано. Работает в Firefox 3.5, Opera 10.5, Safari 4 и Google Chrome 4.