Блог Константина Кичинского

Меня периодически спрашивают, как же в Expression Design сделать вдавленную надпись: ведь тут нет Inner Glow, Inner Shadow, да и Bevel, вроде как не позволяет вдавить :)

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

Прежде всего, делаем общий фон (заливку соответствующим паттерном) и пишем поверх необходимую надпись. При необходимости с помощью эффекта “Hue, Saturation and Lightness” можно подправить оттенок:

Следующий шаг: выбираем текст и превращаем его в Path (Object → Convert Object to Path, или ctrl+shift+O):

Делаем копию фона! и помещаем на задний слой с небольшим сдвигом вниз, вправо.

Выбираем фон и текст, превращенный в Path. Выбираем Path → Back Minus Front. Убираем у картинки обводку.

Выбираем фон, в эффекте “Hue, Saturation and Lightness” уменьшаем Lightness (у меня –25):

Выбираем вернее изображение с дырками, добавляем эффект “Drop Shadow” (Softness и Offset выставляем в 2):

Добавляем эффект “Outer Glow” (Size 1, Opacity 0.4, Glow Color – темный оттенок, близкий к цвету дерева):

Добавляем еще один эффект “Drop Shadow” с аналогичными параметрами, но с измененным Light Angle — ставим 135.

Наконец, добавляем эффект “Bevel” (Width 0.2, Contrast 0.1, Softness 0.4, Profile — Curve Out):

Надпись готова:

Исходники к обоим надписям можно найти в приложении.

Напоминаю, что Expression Design студентам, школьникам и аспирантам доступен бесплатно по программе DreamSpark.

Другие “рисовальные” посты

• Как нарисовать слона в Expression Design
• Как нарисовать шарик в Expression Design
• Как нарисовать иконку RSS в Expression Design
• Как нарисовать иконку для twitter`а в Expression Design
• Как нарисовать летающую тарелку в Expression Design

Да-да! Сегодня мы рисуем слона, стилизованного под аппликацию :)

Начнем с простых форм:

Далее с помощью Direct Selection (A) начинаем править направляющие:

Пожалуй, слона можно немного растянуть вниз, после этого выделяем все и нажимаем Path → Unite

Теперь делаем текстуру для закраски  (где-нибудь в стороне). Для этого рисуем квадратик, поверх прямоугольник с более темной закраской, поверх еще один полупрозрачный:

Выделяем все, из контекстного меню нажимаем Export (или ctrl+e), сохраняем картинку.

Выделяем слона, идеи в цвет закраски, выбираем текстуру, далее импорт и выбираем нашу картинку:

В свойствах выбираем подходящий масштаб заливки. Заодно делаем цвет обводки более подходящим:

Следующий шаг: добавляем детали. Начнем с глаза: рисуем два круга — у внещнего выставляем обводку и заливку, у внутреннего только заливку (рисовать удобнее по сетке, далее просто маштабируем).

Далее бивни: рисуем эллипс и растягиваем в нужном направлении. Размещаем бивни на слоне, один отправляем в нижний слой.

Коготки :) Знаю, у слонов из нет, но так забавнее ;)

Теперь интересный маневр: пунктирная прошивка. Делаем копию слона, убираем заливку. С помощью Direct Selection начинаем сдвигать точки во внутрь, делая примерно одинаковый отступ от границы (хобот придется укоротить ;):

Внутреннюю обводку опускаем под верхний бивень, делаем границу темнее и выставляем пунктир (dash в свойствах):

Наконец, добавляем детали вокруг: облачка…

И фон:

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

Итого:

Оба слоника в приложении с исходниками.

Как всегда, напоминаю, что Expression Design студентам, школьникам и аспирантам доступен бесплатно по программе DreamSpark.

p.s. Спасибо за вдохновение и подход Chris Spooner. У него можно подсмотреть, как рисовать машинки и самолетики ;)

Другие “рисовальные” посты

• Как нарисовать шарик в Expression Design
• Как нарисовать иконку RSS в Expression Design
• Как нарисовать иконку для twitter`а в Expression Design
• Как нарисовать летающую тарелку в Expression Design

На днях произошло обновление Photosynth — специального сервиса по созданию 3D сцен из обычных фотографий.

Обновление двойное: во-первых, обновился UI, а во-вторых, этот UI доступен прямо в Bing Maps.

Новый UI

Прежде всего, нужно сразу отметить, что обновление UI сопровождается подсказками “Photosynth Tips”, помогающими быстро разобраться, что к чему.

Основные изменения пришлись непосредственно на панель управления открытым фотосинтом:

Слева-напрово:

1. Переход к предыдущему изображению (z)

2. Запуск/пауза слайд шоу (1)

3. Переход к следующему кадру (пробел)

4. Переход к соседнему кадру: вперед, назад, справа, слева (стрелки)

5, 6. Уменьшение/увеличение (-/+)

7. Вывод подсказки

8. Выбор режима просмотра: синт, вид сверху (t), изображения (`), облако точек (p)

9. Развернуть на все окно (f)

Скорость

Еще одно заметное изменение в данном обновлении — это скорость подгрузки изображения во время приближения/уделания.

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

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

Bing Maps

Наконец, последнее и самое интересное: фотосинты полноценно прижились на обновленных картах Bing Maps (которые теперь полностью на Silverlight) – синты можно просматривать прямо с карты.

Как это работает можно посмотреть в видео ниже, но лучше, конечно, попробовать самостоятельно http://www.bing.com/maps/explore

Photosynth + Bing Maps from Microsoft Photosynth on Vimeo.

Кстати, в настоящий момент на карте доступно более 14000 фотосинтов, сделанных по всему миру и снабженных гео-тегами.

Продолжая славную традицию рисования в Expression Design (а раньше мы научились уже рисовать иконку rss, иконку twitter и летающую тарелку — у меня, правда, все никак руки не дойдут снять видео), сегодня я расскажу, как нарисовать реалистичный шарик (например, шарик планеты).

Итак, у меня стоит Expression Design 3 (напоминаю, что студенты, школьники и аспиранты могут бесплатно скачать всю Expression Studio по программе DreamSpark).

1. Создаем новый файл, например, 256x256 пикселей. Включаем сетку (Ctrl+’) и привязывание к сетке (Ctrl+Shift+’). В Edit→Options→Units and Grids можно выставить размер ячейки, у меня 16px.

2. Рисуем круг (Ellipse (L)), выставляем радиальную градиентную закраску нужных цветов:

3. Рисуем внутри сферу меньшего радиуса и с помощью Direct Selection (A) вдавливаем нижнюю часть вверх, выставляем нужный цвет (белый, opacity 25%), добавляем эффект Gaussian Blur

4. Аналогично добавляем еще две области, сделав их похожим образом из двух эллипсов и поменяв их направляющие в контрольных точках.

Для верхней большой области цвет выставляем также белым с Opacity 25%. Для нижней области вцет выставляем светлым оттенком бирюзового.

Для обоих элементов добавляем эффект Gaussian Blur.

5. Добавляем снизу тень. Рисуем сплющенный эллипс, делаем радиальную градиентную закраску от черного к полностью прозрачному белому. С помощью Fill Transform закраску сплющиваем.

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

6. Чего-то не хватает? :) Правильно, раз внизу есть тень, шарик необходимо затенить снизу. Рисуем еще один круг поверх, сплющиваем верхную часть и применяем линейную градиентную закраску (снизу можно сделать не совсем черным, а темным оттенком бирюзового).

7. Шарик готов! Цвета меняются очень быстро ;)

Как всегда, исходники, в приложении к посту.

Как многие из вас могут помнить, летом компания NSS Labs провела исследование по проверке встроенных в популярные браузеры механизмов защиты пользователей от зловредного ПО и фишинга.

Я видел много разных отзывов на это исследование, в том числе весьма скептических со стороны фанатов тех или иных браузеров, тем не менее практика показывает следующее…

1. С фишингом или результатами фишинга сталкивается очень много людей. Пожалуй, самый показательный пример — это спам в социальных сетях, например, ВКонтакте. Кто из вас ни разу не получал спам от друзей? Вот-вот!

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

Это скриншоты на день публикации поста для сайта www.vkontate1.ru [это фишинговая (поддельная) страница!!!] — проверьте сами, что показывает ваш любимый браузер и что показывает IE8.

Если вы обнаружили еще не блокируемый фишинговый сайт, сообщить о нем можно следующим образом (Safety ⇒ SmartScreen Filter ⇒ Report Unsafe Website, или аналогично в русскоязычной версии браузера):

Защитите себя и своих близких! Используйте IE8 :)

Мы тут с коллегами решили для одного хорошего мероприятия в Казани сделать фотосинт с местным колоритом :)

После небольшого совещания в качестве целевого объекта была выбрана мечеть Кул Шариф в Казанском Кремле.

Съемка заняла несколько дней. За фотографии большое спасибо Игорю Лупанову (http://dao-art.infoibs.com/) — была проделана огромная работа. На входе мы имели более 700 фотографий мечети и ее окрестностей!

Фотосинт над обработкой 739 фотографий работал около 4ч 30 мин. Результат (99% Synth) можно посмотреть ниже:

http://photosynth.net/view.aspx?cid=2c239aaf-a14d-4135-be6b-e8114231d3ee

Так же мы записали видео для демонстрации получившегося синта, его можно посмотреть тут:

The Kul Sharif Mosque Photosynth from Constantin Kichinsky on Vimeo.

Введение

Photosynth продолжает радовать новыми плюшками для любителей интерактивной фотографии :)

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

Как вы думаете, что будет, если посмотреть на это облако сверху? 

Да-да! Это очень-очень напоминает… карту местности, но об этом чуть позже :)

Новые плюшки

1. Overhead View. Возможность просмотра облака точек непосредственно сверху. Для перехода в этот режим в панели управления добавлена специальная кнопка (обведена красным):

Также можно воспользоваться клавишей “t”.

В режиме просмотра сверху можно переводить мышку по карте — вслед движениям мышки будук подсвечиваться фотографии в точке под мышкой и место, откуда эта фотография была снята!

На этой же карте отдельно показывается месторасположение специально выделенных фотографий (highlights).

В команде Photosynth на этот счет записали специальное видео:

Photosynth Overhead View from Microsoft Photosynth on Vimeo.

2. Упрощение географической привязки. Теперь интерфейс географической привязки интегрирован непосредственно в среду редактирования фотосинта:

Соответственно теперь достаточно просто перетащить кнопку на карту и сохранить. Обратите внимание на то, что карта сделана на Silverlight, как и весь интерфейс!

(Подробности про Silverlight Map Control можно посмотреть среди докладов MIX вот тут http://videos.visitmix.com/MIX09/T34F)

3. Наложение на карту! Это то, к чему все шло и к чему все идет. Это то, что мы уже видели, но теперь это видите и вы. Это то, к чему приводит смесь Bing Maps и Photosynth! Wooohoooooo!!! :)

В режими редктирования на вкладке Geotag есть также кнопка Start aligment. Жмакаем.

Ага! Чувствуете, что это? Это наложение вида сверху непостредственно на географическую карту. С помощью простых контролов настраиваем более-менее точное наложение (в помощь тут фотографии и место, откуда они были сняты):

Нажимаем Lock Aligment, сохраняем. Единственный нюанс: насколько я видел, пока нельзя показать результат пользователям, но зато в режиме редактирования есть потрясающая кнопочка Test Alignment. Потестируйте ;)

Брюки превра… брюки превращаются…

Да-да! Карта переходит в 3D-синт :)

По случаю выхода Windows 7 в команде Photosynth записали еще один ролик, демонстрирующий данную функциональность:

Windows 7 + HP Launch, Auckland, New Zealand from Nigel Parker on Vimeo.

О сервисе Photosynth я уже неоднократно писал в самых разных ракурсах, впрочем рассказывать и исследовать еще можно очень много, не говоря уже о перспективах и будущем развитии технологии :)

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

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

1. Демонстрация туристических мест

Представьте себе, что вы таки выбрались куда-нибудь на край земли, место с необычайной красотой природы, чудесным видами, горами, озерами, возможно, даже не (очень) тронутое человеком. Например, на Камчатку :)

Камчатка, г. Вачкажец

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

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

Геленжик, вид с моря

Кстати, найдете здесь рекламу Мегафона?

2. Демонстрация красот природы

Очень близкий сценарий, который замечательно подойдет для сайтов, посвященных именно природе, задачам сохранения окружающей среды.

Что если вам нужно привлечь внимание общественности к каким-то объектам природы, отдельным видам животных или растений, каким-то явлениям природы, влияющим на экологию конкретного региона или всей планеты?

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

Как показать сразу более 300000 пингвинов на островах South Georgia

Пингвины, острова Sourth Georgia

или тающие асберги у берегов Канады?

Тающие айсберги у берогов Канады

Правильно, фотосинт не только склеит фотографии в единую трехмерную картину, но и за счет опции highlight поможет выделить отдельные важные кадры, а за счет гео-привязки к карте поможет сориентироваться в пространстве.

3. Передача экстремальных впечатлений

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

Но даже если просто попытаться передать то, что видят глаза, обычная фотография не дает полностью трехмерного ощущения (а ведь мы с вами живем в трехмерном мире!).

Как передать ощущение полета?

Yosemite Valley, Калифорния

Или показать процесс восхождения в горы?

Правильно, фотосинт поможет совместить вместе фотографии красот природы, которые вы наблюдали в процессе и фотографии собственно разворачивающего экстремального действа.

4. Демонстрация достопримечательностей

Продолжаем туристическую тему. Здания, площади, церкви, соборы, мечети, памятники, дворцы, музеи, кремли, монастыри, набережные…

Как на счет Тадж Махала?

Тадж Махал, Индия

Или, скажем, Колизея?

Колизей, Рим

Прага? Старая площадь?

Staré Mesto, Прага

Уникальная особенность фотосинта в том, что он не просто умеет “склеивать” фотографии, но и может восстанавливать по ним трехмерную сцену, а в данном случае, благодаря это появляется возможность посмотреть на объект с самых разных сторон, почувствовать его архитектуру.

5. Демонстрация выставок и экспозиций

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

Я, например, никогда не видел панораму сталинградской битвы в Волгограде, а вот с помощью фотосинта теперь запросто погу просмотреть:

Панорама Сталинградской битвы, Волгоград

Равно как никогда не был в пещерах западного Техаса и не видел доисторической живописи в местных пещерах. А вот с фотосинтом — легко!

Meyers Spring Pictograph Site, Техас, США

Да и в Сиднейской Галерее искусств, кстати, тоже ;)

Art Gallery of New South Wales, Сидней, Австралия

Или вот еще: потрясающий кукольная экспозиция на тему… ужастиков:

Universal Palace Theater

Будучи построенным на базе технологии Seadragon, фотосинт также унаследовал возможность динамично подгружать фотографии самого разного разрешения, что потенциально дает отличную возможность показать экспонаты в мельчайших деталях.

6. Купля-продажа: предметы, машинки

Сделали что-то уникальное? Или досталось в наследство от бабушки? Решили с чем-то расстаться? А как показать потенциальному покупателю объект во всей красе? Как дать ему возможность осмотреть со всех сторон прямо их браузера?

Да проще простого! Быстренько сфотографировали со всех сторон, скормили фотосинту — да выставили в интернете. Как на счет антикварной вазы?

Или вот еще унылость — ехать осматривать своего будущего четырехколесного друга всего по паре фотографий в интернете. Как на счет осмотреть со всех сторон? ;)

Важно, что фотосинту, в принципе, все равно, о каком именно трехмерном объекте идет речь ;)

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

7. Купля-продажа: недвижимость

А теперь попробуйте поставить себя на место потенциального покупателя квартиры или домика загородом. Разве не хотелось бы вам попробовать выглянуть в окно, посмотреть во двор, оценить высоту, наличие рядом деревьев, дороги, зданий?

С другой стороны, чтобы все это показать надо лишь сделать несколько фотографий с нахлестом — остальное сделает фотосинт!

Вид из дома, Москва

Или, предположим, вы примериваетесь к новому домику загородом — разве не хотели бы заранее посмотреть на него со всех сторон?

А как на счет заглянуть внутрь? Ага:

Самое главное в фотосинте — это то, что работать с ним очень просто. Все что вам нужно — простенький фотоаппарат, компьютер и соединение с интернетом. Минут 10-15 работы и — вуаля — ваша комнатка, вид из окна, или внешний вид домика доступны на обозрение в интернете для потенциальных покупателей.

Трехмерные сцены — трехмерные покупатели — трехмерные деньги :)

Заканчиваем тему купли-продажи, впереди еще три интересных сценария…

8. Культовые сцены и объекты

Фанаты — они такие… им только дай поиграться :) А вообще, согласитесь, иногда бывает весьма и весьма заманчиво остановить фильм или сериал и… походить самому по этой сцене, рассмотреть отдельные детали с разных ракурсов…

Звездные врата? ;)

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

И не забывайте про highlight — выделите особенно интересные детали ;)

Угадаете, из какого это фильма?

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

Guild Wars - Elona Reach

The Spartan (Halo 3 / Cold Storage) Rename

Не забывайте про режим Points Cloud (переключается клавишей p).

9. Космические объекты

Да-да! Фотосинт умеет склеивать объекты в космосе :) Пока что при помощи фотографий Nasa, но это не меняет сути дела.

Есть множество объектов, демонстрация которых в виде трехмерной сцены может стать учень хорошим подспорьем в научно-популяризационных целях.

Хотите повращать MKS?

Международная космическая станция

А давно вы были последний раз внутри?

Международная космическая станция

Как на счет последить за ремонтом спутника Хаббл?

Ремонт Хаббла

На Земле, да и за ее пределами полно мест, где очень трудно или почти нереально побывать, а посмотреть-то очень хочется ;)

Что дальше? Фотосинт из танка? На подводной лодке? С воздушного шара? Внутри истребителя?

10. Люди

Это может показаться странным… Но фотосинт также умеет склеивать фотографии самых обычных… людей! :)

Иногда это выглядит весьма забавно, на забываете про облако точек (кнопка P):

Некто Greg

Или вот почему бы не сделать фотосинт красивой австралийской модели Liana Lee Werner-Gray? Бегом за фотоаппратом и делать фотосинт своей девушки!

Liana Lee Werner-Gray

Ну и наконец, ребята, которые сделали все это возможным:

Команда Photosynth

Думаете это все? У них еще кое-чего припасено в рукаве ;) Надеюсь, все планы воплотятся… А я обязательно об этом расскажу :)

Удачных фотосинтов!

#. Бонус

Да, фотосинт — это необычно, поэтому вы всегда можете устроить необычный конкурс фотосинтов. Например, конкурс фотосинтов лошадок:

Zermatt DeepZoom — проект Microsoft Switzerland, выполненный на Silverlight 3 с поддержкой Windows 7 Touch и хостящийся на Windows Azure.

Проект этот примечателен с двух точек зрения. Во-первых, это потрясающие панорамы швейцарских гор в районе Zermatt (посмотреть в Bing Maps), включая гору Matterhorn.

Во-вторых, это весьма и весьма интересное в технологическом плане приложение, особенно в части “как именно сделаны эти 8-гигапиксельные фоторгафии”.

Прежде, чем читать далее, советую посмотреть самостоятельно http://ronnies.blob.core.windows.net/zermatt/Default.htm ;)

Технические детали

Понятно, что среди “доступных” камер нет таких, которые смогли бы само по себе сделать 8-гигапиксельную фоторгафию. Максимум, что было доступно авторам — 21-25 мегапиксельная фотокамера, соответственно, чтобы получить столь большое изображение, нужно сделать большое количество “небольших” фотографий и как-то их склеить.

Самая большая фотография в данной коллекции (9.24 гигапикселя) склеена из 440 21-мегапиксельных фоторгафий.

Для съемки использовалась фотокамера Canon 400mm DO F4 IS c 1.4 телеконвертером, увеличивающим фокусное расстояние до 560mm (общий вес около 3кг).

Делать 440 фотографий вручную, правильно меняя направление съемки — весьма сложная задача, поэтому было решено воспользоваться автоматикой — AutoPano Robot 1.0 от Gadget Works (правда, даже с автоматикой весь процесс съемки занял 3 дня). Управляется эта штука с помощью приложения на .NET Compact Framework 3.5 и работает на любом устройстве с Windows Mobile и поддержкой Bluetooth.

Фоторгафии снимались с нахлестом около 50%.

После съемки наступает не менее забавный процесс — склейка фотографий. Полученные 440 фотографий общим весом в 3.4 Gb загружаются в Microsoft Research ICE 64 bit — это бесплатная программа для склейки панорам, причем примечательно, что она умеет экспортировать результат непосредственно в виде DeepZoom-коллекций для Silverlight.

Для склейки использовался ноутбук Lenovo W500 с 8Gb памяти и 64-битной версией Windows 7.

Правда, при склеивании неба возникли какие-то сложности, поэтому после ICE небо пришлось доводить вручную в Photoshop. Итоговый размер полученного Tiff-файла — 4.7Gb (ICE может экспортировать файлы до 2Gb, поэтому панораму разбили на три части и потом склеили в фотошопе для доводки неба).

Далее полученный tiff-файл нужно было превратить в deepzoom-коллекцию. Обычно это делается с помощью DeepZoom Composer, но там тоже есть ограничение на 2Gb. Проблема разрешилась весьма просто — с помощью плагина MSR Hdmake для Photoshop, в итоге получилась DeepZoom-изображение в 1.67 гигапикселей.

Склеивание всех 8 фотографий заняло 5 дней.

Следующий шаг — разработка интерфейса с помощью Expression Blend и Design и написание кода в Visual Studio 2008.

По-моему, в целом все это — это потрясающая интеграция самых разнообразных современных технологий: от фотокамер и автоматики для съемки панорам с соответствующей программной поддержкой до исследовательских разработок в области склеивания фотографий и профессиональных инструментов для разработки пользовательского интерфейса и написания логики приложения.

Всем смотреть галерею: http://ronnies.blob.core.windows.net/zermatt/Default.htm

По следам… хотя скорее вслед своему ролику на TechDays — обзор Deep Zoom Composer и того, что не вошло в ролик (minutes cut).

HardRock Memorabilia

Уверен, вы уже неоднократно видели и слышали про проект Memorabilia HardRock Cafe, выполненный усилиями компании Vertigo (⇒ История проекта).

Memorabilia — проект, конечно, уникальный — в особенности по части контента, но тем не менее proof of concept весьма хороший. Самая что ни на есть интерактивная online-галерея.

Насколько сложно сделать что-нибудь похожее? В смысле из своих собственных фотографий…

Или вот еще пример:

Playboy Archive

Как? Вы еще не видели? :) Только сильно не обольщайтесь, сейчас там только 60-е. Кстати, тоже Vertigo делали.

Тут уже сложнее — для поиска было проиндексировано содержание, но интерактивности от галереи это никак не отнимает, скорее даже наоборот.

Это все Vertigo. Они молодцы — выстроили под это дело целую инфраструктуру — называется Vertigo BigPicture™. А нам бы как-нибудь по-простому и быстренько.

Тут на сцену выходит…

Deep Zoom Composer

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

Скачать Deep Zoom Composer можно тут: http://cut.ms/iLu.

Обратите внимание, как много команд приложило усилий к созданию и развитию этого проекта, Israel Innovation labs — это Microsoft Research. Чувствуете запах пороха?

А внутри — Seadragon (⇒ Что такое Seadragon?). Давайте посмотрим, как это все работает.

Import → Compose → Export

Работа в Deep Zoom Composer чрезвычайно проста и поэтому делится на три простых этапа.

1. Импорт. Работает Drag&Drop, можно перетаскивать мышкой или выбирать из меню.

2. Композиция. Внизу список доступных файлов. Справа панель слоев (Layers). По центру — рабочее пространство:

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

3. Экспорт. Выбираем способ экспорта — залить на сервер online или сделать локальный проект. Нажимаем соответственно Publish или Export (+Preview) — и получаем нужный результат.

Композиция

1. Размещение по сетке. Выделяем группу фотографий, щелкаем по ней правой кнопкой, Arrange → Arrange into Grid. Выбираем количество столбцов или строк, расстояние между фотографиями. 

Ok. Вуаля…

2. Размещение относительно друг друга. Deep Zoom Composer также помогает размещать объекты рядом, на одном уровне и т.д. Для это работают:

• прилипание,
• линии уровня,
• выстраивание в линию (Align).

3. Накладывание. Если вы хотите вложить одну фотографию в другую, то можно воспользоваться таким фокусом: сначала увеличить (Zoom!)подложку, а потом перенести фотографию из списка внизу в рабочую область — она сразу будет подходящего размера. Так намного быстрее.

Не забудьте про панель слоев (Layers) справа.

Склеивание панорам

А еще Deep Zoom Composer умеет крестиком вышивать панорамы склеивать — это уже проделки MSR. Кстати, эта же технология используется в Windows Live Photo Gallery и Microsoft ICE — специальной программе для создания панорам (⇒ Подробнее про Microsoft ICE).

Чтобы проделать этот фокус, нужно выдлить серию фотографий, щелкнуть правой кнопкой мыши по выделенной группе → Create Panoramic Photo…

Начнется процесс сращивания фотографий. Дальше останется только обрезать:

Важно, что созданное склеенное (панорамное) изображение тут же импортируется в Deep Zoom Composer и с ним можно продолжать работать.

Слайдшоу. Меню. Ссылки.

В релизной (1.0) версии Deep Zoom Composer добавилась целая “серия” новых интересных возможностей по наращиванию интерактивности:

1. Слайдшоу. Проигрывание фотографий в заданном порядке (кстати, работает в полноэкранном режиме). Для создания открываем панель Slideshow и перетаскиваем фотографии из панели Layers:

Внутри фотографии можно перемещать, размещая в нужном порядке.

2. Меню. Меню позволяет 1) создать список фотографий, 2) явно выделить отдельные фотографии (в том числе названием), 3) быстро перейти к конкретной фотографии.

Для создания меню откройте соответствующую вкладку и нажмите кнопку обновить (круговые стрелочки). Создастся меню “по умолчанию” со списком фотографий в рабочей области. Дальше остается только перетасовать, добавить пункты иерархии и там, где надо, переименовать.

3. Ссылки. Ссылки бывают двух видов: внутренние и внешние. Внутренние по клику на фотографию или область делают переход к одной из фотографий или областей. Внешние — открывают указанную страницу в интернете.

Область — это выделенная область в рабочем пространстве (например, на фотографии или изображении). Для создания щелкните по иконке в списке изображений:

далее выберите область:

Теперь эту область можно использовать как “кнопку” или как объект для ссылок.

Чтобы создать внутреннюю ссылку, выберите область или изображение, щелкните правой кнопкой, в меню нажмите Add Internal Link, в открывшемся окне выберите, куда нужно перейти по клику:

Чтобы создать внешнюю ссылку, выберите область или изображение, щелкните правой кнопкой, в меню нажмите Add External Link, в открывшемся окне заполните “карточку” ссылки:

Списки всех внешних и внутренних ссылок можно посмотреть в соответствующих меню:

Свойства фотографии: теги, подсказки, видимость

Изображения теперь имеют несколько интересных свойств:

1. Теги. Теги — это замечательная и крайне полезная вещь — они позволяют фильтровать фотографии, примерно так, как это делается в HardRock Memorabilia.

Правда, тут есть один важный нюанс: чтобы теги работали, нужно, чтобы плеер их поддерживал. Плеер по умолчанию, который предлагает Deep Zoom Composer — Deep Zoom Navigation — такой поддержки не имеет. Однако вы можете выбрать в экспорте шаблон Tag Browser:

Получится примерно вот так:

Впрочем, тут самое главное не это, а то, что теги поддерживаются в Silverlight — а тут уже все зависит от вашей фантазии.

2. Подсказки. Они же tooltips. Свойство позволяет вывести подсказку при наведении мыши на фотографию или область:

3. Видимость. Вот эта штука меня сильно позабавила, т.к. нигде толком не описана — пришлось разбираться методам “тыка” и “чтения комментариев”. Отвечают за видимость два простых поля: Min и Max — пойди угадай, что в них писать ;)

Раскрываю секреты. Итак, что же такое “видимость” в контексте Deep Zoom? Это… так называемый семантический зум (Semantic Zoom), когда в зависимости от уровня приближения может показываться то или иное изображение.

Как это работает? Уровни приближения начинаются с самого маленького (1), когда все далеко-далеко и виден только один пиксель. Далее, чем ближе вы рассматриваете, тем больше уровень.

Min указывает, начиная с какого уровня картинка становится видной. По умолчанию 1.

Max указывает, заканчивая каким уровнем картинка еще видна. По умолчанию “самое большое число”.

Если вы указываете оба значения, то картинка видна только между этими уровнями приближения включительно. В определенном смысле, “видимость” позволяет обойти ограничение жесткости слоев.

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

Ключевой вопрос: откуда узнать правильное значение уровня приближения?

Самый простой способ: увеличить (Zoom) до нужного размера картинку в рабочей области, щелкнуть правой кнопкой мыши, в меню выбрать Set Visibility Limits → Set this as minimum или Set this as maximum.

Обратите внимание, что сама рабочая область моделирует видимость тоже, если картинка на текущем уровне приближения “невидима”, то она становится полупрозрачной.

Экспорт

Варианта экспорта коллекции фактически два: залить на online-сервис DeepZoomPix или сохранить локально.

DeepZoomPix. Об этом сервисе можно рассказывать отдельно, но если вкратце, то получится примерно так: 1) Silverlight + Deep Zoom + Windows Azure, 2) Бесплатный хостинг коллекций фотографий из Deep Zoom Composer, 3) Интерактивная online-галерея для ваших фоток с компьютера, facebook, flickr и любой rss-ленты, 4) Вставка галерии в любой блог или сайт.

Сейчас нам особенно интересен второй пункт: экпорт из Deep Zoom Composer. Для экспорта понадобится LiveID:

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

Ссылку на готовый альбом можно разослать друзьям, либо вставить в блог, скопировав соответствующий код (Share):

Там же справа есть небольшой социальный блок:

Получится примерно вот так:

Да, кажется, DeepZoomPix пока не поддерживает уровни видимости :(

Локальный экспорт. С локальным экспортом все просто. Выбираем тип вывода:

Images — это просто DeepZoom-коллекция изображений. Silverlight Deep Zoom — это Silverlight-плеер, Seadragon Ajax — плеер на AJAX (JavaScript) (⇒ Использование Seadragon Ajax во Всемирной цифровой библиотеке).

Далее имя, расположение.

Последний блок — выбор способа экспорта изображений. Композиция — это когда все изображения рассматриваются как единое мега-изображение и соответствующим образом дробятся на тайлы. Коллекция — это когда каждое изображение рассматривается отдельно, в коллекции изображениями можно управлять с помощью тегов.

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

Опять-таки, если вы использовали уровни видимости, то вам будет доступен только экспорт композиции.

Заключение

Спасибо, что дочитали до конца :)

Скачать Deep Zoom Composer можно тут: http://cut.ms/iLu.

Итак, ранее мы научились рисовать иконки для твиттера и rss. Сегодня будем рисовать иконку с летающей тарелкой:

1. Создаем новый документ 512х512 пикселей.

2. Начнем с нижней светящейся части тарелки (дно): делаем овал, устанавливаем радиальную градиентную закраску — от белого в центре к светло желтому по краям.

Для тонкой настройки градиента можно использовать инструменты Gradient Transform (G) и Fill Transform.

3. Для тела тарелки копируем овал дна, и рисуем небольшой круг:

Дальше нужно эти две фигуры объединить, удалив нижнюю часть круга. Это можно сделать множеством способов, например, с помощью Direct Selection (A) подпинуть нижнюю границу круга вверх и объединить (Path ⇒ Union) две фигуры:

3. Накладываем “дно” тарелки на “тело”:

4. Начинаем рисовать освещенную поверхность снизу: нам понядобятся два овала: один, вложенный в другой. Обратите внимание, что внутренний овал смещен вверх относительно центра внешнего.

У обоих примерно одинаковая радиальная закраска, в конце уходящая в прозрачность (Alpha ~ 75%).

5. Рисуем падающий свет: для этого нужно нарисовать прямоугольник и дважды скопировать дно летающей тарелки. Далее верхнюю копию нужно из прямоугольника вырезать (Path ⇒ Back Minus Front), а с нижней полученный результат нужно объединить (Path ⇒ Union):

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

Ставим Opacity в районе 25%.

6. Добавляем “поверхность”: рисуем овал, с помощью Direct Selection (A) немного сдвигаем вниз верхную границу и делаем соответствующую радиальную закраску:

Размещаем “поверхность” под падающий свет:

7. Добавляем задний фон: рисуем еще один овал с радиальной заливкой, размещаем за летающей тарелкой и светом:

8. Добавляем “эффекты” — Outer Glow:

• Для тела “НЛО”: Size 10, почти белый свет, Noise 0
• Для дна “"НЛО”: Size 1, Opacity: 0.3, почти белый цвет
• Для внутреннего овала падающего света: Size 5, светло-желтый
• Для внешнего овала падающего света: Size 10, светло-желтый
• Для вертикального падающего света: Size 0, белый

9. Можно еще поиграться с закраской тела тарелки:

Получится вот такой результат:

10. “Поверхностью” можно управлять, изменяя цвет, яркость, сдвигая вверх/вниз:

11. Летающая тарелка должна обязательно что-нибудь похищать! Например, иконку RSS-ленты, которую мы делали в прошлый раз: добавляем иконку и тень под нее:

Дальше можно поиграться с фоном в зависимости от контекста, в котором предстоит размещать иконку:

Наконец, можно добавить соответствующую надпись:

Или так:

Набор *.design и *.png файлов в приложении.

p.s. А для студентов, аспирантов и школьников Expression Design доступен бесплатно. Ваша копия Expression Studio 3 ждет вас в DreamSpark.

Если вам нужны иконки для вашего Silverlight-приложения, обратите внимание на иконки, которые нарисовала Алена Косинская (MVP. Expression).

Скачать можно у Алены в блоге: http://dev.net.ua/blogs/helen/archive/2009/08/20/8789.aspx

Кстати, еще Алена написала множество очень интересных и полезных статей:

• Формы в Silverlight-приложениях. В бизнес Silverlight-приложениях.
• Сценарий Master/Detail в Blend 3
• Blend 3 как генератор данных
• Скиннинг контролов. Слайдер.
• Кто ищет – тот найдет…TFS.
• Цветомания для Expression - “не отходя от кассы”
• Циркулярный дизайн в Expression Design
• Preloading…Loading…Loading…
• Точка, точка, запятая…Часть вторая.
• Точка, точка, запятая…Часть первая.
• Что можно сделать с фото в Expression Design?

Продолжать можно долго ⇒ так что бегом читать :)

Скринкасты Алены для TechDays можно найти тут.

Продолжаем развлекаться в Expression Design, благо недавно вышла новая версия.

Сегодня мы будем рисовать иконку RSS. В итоге должна получиться вот такая коллекция:

1. Открываем Expression Design 3, создаем новое изображение (Ctrl+N) 512х512.

2. Включаем сетку (Ctrl+’), включаем привязку к сетке (Ctrl+Shift+’). Из меню Edit ⇒ Options ⇒ Units and Grids можно настроить размер ячейки сетки — у меня он 16px.

3. Рисуем кружочки (shortcut для эллипса — L)  для RSS-иконки. Ровный круг можно нарисовать, удерживая Shift или как в данном случае — за счет привязки к узлам сетки. Я делаю круги с шагом 3-2-3-2 клетки. Центральный круг смещен.

4. В настоящий момент мы имеем несколько кругов, наложенных друг на друга — нужно сделать из них кольца. Для этого выделяем последовательно два круга и применяем к ним Path-операцию “Back Minus Front” (Object ⇒ Path-Operations ⇒ Back Minus Front, или проще: внизу окна редактирования есть меню с выбором Path — последняя операция запоминается):

После закраски должно получиться вот так:

5. Рисуем прямоугольник (shortcut — M), чтобы вырезать уголок. Далее можно действовать разными способами: 1) через Path-операцию Intersection, 2) через Path-операцию Divide. В первом случае нужно будет нарисовать еще один прямоугольник для второго кольца. Во втором — поудалять “лишние” детали.

В итоге должно получиться вот так (границу фигур можно убрать):

6. Делаем подложку и небольшой градиент сверху. Снизу рисуем квадрат с закругленными краями (подложка), ставим Opacity по желанию (например, 100%) и в зависимости от дальнейшего ипользования (у меня 15%) Сверху — круг и копию квадрата, чтобы вырезать, вырезаем, оставляя нижную часть, ставим Opacity 15%.

7. Для сегментов и круга добавляем эффект Outer Glow (Size:1, Opacity: 1, Color — такой же, как у них.

8. RSS-иконка готова (не забываем растянуть ее на всю область картинки):

9. Shortcut для экспорта — Ctrl+E.

Готовые *.design и *.png файлы можно найти в приложении к посту.

В следующий раз будем рисовать похищение иконки летающей тарелкой (см. пример в моем блоге справа)!

p.s. Video-версия тоже будет, но позже.

Такие вот игрушки в XNA делают студенты из NUS, Digipen.SG и NAFA на досуге. Обратите внимание: с мультитачем и мультиплеером.

Ваша бесплатная копия XNA Game Studio ждет вас в DreamSpark! Вчера там появилась версия 3.1.

Предыдущие серии:

• Advanced Bing. Symbols — использование специальных символов и операторов.
• Advanced Bing. Keywords — использование ключевых слов.
• Advanced Bing. Bing на твоем сайте — вставка поиска Bing на своем сайте.

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

Благодаря наработкам Powerset, Bing имеет доступ к семантически проиндексированному контенту Википедии и умеет не только ссылаться на нее в результатах поиска, но и понимает, что вы ищете конкретного человека, конкретное место или конкретную вещь — все это так называемый “Reference Search”.

По наблюдениям команды Bing, подобный тип поиска — один из самых продолжительных (в среднем более 9 минут) и самых интенсивных (более 6 запросов за одну сессию до того, как будет найдена нужная информация).

Тут на помощь приходит вертикальный поиск, самый простой способ добраться до “Reference”-вертикали в результатах выдачи поиска Bing — это найти пункт, ссылающийся на Википедию. Каждый такой результат содержит ссылку “Enhanced View”, по которой можно просмотреть страницу Википедии внутри той самой Bing “Reference”-вертикали.

На соответствующей странице отображается статья из Википедии и содержание страницы. Тут же можно поискать связанные изображения и видео.

Попробуйте, к примеру, поискать Albert Einstein, Kamchatka или Twitter.

Также для некоторых запросов в меню слева появляется “Reference”-таб для быстрого перехода:

В некоторых случая Bing умеет давать не только ответы на поставленные вопросы, но и предоставляет возможность сразу узнать подробности на заданную тему:

Что еще интересно, внутри “Reference”-вертикали можно продолжать искать и задавать вопросы:

Обратите внимание, что Bing выделяет не только ключевые слова, но и ответ на поставленный вопрос (в данном случае это имя и фамилия президента). Также Bing понимает синонимы и близкие по смыслу слова, в данном случае он выделил не только President, но и Chairman.