Как да създадете карта с изображения с помощта на Gimp: 10 стъпки (със снимки)

Съдържание:

Как да създадете карта с изображения с помощта на Gimp: 10 стъпки (със снимки)
Как да създадете карта с изображения с помощта на Gimp: 10 стъпки (със снимки)

Видео: Как да създадете карта с изображения с помощта на Gimp: 10 стъпки (със снимки)

Видео: Как да създадете карта с изображения с помощта на Gimp: 10 стъпки (със снимки)
Видео: Как перевести фотографию в вектор в Adobe illustrator | Трассировка изображения в иллюстраторе 2024, Може
Anonim

Карта на изображение е изображение с URL адреси, "нанесени" върху него. Можете да облечете вашия уебсайт или лична начална страница с карта с изображения с любимите си сайтове, които обичате да посещавате. Има много софтуер, който можете да направите, но тази статия ще използва Gimp.

Стъпки

Създайте карта на изображението с помощта на Gimp Стъпка 1
Създайте карта на изображението с помощта на Gimp Стъпка 1

Стъпка 1. Съберете първоначална графика, която ще картографирате

Можете да използвате снимки, изображения, каквото ви подхожда. Тук ще използваме wikiHow, wikiHow форум и iGoogle.

Създайте карта на изображението с помощта на Gimp Стъпка 2
Създайте карта на изображението с помощта на Gimp Стъпка 2

Стъпка 2. След като създадете изображението (или го отворите), отидете на Filters >> Web >> ImageMap

Диалоговият екран на Gimp ImageMap

Създайте карта на изображението с помощта на Gimp Стъпка 3
Създайте карта на изображението с помощта на Gimp Стъпка 3

Стъпка 3. Щракнете върху правоъгълника вдясно на екрана, след което изберете едно от изображенията, които искате да използвате

На тази екранна снимка е избрано wikiHow. Попълнете необходимата информация в диалоговия екран, който се появява.

Кликнете върху правоъгълник и ще видите точното местоположение на графиката

Създайте карта на изображението с помощта на Gimp Стъпка 4
Създайте карта на изображението с помощта на Gimp Стъпка 4

Стъпка 4. Продължете този процес за останалата част от вашата карта

Създайте карта на изображението с помощта на Gimp Стъпка 5
Създайте карта на изображението с помощта на Gimp Стъпка 5

Стъпка 5. След като приключите с дефинирането на всички области на връзката, запазете вашата карта с изображения

GIMP автоматично ще предложи да запишете това като файл с разширение.map. Ако желаете, можете да го запишете така. Но този файл съдържа HTML кода (без изображения), който трябва да редактираме и копираме в нашата собствена уеб страница, затова се препоръчва да го запишете като [име на файл].html и да преминете директно към стъпка 7.

Създайте карта на изображението с помощта на Gimp Стъпка 6
Създайте карта на изображението с помощта на Gimp Стъпка 6

Стъпка 6. АКО не сте го запазили като HTML файл, намерете запазения си файл и преименувайте разширението на.html

Може да получите предупреждение за промяна на файловите разширения. Щракнете върху да, за да продължите.

Създайте карта на изображението с помощта на Gimp Стъпка 7
Създайте карта на изображението с помощта на Gimp Стъпка 7

Стъпка 7. Използвайте текстов редактор, за да отворите този HTML файл

Ще забележите, че този файл просто съдържа списък с координати и URL адреси. Това е кодът, който казва на браузъра кои URL адреси да присвои на коя част от изображението ви.

Създайте карта на изображението с помощта на Gimp Стъпка 8
Създайте карта на изображението с помощта на Gimp Стъпка 8

Стъпка 8. Уверете се, че пътят на файла е дефиниран в

Image
Image

връзки към изображението, на което искате да се съпоставят URL адресите.

Неправилното насочване към изображението може да доведе до изобщо да не се показва изображение.

Стъпка 9. ОПЦИОНАЛНО:

Използвайте браузър, за да отворите вашия HTML файл; ако всичко работи, трябва да видите изображението с всички URL адреси, нанесени върху него според областите, които сте дефинирали.

Създайте карта с изображения, използвайки Gimp Стъпка 10
Създайте карта с изображения, използвайки Gimp Стъпка 10

Стъпка 10. Добавете вашата карта с изображения в HTML на уеб страницата си

Ще трябва да копирате ВСИЧКИ редове код, които виждате, включително

tag (който определя пътя към изходното ви изображение) и всичко между маркерите. Това е! Готови сте.

Препоръчано: