Photoshop web araçları, web sayfalarınızın bileşen parçalarını oluşturmanızı veya hazır ayar ya da özelleştirilmiş biçimlerde tam web sayfalarının çıktısını hazırlamanızı kolaylaştırır.

  • Web sayfalarını ve web sayfası arabirim öğelerini tasarlamak için katmanları ve dilimleri kullanın. (Bkz. Katmanlar ve Web sayfalarını dilimleme.)

  • Farklı sayfa kompozisyonlarını denemek veya bir sayfanın çeşitlemelerini dışa aktarmak için katman kompozisyonlarını kullanın. (Bkz. Katman bileşenleri.)

  • Dreamweaver veya Flash'a aktarmak üzere rollover metni veya düğme grafikleri oluşturun.

  • Animasyon paneliyle web animasyonları oluşturun, ardından bunları animasyonlu GIF görüntüleri veya QuickTime dosyaları olarak dışa aktarın. Bkz. Kare animasyonları oluşturma.

  • Hepsi profesyonel görünümlü olan çok çeşitli şablonları kullanarak, bir dizi görüntüyü hızla etkileşimli bir web sitesine dönüştürmek amacıyla bir web fotoğraf galerisi oluşturmak için Adobe Bridge kulllanın.

Rollover görüntüler oluşturma

Rollover, web sayfasında yer alan ve fareyle üzerine gelindiğinde değişen bir düğme veya görüntüdür. Rollover oluşturmak için en az iki görüntünüz olmalıdır: normal durum için birincil görüntü ve değişen durum için ikincil görüntü.

Photoshop rollover görüntüleri oluşturmaya yönelik bir dizi kullanışlı araç sağlar:

  • Birincil ve ikincil görüntüler oluşturmak için katmanları kullanın. Bir katmanda içerik oluşturun, sonra katmanı çoğaltın ve benzer bir içerik oluşturmak için katmanlar arasında hizalamayı koruyarak bu ikinci katmanı düzenleyin. Rollover efekti oluştururken, katmanın stilini, görünürlüğünü veya konumunu değiştirebilir, renk ve ton ayarlamaları yapabilir ya da filtre efektleri uygulayabilirsiniz. Bkz. Katmanları çoğaltma.

  • Ayrıca, birincil katmana renk kaplamaları, alt gölgeler, ışıma veya kabartma gibi efektler uygulamak için de katman stillerini kullanabilirsiniz. Rollover çifti oluşturmak için, katman stilini açın veya kapatın ve görüntüyü her iki durumda da kaydedin. Bkz. Katman efektleri ve stiller.

  • Normal, fare üzerinde ve fare düğmesine basılı durumlarda rollover düğmelerini hızla oluşturmak için Stiller panelindeki hazır ayar düğme stillerini kullanın. Dikdörtgen aracıyla temel bir şekil çizin ve sonra dikdörtgeni otomatik olarak düğmeye dönüştürmek için Eğimli Normal gibi bir stil uygulayın. Ardından, ek düğme durumlarını oluşturmak için katmanı kopyalayın ve Eğimli Fare Üstünde gibi diğer hazır ayar stillerini uygulayın. Tamamlanmış bir rollover düğme kümesi oluşturmak için her katmanı ayrı bir görüntü olarak kaydedin.

  • Web ve Aygıtlar için Kaydet iletişim kutusunu kullanarak rollover görüntülerini web uyumlu bir biçimde ve en iyileştirilmiş bir dosya boyutunda kaydedin. Bkz. Görüntüleri en iyileştirme.

Not:

Rollover görüntülerini kaydederken birincil (rollover olmayan durum) görüntüyü ikincil (rollover durumu) görüntüden ayıracak bir adlandırma kuralı kullanın.

Photoshop'ta bir rollover görüntü kümesi oluşturduktan sonra, görüntüleri web sayfasına yerleştirmek ve rollover eyleminin Javascript kodunu otomatik olarak eklemek için Dreamweaver'ı kullanın.

Zoomify uygulamasına dışa aktarma

Web'e görüntüleyicilerin daha fazla ayrıntı göstermek üzere kaydırabilecekleri ve yakınlaştırabilecekleri yüksek çözünürlükte görüntüler koyabilirsiniz. Temel boyutlu görüntü, eşdeğer boyuttaki bir JPEG dosyasıyla aynı sürede yüklenir. Photoshop, web sunucunuza yükleyebileceğiniz JPEG dosyalarını ve HTML dosyasını dışa aktarır.

  1. Dosya > Dışa Aktar > Zoomify'ı seçin ve dışa aktarma seçeneklerini ayarlayın.

    Şablon

    Tarayıcıda gösterilen görüntü için arka plan ve gezinmeyi ayarlar.

    Çıktı Konumu

    Dosyanın konumunu ve adını belirtir.

    Görüntü Döşeme Seçenekleri

    Görüntünün kalitesini belirtir.

    Tarayıcı Seçenekleri

    Görüntüleyicilerin tarayıcısındaki temel görüntünün piksel genişliğini ve yüksekliğini ayarlar.

  2. HTML ve görüntü dosyalarınızı web sunucunuza yükleyin.

Onaltılı renk değerleriyle çalışma

Photoshop görüntü renklerinin onaltılı değerlerini görüntüleyebilir veya renklerin onaltılı değerlerini HTML dosyasında kullanmak üzere kopyalayabilir.

Bilgi panelinde onaltılık renk değerlerini görüntüleyin

  1. Pencere > Bilgi'yi seçin ve Bilgi paneli sekmesini tıklatarak paneli görüntüleyin.
  2. Panel menüsünden Panel Seçenekleri'ni belirleyin. İlk Renk Göstergesi'nin veya İkinci Renk Göstergesi'nin altında, Mod menüsünden Web Rengi'ni seçin ve Tamam'ı tıklatın.
  3. İşaretçiyi, onaltılı değerlerini görmek istediğiniz rengin üzerine getirin.

Rengi onaltılı değer olarak kopyalama

Photoshop renkleri ya on altılı değer içeren bir HTML RENK niteliği olarak (renk=#xxyyzz) ya da tek başına on altılı bir değer olarak kopyalar.

  1. Aşağıdakilerden birini yapın:
    • Damlalık aracı seçiliyken işaretçiyi kopyalamak istediğiniz rengin üzerine taşıyın. Sağ tıklatın (Windows) veya Control (Mac OS) tuşuna basın ve Rengi HTML Olarak Kopyala ya da Rengin Heks Kodunu Kopyala seçeneğini seçin.

    • Renk panelini, Renk Örneği panelini veya Adobe Renk Seçici'yi kullanarak ön plan rengini ayarlayın. Renk paneli menüsünden, Rengi HTML Olarak Kopyala veya Rengin Heks Kodunu Kopyala seçeneğini seçin.

    • Web İçin Kaydet iletişim kutusunda, renk örneğini tıklatın veya Örtü > Diğer'i seçin. Adobe Renk Seçici'de, onaltılı değeri sağ tıklatın ve Kopyala'yı seçin.

  2. İstediğiniz dosyayı bir HTML düzenleme uygulamasında açın ve Düzenle > Yapıştır'ı seçin.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi