Yaptığınız tasarımları web için kaydetmek

Tasarımızı sliceladınız ve photoshopta işiniz bitti ne yazıkki hayır çok ufak bir işimiz daha kaldı bu dökümanı web için kaydetmek tek bir komutla işimizi bitirebileceğiz.

Yaptığımız tasarımı File > Save for web & devices komutu ile web için kaydetmemiz gerekmekte bu komutu  verdiğimizde yeni büyükçe bir pencere açılacak ve burdan bizim dilimlerimiz minik minik birer png, jpeg yada gif(pek tavsiye etmem) bizim seçimimize göre kaydedilecek.

En üsteki dökümanın halleri arasında geçiş yapabileceğimiz bölüm sayesinde web tasarımızın web için kaydedildiğinde kalitesinin ne kadar düşceğini net bir biçimde görebilmemiz için hem orjinal halini hem optimize edilmiş halini hatta kalitesi daha da düşürülürse nasıl gözükeceğini 2 yada 4  ayrı pencereden gösterebiliriz. Ben genelde sadece optimize edilmiş haline yani web için kalitesi ve boyutu düşürüldükten sonra nasıl göstermesini isterim o yüzden tek pencereden görüyoruz.

Kaydedilen parçaların türünü yani döküman türünü belirtebileceğimiz bölümde seçtiğiniz tüm slicelar o formatta kaydedilir. Türler arasıda png, jpeg ve gif bulunmaktadır. Eğer animasyonlu bir image oluşturmuyorsanız gif kullanmanızı önermem oldukca eski bir format ancak hareketli resimler ancak gif ile hazırlanabilmekte (animated gif) ilerleyen yazılarımda photoshop ile animated gif hazırlamanın ne kadar kolay olduğudan bahsedeceğim. Benim en çok tercih ettiğim format png çünkü en son çıkan doğal olarak en düşük boyutu en yüksek kalitede beraber sunan format png ancak png'nin kendine has bir sorunu var transparan bir alanı png olarak kaydedersiniz transparan bölge transparan olarak kaydedilir. Eee bunun neresi kötü kötü değil bencede çok iyi böylece logonuzun arka planını temizledikten sonra transparan olarak kaydederseniz web sayfanızda daha sonradan arka planınızı daha sonra değiştiriseniz logonuzun arkaplanı ile uğraşmak zorunda kalmayacaksınız çünkü arka plan transparan Süper birşey bu ancak internet explorer 6 ve onun altındaki sürümlerde png'nin bu özelliği çalışmamaktadır. Buna ramen ben png'yi öneririm ayrıca transparanlık özelliğinide kullanırım. 9 çıkacak nerdeyse yükseltin artık sürümlerinizi!

Bütün bu seçimleri yaptıktan sonra save tuşuna basıyoruz ama işimiz yine bitmedi yine bir pencere

Save for web & devices

Bu pencerede işimiz biraz daha kolay ama yine çok önemli ayrıntılara dikkat etmemiz gerekmekte 

• Dökümanımızın isminde kesinlikle türkçe karakterler bulunmamalı 
• Sadece imageları seçeneği yani Images Only seçeneği seçili olmalı yoksa imagelerı bir HTML sayfasına tablolarla yerleştirir ve bize birde HTML sayfası verir ancak bu HTML pek düzgünce oluşturulmaz ayrıca güncelleme yapmak oldukca zorlaşır 
• Slices seçeneğinden ise hangi sliceları kaydetmek istediğimizi seçeriz. Selected slices, slice select tool ile seçtiğimiz sliceların, All User Slices bizim oluşturduğumuz slicelar mavi olanlar, All Slices tüm slicelar bizim oluşturduğumuz ve bizim kesimeyi unutuğumuz yada özellikle kesmediğimiz sclicelar 

Tüm seçimleri yapıktan sonra save tuşuna basarız ve photoshop tüm slicelarımızı bizim için minik imagelara dönüştürür. Bir images klasörü arar eğer seçtiğimiz yerde bir images klasörü yoksa oraya bir images klasörü açar ve içine kaydeder. Eğer varsa o klasörün içine kaydeder.

Save for web and devices komutunu çalıştırmadan önce dreamwever'da yazmak istediğimiz tüm yazıların layerlarının gözlerini kapatmalıyız ki bu yazılar oluşturulan imageların üzerinde yazıyor olmasın.

En son olarak images klasörümüzün içine baktığımızda tüm sliceların tek tek isimlendirilip küçük resimler olarak kaydedildiğini görürüz.

Images klasörünün içi

Slicelanmış tasarımın web için kaydedilmiş halini indirmek için tıklayınız.