Автор статьи: Ефимов Владимир
Уже по заголовку можно заключить, что этот рассказ будет интересен, в основном, создателям сайтов. Тем не менее, будет что почерпнуть и нашим дорогим заказчикам — нынешним и потенциальным. Чтобы сберечь их бесценное время, мы начнем именно с этих моментов, а лишь затем перейдем к техническим деталям.
>
1. Постановка задачи
Мы не устаем напоминать, что не бывает хороших и плохих сайтов, а бывают сайты, лучше или хуже выполняющие стоящие перед ними маркетинговые задачи. Посему не стоит рассматривать достоинства и недостатки сайта, не вникнув в цели, ради которых он был создан.
Едва ли стоит рассчитывать на серьезную отдачу от рекламы парикмахерской, да и Салона Красоты, в интернете, ведь это среда, не знающая географии. Стричься и маникюриться люди все же предпочитают поближе к дому. Исключение могут составить только суперэлитные заведения с известным именем.
В какой-то степени, Салон на Красноармейской 12 к ним приближается. Скажем, они первыми в Москве приобрели вертикальный солярий.
Тем не менее, данный сайт не ставит основной целью привлечение клиентов. Его задача — престижная реклама. Это не кричащая ярмарочная вывеска, а величественная мемориальная доска. Кроме того, в создании предприятия участвуют зарубежные инвесторы, и сайт, прежде всего, призван продемонстрировать им, что Салон действует, и действует с должным размахом.
В результате, главным на сайте оказался не контент, не рекламная эффективность и даже не дизайнерская безупречность (потому что любую эстетическую несообразность можно списать на «загадочную русскую душу»). Главным оказалось продемонстрировать свои веб-мастерские возможности, владение экзотическими средствами. То есть ровно то, от чего мы обычно предостерегаем.
Б о л е е п о з д н е е п р и м е ч а н и е: Вопреки всем ожиданиям сайт привлек в Салон Красоты нескольких клиентов, хотя к его продвижению мы еще не приступали. На момент написания статьи это еще не было нам известно.
2. Материал
В качестве исходного материала заказчиком были предоставлены проспекты Wella, Sebastian и других, выполненные, несомненно, большими мастерами своего дела. Посмотреть эти фотографии вы можете по адресу http://v48.al.ru/barberphoto/
Наибольшее впечатление на нас произвели открытки Sebastian, коллажи в стиле «кибер-техно», достаточно сдержанные, но чрезвычайно выразительные. Сразу оговоримся, что одна из них была использована в дизайне сайта как cover girl.
3. Образное и техническое решение
В качестве контрастного фона было решено использовать древнеегипетские барельефы (рельеф гробницы Херуфа в Фиввах 15 в. до н.э. и др.).
Такое решение опирается на образ древнего Египта, как источника тайных секретов женской привлекательности (Нефертити, Клеопатра), а также на возрождение моды на древний Египет («Звездные Врата», «Мумия», «Пятый элемент»).
Камни фараонов выступают обрамлением тех решений, которые Салон Красоты предлагает клиентам.
Поскольку постановка задачи подразумевает использование достаточно экзотических технических средств, результат получился следующий: при загрузке сайта на экране появляется некий портал, врата, вход в пирамиду. Слева и справа он ограничен барельефом, изображающим девушек с кувшинами (древнеегипетские флакончики ;-). Сам вход закрыт плитой, покрытой иероглифами (тайна).
После загрузки плита медленно уходит вверх, открывая одну из фотографий с открыток Sebastian — лицо девушки, частично заключенное в полупрозрачный цилиндр (ассоциации — Аэлита, Нефертити, «Звездные Врата», «Пятый элемент»).
Технически это решено через движущиеся слои, средствами, которые предлагает Dreamweaver 4.
Обрамление и ядро контрастируют по нескольким параметрам: серый, истертый временем камень и полноцветное изображение живого гладкого лица, принадлежащего будущему.
У заказчика решение заглавной страницы вызвало 100% одобрение. Проблема, однако, заключалась в том, что даже после предварительной оптимизации файлы первой страницы занимали в общей сложности 94 К. По любым представлениям это размер недопустимый для того, чтобы вывешивать страницу в Сети. Предстояло уменьшить объем файлов примерно вдвое.
4. Оптимизация
Вот с этого места и начинается описание технических деталей, которые будут интересны только веб-мастерам. Уважаемых предпринимателей заинтересует, разве что, объем тех усилий, которые мы затрачиваем ради достижения поставленных ими задач. Усилий, результат которых заказчику абсолютно не виден, поскольку он то смотрит работу не через Сеть, а с дискеты, любезно поднесенной веб-мастером.
изображения обрабатывались в программе Adobe Photoshop 5.5, основным инструментом оптимизации служил Ulead Smart Saver pro.
4.1. Фон
В качестве фона использовалось изображение поверхности каменного блока.
После многочисленных попыток мы убедились, что фон, изображающий естественную нерегулярную текстуру, занимает на удивление много места. Фон, регулярность которого заложена в самой его природе, оказывается значительно компактнее. Поэтому вместо гладкой каменной плиты мы поместили многократно повторенный иероглиф в виде зигзага. Этот знак упоминается в модной книге В.Пелевина «Generation П», потому его использование может оказаться занятным для части аудитории.
Объем файла фона уменьшился с 12,5 К до 0,7 К.
Аналогично, верхняя часть панели была заменена повторяющимся иероглифом с изображением человечка (306 байт). Это было сделано, чтобы добавить законченности композиции, до этого наши врата несколько «висели в воздухе».
4.2. Боковые панели
В первоначальном варианте эти элементы (как, впрочем, и другие «каменные» изображения) были сохранены в формате полноцветного JPG. При окончательной оптимизации мы их сохранили в режиме Grayscale. Это, однако, дало незначительный выигрыш. Гораздо эффективнее оказалось некоторое увеличение степени сжатия. Уменьшение качества изображения на общем впечатлении сказалось не сильно, поскольку в изображении древней каменной плиты некоторые искажения вполне уместны.
4.3. Плита
Плита, закрывающая вход, была выполнена в виде единого изображения 530х430 пиксел, так что даже при сильном сжатии картинки ее размер составлял 16,5 К. Однако, этот элемент находится на экране весьма непродолжительное время, после этого сразу приходит в движение и исчезает. Рассмотреть его практически невозможно.
Поэтому при окончательной оптимизации единое изображение было заменено «паркетом» на основе плитки размером 157х168. Ее размер составил 3,2 К.
При создании паркета, как и в случае с фоном, использовалась простейшая технология, а именно разрезание базового изображения на 4 прямоугольника. Затем прямоугольники меняются местами так, что левые оказываются справа, правые — слева, верхние — снизу, а нижние — сверху. В полученном изображении все швы оказываются внутри, что позволяет их замазать аккуратно и творчески.
4.4. девушка в цилиндре
Это изображение сделано настолько мастерски, настолько прекрасно и выразительно само по себе, что всякое прикосновение к нему оптимизатором казалось кощунством.
Однако, преодолев психологический барьер, мы обнаружили сразу два источника резервных объемов:
а) При внимательном рассмотрении оказалось, что значительная часть изображения все равно скрыта за боковыми панелями, и может быть безболезненно удалена.
б) После ряда экспериментов с USS Pro оказалось, что изображение можно сильно зажать в формате JPG без ущерба для общего впечатления. Это, видимо, обусловлено тем, что оно состоит из плавных и несколько размытых форм. То есть, для сжатия в формате JPG вариант почти идеальный, ведь JPG, фактически, преобразует картинку в набор растяжек.
5. Результат
В результате перечисленных действий суммарный размер файлов первой страницы удалось уменьшить с 93,66 К до 52,64 К.
исходный вариант вы можете посмотреть по адресу v48.al.ru/barber, окончательный результат — по адресу barber.ru.
Неожиданным побочным результатом оптимизации оказалось то, что движение плиты стало более плавным. Особенно это заметно на маломощных компьютерах.
Если что-то в этом изложении неясно — с удовольствием отвечу на вопросы.
Если Вы владеете более совершенными решениями и технологиями — не откажите в любезности поделиться, мы и наши читатели будут весьма признательны.
Можете воспользоваться формой внизу.
