Делаем map-карту

Поделиться107-08-2009 22:33:18

Автор: #error.
активный пользователь
Уважение: +103
Зарегистрирован: 18-07-2009
Провел на форуме:
2 дня 23 часа
Пол: Женский
ICQ: 2658967
Последний визит:
25-02-2010 14:29:56

Урок написала я, т.е error aka touch&go. Урок был написан с целью познания многих фотошоперов, как создавать map карту в фотошопе. Буду показывать на своем примере. Удачи ^ ^
В этом уроке я расскажу, как делать map карту в фотошопе. Вот изображение, которое я сделала, как map карту: ->

Первые шаги:

1. Для начала подготовим изображение, которое мы хотели бы видеть в таблице/логотипе, как map карту. (То есть изображение с кникабельными надписями).
Мы открываем изображение, кандируем, обрабатываем, подписываем надписи (Это могут быть 'правила; сюжет; список ролей; полезная информация' и тд.)

вот мой вариант map карты. (Скрин)
В таком состоянии должна быть map карта для того, что бы сделать переадресацию на ссылки.
2. Далее, мы переносим фаил в дополнение программы Adobe Photoshop - Adobe ImageReady.

Выбираем инструмент 'Rectangle Image Map Tool (P)' - нажимаем на букву P (английская)
далее, выделяем нажимаем: Windows -> ImageMap/Окно -> Карта Изображения
3. Окошко открылось. Теперь мы выделяем инструментом 'Rectangle Image Map Tool (P)' или нажимаем на букву P (английская) нужный текст (Как показано на картинке), область выделена, теперь переходим на само окошко - 'Карту изображения'.

как, я показала на скрине, вставляем нужную ссылку (http://...) в пункт 'URL:'. Далее. Снова с помощью 'Инструмент Карты Изображения Прямоугольника' выделяем остальные надписи и точно так же вставляем ссылки на переадресацию.
4. После того, как вся работа по вставке ссылок на переадресацию завершена. (Все ссылки на месте) Мы сохраняем изображение (есть два варианта). Это можно сделать по двум вариантам, причем в двух из них мы получаем коды.

И потом, уже в опере/Интернет экспловере нам открывается окошко, там уже сохраняем изображение. (Это мы сохранили само изображение) А теперь мы сохраняем его в формате *html.

Потом, переходим на рабочий стол, ищем наше изображение и кликаем по нему правой кнопкой мыши. Выбираем функцию 'Открыть с помощью -> блокнот'
Перед нами теперь такая картинка:

Сам код у нас так же перед глазами:

<img src="http://pic.ipicture.ru/uploads/090807/2sySvn7yA5.png" width="500" height="400" border="0" alt="" usemap="#aspark_ru_Map">
<map name="aspark.ru">
<area shape="rect" alt="" coords="41,353,203,382" href="http://acspark.ru/viewforum.php?id=1">
<area shape="rect" alt="" coords="51,258,153,303" href="http://acspark.ru/viewforum.php?id=2">
<area shape="rect" alt="" coords="56,28,241,60" href="http://acspark.ru/">
</map>

вот и все (; а кое-кто не верил =P

Отредактировано touch&go (07-08-2009 23:16:23)

0

Поделиться207-08-2009 22:54:40

Автор: {montana
✖| avatar by t.tsu х))) |✖ .⇓
Уважение: +217
Зарегистрирован: 04-08-2009
Провел на форуме:
7 дней 15 часов
Пол: Женский
Последний визит:
24-11-2010 14:03:57

а если фотошоп без имиджмейкера?

0

Поделиться307-08-2009 22:58:26

Автор: #error.
активный пользователь
Уважение: +103
Зарегистрирован: 18-07-2009
Провел на форуме:
2 дня 23 часа
Пол: Женский
ICQ: 2658967
Последний визит:
25-02-2010 14:29:56

Saya Otonasi написал(а):

а если фотошоп без имиджмейкера?

То есть версия не CS2? тогда так же поищите такой пункт, как Windows -> ImageMap/Окно -> Карта Изображения
А далее уже точно так же =)

0

Поделиться407-08-2009 23:15:52

Автор: {montana
✖| avatar by t.tsu х))) |✖ .⇓
Уважение: +217
Зарегистрирован: 04-08-2009
Провел на форуме:
7 дней 15 часов
Пол: Женский
Последний визит:
24-11-2010 14:03:57

touch&go написал(а):

Windows -> ImageMap/Окно -> Карта Изображения

нету такого =T___T=

0

Поделиться507-08-2009 23:17:02

Автор: #error.
активный пользователь
Уважение: +103
Зарегистрирован: 18-07-2009
Провел на форуме:
2 дня 23 часа
Пол: Женский
ICQ: 2658967
Последний визит:
25-02-2010 14:29:56

Saya Otonasi написал(а):

нету такого =T___T=

О.о а можно ли сделать скрин. Я гляну :З
~~какая знакомая подпись...~~

0

Поделиться607-08-2009 23:20:35

Автор: {montana
✖| avatar by t.tsu х))) |✖ .⇓
Уважение: +217
Зарегистрирован: 04-08-2009
Провел на форуме:
7 дней 15 часов
Пол: Женский
Последний визит:
24-11-2010 14:03:57

touch&go
скриншот не делается T_T *ломает клаву* у меня CS3
Х_х

0

Поделиться707-08-2009 23:22:43

Автор: #error.
активный пользователь
Уважение: +103
Зарегистрирован: 18-07-2009
Провел на форуме:
2 дня 23 часа
Пол: Женский
ICQ: 2658967
Последний визит:
25-02-2010 14:29:56

Saya Otonasi написал(а):

скриншот не делается T_T *ломает клаву* у меня CS3

CS3 Оо у меня такой раньше был, но перешла на CS2 ^ ^ намного удобнее) а я вроде скрин делаю с помощью Prt Sc Оо'
жаль( если скачаю CS3, посмотрю, как делается хЗ

0

Поделиться807-08-2009 23:24:31

Автор: {montana
✖| avatar by t.tsu х))) |✖ .⇓
Уважение: +217
Зарегистрирован: 04-08-2009
Провел на форуме:
7 дней 15 часов
Пол: Женский
Последний визит:
24-11-2010 14:03:57

touch&go
а ты можешь мне сделать map карту? картинку я уже сделала

0

Поделиться907-08-2009 23:29:05

Автор: #error.
активный пользователь
Уважение: +103
Зарегистрирован: 18-07-2009
Провел на форуме:
2 дня 23 часа
Пол: Женский
ICQ: 2658967
Последний визит:
25-02-2010 14:29:56

Saya Otonasi написал(а):

а ты можешь мне сделать map карту? картинку я уже сделала

могу (не будем флудить)
в таблице данного форума есть тема (Заказ map карт) ^-^

0

Поделиться1024-09-2009 21:06:44

Автор: •Vell-chan•
активный пользователь
Уважение: +19
Зарегистрирован: 17-08-2009
Провел на форуме:
4 дня 10 часов
Пол: Женский
Последний визит:
06-09-2010 23:10:57

#error. написал(а):

2. Далее, мы переносим фаил в дополнение программы Adobe Photoshop - Adobe ImageReady.

где это?? оО" я уже всё обыскала... понять не могу где это вобще найти??

0

Поделиться1124-09-2009 21:24:42

Автор: фактор.
супермээн
Уважение: +643
Зарегистрирован: 14-04-2009
Провел на форуме:
21 день 7 часов
Пол: Женский
Последний визит:
05-01-2013 23:23:53

•° [Kawai Bunny] °•
вот сюда тыкаешь - http://ipicture.ru/uploads/090924/uOL95R1NWC.jpg

0

Поделиться1224-09-2009 21:33:42

Автор: •Vell-chan•
активный пользователь
Уважение: +19
Зарегистрирован: 17-08-2009
Провел на форуме:
4 дня 10 часов
Пол: Женский
Последний визит:
06-09-2010 23:10:57

.Hell girl
блин == этого я тоже найти не могу...

0

Поделиться1325-09-2009 01:32:23

Автор: фактор.
супермээн
Уважение: +643
Зарегистрирован: 14-04-2009
Провел на форуме:
21 день 7 часов
Пол: Женский
Последний визит:
05-01-2013 23:23:53

•° [Kawai Bunny] °•
щас а если так покажу? -

У вас версия ФШ какая?

0

Поделиться1425-09-2009 20:28:24

Автор: •Vell-chan•
активный пользователь
Уважение: +19
Зарегистрирован: 17-08-2009
Провел на форуме:
4 дня 10 часов
Пол: Женский
Последний визит:
06-09-2010 23:10:57

странно, но у меня и этого нету. там последняя маска (или как это назвать...), а больше ничего нету.
у меня CS4

0

Поделиться1530-09-2009 14:43:17

Автор: -mivani.
/Заяц Баскервилли/
Уважение: +1
Зарегистрирован: 29-08-2009
Провел на форуме:
1 день 8 часов
Пол: Женский
ICQ: 380968503
Последний визит:
27-05-2010 12:20:37

я нажала на интернет эскплолер. потом у меня вылезла картинка и вот такая херня:

Код:

Формат: GIF 
Размеры: 500w x 296h 
Размер: 98.27К 
Настройки: Селективный, 256 Цвета, Случайное распределение:100%, Прозрачность вкл, Без дизеринга прозрачности, Без чередования строк, Web-цвета:0% 

<html>
<head>
<title>Фон</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Фон.jpg) -->
<img src="images/Фон.gif" width="500" height="296" border="0" alt="" usemap="#____Map">
<map name="____Map">
<area shape="rect" alt="" coords="102,221,321,295" href="http://korollivradegal.rolka.su/viewtopic.php?id=167">
<area shape="rect" alt="" coords="289,33,479,115" href="http://korollivradegal.rolka.su/viewtopic.php?id=140">
<area shape="rect" alt="" coords="0,3,142,63" href="http://korollivradegal.rolka.su/viewtopic.php?id=9">
</map>
<!-- End ImageReady Slices -->
</body>
</html>

и сохранить там нету такого((((

0

Поделиться1630-09-2009 14:44:15

Автор: -mivani.
/Заяц Баскервилли/
Уважение: +1
Зарегистрирован: 29-08-2009
Провел на форуме:
1 день 8 часов
Пол: Женский
ICQ: 380968503
Последний визит:
27-05-2010 12:20:37

Оо куда это вставлять:

Код:

<img src="images/Фон.gif" width="500" height="296" border="0" alt="" usemap="#____Map">
<map name="____Map">
<area shape="rect" alt="" coords="102,221,321,295" href="http://korollivradegal.rolka.su/viewtopic.php?id=167">
<area shape="rect" alt="" coords="289,33,479,115" href="http://korollivradegal.rolka.su/viewtopic.php?id=140">
<area shape="rect" alt="" coords="0,3,142,63" href="http://korollivradegal.rolka.su/viewtopic.php?id=9">
</map>

0

Поделиться1730-09-2009 14:52:39

Автор: фактор.
супермээн
Уважение: +643
Зарегистрирован: 14-04-2009
Провел на форуме:
21 день 7 часов
Пол: Женский
Последний визит:
05-01-2013 23:23:53

-mivani.
в объявление.

0

Поделиться1830-09-2009 14:53:33

Автор: фактор.
супермээн
Уважение: +643
Зарегистрирован: 14-04-2009
Провел на форуме:
21 день 7 часов
Пол: Женский
Последний визит:
05-01-2013 23:23:53

<img src="images/Фон.gif"

сюда тыкайте картинку загруженную через сервер.Любой

0

Поделиться1930-09-2009 15:16:47

Автор: -mivani.
/Заяц Баскервилли/
Уважение: +1
Зарегистрирован: 29-08-2009
Провел на форуме:
1 день 8 часов
Пол: Женский
ICQ: 380968503
Последний визит:
27-05-2010 12:20:37

.Hell girl
Блин, а не чего если я в виде PSD сохранила? спасибки тебе))))

Отредактировано -mivani. (30-09-2009 15:17:57)

0

Поделиться2004-10-2009 19:37:12

Автор: ромео.
глупый глупый кролик
Уважение: +111
Зарегистрирован: 26-09-2009
Провел на форуме:
7 дней 11 часов
Последний визит:
20-09-2012 23:20:44

Если у вас CS3 или CS4, то map-карту можно сделать в Photoshop Dreamweaver.

0

Поделиться2114-01-2010 19:11:33

Автор: Aleksiel
активный пользователь
Уважение: +11
Зарегистрирован: 09-12-2009
Провел на форуме:
4 дня 18 часов
Последний визит:
09-03-2013 18:19:33

картинки в уроке не открываются т.т

0

Поделиться2214-01-2010 19:19:50

Автор: фактор.
супермээн
Уважение: +643
Зарегистрирован: 14-04-2009
Провел на форуме:
21 день 7 часов
Пол: Женский
Последний визит:
05-01-2013 23:23:53

Aleksiel
сервер тупит уже какой день ==

0

Поделиться2317-01-2010 13:28:59

Автор: оленяша
Babydoll Sixteen
Уважение: +373
Зарегистрирован: 29-11-2009
Провел на форуме:
13 дней 20 часов
Последний визит:
06-03-2013 12:35:37

да перемените картинки в уроке.:/ ибо айпикчире не открывается у меня вообще.

Отредактировано .котэ (17-01-2010 13:29:27)

0

Поделиться2417-01-2010 14:02:28

Автор: Deisy-
активный пользователь
Уважение: +892
Зарегистрирован: 27-03-2009
Провел на форуме:
2 месяца 3 дня
Последний визит:
10-11-2013 10:35:10

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

0