Подготовка моделей для примерки


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

Таким образом на входе имеем товар, на выходе — файл со специально подготовленным изображением товара.



I. Процесс съемки товара


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

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


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

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

в) Фотографировать модели необходимо с достаточно большого расстояния, чтобы исключить эффект "рыбего глаза", свойственного оптике непрофессиональных камер. Так одежду рекомендуем снимать с расстояния не менее 4 метров, остальные товары не менее чем с одного метра (рис. 1. а,б).

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

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

е) Рекомендуем использовать естественное дневное освещение, особенно при съемке одежды, так как это дает минимум цветовых искажений при подготовке моделей для примерки.

ж) Фон при съемке должен быть контрастным, но не слишком темным или ярким, чтобы не оставлять цветных рефлексов на моделях, также это относится к использованию дополнительных источников освещения - они не должны оставлять неестественных и сильных пятен и отражений на товаре.

з) Нет необходимости в фотографиях моделей с большим разрешением, так как при подготовке моделей товара для примерки все равно все товары уменьшаются до размера, оптимального для передачи по интернету и для примерки на экране монитора. Тем не менее разрешение фото товара не должно быть менее 800х600px, а изображение товара на фото должно иметь не менее 500px по высоте или 500px в ширине при горизонтальном формате фотографии (рис. 1. в)

Образец фотографии одежды - исходника для дальнейшей обработки (вертикальная).
Образец фотографии украшений - исходника для дальнейшей обработки (горизонтальная).


Рис. 1.
a) Съемка во весь рост.
б) Съемка по грудь.
в) Параметры фото.



II. Подготовка моделей для примерки


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

Eсли у вас нет графического редактора, рекомендуем воспользоваться бесплатной пробной версией Adobe Fireworks, которую можно скачать с сайта производителя: http://www.adobe.com/uk/products/fireworks/. Инструкция по обработке раписана пошагово, поэтому трудностей по использованию этого редактора у вас быть не должно.



а) Вырезание объекта из исходной фотографии.

Открываем исходный файл в редакторе Adobe Fireworks, для примера описания подготовки модели для примерки выберем исходник свадебного платья.

Необходимо отметить, что редактор не позволяет что либо делать с объектом, в данном случае с фотографией, до тех пор, пока объект не будет выделен путем клика по нему мышкой с выбранным инструментом "pointer", при этом по краям объекта появляется синий прямоугольник выделения с маленькими синими квадратами по углам. Если объектов в ходе работы появляется несколько. то перед каждым действием с объектом, его нужно предварительно выделять.


1) С помощью шкалы в правом нижнем углу выставляем удобный масштаб, в панели инструментов выбираем инструмент "Polygon lasso tool", в свойствах инструмента внизу страницы выставляем свойство "Edge: Anti-alias" и начинаем аккуратно выделять платье на фотографии по контуру (Рис. 2).

2) По окончании выделения объекта, когда линия выделения сомкнется и образует вокруг платья пунктирную линию, выбираем из меню пункт: "Select --> Select Inverse" (Ctrl+Shift+I), при этом выделение инвертируется и выделенным теперь будет все, кроме платья.
Теперь удаляем выделенное, нажав клавишу "Del". Таким образом мы вырезали из исходной фотографии нужный нам объект.
Если объект состоит из нескольких частей, как в нашем случае, то выделив одну из частей вырезаем ее и вставляем обратно (нажав подряд Ctrl+X, Ctrl+V) и так поступаем с каждой частью. Затем удаляем все, кроме нужного объекта кликнув по остаткам и нажав клавишу Del.

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

Мы использовали свойство Anti-alias для того, чтобы края у вырезанного объекта были полупрозрачными, это при примерке помогает скрыть неровности краев модели и сглаживает неравномерность освещения фото посетителя и модели для примерки. Обратите внимание на точность выделения объекта, у вырезанного объекта не должно оставаться по краям кусков фона, и прочего мусора. Если что-то осталось, подчистите края объекта тем же инструментом выделения или ластиком.



Рис. 2.


б) Задание прозрачности.

1) При необходимости задания прозрачности какой-либо части платья (в нашем случае это подол платья), выделяем необходимый участок инструментом "Polygon lasso tool", при этом выствляем внизу экрана свойство инструмента "Edge: Hard" и отделяем его от объекта, вырезав и вставив обратно (Рис. 3. а).

2) Теперь можно задать прозрачность этого куска.
Воспользовавшись инструментом "pointer" (верхний в панели инструментов), кликаем по вырезанной части, выделяя ее таким образом для работы, и в свойствах объекта задаем необходимую степень прозрачности (Рис. 3. б).

Степень прозрачности объекта выбираем самостоятельно, исходя из собственных соображений и из того насколько прозрачной выглядит ткань на фото. Проконтролировать прозрачность можно путем задания фону какого либо цвета, например красного или синего, сделать это можно кликнув при выбранном инструменте "pointer" по фону и установив необходимый цвет в свойстве "Canvas". Убрать цвет фона можно выбрав в том же свойстве прямоугольник с косой красной полоской.



Рис. 3.
a) Выделение части объекта.
б) Задание прозрачности.


б) Позиционирование объекта

1) Для простоты позиционирования предлагаем вам воспользоваться нашим шаблоном.
Скачайте архив с файлом шаблона: position.png, распакуйте и откройте редактором Adobe Fireworks.
Вы увидите изображение девушки - это и есть шаблон. Ее положение и размер изменять нельзя, точно также как нельзя изменять высоту и ширину файла.

2)Выбираем вкладку с изображением исходника платья. Копируем части платья в буфер (Ctrl+C) и, выбрав вкладку с шаблоном, вставляем то что скопировали в файл шаблона.

3) Теперь наша задача — "одеть" наше платье на девушку в файле шаблона.
Для этого уменьшаем платье до необходимых размеров, используя меню: "Modify --> Transform --> Free transform" и изменяя параметры нашего объекта, перетаскивая мышкой черные квадратики на прямоугольнике вокруг нашего объекта.
Напоминаем, изменять положение девушки нельзя, а объект, перед работой с ним, нужно выделять кликом по нему мышкой с выбранным инструментом "pointer".

Диапазон действия с объектом в данном редакторе достаточно широк, можно поворачивать объект как свободно, так и на заданный угол, можно изменять как общий размер так и просто ширину или высоту, есть возможность трапециевидного изменения объекта, для всего этого пользуйтесь вкладкой меню "Modify --> Transform..."



Рис. 4. Позиционирование объекта.


в) Экспорт готового файла модели для примерки.

1) Теперь осталось только удалить шаблонную девушку из файла, для этого кликаем по девушке, и удаляем ее нажав клавишу Del.
Все, наша модель платья спозиционирована для примерки в файле.

2)Нам необходимо экспортировать полученную модель в файл с расширением SWF. Для этого выбираем в правом верхнем углу редактора пункт: Quick export --> flash --> Export SWF (рис. 5. а).
В появившемся окне, в правом нижнем углу выбираем пункт Options, и в следующем окне мы увидим свойства экспортируемого файла (рис 5. б). Изменяя качество экспортируемого файла мы изменяем его конечный размер. Необходимо выбрать оптимальное соотношение размера файла и качества изображения.

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



Рис.5 Экспорт файла. а) Меню экспорта файла. б) Выставление качества изображения.


г) Создание иконки модели.

Для служебных целей примерочной, а именно для разгрузки интернет траффика, необходимо создание уменьшенного изображения модели в формате JPG, с размерами 130px в высоту и 100px в ширину.

1) Создаем соответствующий файл в редакторе File --> New, в появившемся окне выставляем ширину и высоту файла (рис 6 а).

2) Копируем наше платье в файл и уменьшаем его до размера файла используя пункт меню: "Modify --> Transform --> Free transform".

3) Экспортируем получившуюся иконку модели в виде файла JPG: "File --> Export" (рис 6. б).



Рис.6 Создание иконки модели.
а) Создание нового документа с заданными параметрами.
б) Готовая иконка модели для примерки.


г) Создание описания модели.

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

1) Создаем текстовый файл кликнув правой кнопкой мыши в выбранной папке и выбрав пункт: создать --> текстовый файл. В папке появится файл с расширением ТХТ.

2) Открываем файл блокнотом и начинаем описывать модель.
Переменная "size" отвечает за поле размера модели, в переменной "price" необходимо указывать стоимость товара, а в переменной "city" указывается ваш населенный пункт.
Переменная "adds" должна содержать информацию, которая появляется по запросу пользоваеля в подробной информации о вашей модели. Здесь можно указать подробные описания моделей, контактные данные и любую другую информацию о модели, которую вы хотели бы сообщить потенциальному покупателю.

3) Форматируем текстовый файл.
Исходя из специфики технологии, форматирование текстового документа отличается от принятого в операционной системе, так для переноса строки используется выражение "%0D" (без кавычек), а все переменные должны отделяться амперсантом "&".



Рис.7 Создание описания модели.

Все файлы относящиеся к модели должны иметь одно имя, совпадающее с именем файла модели.
В итоге должны появиться 3 файла: model_1.swf, model_1.jpg, model_1.txt, и так к каждой модели.
Все файлы должны располагаться в одной папке, соответсвующей каталогу. Нумерация всех моделей в папке должна быть сквозная, начиная с 1. Не допускаются пропуски номеров.

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


1) Подключить примерочную к своему сайту 2) Добавить свои модели в наши примерочные 3) Заказать примерочную для своего сайта 4) Заказать сайт на основе примерочной
Бесплатная услуга, позволяющая подключить к своему сайту виртуальную примерочную при условии заказа хостинга под каталоги для примерки у наших партнеров — интернет-агенства "Re:Play". Размещение моделей на нашем сайте, позволяет нашим посетителям примерить ваши модели, а также получить всю информацию о вас, при этом нет необходимости заводить свой сайт. Разработка полнофункциональной версии примерочной для вашего сайта, включая подгонку под ваш дизайн, доработка функционала под ваши требования и нужды, техническое обслуживание. Разработка сайта на основе примерочной, что включает в себя предыдущую услугу и разработку полнофункционального сайта под ваш проект у наших партнеров.