Тег: дизайн

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

9 лет назадCanon 5D Mark II вектор дизайн задротство11

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

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

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

Векторная сетка

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

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

UPD. А вот это уже следующий уровень задроства.

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

9 лет назадxkcd дизайн инфографика

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

In the LotR map, up and down correspond LOOSELY to northwest and southeast respectively.

По клику — большая картинка

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

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

9 лет назадMiranda Miranda Me веб дизайн интерфейс сайт20

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

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

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

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

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

9 лет назадCSS HTML веб вёрстка дизайн14

Это иконка 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

9 лет назадCS5 Photoshop дизайн обзор фото1

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

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

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

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

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

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

История развития бренда

Части грида, использованные в дизайне

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

iPad

9 лет назадApple ipad дизайн интерфейс

iPad

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

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

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

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

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

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

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

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

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

Афиша «Metal Warriors II»

9 лет назадафиша веб дизайн5

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

Афиша «Metal Warriors II»

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

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

При наведении на эту картинку, можно увидеть версию, пожатую вконтактом. Красные цвета поплыли. Отвратительно.

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

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

chikuyonok.ru/2010/03/ambilight-video/

9 лет назадвеб дизайн6

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

Иконки в Adobe CS5

9 лет назадCS5 дизайн иконки интерфейс2

По последним пророчествам инсайдерских сайтов, новую версию пакета (CS5) должны представить 21-22 марта. В версии под Mac обещают полностью переписанный на Cocoa интерфейс, поддержку 64 бит и прирост скорости до 15%.

Интерфейс версии CS4, судя по всему, делался под Mac, а потом портировался под винду, ибо смотрится там как нечто инородное. Я долго удивлялся тому, как они умудрились сделать кнопку закрытия вкладки справа. Постоянно мышкой тянусь к левой части. Судя по первым видеороликам Photoshop CS5, кнопку таки перенесли влево!

Больше особо ничего от CS5 и не жду. Хотя… Да! Жду новые иконки приложений!

Немного истории

Перья и бабочки на иконках в версиях CS1 и CS2 были, конечно, красивые и прикольные..:

Иконки основных приложений в пакетах Adobe CS и CS2

Но потом было слияние Adobe и Macromedia. У Adobe стало гораздо больше приложений, причём у многих функциональность пересекалась, хорошо идентифицируемые иконки стало сделать труднее. Для пакета CS3 сделали нечто радикально отличающееся от того что было раньше. Иконки программ были сопряжены с определёнными цветами, и, как правило, основаны на исторической ассоциации с цветом (например, Flash был красный, Dreamweaver — зелёный). Для каждого размера иконки отрисовывались заново, чтобы максимально улучшить читаемость. В принципе, по отдельности они не представляют из себя ничего особенного — просто разноцветный квадрат с двумя буквами. Всю их крутость понимаешь, когда видишь это:

Иконки основных приложений в пакете Adobe CS3

В новой, CS4-й версии пакета, цвет букв на иконках инвертировали — стало слегка мрачнее:

Иконки основных приложений в пакете Adobe CS4

Мой вариант иконок для пакета Adobe CS5

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

Предполагаемые иконки основных приложений в пакете Adobe CS5

Возможно, края будут закруглённые.

Немного смущает вышедшая в декабре 2009 года Lightroom Beta 3 (релиз которой, по всей видимости, будет совместно с пакетом CS5), так как иконка в ней такая:

Иконка Adobe Lightroom 3 Beta

Посему, можно предположить ещё один вариант (а может быть он будет в CS6):

Предполагаемые иконки основных приложений в пакете Adobe CS5

Собственно, больше вариантов вроде как не осталось. Чтож, подождём пресс-релиза.

Кнопка закрытия в Aperture

10 лет назадAperture дизайн интерфейсы странности

Продукты компании Apple славятся очень продуманными, удобными и красивыми интерфейсами. Но не всегда всё идеально и некоторые решения удивляют. Вот одно из них — в Aperture напрочь задисейблена кнопка закрытия окна:

Во второй Aperture напрочь задисейблена кнопка закрытия окна

Естественно, что мне стало любопытно, почему. Залез в Apple Human Interface Guidelines, нашёл там следующую картинку:

Так — можно, а вот так — низя

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

Ну и, конечно же, из приложения невозбранно можно выйти стандартным шорткатом Command+Q.

UPD. Удивлялся и писал заметку я ещё до выхода третьей Aperture. Кнопка закрытия теперь активна:

В Aperture 3 кнопка закрыть напрочь раздисейблена

Теперь ещё более непонятно, зачем она была задисейблена в старых версиях.

Но! В новой версии заметил другую странность — фон неактивного окна светлее, чем у активного:

Неактивное окно

Во всех приложениях и гайдлайнах наоборот… Сбивает с толку. И зачем отделять заголовок от тулбара? Смотрится так, как будто забыли убрать.