Клуб PhotoImpact

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

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


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


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

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

1

Принято считать, что редактор PhotoImpakt,- это инструмент универсальный, имеющий в своём арсенале огромное количество функций для работы как с растровой так и векторной графикой. Но не многие знают, что эта программа может ещё и генерировать коды скриптов. Для дизайнеров создающих сайты этот инструмент может оказаться очень полезен. Но давайте по порядку. К скриптам мы вернёмся а пока начнём с самого начала,- с нарезки. Я буду резать картинку. Те кто собирается нарезать страничку сайта, создайте документ с размерами разрешения вашего экрана и режьте его.

Чтобы не нарушать чьих-либо авторских прав, я выставлю скрин экрана телевизора.
http://sa.uploads.ru/6pzDV.jpg

Включаем инструмент "Trennen Werkzeug". Немецкий перевод "Инструмент для разделения" я же для себя называю его скальпелем за внешний вид иконки и за схожее назначение.
http://sa.uploads.ru/wtQK9.jpg

Наша картинка (или ваш документ) обрамлена красной линией с квадратной иконочкой в правом верхнем углу. Так же в верхней части стола открылись дополнительные атрибуты этого инструмента.
http://sa.uploads.ru/zGotH.jpg

Не секрет, что картинки больших размеров и яркие, с большим количеством расцветок и полутонов грузятся значительно дольше чем маленькие не многоцветные. А если всё же нам необходимо поместить на страничке сайта картинку грамоздкую и многоцветную? И вот тут приходит на помощь резка кадра. Не беспокойтесь! На картинке вашего сайта следов резки вы не найдёте.
Включим функцию скальпеля позволяющую делить снимок (или экран) на равные части.  Установим 6 частей по вертикали и 5 частей по горизонту.
http://sa.uploads.ru/G1inB.jpg

Получили вместо одной,- 30 маленьких картинок. Маленькая картинка заряжается практически мгновенно. Следовательно наша картинка будет заряжаться тоже практически мгновенно, даже если бы она была большой и яркой. По крайней мере она заряжалась бы в 30 раз быстрее.
http://sa.uploads.ru/MGB8h.jpg

А как она будет выглядеть в окне браузера? У меня установлен Explorer. Включим просмотр.
http://sa.uploads.ru/pEwx7.jpg

Как видите, на нашей картинке наши деяния на коем образом не отразились. А вот браузеру работу облегчили.
http://sa.uploads.ru/1cweJ.jpg

Для того чтобы поставить такую картинку на сайт, достаточно просто скопировать сгенерированый нашей программой код под картинкой в браузере и установить его в нужном месте вашей странички. Как видите из кода, наша картинка стала просто таблицей с заполнеными ячейками. Где все данные рамок равны нулю, тоесть их просто нет!
http://sa.uploads.ru/JR2lL.jpg

Теперь посмотрим как использовать резку кадра для вставки скрипта прокрутки к примеру баннеров. Работающие с другими редакторами для создания подобного эффекта вынуждены создавать окно прокрутки и потом обкладывать его фрагментами фото до создания иллюзии целостности кадра. В PhotoImpakt такой головной боли нет.
Активируем функцию скальпеля для нарезки "окна" в фото и вырежим экран у телевизора.
http://sa.uploads.ru/9CDnk.jpg

Наша картинка разделилась на пять частей, причём одна часть является экраном телевизора на фото. Теперь введём скрипт прокрутки (можно текста или текстовых ссылок или просто картинок) в экран. Активируем окно таблицы находящееся на месте экрана. Чтобы не резать дальше, сменим курсор на стрелку не выходя из режима резки.
http://sa.uploads.ru/c9hkf.jpg

Для этого просто щёлкните дважды левой мышкой по нему. Окно обрамилось пунктиром. Вводим скрипт. Правой мышкой по активному окну и переходим : Скрипт - эффекты → Вертикальная прокрутка.
http://sa.uploads.ru/NS5vb.jpg

Жмём и в открывшихся настройках указываем адрес картинки, адрес перехода при нажатии на баннер, время прохождения картинки через окно, ставим "галочку" - остановка при наведении курсора на окно. Жмём + и наша картинка внесёна.
http://sa.uploads.ru/tHBcm.gif

Вставим следующую картинку. Указываем путь к картинке... Не забываем нажимать + после каждого баннера чтобы они были отображены в списке прокрутки. Жмём О.К.  На нашей картинке в окне экрана телевизора появился новая иконка показывающая, что окно занято скриптом.
http://sa.uploads.ru/pIZPn.jpg

Посмотрим как работает прокрутка в браузере. Открываем просмотр в браузере. Форум поддержки HTML в темах не поддерживает и потому показать работу скрипта здесь я не могу. Покажу скрин.
http://sa.uploads.ru/lIbaC.jpg

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

0

2

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

Баннерная прокрутка удалена как не востребованая.

0

3

Onmouse?

0

4

Эльвинг написал(а):

Onmouse?

Команда на срабатывание скрипта может быть как "при наведении" так и "при нажатии" курсора на выделенную область.

0

5

Ну,это ясно - может быть Onmouse,может быть и OnClick.Только когда например бегущая строка баннеров,удобнее при наведении,так как можно нажать на какой нить баннер нечаянно

0

6

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

0

7

Приятная опция. Можно фотогалерею сделать, когда при клике мышкой на маленькой картинке откроется крупная фотка.

0

8

Верно.  Или чтоб при наведении курсора на привьюшку всплывала большая картинка.

0

9

неудобно спрашивать.. но самой  сообразить  никак не получается =)).. моих знаний хватает на то, чтоб загрузить одну картинку, к ней прикрепить ссылку и немного текста.. а вот когда нарезали картинку. получается много маленьких.. как быть с ними дальше.. нужно сохранять каждую по отдельности, и так же загружать на сайт.. по одной?

  и вот еще интересно, какс помощью  импакта создавать веб альбомы?..

0

10

Нет, разделение на маленькие картинки мы видим только в редакторе. В браузере будем видить картинку целой. Из картинки режется мап-карта. Это как таблица со значением бордюр равным нулю. Тоесть перегородок не видим. Ячейки таблицы заполнены участками картинки но самой таблицы мы не видим и воспренимаем как единое целое. Сохранять отдельно ни чего не нужно. Ведь сохраняя таблицу мы каждую ячейку не сохраняем отдельно. Нечто подобное происходит и с нашей мап-картой. Только выделеную ячейку мы заполняем не линком как в обычных навигационных мап-картах а скриптом прокрутки.
После того как всё готово, сохраняем проект для Web как страничку HTML. Я для подобного создал папку " Web-проекты" и все проекты складываю в неё чтоб не искать потом по компу.
Редактор сохраняет в ней нашу картинку разделёную на ячейки со всеми введёными эффектами в виде HTML странички и создаст ещё одну папку в которую поместит элементы нашей картинки из ячеек таблицы.
Те, кто имеет доступ к коренному коду своего ресурса, помещают нарезаные картинки в папку "Images" а файл HTML в "Proects"
Кто на бесплатном хосте, помещает картинки на Радикал или другой сервис. А таблицу ставит в сайт где ему нужно.
К сожалению у меня нет доступа к кореному коду а в форме ответа форума HTML не поддерживается. Я не могу выставить пример.
Веб альбом создаётся так же как и пример с телевизором. Просто вместо экрана телевизора можно вырезать к примеру сцену какого-то кинозала где картинки меняются при наведении курсора или просто с интервалом в несколько секунд. Это уже зависит от твоей фантазии.

0

11

благодарю =)) буду пробовать

0

12

Удачи!

0

13

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

P.S. Вот новая тема по нарезке МАП-карт: Мап-карта

0

14

Инструмент для разделения" где это найти. У меня такого нет.

0

15

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

0

16

http://s03.radikal.ru/i176/1005/b5/004e6da73e88.gif

0

17

Просмотрел тему и заметил, что упустил ещё одну не мало важную деталь,- это размеры вставляемых для прокрутки картинок. Если картинки будут больше или меньше вырезаного окна в которомбудет прокрутка то скрипт сам будет сжимать или растягивать картинки подгоняя их под окно. Это будет повторяться при каждом вызове картинки. Всё это будет тормозить прокрутку и деформировать изображения. Чтобы этого не случилось, картинки нужно зарание подогнать под размеры окна.  А как узнать размеры окна? Для этого в редакторе есть инструмент "линейка".  К примеру, в нашем случае прокрутка будет в экране телевизора. Значит замерим размеры экрана и картинки подгоним под эти размеры.  Включаем линейку и мерим ширину.

http://s58.radikal.ru/i162/1005/9b/75fd8ae84f05.jpg

Точно так же мерием и высоту. Если картинки будут изготовлены точно по размерам то прокрутка будет проходить с заданой скоростью и качество картинок будет без изменений.

0

18

Добрый день, случайно наткнулась на этот урок, решила у себя попробоать, у меня почему то  кнопки скриптов неактивные. И   в с правке не могу  найти информацию о них.  Где их искать,может подскажет кто. У меня Photoimpact Х3

0

19

Sima

Такое может быть если в проге документ, картинка или фото открыто не в RGB.

0

20

Спасибо! Разобралась, заработало...

0


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


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC