250 узоров спицами 2. 3. 4. 5. 6. 7. ...
260 УЗОРОВ СПИЦАМИ - (0)260 узоров спицами 260 узоров спицами 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 1...
19 ФРАНЦУЗСКИХ КОФТ СПИЦАМИ НА ПУГОВИЦАХ СО СХЕМАМИ ВЯЗАНИЯ - (0)19 французских кофт спицами на пуговицах со схемами вязания Жакет патентной резинкой СХЕМА ВЯ...
ПРОСТОРНОЕ ЛЕТНЕЕ ПОНЧО C V-ОБРАЗНОЙ ГОРЛОВИНОЙ. ВЯЗАНИЕ СПИЦАМИ - (0)Просторное летнее пончо c V-образной горловиной. Вязание спицами Объемный силуэт гарантирует комф...
ПУЛОВЕР С ЖАККАРДОВЫМИ БОРДЮРАМИ(СХЕМА) - (0)Пуловер с жаккардовыми бордюрами(схема) http://bianzhirensheng.com/a/29238.html ...
ОткрыткиПерерожденный каталог открыток на все случаи жизни
Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
Всегда под рукойаналогов нет ^_^
Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
Каталог блоговКаталог блогов позволяет упорядочить блоги людей и сообществ по категориям, позволяя быстрее находить нужные и интересные блоги среди огромного количества блогов на сайте li.ru
Как сделать картинку с кликабельными надписями. |
Делала картинку с кликабельными надписями в целях рекламы моего блога (не этого блога; всё, что рекламируется, есть уже здесь:)))), а потом подумала - фишка неплохая, почему бы и не сделать урок для ЛиРушников! Во всяком случае, на просторах ЛиРу не встречала такого урока, правда, специально не искала.Но неважно. Главное, чтобы урок пригодился кому-нибудь!
Покликайте, пожалуйста, надписи на картинке для того, чтобы проверить, как она работает!
Ну, как?! Здорово?! :)))
Если хотите научиться делать такие же, читайте, пожалуйста, дальше! Я постараюсь подробно, просто и доступно рассказать, да и вовсе это не сложная методика.
Те, кто знаком хотя бы с азами сайтостроения, без сомнения понял, что эта картинка сделана по методике построения панели навигации сайта. Эту методику можно использовать для рекламных "баннеров", для создания симпатичного поста-приветствия, просто постов, в которых предлагаете читателям ссылки. Во всяком случае, это будет не лишено оригинальности.
Смысл этой методики прост: на картинке мы сделаем надписи, которые свяжем со ссылками на сайты.
Для изготовления картинки с кликабельными надписями нам будет необходимы: уже готовая картинка с надписями (я подготовила для урока полушутливую картинку; уж простите мне пренебрежение правописанием!) и ссылки, соответствующие надписям ( другими словами - адреса, на которые будет отправлять кликабельная надпись).
Картинка лучше в формате 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) в полном размере загружаете, как обычно, на ваш любимый хостинг и берёте её код вида: //s49.radikal.ru/i125/1007/38/fd1f315538c5.jpg (ссылка, №1). (Лучше откройте новый документ и скопируйте её туда).
10. Теперь откроем файл (2) с помощью программы Блокнот.
В тексте HTML-кода выделим ту часть его, как показано, от <! и до <body>,
скопируйте эту часть и вставьте в документик рядом с кодом этой картинки (ссылка, №1).
11. Теперь будьте внимательны. Выделенную часть между кавычками удалите, а вместо неё вставьте ссылку картинки, №1. Только не потеряйте кавычки, пожалуйста!
12. Это и есть код вашей картинки с кликабельными надписями! Сохраните его, и пользуйтесь себе на радость и с пользой!
Спасибо за внимание к моему уроку.
Надеюсь, вам он был вам интересен и полезен!
Успеха!
Серия сообщений "уроки-анимация":
Часть 1 - Создание 3D анимации крутящего шара или глобуса в программе Фотошоп во временной шкале.
Часть 2 - Уроки анимации в фотошопе от T-Abissinka
...
Часть 9 - Урок : Текст по кругу (анимация)
Часть 10 - Создаём эффектные узоры в Фотошоп- 2
Часть 11 - Как сделать картинку с кликабельными надписями.
Часть 12 - Уроки анимации в фотошопе(урок 9)
Часть 13 - Уроки анимации в Photoshop
...
Часть 32 - Анимация "Вспышка-затухание"
Часть 33 - Несколько способов анимации воды в ФШ
Часть 34 - Как сделать холодный Cinemagraph изображения в Photoshop
| Рубрики: | ФОТОШОП. |
| « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
