Как создать кликабельную картинку или кнопку-переход в редакторе .Nelya_Gerbekova

Сегодня расскажу Вам, как я делаю баннер, или любое изображение в сообщениях кликабельным. Это можно сделать несколькими способами.

1. Первый способ для картинок, которые загружены на фотохостинг

<a href="адрес ссылки" target="_blank"><img src="адрес картинки" /></a>

Для этого нужно загрузить картинку на любой фотохостинг и и взять ссылку т.е адрес картинки.

( http://fotki.yandex.ru/ . http://radikal.cc/)

Адрес ссылки это страница, которая будет открываться при нажатии на картинку или баннер. (Яндекс - фотки - ссылка №3 , Радикал- фото - ссылка №1)



Скопируйте код в блокнот на ПК и внимательно вставьте адреса ссылки и картинки(не перепутайте)



Вставьте в сообщение в расширенном редакторе при нажатии на ИСТОЧНИК



Отправьте сообщение в ПРЕДПРОСМОТР или ЧЕРНОВИК и проверьте результат на кликабельность. Я. например, провожу все манипуляции с картинкой в ЧЕРНОВИКЕ,а затем каждый раз беру готовый код картинки из черновика и вставляю в сообщение.

2. Подготовка кода для кликабельной картинки в Радикал-фото.

Этот метод очень удобен для вставки кликабельной картинки в эпиграф дневника, в приложение "Всегда под рукой" или в блок "О себе"
Загружаем картинку на фотохостинг
В последней графе удаляем ссылку на фотохостинг и прописываем свою ссылку на страницу перехода. Щелкаем по ПЕРЕХОД НА URL ( при этом в ссылках должно произойти изменение т.е замена на вашу ссылку) В результате получаем готовый код №2 или №6.



Чем отличается ссылка №2 от ссылки №6 .

Они выполняют одинаковую функцию, но имеют разный вид в редакторе. Важно! Код №6 вставляется в при нажатии на кнопку "Источник"





Для примера взяла картинку и сделала ее ссылкой на собственные фоны klavdia-France , которые мне очень понравились .Кликните по картинке!







3. Третий способ - создание кликабельной картинки в тексте сообщения

Этот способ применяется для создания картинки-ссылки в тексте сообщения. Рекомендую загружать изображения в расширенный(визуальный) редактор напрямую из ПК Как говорят опытные пользователи: "На фотохостинг надейся,а сам не плошай!" Загрузив картинку из ПК в редактор, с помощью простых манипуляций можно сделать любую картинку не только кликабельной, но и со всплывающим текстом при наведении на картинку. Для этого жмем на иконку ИЗОБРАЖЕНИЕ и загружаем картинку из ПК. Когда картинка загрузится переходим на вкладку ССЫЛКА



В выпавшем окне в графе URL вписываем ссылку на страницу перехода



Далее переходим на вкладку РАСШИРЕННЫЙ и в графе ЗАГОЛОВОК пишем всплывающий текст.



Жмем ОК и любуемся результатом .





4. Самый простой способ создания кликабельной картинки в расширенном редакторе

Загрузите картинку в редактор, через кнопку "Изображение"



Выделите картинку мышкой и жмите на кнопку "Вставить /редактировать ссылку" . В выпавшем окне в графу URL вставьте ссылку на страницу перехода. Вот и все! Баннер готов! Как видите, любую даже уже загруженную ранее картинку можно сделать кликабельной. Здесь, как и в предыдущем способе можно перейти на вкладку РАСШИРЕННЫЙ и в графе ЗАГОЛОВОК написать всплывающий текст в качестве подсказки. При наведении курсора на картинку появится текст - подсказка



Читайте пост: Как создать кнопку-переход



Все самые популярные коды здесь: Коды для оформления блога

P.S. Для желающих работать с кодом, для кликабельной картинки со всплывающим текстом, даю код ,только не забудьте вместо width=100 height=100 вставить размеры картинки, где width-ширина, а height - высота картинки

<a href="Адрес страницы, на которую будет указывать баннер" target=_blank><img src="Адрес картинки из Интернета или из Радикала (ссылка№1)" border="0" title="Текст, видимый, в качестве подсказки, при наведении на ссылку." width=100 height=100></a>



Читайте пост: Как создать ссылки в расширенном редакторе дневника.


Серия сообщений " Оформление дневника ":
Часть 1 - Как создать кнопку-переход
Часть 2 - 7 причин по которым не стоит вставлять в комментарии картинки
...
Часть 23 - Добавление к предыдущему посту .Как изменить размер плеера
Часть 24 - Как сжать размер картинки (фона) до требуемой величины для загрузки в дневник.
Часть 25 - Как создать кликабельную картинку или кнопку-переход в редакторе
Часть 26 - Почему пропадают картинки и фотки?
Часть 27 - Украшаем дневник! Как применить и управлять схемами
...
Часть 33 - Все коды для оформления дневника в одном месте
Часть 34 - Еще один способ создания и вставки музыкального плеера в сообщение дневника.
Часть 35 - Все варианты создания и вставки плеера в текст сообщения или в рамку с кодом



Серия сообщений "Для новичков ЛИ.РУ.":
Часть 1 - Для самых начинающих лирушников.
Часть 2 - С чего начинать дневник?
...
Часть 25 - Что может раздражать ваших читателей в вашем дневнике. Для новичков и не очень.
Часть 26 - Урок для самых новеньких! Как загрузить картинку для фона дневника
Часть 27 - Как создать кликабельную картинку или кнопку-переход в редакторе
Часть 28 - Урок по использованию рамочек от Летиция
Часть 29 - Как добавить рубрику прямо из редактора при цитировании поста
...
Часть 35 - Читаем дневники не прерывая музыку!
Часть 36 - Наводим порядок в дневнике!Как разложить все сообщения в дневнике по полочкам и другие самые важные рекомендации для новичков!
Часть 37 - Уроки для новичков Лиру.

GifCam 3.1 Free RUS.

Вложение: gifcam.rar GifCam — портабельная программа для создания сринкастов в формате GIF. Скринкасты незаменимы там, где нужно показать последовательность действий — при составлении инструкций, справочных материалов, при общении с техподдержкой. Для создания простого скринкаста вы можете воспользоваться программой GifCam. Эта программа позволяет снимать любые изменения на экране компьютера и сохранять все в формате GIF, не требующего никаких дополнительных программ для воспроизведения. GifCam может сохранять как область экрана, попадающую в окно программы, так и целиком весь экран. Вы можете сохранять кадры с определенной частотой, чем больше частота — тем плавнее будут движения на экране. Вместе с картинкой можно сохранять и курсор. Последовательные изображения, составляющие кадры GIF-файла, можно сохранять как полноцветными, так и уменьшать цветность вплоть до черно-белого диапазона. Полученный GIF-файл можно конвертировать в AVI. Каждый кадр можно отредактировать — удалить, дублировать, добавить текстовое примечание. OC: Windows XP, Windows Vista, Windows 7 и Windows 8 Размер: 1.7 Mb

 

Анимация картинки.Baroma

В фотошопе есть интересный способ создать эффектную анимацию смены двух картинок. Если воспользоваться функцией создания промежуточных кадров (tween), получится красивая анимация появления другойкартинки. Создается анимация такой картинки очень просто. Для этого нужно подготовить две подходящие картинки. Но вначале сделаем или откроем готовый фон , чтобы при анимации не было прозрачных пикселей. 1-Файл-открыть. Если будете делать анимацию со своими картинками, нужно сделать все картинки одного размера. Делаем так: открыли картинку и идем "изображение-размер изображения". В открывшемся окне поставить нужные размеры ширины и высоты. И так для каждой картинки. (Кликните по изображению и картинка откроется в полном размере и ее можно будет сохранить на свой компьютер.) Окно слоев пока с одним слоем. 2- Открыть картинку с изображением девушки. 3- В окне слоев разблокировать слой "фон".(Кликнуть по слою два раза левой кнопкой мыши и, в появившемся окошке-OK) 4- Инструментом "перемещение"  перетащить изображение девушки на красный фон. В окне слоев уже будет два слоя. Картинка у нас теперь такая. 5-Открыть файл с цветами. 6- Разблокировать слой в окне слоев и инструментом "перемещение" перетащить изображение с цветами на изображение с девушкой. Изображение девушки окажется под картинкой с цветами. Перед тем, как будет создана анимация картинки, сделаем обводку. Для этого нужен новый слой. 7-Слой- новый-слой. Чтобы сделать обводку, нужно выделить всю картинку. 8-В окне слоев кликнуть по миниатюре слоя с цветами, одновременно на клавиатуре нажав Ctrl. По периметру картинки появится выделение 9-Редактирование-выполнить обводку. В появившемся окне поставить размер ширины обводки, выбрать цвет,(можно любой) , выбрать расположение обводки " внутри" . Теперь уже выделение не нужно, его надо снять. 10-Выделение-отменить. 11-Откроем узор для обводки. 12-Редактирование-определить узор. В появившемся окошке "OK". Картинку с узором можно закрыть. 13- В окне слоев кликнуть по миниатюре слоя с обводкой, одновременно нажав Ctrl. на картинке появится выделение вокруг обводки. 14- Редактирование-выполнить заливку. 15- В появившемся окошке выбрать "регулярный" и затем выбрать свой узор. Добавим обводке тень. 16- Слой- стиль слоя- тень. Параметры можно оставить по умолчанию. Картинка готова, теперь приступим к анимации. 17-В окне кадров на первом кадре выставить время 0,2 сек. 18- В окне кадров сделать дубликат первого кадра, кликнув по значку копирования. 19-В окне слоев выключить глазок на слое с цветами, кликнув по глазку. 20-В окне кадров кликнуть по первому кадру, активировав его, и нажать на значок tween , а, в появившемся окошке , выставить количество кадров. У меня 15. В окне слоев появится 17 кадров. (2 было и прибавилось 15) 21-Кликнуть по последнему кадру и, нажав Shift, по первому кадру . Все кадры выделятся. 22- Нажать на маленький треугольник в окне кадров вверху, в появившемся окошке выбрать "скопировать кадры". Снова нажать на этот треугольник, выбрать " вставить кадры" и, в появившемся окошке, "OK" Еще раз нажать на треугольник, выбрать "обратный порядок кадров" 23- В окне кадров поставить время на последнем кадре 1 сек. Затем при помощи бегунка найти 17 кадр и 18, поставить время на этих кадрах по 1 сек. И на первом кадре тоже поставить время 1 сек. Нажать на значок пуска и посмотреть, как получилась анимация картинки. 24- Файл-сохранить для Web и устройств ( в Gif). Таким способом можно сделать анимацию, добавив рамку и другую анимацию или использовать не две, а несколько картинок. А замечательный коллаж с таксами сделала Ina, источник здесь. http://kalejdoskopphotoshopa.ru/animaciya-kartinki.html

Рубрики:

ФОТОШОП