Ali Emre
👑Efsanevi Grafiker👑
Arkadaşlar yine güzel bir ders ile karşınızdayım.Bu derste Photoshop ile tasarımımızı yaptıktan sonra sayfamızı nasıl webe yollayacağımızı ve bu yolda bize gereken CSS kullanımını göstereceğim.Deneme olarak kullanacağımız basit bir tasarım hazırladım.Psd dosyasını Ekten indirebilirsiniz.
Adım 1:
Tasarımı bitirdikten sonra Slice aracı ile web ortamında dinamik olarak kullanacağımız alanları belirliyoruz.Bize yardımcı olması açısından silicelayacağımız alanları kılavuz çizgiler(Guides) ile belirlersek fazla karşıklık olmadan işin içinden çıkabiliriz.Ben bir çerçeve hazırladım HTML dosyamda bu alan içine dinamik olarak yazı yazacağım.Onun için belirlediğim alan çerçevenin içinde oldu çerçeve çizgilerini bu alana dahil etmedim.
Adım 2:
Tasarımı yaptık ve yazı yazacağımız alanı sliceladıktan sonra kayıt işlemine geçeceğiz.Photoshop burada bize çok yardımcı oluyor.Tasarımı bir html şablonu olarak kaydedip istersek hazır olarak css kodlarını ekletebiliyoruz.Bunun için "File >> Save For Web & Devices" i seçin.Kayt türü PNG-24 seçin.Ve ayara penceresi yanındaki küçük ok simgesine tıklayıp "Edit Output Settings" i seçin.Ayarları uygulayın.
HTML kategorisinde "XHTML" i seçin.Bu html dosyamızın düznemli bir html yapısında olduğunu gereksiz tablolamalardan ,rowspan,collspan vs kullanılmamasını sağlar.Günümüz web teknolojisi artık XHTML siteler üzerine kuruludur.
Slice kategorsinde ise çıktıların bir CSS kodu olarak alınmasını sağlayacak.Bu noktada CSS bilmeyen arkadaşlara büyük faydası olacaktır.Preferences i "By ID" yapın buda html şablonunda kullanılan DIV taglarının isimlendirlmesi işlemini "id" kullanılarak yapılmasını sağlayacaktır.
Ok diyerek değişikliği onaylayın.Bu ayarlar her çalışa için varsayılan olacaktır.Bu şekilde her çıkış aldığınızda işinize yaramayacaksa slice alanından "Tables" ı seçin.Asıl kayıt pencerisinde "Save" diyoruz ve kayıt türü olarak HTML & IMages seçiyoruz.İsim alanına kısa şeyler yazın.Çünkü bu isim hem html dosyasının ismi hemde resimlerin ismi olacaktır.
Adım 3:
Artık Photoshop bize istediğimiz herşeyi verdiğine göre bir Web editörüne geçerek bazı küçük detaylar hazırlayacağız.Ben Dreamweaver programını kullanacağım.Görsel tasarlamada bir numara programdır.Photoshopun hazırladığı index.html ve images klasörünü bir klasör içine atın ve o klasörü Dw da bir site klasörü olarak belirleyin.Nasıl yapılacağını bilmiyorsanız hazırladığım dersi inceleyebilirisiniz...
https://www.grafikerler.net/ders1-o...oru-olarak-tanimlama-ve-duzenleme-t21544.html
Adım 4:
index.html dosyamızı açıyoruz.daha önceden hazırladığım alan üzerine bir kez tıklayın.O resim seçili hale gelecektir.Şimdi bu resim üzerinde birşeyler ekleyebilmek için photoshopun layer mantığını kullanacağınız.Html dilindede DIV dediğimiz kodlar layer mantığı ile çalışır.Onun için divlerle tasarım yapacağız.
Şu anda açtığınız index.html dosysını incelerseniz.Sayfa başlarında <style></style> kodları arasında yer alan ve:
şeklinde kodlar bulunur.Bunlar CSS (Cascading Style Sheet) dediğimiz tasarım kodlarıdır.Bu kodlarla basit html sayfanızı muhteşem bir tasarıma dönüştürebilirsiniz.Üsteki kod bizim oluşturduğumuz alanın css kodudur.Biz ilaveten bir kaç kod daha eklersek sorun ortadan kalalacaktır.
Bizim sorunumuz seçili alana yazı yazmaya çalıştığımızda arkaplanın kaybolmasıdır.Divlerimiz hazır olarak eklendi.Şimdi CSS ile bu divin arka plan resmini belirlersek sorun ortadan kalakacaktır.Çözüm için CSS kodumuza şunları ekliyoruz:
Son Hali:
Burada: Adım 1:
Tasarımı bitirdikten sonra Slice aracı ile web ortamında dinamik olarak kullanacağımız alanları belirliyoruz.Bize yardımcı olması açısından silicelayacağımız alanları kılavuz çizgiler(Guides) ile belirlersek fazla karşıklık olmadan işin içinden çıkabiliriz.Ben bir çerçeve hazırladım HTML dosyamda bu alan içine dinamik olarak yazı yazacağım.Onun için belirlediğim alan çerçevenin içinde oldu çerçeve çizgilerini bu alana dahil etmedim.
Adım 2:
Tasarımı yaptık ve yazı yazacağımız alanı sliceladıktan sonra kayıt işlemine geçeceğiz.Photoshop burada bize çok yardımcı oluyor.Tasarımı bir html şablonu olarak kaydedip istersek hazır olarak css kodlarını ekletebiliyoruz.Bunun için "File >> Save For Web & Devices" i seçin.Kayt türü PNG-24 seçin.Ve ayara penceresi yanındaki küçük ok simgesine tıklayıp "Edit Output Settings" i seçin.Ayarları uygulayın.
HTML kategorisinde "XHTML" i seçin.Bu html dosyamızın düznemli bir html yapısında olduğunu gereksiz tablolamalardan ,rowspan,collspan vs kullanılmamasını sağlar.Günümüz web teknolojisi artık XHTML siteler üzerine kuruludur.
Slice kategorsinde ise çıktıların bir CSS kodu olarak alınmasını sağlayacak.Bu noktada CSS bilmeyen arkadaşlara büyük faydası olacaktır.Preferences i "By ID" yapın buda html şablonunda kullanılan DIV taglarının isimlendirlmesi işlemini "id" kullanılarak yapılmasını sağlayacaktır.
Ok diyerek değişikliği onaylayın.Bu ayarlar her çalışa için varsayılan olacaktır.Bu şekilde her çıkış aldığınızda işinize yaramayacaksa slice alanından "Tables" ı seçin.Asıl kayıt pencerisinde "Save" diyoruz ve kayıt türü olarak HTML & IMages seçiyoruz.İsim alanına kısa şeyler yazın.Çünkü bu isim hem html dosyasının ismi hemde resimlerin ismi olacaktır.
Adım 3:
Artık Photoshop bize istediğimiz herşeyi verdiğine göre bir Web editörüne geçerek bazı küçük detaylar hazırlayacağız.Ben Dreamweaver programını kullanacağım.Görsel tasarlamada bir numara programdır.Photoshopun hazırladığı index.html ve images klasörünü bir klasör içine atın ve o klasörü Dw da bir site klasörü olarak belirleyin.Nasıl yapılacağını bilmiyorsanız hazırladığım dersi inceleyebilirisiniz...
https://www.grafikerler.net/ders1-o...oru-olarak-tanimlama-ve-duzenleme-t21544.html
Adım 4:
index.html dosyamızı açıyoruz.daha önceden hazırladığım alan üzerine bir kez tıklayın.O resim seçili hale gelecektir.Şimdi bu resim üzerinde birşeyler ekleyebilmek için photoshopun layer mantığını kullanacağınız.Html dilindede DIV dediğimiz kodlar layer mantığı ile çalışır.Onun için divlerle tasarım yapacağız.
Şu anda açtığınız index.html dosysını incelerseniz.Sayfa başlarında <style></style> kodları arasında yer alan ve:
Kod:
#index-03_ {
position:absolute;
left:219px;
top:343px;
width:365px;
height:367px;
}şeklinde kodlar bulunur.Bunlar CSS (Cascading Style Sheet) dediğimiz tasarım kodlarıdır.Bu kodlarla basit html sayfanızı muhteşem bir tasarıma dönüştürebilirsiniz.Üsteki kod bizim oluşturduğumuz alanın css kodudur.Biz ilaveten bir kaç kod daha eklersek sorun ortadan kalalacaktır.
Bizim sorunumuz seçili alana yazı yazmaya çalıştığımızda arkaplanın kaybolmasıdır.Divlerimiz hazır olarak eklendi.Şimdi CSS ile bu divin arka plan resmini belirlersek sorun ortadan kalakacaktır.Çözüm için CSS kodumuza şunları ekliyoruz:
Kod:
background-image:url(images/index_03.png);
font-family:Calibri;
font-size:16px;
color:#FFFFFF;
width:365px;
height:367px;Son Hali:
Kod:
#index-03_ {
background-image:url(images/index_03.png);
font-family:Calibri;
font-size:16px;
color:#FFFFFF;
width:365px;
height:367px;
position:absolute;
left:219px;
top:343px;
width:365px;
height:367px;
}
background-image:url(images/index_03.png); divimizin arkaplanını çağırıyor.Seçeceğiniz resim bizim alanımıza denk gelen resim olmalıdır.
font-family:Calibri;Bu alan içine yazı yazdığımzda hangi fontun kullanılması gerektiğini belirtir.
font-size:16px;Fontumuzun büyüklüğünü ayarlar.
color:#FFFFFF;Fontun rengini ayarlar.
width:365px;Div in genişliğini belirtir.Bunlar resim boyutu ile aynı olmalıdır.Yazmazsanız kaymalar meydana gelebilir.
height:367px;Div in yüksekliğini belirtir.Bunlar resim boyutu ile aynı olmalıdır.Yazmazsanız kaymalar meydana gelebilir.
Artık kodumuzu bitirdik.Görsel tasarım alanında geçerek o alan içine istediğiniz yazıyı yazabilirsiniz.Unutmayın oranın belli bir sınırı var.Tasarımlarınızı ona göre ayarlayın.Sınırı aştığınızda resimler kayacaktır.
Son olarak bu kadar CSS kodu sayfamızı şişirebilir.Bunun için bu kodları harici bir .css uzantılı dosyadan nasıl çağıracağımızı gösteriyim.
İlk önce <style></style> kodları arasındaki tüm kodları kesin.(Ctrl + X).
Site dosyaları arasında ör:"images.css" adında bir dosya olşturun.Açın ve tüm kodları buraya yapıştırın.(Ctrl + V).Ardından style kodlarını silin.
<title></title> kodlarının altına şu kodu ekleyin.
Kod:
<link rel="stylesheet" type="text/css" href="images.css" media="screen" />
Son Hali:
Yayında ve Yapımda Emeği Geçen AliEmre ye Teşekkür Ederiz...:rofl::rofl:
Çalışma Dosyalarını İndir
Son düzenleme:
