Photoshop kullanarak bir görüntü haritası nasıl oluşturulur

1. Adım

Photoshop'ta görüntü haritanızı oluşturmak için kullanacağınız görüntüyü açın. Görüntü, İnternet için zaten optimize edilmiş olmalıdır.

2. Adım

"Shift-Ctrl-M" ye basarak ya da araç kutunuzun altındaki "Resim Hazırında Düzenle" düğmesine tıklayarak Photoshop'un Image Ready bileşenine erişin.

3. adım

"Resim Haritası" aracına erişmek için "P" tuşuna basın veya standart araç kutusundaki "Görüntü Haritası" araç simgesini seçin. "Image Map" aracını basılı tutun ve dikdörtgen, dairesel veya çokgen bir şekil göreceksiniz. Etkin nokta olarak kullanmak istediğiniz görüntünün alanına en uygun şekli seçin.

4. Adım

Farenizi kullanarak, resmin üzerine tıklayın ve fareyi tıklayıp sürükleyerek etkin noktanın alanını vurgulayın. Fare düğmesini serbest bıraktığınızda, Image Ready resminizde yeni bir etkin nokta oluşturur.

Adım 5

"Pencere" açılır menüsüne tıklayarak ve "Görüntü Haritası" nı seçerek görüntü haritası seçenekleri kutusunu açın. Etkin noktayı adlandırmak için "Ad" seçeneğini kullanın. Yerel bir sayfayı vurgulamak için "URL" açılır menüsünü kullanın veya bu etkin noktadan erişmek için harici bir web sayfasının adresini girin. Harici bağlantınızın nasıl açılacağını vurgulamak için "Hedef" açılır menüsünü kullanın. "Alt" alanı, bu etkin noktaya bir fare işaretçisi yerleştirildiğinde görüntülenen metni içerecektir.

6. Adım

Etkin noktanızın konumunu ve boyutunu ayarlamak için "Boyutlar" seçeneklerini kullanın. X ve Y, dikey ve yatay pikselleri kullanarak etkin noktanızın tam yerini belirler. W ve H, etkin noktanızın boyutunu bir dizi piksel kullanarak tanımlamanıza olanak tanır.

7. adım

Oluşturmak istediğiniz her bir etkin nokta için 4., 5. ve 6. adımları tekrarlayın.

8. adım

"Ctrl-Shift-Alt-S" düğmesine basın veya "Dosya" açılır menüsünü seçin ve "En iyileştirilmiş olarak kaydet" i seçin. Bir dosya adı girin ve "Farklı kaydet" bölümünde "HTML ve resimler" in görüntülendiğinden emin olun. Dosya depolama işlemini tamamlamak için "Kaydet" e tıklayın. Bu, görüntüler için bir HTML dosyası ve ilişkili bir klasör oluşturur.

9. adım

Yeni görüntü haritanızın çalışmasını test etmek için yeni oluşturulan HTML dosyasına tıklayın.