Клуб PhotoImpact

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Клуб PhotoImpact » Графика в Web-дизайне. » Урок. Нарезка мап- карты на фото 2


Урок. Нарезка мап- карты на фото 2

Сообщений 1 страница 2 из 2

1

Что такое мап-карта? Это выделенный участок картинки привязанный к линку для перехода на какую-то страницу или открытия в новом окне какой-то картинки.
Сегодня этот эффект применяется мало. Разве, что при создании некоторых видов капчи. А вот в конце 90-х - начале 2000, когда сайтостроение только набирало силу,
этот метод широко использовался. Старшее поколение конечно помнит как выглядели "крутые" сайты. Главной страницей была рисованная картинка,
где каждый объект был линком для переходом на другие страницы с какой-то информацией. К примеру, картинка город.
Жмёшь на двери школы и попадаешь на страницу с учебным материалом или встреч с одноклассниками. А, к примеру кликнув по припаркованному автомобилю,
попадёшь на страницу обсуждений или продаж автомобилей.
Позже страницы стали готовить в флэш. Город ожил. Стали двигаться пешеходы и машины. Такие сайты были чуть ли не показателем мастерства сайтостроения.
Но был один недостаток. Компьютеры были слабые, с маленькой оперативной памятью. Приходилось ждать "зарядки" таких страниц очень долго.
Собственно это и послужило причиной отказа от использования в сайтостроении методов мап и флэш. На смену им пришли простые, строгие дизайны с кнопочным меню.
С тех пор компьютеры на много увеличили свою мощь но строгие дизайны стали нормой из-за скорости "зарядки" страниц.
Всё это лирика а сегодня как и было обещано, мы рассмотрим принцип изготовления мап-карты в редакторе PhotoImpact. Для примера возьму портрет Ганса Христиана Андерсена.
Чтобы инструмент нарезки мап-карт активировался, нужно чтобы наша картинка была в цветовой палитре RGB.

http://s1.uploads.ru/CQjSB.jpg

http://s5.uploads.ru/6S7Lh.jpg

Наша задача сделать так, чтобы если кто-то ткнёт его в глазик, - открылась стартовая страница нашего клуба.
Можно конечно сделать так, чтобы, к примеру, при нажатии на нос и ухо открывались другие страницы или картинки но это лишнее.
Моя задача показать сам принцип построения мап-карты и показать как это работает.
И так. Активируем инструмент и выбираем форму выделения. Я выбрал свободное выделение. Маркирую глаз.

http://s6.uploads.ru/XPWVZ.jpg

В настройках заполняем формы.

http://s0.uploads.ru/dB3Ce.jpg

Теперь нашу картинку сохраняем и заливаем куда-нибудь на файлообменник дающий ссылку для публикации. Кто на платном хосте, помещает в коренную папку сайта. Я залил на наш файлообменник сохранив ссылочку.
Откроем в редакторе просмотр в браузере. Я пользуюсь Мациллой .

http://s1.uploads.ru/0Muhv.jpg

В окне браузера под картинкой находится код картинки. Если вы не применяли скрипты эффектов то код будет маленьким как этот. Со скриптами будет пол метра.
Код странички в браузере нам не нужен. Поэтому скопируем только код самой мап-карты. Этот участок кода выделен на скриншоте жёлтым. Вместо подчёркнутого адреса ставим адрес сохранённой на обменнике картинки.

http://s0.uploads.ru/QxOcm.jpg

Вот и всё. Код готов. Теперь поместим код туда, где должна быть наша картинка и опробуем работу мап-карты.
Можете опробовать её работу: Мап-карта.

0

2

Спасибо!

0


Вы здесь » Клуб PhotoImpact » Графика в Web-дизайне. » Урок. Нарезка мап- карты на фото 2


Рейтинг форумов | Создать форум бесплатно