Ön izleme
Hazırsak başlayalım, öncelikle 800x400 - 72 Resolution özelliklerinde yeni bir belge açalım bu layerimizin ismini Arka Plan olarak değiştirelim ve içini #494949 rengi ile dolduralım, hemen arkasından aşağıdaki ayarları ile Noise ekleyelim, Filter/Noise/Add Noise
Devamında aşağıdaki Bevel and Emboss ve inner Shadow efektilerini ekleyerek devam edelim,
Şimdi bu Arka Plan isimli layerimizi CTRL+J ile çoğaltalım (Dublicate) ve üzerine sağ tıklayıp Clear Layer Style diyerek efektleri kaldıralım devamında Blending Mode ayarını Darker Color olarak değiştirelim ve aşağıdaki ayarları ile Lighing efektini verelim,
Aşağıdaki sonucu elde etmiş olmalıyız.
Şimdi yeni bir layer oluşturalım ismini Çerçeve olarak değiştirdikten sonra CTRL+R tuş kombinasyonu ile Cetvelimizi açalım (Rulers), çerçevemiz için aşağıdaki gibi kenarlardan 4 er pixel boşluk kalcak şekilde hizalayalım ve M tuşuna basarak Rectangular Marquee Tool aracımızı seçelim (Kare Olan), devamında içini seçili hale getirelim arkasından CTRL+SHIFT+I ile seçimi ters çevirelim ve bu seçili alanımızın içinide #494949 rengi ile dolduralım ve CTRL+D ile seçimi kaldıralım, arkasından birinci layerimiz olan Arka Plan isimli layerimize sağ tıklayarak Copy Layer Style diyelim ve Çerçeve isimli layerimize sağ tıklayarak Paste Layer Style diyerek oradaki efektleri aktaralım, arkasından 1 px stroke efekti verelim.
Şimdi bu Çerçeve isimli layerimizide CTRL+J ile çoğaltalım ve üsttekinin üzerine sağ tıklayarak Clear Layer Style dedikten sonra onunda Blending Mode ayarını Darker Color olarak değiştirelim ve bu layerimizede Lighting efekti verelim,
Aşağıdaki sonucu elde etmiş olmalıyız.
Şimdi yukarıda indirmeniz için verdiğim linkteki metaryellerin içindeki sarı şapkayı (Neyse adı artık :D) çalışma alanımıza alalım ve aşağıdaki gibi alanımıza ortalayarak yerleştirelim arkasından Drop Shadow efektini aşağıdaki ayarları ile verelim.
Devamında yine yukarıda verdiğim linkten indirdiğiniz metaryellerin içindeki fontları kullanarak aşağıdaki yazıları yazalım arkasında DropShadow efektini verelim,
Aşağıdaki sonucu elde etmiş olmalıyız.
Son olarak klavyemizden D tuşuna basalım renk ayarlarını default ayarlarına getirelim ve yine klavyemizden U tuşuna basalım ve Line Tool aracımızı seçelim, aşağıdaki gibi yazılarımızın tam ortasından bir çizgi çizelim ve devamındaki Drop Shadow efekini aşağıdaki ayarı ile uygulayalım. (Not: D tuşuna basarak renk ayarlarını sıfırladığımız için çizgimiz siyah renkte olacak)
PS'deki görsel anlatımımız buraya kadardı, şimdi sayfamızı hazırlamaya geçebiliriz, bunun için öncelikle masaüstü'müzde site isminizi vereceğiniz bir klasör oluşturmakla başlayabiliriz, (örnek: benimsitem.com isminde bir klasör) bu klasörümüzün içine images isimli yeni bir klasör daha oluşturalım ve PS mizi açalım arkasından derste hazırlamış olduğumuz çalımamızı logo.jpg olarak bu klasöre kaydedelim,
Hemen arkasından PS deki arka planımızdan orta gri olan yerini Rectanqular Marquee Tool aracımız ile 4 yada 5 pixsel kadar bir bölümünü seçili hale getirelim ve bu seçili bölgeyi CTRL+C ile kopyalayalım ve CTRL+N ile yeni bir belge açalım (Yeni belgemiz seçili alanımız ölçüleri kadar açılacaktır) ve içine CTRL+V ile yapıştıralım, daha sonra Image/Image Size ayarlarından ölçülerini 1 px kadar düşürelim ve ismini bg, uzantısını ise .jpg olarak ayarladıktan sonra az önce oluşturduğumuz benimsitem.com/images isimli klasörümüze kaydedelim.
Devamında yeni bir Notepad açalım (Notepad diyorum çünkü ben mac ortamında çalışıyorum ve Windows kullanıcılarınıda düşünerek anlatıyorum, mac kullanıcıları zaten Textedit yada Textmate kullanacaklardır) ve içine aşağıda verdiğim .html kodlarını kopyalayarak yapıştıralım ve index.html olarak benimsitem.com isimli ana dizin klasörümüze kaydedelim, daha sonra bu index.html sayfamızı açalım ve kontrol edelim, logomuz sayfamıza ortalanmış olarak sorunsuz çalışmalıdır.
Not: Aşağıdaki .html kodlar en basti hali ile hazırlanmıştır ve böyle basit bir sayfa için yeterlidir, ilerleyen zamanlarda daha öncede söylediğim gibi web sitesi yapımına geçtiğimiz zaman Dreamweaver ile .css ve .html üzerinde ayrıntılı anlatımlar içeren dersler hazırlayacağım.
.html kodlar
---------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="tr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Yapım Aşamasında</title>
<meta name="author" content="by Haziran - www.after-effects.tr.cx - http://bestpstutorials-tr.blogspot.com">
<meta name="keywords" content="anahtar kelimeleriniz"> <meta name="description" content="siteniz hakkında kısa genel açıklama">
<meta name="Robots" content="index, follow">
<!-- Date: 2009-02-19 -->
</head>
<body background="images/bg.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="800" height="400" border="0" cellpadding="100" cellspacing="100" align="center">
<tr>
<td>
<a href="index.html"><img src="images/logo.jpg" width="800" height="400" border="0" alt=""></a>
</td>
</tr>
</table>
</body>
</html>
Eğer sayfanızın otomatik yönlendirilmesini istiyorsanız basit kod ile bunu yapmamızda mümkün, bunun için <html lang="tr"> ile <head> arasına aşağıdaki kodu yerleştirmeniz yeterlidir, ben 5 saniye olarak ayarladım ama siz bunu dahada kısaltabilir yada uzatabilirsiniz ayrıca Logoya tıklayınca istediğiniz adrese gitmesini istiyorsanız index.html sayfasındaki logo.jpg isimli logomuza verdiğimiz linki istediğiniz link ile değiştirmeniz yeterli.
Yönlendirme kodları
<meta http-equiv="refresh" content="5; url=index.html">
Tüm setleri ve dersin psd dosyası ile birlikte index.html sayfasını buradan indirebilirsiniz. Not: Eklenecek derslerden anında haberdar olmak için RSS mizi ekleyebilirsiniz yada bu bloğu izle kısmından ekleyerek takip etmeyi unutmayın
süper bi anlatım.. emeğinize, bilginize sağlık..
başarılar..
Teşekkürler faydalı olması dileğimle :)
tskkrlerrr
Seninki çok hoşuma gitti ama biraz küçük :)
Bana biraz daha büyüğü gerekli...Ben senin yerine farklı bişiler yaptım :)
http://img7.imageshack.us/img7/7623/myundercontruction.jpg
Nedense bu dersler benim hoşuma gitmeye başladı.Çalışmaların çok işime yarıyor.Teşekkürler.
Bu arada bir sorum olacak: Ekran çözünürlüğü 1024x768 olan biri için,web tasarım projeside 1024x768 olması sence ne kadar doğru?Yada standart olarak kullanılan bir çözünürlük var mı?
Yorum Gönder: Onaylandı :)
Senin çalışmanda güzel olmuş eline sağlık diyebilirim tabi paylaştığın içinde teşekkürler.
1024x768 çözürlük için aynı ölçülerde tasarım yaparsan sorunlarla karşılaşırsın, buna ek olarak tasarım yaparken ölçüler yeterli değildir, hedefine göre tasarım yapman gerekiyor, bunun için çözünürlük dahil tarayıcılarıda hesap etmelisin, mesela sen kendi bilgisayarında bir tasarım yaptığını varsayalım, bu sana güzel ve sorunsuz görünebilir ancak tarayıcılarda ortak bir standart olmadığı için başka bir bilgisayarda sonuç vasat olabilir.
Kısaca ölçü için şu standartları uygulayabilirsin.
1024x768 için: 968x578 iyidir,
Win ve Mac tam görüntü için: 972x578
Yalnızca Windows'ta tam görüntü için, 1000x578 ölçeklerini kullanabilirsin.