Photoshop'ta web grafikleriyle çalışma
Rollover görüntüler oluşturma
Zoomify uygulamasına dışa aktarma
Onaltılı renk değerleriyle çalışma
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.
Photoshop ve Dreamweaver ile web sitesi tasarlama hakkında bir video için, bkz. Access Photoshop from Dreamweaver to enhance web image (Web görüntüsünü iyileştirmek için Dreamweaver'dan Photoshop'a erişme).
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.
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.
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.
Dosya > Dışa Aktar > Zoomify'ı seçin ve dışa aktarma seçeneklerini ayarlayın.
Tarayıcıda gösterilen görüntü için arka plan ve gezinmeyi ayarlar.
Dosyanın konumunu ve adını belirtir.
Görüntü Döşeme Seçenekleri
Görüntünün kalitesini belirtir.
Görüntüleyicilerin tarayıcısındaki temel görüntünün piksel genişliğini ve yüksekliğini ayarlar.
HTML ve görüntü dosyalarınızı web sunucunuza yükleyin.
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
Pencere > Bilgi'yi seçin ve Bilgi paneli sekmesini tıklatarak paneli görüntüleyin.
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.
İş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.
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.
İstediğiniz dosyayı bir HTML düzenleme uygulamasında açın ve Düzenle > Yapıştır'ı seçin.
Web'le uyumlu renkler seçme
Eğitim: PSD varlıklarını ayıklama
Web sayfalarını dilimleme