Anasayfa

Html & Css

Google anasayfa tasarımı PSD to CSS
Facebookta Paylaş

Google anasayfa tasarımı PSD to CSS

Google anasayfa tasarımı PNG to CSS - Ders 1 ve Google anasayfa tasarımı PNG to CSS - Ders 2  konularında anlattığım fireworks ile yapılmış png tasarımdan css dökme işlemini photoshop ile nasıl yapacağımızı anlatıyor olacağım bu konuda. Css yazma kısmında hiç bir farklılık olmayacak. PNG to CSS ve PSD to CSS işlemlerini birbirinden ayıran tek durum tasarımda kullanılacak image dosyalarının kaydedilmesidir. Bu yüzden bu konumuzda tasarımda kullanacağımız image dosyalarımızı photoshoptan nasıl alacağımızı gösteriyor olacağım. Onun dışında html ve css yazma işlemlerini yukarıda da belirttiğim daha önce detaylı anlatımını yaptığım Png to CSS konusundan öğrenebilirsiniz.

Google tasarımı için PSD tasarımımızdan logoyu almamız bizim için şu an yeterli.

  Bunun için öncelikle photoshop toolbox 'ından resimde göstermiş olduğum crop tools aracını seçiyoruz.

 

 

 

 

 

 

 

 

 

   Yukarıdaki gibi sadece logo alanını seçtikten sonra seçili logo alanına çift tıklayarak sadece logo kalmasını sağlıyoruz.
   Sonra logoyu kaydetmek için File > Save For Web > Save adımlarını izleyerek logoyu kaydediyoruz. 

   Logoyu kaydettikten sonra ki aşama daha önceki konuda da belirttiğim css işlemlerinden oluşmaktadır. 

11 Ocak 2014 13:16 Kategori :Html & Css2914
Sitene Ekle :
Yukarıdaki kodu sitenize ekleyerek bu konuyu sitenizde yayınlayabilirsiniz.