Web için Photoshop - 1 Yazdır Tavsiye Et
PlatformWindows 2000, Windows XP, Windows Vista, Windows 7
(32 bit - 64 bit), Windows 8 ve 8.1 (32 bit - 64 bit) kullanıcıları VirtualBox ile sanal Windows XP modunda
Tavsiye edilen ekran çözünürlüğüEn az 1024 x 768
Kayıt şekliTam ekran (full screen)
Video boyutları950 x 640
Ders sayısı41
Toplam süre12 saat 17 dakika
Anlatım diliTürkçe
EğitmenAhmet Emin DUYUM
Teslimat şekliDownload
Ücreti39 TL (KDV dahil)

Web grafikleri oluşturmak için Photoshop'un bütün yeteneklerini kullanarak en hızlı bir biçimde nasıl çalışırsınız? İmajları en uygun bir formatta, görüntü kalitesini koruyarak, tarayıcılarda (browser) hızlı bir şekilde görüntülenmesini sağlamak için nasıl optimize edersiniz? Photoshop'taki Web araçlarını kullanarak Web sayfalarınızdaki bileşenleri nasıl oluşturursunuz?

İmajları Web ve diğer online medialarda kullanmak için, imajların görüntü kalitesi ile dosya boyutları arasında en uygun hali oluşturarak nasıl kaydedebileceğinizi; Actionları, Image Processor, Batch ve Create Droplet komutlarını kullanarak işlerinizi nasıl inanılmaz bir şekilde hızlandırabileceğinizi bu sette öğreneceksiniz.

Ortak grafiklere sahip bir dizi dosya oluşturmak gerektiğinde; genelde, bir dosya Photoshop'ta oluşturulur, kopyası alınır, bu kopya üzerinde manuel olarak değişmesi gereken imaj ve yazılar değiştirilir, tekrar kopya alınır ve işlem bu şekilde sürer gider. Ama nereye kadar? Harici bir text dosyasında çok hızlı bir şekilde oluşturduğunuz verileri kullanarak yüzlerce dosyayı bir anda elde etmeye ne dersiniz?

  • Rollover butonlar, Zoomify ve Slice işlemleri,
  • Hexadecimal renk değerleri,
  • Frame ve Timeline Animasyon,
  • İmajların Web için Optimize Edilmesi (Save for Web & Devices),
  • Web için Dosya Formatları,
  • Bir Action Oluşturun,
  • Image Processor, Batch ve Create Droplet Komutları,
  • Harici bir text dosyasını kullanarak çok sayıda PSD dosya oluşturun,
  • Picture Package, Contact Sheets, Web Photo Gallery,
  • ve çok daha fazlası...

01- Giriş

01- Hoşgeldiniz
"Web için Photoshop - 1", "Web için Photoshop - 2" ve "XHTML/CSS ile Web Tasarımı" setlerini izlediğinizde artık kolay bir şekilde, gelişmiş özelliklere sahip, modern Web siteleri yapabileceksiniz.
(Süre: 16 dk 07 sn)

02- Klavye Hakkında
Klavye hakkında kısaca bilgiler veriliyor. Klavyenin Alfa-Nümerik ve Nümerik kısımları, Ctrl, Shift, Alt tuşları ve bunların kullanımı hakkında bilgiyi bu derste bulabilirsiniz.
(Süre: 28 dk 38 sn)

02- Web Grafikleri

01- Giriş
Photoshop'taki Web araçlarını kullanarak Web sayfalarınızdaki bileşenleri oluşturmanız ve Web sayfalarını bir bütün halinde tasarlamanız çok kolaydır.
(Süre: 03 dk 09 sn)

02- Rollover Oluşturmak
Rollover, Web sayfalarında mouse ile bir butonun veya imajın üzerine gelindiğinde görüntünün değişmesi halidir.
(Süre: 08 dk 54 sn)

03- Zoomify
Web sayfalarında imajların daha ayrıntılı olarak gösterilmesini sağlamak maksadıyla, imajın farklı kısımlarını yakınlaştırarak yüksek çözünürlükte izleyebilmek için Zoomify komutunu kullanın.
(Süre: 10 dk 36 sn)

04- Hexadecimal Renk Değerleri
Photoshop'ta imajların renk bilgisini, HTML dosyalarda kullanabilmek için hexadecimal renk değerleri olarak görüntüleyebilir ve kopyalayabilirsiniz.
(Süre: 04 dk 37 sn)

05- Slice İşlemi
Slice işlemi, Web sayfası taslağını ya da bir imajı küçük parçalara bölerek bunların HTML tablolarda veya CSS layerlarında tekrar bir araya getirilmesi için yapılır. User slice, layer-based slice ve auto slice olarak 3 tip slice vardır.
(Süre: 14 dk 22 sn)

06- Auto ve Layer Tabanlı Slice'ların User Slice'lara Dönüştürülmesi
Auto ve Layer tabanlı Slice'ların User Slice'lara dönüştürülmesi için Promote komutunu kullanın.
(Süre: 10 dk 41 sn)

07- Slice'lar ve Slice Görünümleri
Slice'ları, Photoshop ortamında ve Save for Web & Devices dialog penceresinde izleyebilirsiniz. Bir takım işaretler size Slice'lar arasındaki farklılıkları bildirir.
(Süre: 10 dk 06 sn)

08- User Slice'ların Taşınması ve Boyutlandırılması
Slice Select aracını kullanarak User Slice'ların taşınması ve boyutlandırılması mümkün. Aynı zamanda Slice Options dialog penceresi ile de daha keskin değerler girmek suretiyle Slice'ları taşıyabilir ve boyutlandırabilirsiniz.
(Süre: 09 dk 04 sn)

09- Slice'ları Bölmek
Slice'ları; yatayda, dikeyde veya her iki yönde bölmek için Divide Slice dialog penceresini kullanın.
(Süre: 05 dk 54 sn)

10- Slice'lar Üzerinde İşlemler
Slice'ları Duplicate ederek kopyalayabilir, Combine Slices komutu ile birleştirebilir, Align ve Distribute simgeleri ile hizalayabilir, klavyenizden Delete tuşuna basarak silebilir, Lock Slices komutu ile kilitleyebilirsiniz.
(Süre: 14 dk 19 sn)

11- Slice Options Dialog Penceresi
Slice Options dialog penceresini kullanarak Slice'ın içeriğini belirleyebilir, ismini değiştirebilir, arkaplan rengi atayabilir, URL link ve Alt text ekleyebilirsiniz.
(Süre: 20 dk 38 sn)

03- Animasyon

01- Photoshop'ta Animasyon
Animasyon, bir dizi imaj veya frame'in belirli bir süre içerisinde birbiri peşisıra hareket etmesidir. Herbir frame'in bir öncekine göre çok az farklılıklar göstermesi animasyonu izleyenler tarafından hareket hissi olarak algılanır.
(Süre: 16 dk 03 sn)

02- Frame Animasyon
Duplicates Selected Frames, bir veya daha fazla animasyon frame'inin seçilmesi, Unify Layer Position, Unify Layer Visibility, Unify Layer Style, frame'lerin kopyalanması ve yapıştırılması, Tweens, Create New Layer for Each New Frame, Delay, Looping Option, Delete Animation konularında bilgiler veriliyor.
(Süre: 31 dk 55 sn)

03- Timeline Animasyon için Hazırlık
Timeline animasyonda kullanılmak üzere çalışmanın nasıl yapılacağı bilgisi veriliyor.
(Süre: 11 dk 35 sn)

04- Timeline Animasyon
Animation paneli timeline modunda iken bir layer için animasyon uygulamak isterseniz, Animation panelinde keyframe eklemelisiniz. Animasyon işlemini; örneğin layer pozisyonunu, opacity değerini veya layer style değerlerini değiştirerek gerçekleştirebilirsiniz.
(Süre: 29 dk 52 sn)

05- Timeline Animasyon ile İlgili Ek Bilgiler
Keyframe'ler üzerinde uygulanan çeşitli işlemler hakkında bilgiler veriliyor.
(Süre: 15 dk 11 sn)

04- Save for Web & Devices

01- Optimizasyon İşlemi
İmajları Web ve diğer online medialarda kullanmak için, imajların görüntü kalitesi ile dosya boyutları arasında en uygun hali oluşturarak kaydetmek gerekir.
(Süre: 09 dk 12 sn)

02- Save for Web & Devices Dialog Penceresi
Optimizasyon seçeneklerini ayarlamak ve imajın seçtiğiniz ayarlara göre optimize edilmiş görüntüsünü izlemek için Save for Web & Devices dialog penceresini kullanın.
(Süre: 08 dk 52 sn)

03- İmajların Web için Optimize Edilmesi
Save for Web & Devices dialog penceresi ve imajların optimizasyonu hakkında bilgiler veriliyor.
(Süre: 16 dk 20 sn)

04- Save for Web & Devices Dialog Penceresinde Slice'lar Üzerinde İşlemler
Slice'lar içeren bir dosyada hangi Slice'ların optimize edileceğini belirleyebilirsiniz. Optimize To File Size komutu ile, imajların belirlediğiniz kb cinsinden boyutu aşmayacak şekilde optimizasyonunu sağlayabilirsiniz. Image Size bölümünden imajların genişlik ve yükseklik değerlerini değiştirerek kaydedilmesini sağlarsınız.
(Süre: 12 dk 59 sn)

05- Web için Dosya Formatları
JPEG, fotoğraf benzeri imajların; GIF, logo gibi düz renklerden oluşan imajların optimize edilerek kaydedilmesi için uygun formatlardır.
(Süre: 27 dk 57 sn)

06- Output Settings Dialog Penceresi
HTML dosyaların nasıl düzenleneceğini, dosyaların ve slice'ların nasıl isimlendirileceğini Output Settings dialog penceresi üzerinden ayarlayabilirsiniz.
(Süre: 30 dk 46 sn)

05- Otomatiğe Bağlayın

01- Action Nedir?
Action nedir, bir dosya için Action nasıl uygulanır ve Actionların uygulanma hızını nasıl değiştirebiliriz?
(Süre: 16 dk 46 sn)

02- Actions Panelini Kullanarak Actionları Düzenleyin
Setleri, actionları ya da komutları kopyalayabilir, adını değiştirebilir ve silebilirsiniz. Setlerin, actionların ya da komutların sırasını değiştirebilir, bir action setini kaydedebilir ve daha sonra dosyalar üzerinde kullanabilmek için yükleyebilirsiniz.
(Süre: 22 dk 26 sn)

03- Bir Action Oluşturun
Action oluşturmadan önce dikkat edilmesi gereken hususlar nelerdir? Adım adım bir Action oluşturun.
(Süre: 19 dk 48 sn)

04- Bir Path'i Action Olarak Kaydedin
Insert Path komutunu kullanarak Pen aracı ile çizdiğiniz Path'leri Action içerisinde kaydedebilirsiniz. Brush gibi bazı boyama araçlarıyla yaptığınız işlemleri Action içerisine ekleyin.
(Süre: 23 dk 11 sn)

05- Oluşturduğunuz Action Üzerinde Değişiklikler Yapın
Action oluştururken bir takım dialog pencerelerini kullanarak işlemler yaptıysanız, başka dosyalar üzerinde Action uygulanırken bu dialog pencerelerinin görüntülenmesini sağlayabilirsiniz. Action içerisindeki komutlardan bazılarını devre dışı bırakabilir, kaydedilemeyen bir menü komutunu Action içerisine alabilirsiniz.
(Süre: 25 dk 29 sn)

06- Image Processor Komutu
Image Processor, birçok dosyayı belirlediğiniz boyutlarda aynı anda JPEG, PSD ve TIFF formatlarında kaydetmek için kullanabileceğiniz bir komut.
(Süre: 11 dk 30 sn)

07- Batch ve Create Droplet Komutları
Batch ve Create Droplet komutları ile çok sayıda dosyaya, oluşturduğunuz Action ya da Actionları çok hızlı bir şekilde uygulayın.
(Süre: 29 dk 21 sn)

08- Veri (Data) Tabanlı Grafikler
Birçok Photoshop kullanıcısı aynı anda sadece bir tek dosya üzerinde işlem yapar. Ortak grafiklere sahip bir dizi dosya oluşturmak gerektiğinde; genelde, bir dosya Photoshop'ta oluşturulur, kopyası alınır, bu kopya üzerinde manuel olarak değişmesi gereken imaj ve yazılar değiştirilir, tekrar kopya alınır ve işlem bu şekilde sürer gider. Ama nereye kadar?
(Süre: 08 dk 06 sn)

09- Değişkenleri (Variable) Tanımlayın
Bir template dosyada hangi görsellerin değişeceğini belirlemek için değişkenleri (Variable) kullanmalısınız.
(Süre: 18 dk 44 sn)

10- Veri (Data) Seti Tanımlayın
Veri (data) seti, değişkenlerin (variable) ve o değişkenlere atanmış verilerin (data) bir kümesidir. Oluşturmak istediğiniz farklı imajların her birisi için veri (data) seti tanımlayabilirsiniz. Apply Data Set komutu ile template dosyanızı, oluşturduğunuz veri (data) setinin içeriği ile değiştirebilirsiniz. Data Sets As Files komutu ile oluşturduğunuz veri (data) setlerinden PSD dosyaları elde edebilirsiniz.
(Süre: 21 dk 24 sn)

11- Özet
Değişkenleri (Variable) ve Veri (Data) Seti tanımlama derslerinin kısa bir özeti yapılıyor.
(Süre: 10 dk 34 sn)

12- Verilerin (Data Setleri) Harici Dosyadan Alınması
Harici bir text dosyasında oluşturduğunuz verileri kullanarak çok sayıda Veri (Data) Seti oluşturmak ve bu data setlerini kullanan çok sayıda PSD dosya elde etmek daha kolaydır.
(Süre: 21 dk 51 sn)

06- Extra Plug-in'ler

01- Extra Plug-in'leri İndirin
Picture Package, Contact Sheets, Web Photo Gallery gibi Photoshop'un önceki versiyonlarında bulunan eklentileri indirin ve bunları Photoshop'ta kullanmaya başlayın.
(Süre: 27 dk 42 sn)

02- Picture Package
Picture Package ile bir imajın çok sayıda kopyasını veya farklı imajları tek bir sayfada toplamak mümkün. Çok farklı ölçüler ve yerleşim seçeneklerini kullanarak değişik düzenler oluşturabilirsiniz.
(Süre: 24 dk 27 sn)

03- Contact Sheets
Photoshop ve Adobe Bridge programlarını kullanarak nasıl Contact Sheet (seçilen imajların toplu olarak bir sayfa üzerinde oluşturulması) yapabilirsiniz?
(Süre: 39 dk 05 sn)

04- Web Photo Gallery
Web Photo Gallery komutunu kullanarak bir dizi imajdan otomatik olarak bir Web fotoğraf galerisi oluşturabilirsiniz.
(Süre: 37 dk 02 sn)

05- Web Photo Gallery (Adobe Bridge)
Web Photo Gallery komutunu Adobe Bridge programından kullanarak bir dizi imajdan otomatik olarak bir Web fotoğraf galerisi oluşturabilirsiniz.
(Süre: 11 dk 45 sn)

İnceleyin, karşılaştırın, sonra alın. Demoları inceleyin, çekim ve ses kalitesini karşılaştırın, sonra kararınızı verin. Demolar, sizin setler hakkında bir fikir edinebilmeniz içindir. Boyutları özellikle küçük tutulmuştur. Unutmayın! Setlerde anlatılan dersleri tam ekran (full screen) ve 950 x 640 video boyutları ile izleyebileceksiniz. Video paylaşım sitesi Vimeo üzerinde yayınladığımız bütün setlerimize ait örnek dersleri buradan izleyebilirsiniz.

 

Üye Girişi



Ankete Katılın

Kullandığım Internet bağlantı seçeneği...

Ziyaretçilerimiz

Şu anda 11 konuk çevrimiçi