-Метки

PNG fantasy gif-анимации paint ангелы бабочки бантики бордюры весенние скрап-наборы винтаж винтажные рамочки винтажные скрап-наборы винтажный скрап-набор времена года гламур готика дамские штучки девушки девушки png декор делаем сами день рождения день святого валентина дети детские скрап-наборы детский детский скрап-набор дом-сад животные зимние скрап-наборы зимний скрап-набор золото карнавал кластеры клип-арты клипарты книги красотки кружева куклы летние скрап-наборы лето листья любовь маски для фотошопа мои работы море морские скрап-наборы музыка новогодний скрап-набор окна ориенталь осенние кластеры осенние рамочки осенние скрап-наборы осенний декор осенний скрап-набор осень открытка открытки открытки с кодами пасха пасхальные скрап-наборы паттерны пейзаж посуда природа птицы рамочки рамочки-кластеры репродукции рождественский скрап-набор рождество розы романтика романтические скрап-наборы романтический скрап-набор романтичный скрап-набор сад свадебный скрап-набор свадьба сердечки сказки скрап-набор скрап-наборы схемы танцы уголки уроки феи фоны фоны png фоны для коллажей фоны для профилей хеллоуин цветочные кластеры цветочные рамочки цветочные скрап-наборы цветочный декор цветы

 -Помощь новичкам

Всего опекалось новичков: 0
Проверено анкет за неделю: 0
За неделю набрано баллов: 0 (81938 место)
За все время набрано баллов: 4 (52746 место)

 -Цитатник

И ещё кубок! - (12)

Дорогие друзья! Возможно это игра,возможно детскость,но я несказанно рада ещё одному кубку! ...

Меня наградили! - (17)

Меня наградили Меня наградили ...

Лучшие дизайны(с эпиграфом и аватарами) моей лучшей подруги! - (15)

Винтаж http://www.liveinternet.ru/users/monro-diz/post137326248/ Голубая кошка http://www.l...

Два красивых ретро-скрап-набора! - (4)

Cotton club & Pause cafe Чтобы смотреть картинки-Сначала кликаем на картинке,затем чтобы ув...

Программа Ginipic - Поиск картинок в Интернете - (15)

Быстро подобрать что-нибудь красивое и в хорошом качестве порой сложно и в этой ситуации нам поможе...

 -Музыка

 -Поиск по дневнику

Поиск сообщений в AnnaDu

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 27.02.2010
Записей: 2693
Комментариев: 21560
Написано: 25418

Как сделать картинку с кликабельными надписями.

Суббота, 10 Июля 2010 г. 02:34 + в цитатник

 

Делала картинку с кликабельными надписями в целях рекламы моего блога (не этого блога; всё, что рекламируется, есть уже здесь:)))), а потом подумала - фишка неплохая, почему бы и не сделать урок для ЛиРушников! Во всяком случае, на просторах ЛиРу не встречала такого урока, правда, специально не искала.Но неважно. Главное, чтобы урок пригодился кому-нибудь!

Покликайте, пожалуйста, надписи на картинке для того, чтобы проверить, как она работает!

Авторские работы!!! Огромный выбор! Разнообразной тематики Почему бы и нет?!

Ну, как?! Здорово?! :)))

Если хотите научиться делать такие же, читайте, пожалуйста, дальше! Я постараюсь подробно, просто и доступно рассказать, да и вовсе это не сложная методика.

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

Смысл этой методики прост: на картинке мы сделаем надписи, которые свяжем со ссылками на сайты.

Для изготовления картинки с кликабельными надписями нам будет необходимы: уже готовая картинка с надписями (я подготовила для урока полушутливую картинку; уж простите мне пренебрежение правописанием!) и ссылки, соответствующие надписям ( другими словами - адреса, на которые будет отправлять кликабельная надпись).

Картинка лучше в формате jpg, а ссылки должны быть в виде: http:// (название сайта или страницы)

Итак, творим!

Открываем картинку в Image Ready CS2.

1. Кликаем на инструмент Rectangle Image Map Tool (прямоугольная графическая карта ),

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

3. Выполняем команду меню Window - Image Map, чтобы активизировать-открыть палитру ссылок (просто кликнув на неё).

4. Вот она и открылась.

5. Рассмотрим повнимательней, что она из себя представляет.

Name - как желаете, так и назовите;

URL - сюда вы будете вносить ссылки;

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

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

 

6. Теперь приступаем к самому важному моменту - будем "связывать" надписи и ссылки.

Правой кнопкой мышки кликаем по первой надписи, активизируя её, и в окошечки в палитре ссылок вписываем данные: соответствующую ссылку и "курсорный" текст.

Активизируем вторую надпись, кликнув на неё правой клавишей мышки, и в окошке панели вписываем уже данные для второй надписи.

Аналогично поступаем с 3-й и 4-й надписями, и со следующими, если их у вас больше.

С надписями мы уже закончили!

7. Теперь будем  сохранять нашу картинку. Очень желательно - в отдельную папку!

File - Save Optimized As...

Внимание, очень важный момент! Выбираем тип файла HTML and images и сохраняем.

На этом наша работа в Image Ready закончена!

 

8. А мы переходим к папочке, в которой сохранена наша картинка в двух ипостасях: изображение (1) и его HTML (2).

9. Изображение (1) в полном размере загружаете, как обычно, на ваш любимый хостинг и берёте её код вида: http://s49.radikal.ru/i125/1007/38/fd1f315538c5.jpg (ссылка, №1). (Лучше откройте новый документ и скопируйте её туда).

 

10. Теперь откроем файл (2) с помощью программы Блокнот.

В тексте HTML-кода выделим ту часть его, как показано, от <! и до <body>,

скопируйте эту часть и вставьте в документик рядом с кодом этой картинки (ссылка, №1).

 

11. Теперь будьте внимательны. Выделенную часть между кавычками удалите, а вместо неё вставьте ссылку картинки, №1. Только не потеряйте кавычки, пожалуйста!

12. Это и есть код вашей картинки с кликабельными надписями! Сохраните его, и пользуйтесь себе на радость и с пользой!

Спасибо за внимание к моему уроку.

Надеюсь, вам он был вам интересен и полезен!

Успеха!

Рубрики:  Уроки Photoschop
Маленькие секреты большого Фотошопа.
Метки:  

Процитировано 397 раз
Понравилось: 33 пользователям

Iskuschenie   обратиться по имени Суббота, 10 Июля 2010 г. 07:36 (ссылка)
доброе утро! спасибо дорогая!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:43ссылка
Добрый вечер, Ларка!

тебе спасибо!
ЭМИЛЛИ   обратиться по имени Суббота, 10 Июля 2010 г. 07:41 (ссылка)
Умничка!Спасибо огромное!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:44ссылка
Пожалуйста! :)))
GalaFeya   обратиться по имени Суббота, 10 Июля 2010 г. 10:22 (ссылка)
А у меня вопрос. Не смогла найти эту функцию в фотошопе CS3. Её там нет? Версия-то более новая... (официальная русская)
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:47ссылка
Посмотри, пожалуйста, в приложении Фотошопа - Image Ready. Если я не ошибаюсь, от этого приложения "избавился" только Photoshop CS4...
НАТАЛИЯ_КОНОВАЛЕНКО   обратиться по имени Суббота, 10 Июля 2010 г. 11:31 (ссылка)
СПАСИБО.
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:48ссылка
Пожалуйста, Наташа!:air_kiss:
Бахыт_АБМ   обратиться по имени Суббота, 10 Июля 2010 г. 12:48 (ссылка)
Прекрасный урок!!! Спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:49ссылка
За лестную оценку - огромная благодарность! И, конечно,
Лариса_Гурьянова   обратиться по имени Суббота, 10 Июля 2010 г. 13:29 (ссылка)
Спасибо за урок! Надо попробывать!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:50ссылка
Очень приятно! Попробуйте, это не сложно! А если помощь понадобится - пишите. пожалуйста!:air_kiss:
Monro-Designs   обратиться по имени Суббота, 10 Июля 2010 г. 18:21 (ссылка)
Обалдеть какая работа спасибо тебе дорогая огромное я процитирую и на досуге внимательно все изучу!!!!!!
 (300x300, 121Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:52ссылка
Ох, досуг, досуг! А он бывает хоть когда-нибудь?!. LOL!
Liudmila_Sceglova   обратиться по имени Суббота, 10 Июля 2010 г. 19:26 (ссылка)
Спасибо
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:53ссылка
Пожалуйста, Людмила!:air_kiss:
sharm   обратиться по имени Суббота, 10 Июля 2010 г. 19:29 (ссылка)
Схомячу. А вдруг что-нибудь получится. Спасибо большое.
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:54ссылка
У Вас да чтобы не получилось?!!!!
Неля_Ммнгалеева   обратиться по имени Суббота, 10 Июля 2010 г. 20:04 (ссылка)
Спасибо. Очень полезный пост.
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:56ссылка
Спасибо, Неля!:air_kiss:
Airinchik   обратиться по имени Понедельник, 12 Июля 2010 г. 01:38 (ссылка)
Спасибо за красоту!!! Какое великолепие!!! Фантастика! Процитировала себе)))
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 22:57ссылка
Я очень рада! Спасибо огромное за столь высокую оценку!:air_kiss:
Перейти к дневнику

Среда, 14 Июля 2010 г. 01:19ссылка
это от всей души!!!
Нина_Гуревич   обратиться по имени Понедельник, 12 Июля 2010 г. 19:16 (ссылка)
Пожалуйста подскажи я смотрела Image map в разных версиях фотошопа в CS3?CS4 b CS5 нет такой, может как то по другому называется?
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 23:07ссылка
Ой, даже не знаю, что сказать, Ниночка... в Image Ready CS2 точно есть...
Что касается остальных - не могу ничего сказать, я с ними не работаю. Но эта функция или что-то подобное должно быть обязательно! Ведь она используются в Web-технологиях.
Перейти к дневнику

Суббота, 17 Июля 2010 г. 07:43ссылка
Приветствую Вас! У меня есть Имидж Реди..и функция эта имеется..НО...почему-то не активируется она(((
Eleonora_Krumen   обратиться по имени Понедельник, 12 Июля 2010 г. 21:24 (ссылка)
Благодарю за урок!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 23:08ссылка
Спасибо!:air_kiss:
Диэмта   обратиться по имени Понедельник, 12 Июля 2010 г. 22:21 (ссылка)
Большое спасибо! Благодаря Вашим урокам надеюсь научусь и я.
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 23:09ссылка
Уверена - научишься!:air_kiss:
если помощь понадобится - пиши, пожалуйста, в личку
lama1976   обратиться по имени Вторник, 13 Июля 2010 г. 10:51 (ссылка)
Спасибо!!!
Ответить С цитатой В цитатник
Перейти к дневнику
Tat_Zu   обратиться по имени Вторник, 13 Июля 2010 г. 10:57 (ссылка)
.
 (507x507, 354Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 23:10ссылка
Пожалуйста, Татьяна!:air_kiss:
mimozochka   обратиться по имени Вторник, 13 Июля 2010 г. 16:37 (ссылка)
спасибо!!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Июля 2010 г. 23:11ссылка
Пожалуйста!:air_kiss:
Tat_Zu   обратиться по имени Среда, 14 Июля 2010 г. 09:42 (ссылка)
.
�����-������� (250x250, 38 Kb)
Ответить С цитатой В цитатник
AnnaDu   обратиться по имени Среда, 14 Июля 2010 г. 10:59 (ссылка)
Спасибо, Татьяна, за столь лестную оценку!
17 (400x419, 312 Kb)
Ответить С цитатой В цитатник
almiria_kh   обратиться по имени Среда, 14 Июля 2010 г. 14:56 (ссылка)
AnnaDu,
спасибо анечка за отличную подсказку!
 (400x300, 940Kb)
Ответить С цитатой В цитатник
Сприн   обратиться по имени Суббота, 24 Июля 2010 г. 00:44 (ссылка)
Спасибо за отличный урок!
Ответить С цитатой В цитатник
Margarita_Romanova   обратиться по имени Суббота, 24 Июля 2010 г. 19:08 (ссылка)
Спасибо дорогая за интересный урок!
52040849_51968736_51885174_735df9855d1f (189x95, 10 Kb)
Ответить С цитатой В цитатник
Katerinka_K_BY   обратиться по имени Воскресенье, 25 Июля 2010 г. 13:38 (ссылка)
спасибо.
действительно очень интересный и полезный урок
Ответить С цитатой В цитатник
Demetra_Crimea   обратиться по имени Пятница, 13 Августа 2010 г. 11:03 (ссылка)
Благодарю!
Очень полезная информация!
 (560x620, 291Kb)
Ответить С цитатой В цитатник
телепатия   обратиться по имени Понедельник, 30 Августа 2010 г. 11:52 (ссылка)
ЗАБИРАЮ, С ВАШЕГО ПОЗВОЛЕНИЯ!!! СПАСИБО!!!
 (236x321, 723Kb)
Ответить С цитатой В цитатник
Михаил_Филков   обратиться по имени Среда, 22 Сентября 2010 г. 20:36 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
ВЕТЕР__ПЕРЕМЕН   обратиться по имени Воскресенье, 26 Сентября 2010 г. 20:22 (ссылка)
Огромное спасибо за все, чем Вы делитесь.
Ответить С цитатой В цитатник
nataliya_bezushko   обратиться по имени Четверг, 14 Октября 2010 г. 00:13 (ссылка)
Спасибо за урок!!!
Ответить С цитатой В цитатник
Фима-Собак   обратиться по имени Пятница, 15 Октября 2010 г. 06:28 (ссылка)
AnnaDu, спасибо зав урок!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] 2 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку