Photoshop'ta Nasıl Köprü Oluştururum?

...

Photoshop'ta yeni dilimler ekleyerek iki veya daha fazla tıklanabilir alan oluşturun.

Resim Kredisi: Adobe'nin izniyle görüntü.

Adobe Photoshop CC'de Dilim Aracı'nı kullanarak herhangi bir görüntüyü veya görüntünün bir bölümünü tıklanabilir bir köprüye dönüştürebilirsiniz. Bu özelliği yakalamak, köprünün çalışmasını sağlamak için görüntüyü düz bir JPG veya PNG yerine bir HTML dosyası olarak kaydetmeniz gerektiğidir. Neyse ki bu, kodlama konusunda uzman olmasanız bile herkesin kullanabileceği bir özellik. Photoshop sizin için HTML kodunu oluşturur ve görüntüyü Web'e uygun bir görüntü biçiminde gömer.

Aşama 1

...

"Dilim Aracı"nı seçin.

Resim Kredisi: Adobe'nin izniyle görüntü.

Photoshop'ta herhangi bir görüntüyü açın. İdeal olarak, bir Web tarayıcısında iyi görünecek kadar büyük bir şey olmalıdır. Araç kutusundan "Dilim Aracı"nı seçin. Görünmüyorsa, Kırpma Aracının veya grubundaki görünür durumdaki başka bir aracın sağ alt köşesini tıklayıp basılı tutun, ardından "Dilim Aracı"nı seçin.

Günün Videosu

Adım 2

...

Bir dilim oluşturmak için imleci görüntünün üzerine sürükleyin.

Resim Kredisi: Adobe'nin izniyle görüntü.

İmleci tıklanabilir olmasını istediğiniz alanın üzerine sürükleyin. Bir görüntü üzerinde tek bir köprü oluşturmak için imleci tüm görüntünün üzerine sürükleyebilirsiniz.

Aşama 3

...

Dilediğiniz kadar dilim oluşturun.

Resim Kredisi: Adobe'nin izniyle görüntü.

Birden fazla köprü istiyorsanız, Dilim Aracı imlecini görüntünün yalnızca bir bölümünün üzerine sürükleyin. Fare düğmesini bıraktıktan sonra, sonraki köprü için ikinci bir dilim oluşturabilirsiniz. İsterseniz, tek bir görüntü üzerinde bir düzine veya daha fazla köprü oluşturabilirsiniz.

4. Adım

...

Köprü eklemek için bir dilime çift tıklayın.

Resim Kredisi: Adobe'nin izniyle görüntü.

Dilim Seçenekleri penceresini açmak için Dilim Aracı ile bir dilime çift tıklayın. Bir köprü oluşturmak için, "URL" alanına Web sayfasının adresini yazmalısınız. Diğer alanlar isteğe bağlı olsa da, bir ad kullanmak bir bağlantıyı diğerinden ayırt etmeye yardımcı olacaktır. Hedef alanına "_blank" eklenmesi, bağlantının yeni bir Web tarayıcı sekmesinde açılması gerektiğini belirtir. Alt Etiket alanı, görseliniz grafiksel olmayan tarayıcılarda görünmüyorsa veya görsel yüklenirken görüntülenen metindir. İleti Metni alanı, tarayıcının durum çubuğunda URL'nin yerine görüntülediği şeydir.

Adım 5

...

Dosyayı HTML biçiminde kaydedin.

Resim Kredisi: Adobe'nin izniyle görüntü.

Bağlantılarınız tamamlandıktan sonra Dosya menüsünden "Web için Kaydet"i seçin. Ön Ayar olarak "PNG-24" veya "JPG"yi seçin, ardından "Kaydet" düğmesini tıklayın. "Biçim" menüsünü tıklayın ve "HTML ve Görseller"i seçin. Bu, dosya biçimini HTML olarak değiştirir. "Kaydet"i tıkladıktan sonra Photoshop, oluşturduğunuz bağlantı ve görüntüyü kullanarak tek bir HTML sayfası oluşturur. Görüntü dosyasının kendisi bir Görüntüler klasörüne kaydedilir. Favori FTP istemcinizi kullanarak hem HTML dosyasını hem de Görüntüler klasörünü web sitenizdeki aynı dizine yükleyin.

Not Defteri gibi temel bir metin düzenleyiciyle, HTML dosyasının kodunu herhangi bir Web sayfasında yaptığınız gibi düzenleyebilirsiniz. Örneğin, web sitenizin resimlerini farklı bir klasörde tutmayı tercih ederseniz, belirtilen "/images" klasörünü seçtiğiniz herhangi bir klasöre değiştirebilir ve ardından resmi o klasöre taşıyabilirsiniz.

Web sayfası veya e-posta içindeki bir görüntüye köprü eklemek için Photoshop'a ihtiyacınız yoktur. Çoğu e-posta programı, normalde mesajınıza ekledikten sonra resme sağ tıklayarak erişilebilen bir köprü özelliği içerir. Resmi web sitenize yüklerseniz, aşağıdaki gibi HTML5 kodunu kullanarak herhangi bir sayfaya tıklanabilir bir resim olarak ekleyebilirsiniz: