Web Dersler

Web Tasarım Başlangıç Dersleri

noreply@blogger.com (sporttube) — Wed, 30 Apr 2008 01:25:00 +0000

Farklı bilgisayarlar ve kelime-işlem programları arasında, yazı dosyalarının biçimlendirilmesinde ortak bir yöntem bulma çabası, 1986 da, Dünya Standartlar Enstitüsü tarafından Standart Genelleştirilmiş İşaretleme Dili (Standart Generalized Markup Language, SGML) adıyla birleştirildi. Burada kullanılan dil, program yazma dili teriminde olduğundan pek de farklı değil. Fortran, Basic, Cobol gibi bir program yazma dili, bilgisayara, kendisine verilecek talimatların nasıl bir yöntemle verileceğini ve bu talimatlar üzerine ne yapması gerektiğini belirtir. SGML ile ondan türetilen HTML ve XML dilleri kullanılarak oluşturulan belgeler, programlama dillerinden farklı olarak doğrudan bilgisayarın işletim sistemine değilse bile bir yazılıma, örneğin kelime-işlemcisine ya da veri-işlemcisine aşağıdaki veriyi ekranda şöyle göster, yazıcıdan da şöyle çıkart anlamına gelen komutları da içerdiğine göre, bir anlamda dil sayılabilir.

Ne var ki, SGML ve ondan türetilen HTML ve XMLin bir uygulama programı tarafından anlaşılabilmesi için, bu yöntemle kendisine verilecek bilgileri nasıl işleyeceğine ilişkin bilgilerin önceden, programın içine işlenmiş olması gerekir. Yani, bir programın HTMLi anlayabilmesi için, içinde HTMLi anlama ve yorumlama komutlarının olması gerekir. Bu anlamda, işin program tarafı başka birisi tarafından yapılmış sayılabilir; bizim HTML ile yaptığımız sadece veri oluşturmak şeklinde yorumlanabilir. Bu açıdan SGML ve türevleri dil sayılamazlar.

Gerçek bilgisayar programcıları, HTML gibi, bilgisayara hem bilgileri, hem de bu bilgilerin nasıl işleneceğini gösteren metinleri dil saymazlar. İster dil sayılsın, ister sayılmasın, HTML, kısaca tanımlarsak, Netscape Navigator, Internet Explorer, Mosaic, Spry gibi, bilgisayar kullanıcısı, bilgisayar ve Internet arasında arabirim görevi yapan programların anladığı bir veri ve komut ulaştırma yöntemidir; diğer bilgisayar programlarından farklı olarak sabit disk veya disket gibi bilgisayar kayıt ortamlarına kaydedilirken, düz yazı olarak kaydedilir; herhangi bir düz yazı programı ile oluşturulabilir, okunabilir ve değiştirilebilir. Diğer bilgisayar programlarından farklı olarak, disk ve disketlere yazılırken Binary-İkili sistemle yazılmaz; içinde 16 Tabanlı-Hexadecimal komutlar yoktur; herşey standart düz yazı olarak yer alır. Buna karşılık herhangi bir düz yazı dosyasından farklı olarak metnin içinde <> işaretleri arasında yeralan Ingilizce bazı komut-kelimeleri vardır.

HTML, önceleri Macintosh ardından IBM uyumlu bilgisayarlarının yardım dosyalarının oluşturulmasında kullanılan bir yöntem olarak yaygın bir kullanım alanı buldu. Ancak, HTML kısaltmasının açık şekli olan Hypertext Markup Languagede geçen Hypertext terimi, 1950 yılında Ted Nelson adlı bir bilgisayar uzmanı tarafından içinde hot, yani başka bir metinle veya resimle ilintilendirilmiş noktalar bulunan metin anlamına kullanılmıştı. Apple firması, bu yöntemi ekranda gösterilen yardım metinlerinin içinde bir kelimeyi veya simgeyi tıklayarak ilgili başka bir başka metne veya simgeye gitme yöntemi olarak kullandı. Metinler böylece hyper hareketli hale geliyordu.

1989 yılında, Avrupa Parçacık Fiziği [Atom] Laboratuvarı CERN uzmanlarından Tim Berners-Lee, laboratuvar yönetimini ortak bir yazı biçimlendirme sistemine ikna edebilmek için, Enformason Yönetimi: Bir Öneri başlıklı bir rapor hazırladı. Bu raporda, daha sonra bugünkü Internetin temeli olacak bilgisayar şebekeleri arası ağda bilgi alış verişi için Hypertextin ortak yöntem olmasını önerdi. Ve bu öneri bugün dördüncü sürümüne ulaşmış olan HTML dilinin temeli oldu.

Bugünkü Interneti Internet yapan iki unsur var. Birincisi bilgisayar arası iletişimi gerçek zamanlı olmaktan çıkartan bağlantı protokolünün (HTTP) geliştirilmesi; diğeri ise HTML dilinin ortak dil olarak benimsenmesini mümkün kılacak basitlikte olmasına karşın, bir metnin biçimlendirilmesi ve resim, ses, video gibi diğer unsurlarla bütünleştirilmesini sağlayabilecek yeterlikte olması. Bunu biraz açalım:

Bugünkü Internetin temeli olan üniversiteler ve araştırma kurumlarının bilgisayar ağlarını birbirine bağlayan ağlar 1980lerin başlarında bağlantının gerçek zamanlı olmasını gerektiriyordu. Internetin adı da ağlar-arası ağ anlamına gelen İngilizce Inter-networks-network: Inter-net kısaltmasından doğuyor. Bir bilimadamı bir başka bilimadamının bilgisayarının bulunduğu ağa bağlandığı zaman, bu bağlantı, gerekli dosyanın bir bilgisayardan diğerine aktarılması süresince devam etmek zorunda idi. İki bilgisayar aralarında gidip-gelen bilginin hata kontrolünü ancak gerçek-zamanlı bağlantı olursa yapabiliyorlardı. HTTP (Hypertext Transmission Protocol-Hypertext Iletim Kuralları) ise iki bilgisayarın alış-verişin hatasız olduğunu denetlemek için, bilginin tümü alınıp-verilinceye kadar birbirine bağlı kalmaları zorunluğunu ortadan kaldırıyor. Bu zorunluğun ortadan kalkmasının önerimini bir örnekle anlatalım. Otomobille bir yerden diğerine gideceksiniz. Takip edeceğiniz yolda inşaat var, ve yol kapalı. Yolun kapalı kesimini atlamanız için gerekli servis yolunu da yok. Bu durumda yolculuğunuz ilk engelde sona ermiş demektir. Oysa daha dolambaçlı da olsa bir servis yolu olsaydı, yolunuza devam edebilirdiniz. Sözünü ettiğimiz kurallar demetini size sürekli bir servis yolu sağlamayı öngörüyor ve bu yolun hem gidişte, hem de gelişte izlenecek levhaları gibi, kıtalar arası telefon bağlantılarının kesilmesi halinde, bilgisayarlararası iletişimin devamını sağlıyor.

HTTPnin resmen standart olarak tanınması, 1990 yılında World Wide Web Konsorsiyomunun (W3C) kurulmasıyla mümkün olduğu için, bugünkü Internetin de doğum tarihi 1990 yılı sayılabilir. Doğumundan bu güne 10 yıl bile geçmemiş olduğu halde, Internetin hem HTTP, hem de HTML ilkeleri ihtiyaca yetmemeye başladı.

W3C, şu anda HTTPNG (Gelecek Kuşak) adını verdiği, standart üzerinde çalışıyor. Bu yeni kurallar demeti, HTTPnin özellikle ses ve video gibi henüz ortak standarta kavuşturulmamış çoklu-ortam malzemelerinin alınıp-verilmesini kolaylaştırmayı öngörüyor. HTMlin önceden tanımlanmış komutlarını, Internet sayfası hazırlayanların kendi ihtiyaçlarına göre değiştirmesi sağlayan olan XML (Extensible Markup Language-Genişletilebilir İşaretleme Dili) ise bugün-yarın Netscape ve IE tarafından kabul edilir hale gelecek. Bu arada duragan bilgi kümesi alıp-verebilen HTMLe, dinamik-değişken özellikler kazandırmayı öngören ekler ortaya DHTML ilkelerini çıkarttı. Ne var ki DHTML diye adlandırıbalicek ortak bir standart olmaması, bunun, hiç değilse şimdilik, Internet ile bağlantı sağlayan programların sürümüne göre değişik anlamlar taşıması, Internet alanları için veri hazırlayanların (Web sayfası yapanların) çektiği sıkıntıyı artırıyor. XML ise ortak bir dinamik Web sayfası standardı getirmekten çok, ihtiyaca göre değiştirilebilir HTML oluşturmayı öngörüyor.

HTMLin belki Internetteki pabucu tümüyle olmasa bile kısmen dama atılabilir. Ama firmaların kendi yerel ağ ortamlarında haberleşme ve bilgi alış-verişinde giderek daha sık uygulamaya başladıkları Intranet, Web gibi, giderek daha geniş kitlelerin ilgisini çekebilmesi için televizyon özelliklerine sahip olmak zorunda değil; HTMLin bugünkü haliyle izin verdiği çoklu-ortam uygulamaları, herhangi bir firmanın en ilgi çekici ve en etkili tarzda iç-iletişim yapmasına yeter. Başka bir deyişle, HTML, Internette ve intranetlerde daha uzun süre yaşayacaktır.

Biz bu kitapçıkta daha çok Internet ve Internette yer alan sanal ortamlardan biri olan World Wide Web (Dünya Çapında Ağ) ortamından söz edeceğiz. Ancak bir çok yerde Internet sözünü kaldırıp, yerine intranet kelimesini koyarsanız, o bilgilerin Web kadar, bir firmanın yerel ağında oluşturacağı dahilî internete de uygulanabilir olduğunu göreceksiniz.

Klasik HTMLin temel ilkelerini biraraya getirmeyi öngören bu kitapçık, bugün olduğu gibi, ilerde de, Internet için olduğu kadar intranet için de Web sayfası hazırlamak isteyenlerin başvurabileceği bir kaynak olmak üzere kaleme alındı. Bu kitapçığın Internet protokolleri (iletim kuralları) ve Web tasarım ilkelerine ayrılan ilk iki bölümü, konuya aşina olmayanların temel bilgileri edinmeleri, konuya yabancı olmayanların ise bir çok yerde parça-parça duyduklarını bir arada görerek, bilgilerini tazelemelerini amaçlıyor. Daha sonraki bölümler ise ilerde, HTML kullanarak Web tasarımı yaptığınız zaman, örneğin bir komutun, bir etiketin kolay hatırlanmayan yüklemlyerini (parametrelerini) hatırlamak üzere başvurabileceğiniz bir rehber niteliğinde.

Konuya aşina olanların tümüyle atlayabilecekleri birinci bölümde, WWW, HTTP, TCP/IP ve HTML kısaltmalarının anlamını ve ne işe yaradığını en az birer paragrafta anlatabilecek kadar bu konunun içinde olmayanların yararlanabilecekleri bilgiler yer alıyor. Bir Web alanında, ya da daha teknik terimle HTML sayfasında, başlıca unsur metin olduğu için, kitapçığımızın ikinci bölümünü, HTML kodunun ana araçlarını tanıttıktan sonra metin girme ve metni biçimlendirme konusuna ayırdık. Ancak HTMLin metinle ilgili araçları, görsel açıdan etkili ve bir iskeleti olan sayfa inşasına izin vermediği için, bir anlamda metin sunma araçları olan tablo, çerçeve ve katman unsurlarından sayfa iskeleti oluşturmak için yararlanmak zorunda kalıyoruz. Bu üç unsura, üçüncü bölümde ayrıntılı olarak yer veriyoruz. Bu noktaya kadar değinmediğimiz fakat bugünkü Interneti Internet yapan unsura, yani bir sayfadan diğerine, bir grafikten bir diğerine, bir kelimeden bir başka paragrafa, kısaca bir bağlantı noktasını tıklayarak, dünyanın öbür ucuna gitme imkanı veren bağlantı konusunu dördüncü bölümde ele alacağız. Bu noktada, duragan yani bağlantıları konulmuş ama kendiliğinden hiç bir şey yapmayan bir Web alanı oluşturmayı öğrenmiş olacaksınız. Fakat günümüzde Web alanları, ziyaretçinin kullandığı tarayıcının türünü ve hatta sürümünü belirleyip, ona göre içerik sunan, ziyaretçinin önceki ziyaretinde neler yaptığı, hangi sayfalarla ilgilendiğini hatırlayıp, bu kez ona uygun bağlantılar veren dinamik alanlar haline geldi. Bunu sağlayan Dinamik HTML (DHTML), beşinci bölümün konusunu oluşturacak. Altıncı bölüm ise, belli başlı HTML kodlarının (etiketlerin) tanımları, kullanıldığı yerler, alabilecekleri yüklemler (parametreler) ve örneklerine yer verdiğimiz Başvuru bölümü olacaktır.

HTMLe hayat veren, kişisel bilgisayarları Internete ve intranetlere bağlayan tarama programlarının bu dili nasıl ve ne ölçüde yorumladıklarıdır. Şu anda dördüncü sürümü yavaş yavaş uygulama bulan bir formüller topluluğu, gelişen bir organizma gibi. Bir süre sonra bu kitapçıkta yer almayan HTML etiketleri karşınıza çıkabilir, ve Web tasarımcısı olarak bu yeni komutları, kullanıldıkları yerleri ve işlevlerini, bu kitaptaki bilgilere eklemek zorunda kalabilirsiniz.

Hayat, zaten, baştan sona bir öğrenme süreci değil mi?

Dil Deyince:

HTML kısaltmasını bile Türkçeye çevirmediğimize bakarak, bu kitapçığın yarı İngilizce olduğunu düşünebilirsiniz. Fakat bu kitapçık bir dilin, geçmişi ile geleceği ile, bilim ve kültürün her alanında ifade imkanına sahip olması gerektiği inancıyla kaleme alındı. Türkçeye bu imkan, başka dillerden alınan kavramların öncelikle Türkçe ifade edilmesi ile kazandırılabilir. Bunu yaparken, bazı kelimelere yeni anlamlar yükleyerek görev alanlarını biraz uzatmak ve bunu önce ilgili topluluğun, sonra tüm toplumun onayına sunup beklemek gerekir. Ama Türkçenin kendi türetme kurallarını hiçe sayarak, ilgisiz fiillere hiç olmayacak ekler ekleyip, ortaya yeni isimler çıkartmak asla kabul edilebilir bir uygulama olamaz. Anlamını karşılayamadığımız, ya da mevcut kelimeleri biraz çekiştirerek uyduramadığımız İngilizce kelimeleri çevirmek için yeni kelime uydurmadık, öylece kullandık ve açıklamaya çalıştık. Elbette dil ve toplum bu kavramları karşılayacak kelimeler üzerinde anlaşacaktır.

Bölüm I: Webe Giriş
Temel Bilgiler
Bu bölümde, HTML ile neler yapılabileceği ve neler yapılamayacağına bakacağız. Yine bu bölümde, tasarlayacağınız Web alanlarının, sizin (ya da sayfalarınıza ev sahipliği yapacak firmanın) bilgisayarlarından, ziyaretçinin bilgisayarına ulaştırılma yollarına değineceğiz. Sonuç itibariyle, Web alanı tasarlayan kişi, bu ulaşımın ucunda, ortasında ve sonunda da yer alan programlara, onların imkan ve sınırlamalarına bağımlı demektir. HTMLi kullanarak Web sayfası tasarlayacak kişinin bunu bir şekilde başkalarının hizmetine sunacağı varsayılır. Bu nedenle, HTML öğrenen kişinin sonunda bir Web alanına sahip olacağını düşünebiliriz. Dolayısıyla bu bölümde, kısaca, Web hizmeti sunmakta kullanılacak bilgisayarların sahip olmaları gereken donanım ve yazılım özelliklerinden de kısaca söz edeceğiz. Web Servera koyacağınız HTML sayfaları ne kadar fiyakalı olsa da, HTMLin imkan ve yetenekleri, onu alan ve yorumlayan tarayıcı (browser) programının yetenekleri ile sınırlıdır. Bu nedenle Web tasarımcının, tarayıcı programları çok iyi tanıması gerekir. Bir tarayıcıda adeta televizyon filmi gibi gösterilebilen bir unsurun yerini, başka bir tarayıcıda gri zeminli boş bir kutu alabilir. Ya da aynı tarayıcıya sahip olan iki ziyaretçiden biri, sayfanıza girdiği anda en sıcak ve candan sesli hoşgeldiniz mesajınızı dinlerken, diğeri hiç bir şey duymayabilir. Tarayıcılar kadar, tarayıcıların özelleştirme yeteneklerini tanımak ve kullanıcıların genellikle ne gibi özelleştirmeler yapabildikleri hakkında fikriniz olması gerekir. Bu nedenle, bu bölümün sonunda mevcut en yaygın tarayıcıların ortak ve farklı önemli özelliklerine de bakacağız.

HTMLe Genel Bakış
Programlama dili gibi görülse de, görülmese de, bugün Internetin de intranetlerin de ortak dili, HTMLdir. Bir Web sayfasında yer alan belgenin içindeki bazı kelimeler, simgeler, fotoğraflar, grafik unsurlar veya bunların parçaları bir başka sayfa ile hiper-link kurularak, ilentilendirilmiştir. Kullanıcı, hiç bir komut öğrenmek zorunda kalmadan, hiç bir bağlantının Internetteki adresini bilmek zorunluğu olmadan bu sayfalardaki bağlantıları tıklayarak, yazıdan yazıya, şekilden şekilde, gidebilir. Ta ki, arzu ettiği bilgiyi bulup, okuyuncaya, kendi diskine veya disketine kopya edinceye veya yazıcısında basıncaya kadar. Aslında kullanıcı ya da ziyaretçinin bir HTML sayfasıyla ilişkisi burada da bitmemektedir. Çoğumuz ulaştığımız bir alanın adresini Web tarayıcı programında sık sık ziyaret etmek istediği yerlerin arasına koyabilir (bookmark) ve arzu ettiği zaman doğruca işaretlenmiş olan bu adreslere gidebilir.

HTMLin başlıca özelliklerini şöyle sıralayabiliriz:

1. Belge biçimlendirme: HTML, Wes tasarımcısına, belgelerini ziyaretçinin ekranında nasıl oluşmasını istiyorsa öyle şekillendirme imkanı verir. Bununla birlikte tarayıcı programlarının (Netscape Navigator veya Internet Explorer) HTML komutlarını yorumlayışlarında az da olsa fark vardır ve bu fark sayfalarınızın bir ziyaretçinin bilgisayarında başta, diğerinin bilgisayarında başka gösterilmesine yol açabilir. Ayrıca ziyaretçileriniz, tarayıcı programlara verdikleri komutlarla, aldıkları sayfalarda genel değişiklik veya kısıtlamalar yapabilirler. Siz sayfanızda ne tür harf türü (font) kullanmış olursanız olun, ziyaretçiniz tarayıcı programa Sadece Times fontları kullan demiş ise, sayfanız bu ziyaretçinin ekranında sizin istediğinizden farklı biçimde görülecektir. Ziyaretçi tarayıcı programına Grafik unsurları gösterme! demiş ise, sayfalarınız ve tabiî vermek istediğiniz görsel mesaj tamamen farklı bir nitelik kazanacaktır. Bu duruma rağmen, bugünkü şekliyle HTML, Web tasarımcısına adeta bir gazete ya da dergi sayfası tasarlarcasına, oluşturmak istediği görsel etkiyi sağlamasına yeterli tasarım araçları sunmaktadır.

2. Bugünkü imkanlarıyla HTML, Web sayfası terimine yeni bir anlam kazandırmış bulunuyor. Web sayfası terimi bile, eski, yani dört-beş yıl öncesinin Web sayfaları, içi bir örnek harflerden oluşan yazılarla dolu, duragan belgelerden ibaret bulunduğu için ortaya atılmıştı. Bugünkükü Web sayfalarının sayfa kavramı ile dahi ilgisi kalmadı. Bugün sadece HTML ögeleri kullanılarak, ziyaretçinin ekranında adeta bir televizyon programının grafik etkisini sağlamak mümkün. Bununla birlikte HTML, bir kelime işlem ya da masaüstü yayıncılık programının oluşturabileceği görsel özelliklere sahip sayfalar oluşturamaz. Bu kısıtlamalara, Interneti tasarlayan uzmanların, platformlar (Windows 3.x, Windows 95/98, Windows NT, Unix, MacOS), donanımlar (Macintosh, PC, Sun) ve tarayıcı programlar arasındaki farkların, sunulacak malzemenin tasarımcının kastettiğinden tamamen farklı bir şekilde sunulmasına yol açmasını önleme arzusu neden oluyor. HTML, örneğin bir masaüstü yayın programı kadar hassas ölçmelere ve biçimlendirmelere izin verse idi, bu ancak belirli bir platformda, belirli bir program kullanmayı gerektirirdi. Oysa Interneti Internet yapan unsurların başında, hemen herşeyin ekranda ve kağıt üzerinde, ortak denilebilecek şekilde oluşturulması geliyor.

3. HTML ile oluşturulacak statik alanların içine dinamik sonuçlar doğuracak programlar konulabilir. Bu programların oluşturulması için, ziyaretçinin Interne PC veya Macintosh ile bağlanmış olması, ya da bağlantı programının şu ya da bu firmaya ait bulunması gibi farklılıklardan etkilenmeyen, her türlü ortamda aynı sonucu veren ortak bir dil geliştirme çabası, ortaya Java adlı programlama dilini çıkartmış bulunuyor. Microsoftun Visual Basic programlama dilinin bir türevi olan VBScript ve çeşitli firmaların ortaklaşa ürünü Javascript de bu tür çabaların sonuçlarıdır. Adı benzemekle birlikte, Javascriptin Java ile, VBScriptin de Visual Basic ile ilgileri yoktur. Internet tarayıcı programlarından Internet Explorer hem Javascript, hem de VBScript dillerini anlayabilir ve yorumlayabilir. Buna karşılık Netscape tarayıcı programı VBScript diliyle yazılmış bölümler içeren bir HTML metnini yorumlayarak, ekrana getiremez. Bugünkü şekliyle Java dili de, Javascript ve VBScript de, tarayıcı programların imkan ve kabiliyetleri ile sınırlıdır. Ancak her üç dili kullanarak, HTML sayfalarını duraganlıktan çıkartmak ve ziyaretçi ile etkileşen, ziyaretçinin arzu, beğeni ve özelliklerine göre içeriğini değiştirebilen Web alanları tasarlamak mümkündür

HTTP ve TCP/IP
Web sayfası tasarlarken, dikkat edeceğiniz en önemli unsur, sayfalarınızın içeriğinin sunuluş biçiminin önemli ölçüde ziyaretçinin bilgisayarının türü (Mac, PC, Sun), ziyaretçinin işletme sistemi (Windows 3.x, 95/98, NT, MacOS, Unix) ve kullandığı tarayıcı yazılımı (IE, Netscape, Mosaic, vs.) tarafından belirleneceği olmalıdır.

Bir Web sayfasının ziyaretçinin ekranına kadar katettiği yolda çeşitli protokoller (kurallar) var. Bunların başında bir bilgisayar ağı olan Internetin iletim kuralları (HTTP) geliyor. Hypertext dosyalarını olduğu kadar çoklu ortam unsurlarını (ses, video ve diğer grafik ögelerden oluşan Multimedia dosyalarını) ve bilgisayar programlarını ağ içindeki bilgisayarlar arasında alıp-vermeye yarayan başka protokoller de vardır: FTP (File Transfer Protocol-Dosya Aktarma Kuralları) bunlardan biridir.

Internet bağlantısı, bir telin iki ucunda bulunan iki bilgisayar arasındaki ilişki olarak görebilirsiniz. Sizin Web sayfalarınızın durduğu bilgisayar Web ilişkisinde Server (Hizmet eden) diye adlandırılır. Ziyaretçinin Internete telefon bağlantısı ile bağlı bilgisayarı, ise sizin için Client-Müşteri sayılır. Hizmet veren bilgisayarla, bu hizmetin müşterisi olan bilgisayar (Server ile Client) arasındaki ilişkiyi düzenleyen kurallara TCP/IP adı verilir (Transmission Control Protocol/Internet Protocol-İletim Denetim Kuralları/Internet Kuralları). Gerek HTTP, gerekse FTP, müşterinin, sizin bilgisayarınızdan, yani Web Server olarak adlandırdığımız HTML sayfaların ve bu sayfaların içinde yer alan resimlerin, grafiklerin, ses ve video dosyalarının durduğu bilgisayardan bilgi isteme ve bu istediğine karşılık verildiğinde verilen karşılığın doğru gelip gelmediğini anlamasını sağlar. İki bilgisayarın üzerinde anlaştıkları bir tür konuşma adabı diyebileceğimiz bu kurallara uygun mesajlarını, kıtadan kıtaya, ülkeden ülkeye, kentten kente, yeraltı ve sualtı kabloları ile, uydularla iletirler. Tahmin edilebileceği gibi, müşteri bilgisayar ile servis sunan Web Server arasında oluşan bu bağlantı, bazen kesilebilir. Fizikî bağlantının kesilmesi, iletimin kesilmesi anlamına gelmemesi için, Internet Kurallarının IP bölümü, iki bilgisayar arasındaki bağlantının doğru kanallardan kurulmasını, kesildiğinde yeniden kurulmasını sağlar. Bunu yaparken, evrensel bir adres sisteminden yararlanır. Internette servis sunan bilgisayarlar, başka bir deyişle Web Serverlar kaynak sayıldığı için, IP, aradığı kaynağı Universal Resource Locator (URL) sistemini kullanarak bulur. Aynı kurallar demetinin TCP bölümü ise kurulan bağlantı sayesinde gelen bilginin doğru anlaşılmasını sağlar.

Aslında her bilgisayar, CPU ile ekran, CPU ile klavye, CPU ile CD-ROM sürücü arasında bir ağ demektir. Bir büro ortamında bir bilgisayar ile merkezdeki Server, bir ağın parçalarıdır. Bu ağların Internet denen dev ağdan farkı, sizin bilgisayarın CPUsu ile klavyesi, ekranı ve yazıcısı arasındaki bağ, yine bir büro ortamındaki bilgisayar ile merkez bilgisayar arasındaki ilişki, sabit durum ilişkisidir. Yani, bu ağlarda iki taraf birbirinin durumuna her an vakıftır; birbirlerinin ne durumda olduklarını her an bilirler. Oysa, iki kıta arasında kurulmuş bir Internet ilişkisinde, müşteri hizmet verenin, hizmet veren müşterinin durumunu, bağlantıdaki kesilmeler nedeniyle, bilemeyebilir. Bu nedenle TCP/IP, durumun bilinmediği ilişki esasına dayanır. Müşteri bilgisayar, servis sunucudan istediğini HTTP veya FTP kurallarına göre talep eder. Bunun için Web Serverın kendisini bulup, bu talebi doğruca ona iletmesine gerek yoktur; bu talebini kendisine Internet bağlantısı sağlayan (ISP) firmanın bilgisayarına iletmesi yeterlidir. Bunu yaparken talep ettiği şeyin adını-sanını bildirdiği gibi bulunacağı kaynağı belirlemek için gerekli, adresi de (URL) bildirmek zorundadır. Internet hizmeti sağlayan firmanın bilgisayarı, bu talebi ve talebi karşılayacak kaynağın adresini, Internetin omurgası olarak adlandırılan ana bağlantıyı kuran bakımını yapan ve ISPlere hizmet sunan firmanın bilgisayarına iletir. Ana omurga firmasının bilgisayarlarında dünyadaki tüm Internet kaynaklarının listesi ve onlara ulaşmak için hangi omurgadan kime yol açılması gerektiğini gösteren bir liste bulunur. Ana omurga şirketinin bilgisayarı bu listeye göre, müşterinin talebini diğer bir ana omurga firmasına, o firma da bunu hedef Web Servera ev sahipliği yapan (host) bilgisayara iletir. Bu talep, hedef Web Servera talebin konusu ve talep edenin adresi ile birlikte bildirilir. Sizin müşteri olarak o sırada sadece kendi Internet hizmet sunucunuzla bağlantınız sürmektedir; yoksa sizin bilgisayarla hedef Web Server arasında doğrudan, bire-bir ilişki yoktur. Hedef Web Server, müşteri olarak sizin kim olduğunu ve size nasıl ulaşabileceğini, ancak kendisine gelen talebin altındaki adresten bilmektedir. Web Server, sizin o anda kendi Internet Hizmet Sunucunuzla arasındaki bağlantının devam edip etmediği ile hiç mi hiç ilgilenmez. Onun için önemli olan kendisine iletilen talebin karşılığını, talebin altındaki adrese iletmekten ibarettir. Aynı yol bu kez tersine katedilir; arzu ettiğiniz bilgi (sayfa, belge, video, ses, resim, fotoğraf, vs.) sizin ekranınıza ulaşır. Kısaca, ne talep sahibi müşteri bilgisayar, ne talebi karşılayan Server bilgisayar, bir diğerinin o anda nerede ve ne durumda olduğu ile ilgilenmez. Bu durumdan haberdar olmama hali ve etkilerine, ilerde Internette ticaret bahsinde geri döneceğiz.

Web Server
HTTP ve FTP, müşteri bilgisayarla, servis sunan bilgisayarın üzerinde anlaştıkları bir dille (HTML) birbirine ilettikleri talep ve talebin karşılığı olan malzemenin alınıp verilmesinde TCP/IP denilen kurallardan yararlanılarak yapılan iletimi düzenleyen ilkelerdir. Bu ilkelere uygun olarak çıkartılan bir talep Web hizmeti sunan bilgisayar tarafından karşılanır ve karşılık olarak belirli bir bilgi kümesi müşteri bilgisayara iletilir.

Web server olarak tayin edilmiş bilgisayarda, kendisine gelecek HTTP ve FTP taleplerini anlamasına ve bu talepleri yerine getirmesine yarayan programlar (örneğin Apache Web Server, MS Internet Information Server veya Netscape Web Server) sürekli çalışır vaziyette olur. Bu programların, bilgi alıp-vermenin yanı sıra, elektronik posta alıp verme ve yönlendirme, veritabanlarına erişme ve içinden seçme yapma (Querry, SQL, vb. gibi), kendi sabit diskinde duran bir dosyayı alıp karşı tarafa aktarma (FTP, Gopher, WAIS) veya karşı tarafın vereceği dosyayı alıp kendi sabit diskine kaydetme yeteneği olur.

İlk Web Server programı, yukarıda, HTML dilinin geliştirilmesindeki öncü konumu nedeniyle sözünü ettiğimiz, İsviçredeki CERN kurumu tarafından geliştirildi; ama kısa zamanda UNIX platformunda, anonim bir tarzda ve ücret ödemeden kullanılabilen bir şekil aldı. NCSA Server, National Center for Supercomputing Applications-Superbilgiişlem Uygulamaları Ulusal Merkezi adlı, şimdi kapanmış olan kurum tarafından UNIX işletme sistemi için geliştirilmişti. NCSA Serverın geliştirilmiş şekli olan Apache Server ise uzun süre ücretsiz dağıtıldıktan sonra günümüzde ticarî olarak geliştiriliyor ve satılıyor. Bugün halâ NCSA Server veya Apachenin ücretsiz sürümlerine dayalı Web alanları bulunmakla birlikte, Sun Solaris, IBM AIX ve diğer UNIX sistemleri için geliştirilmiş çok sayıda Web Server hizmete girmiş durumda. Kişisel bilgisayarların UNIX gerektiren bilgisayarlara oranla daha ucuz olması, Microsoftun NT, IBMin OS/2 işletme sistemlerinin UNIXe ciddî rakip haline gelmiş bulunmaları nedeniyle, bu sistemlere dayalı Web Server programları da hızla artıyor. Apache Web Serverın bile NT sürümü piyasaya çıktı.

NT Workstation ve Windows 95/98, aslında Kişisel Web Server adı verilen, Internete 24 saat bağlı olmadan, başka bir firmanın ev sahipliği yaptığı Web alanlarına hizmet sağlayabilir. Hatta NT Workstation, aynı anda 10u geçmemek üzere, 24 saat süreyle ınternete bağlanabilecek ve müşteri taleplerini karşılayabilecek yetenektedir. Aynı anda daha fazla Internet bağlantısını kaldırmak istiyorsanız, NTnin Server sürümünü edinmeniz gerekli. IBMin OS/2 işletim sistemi ise, Internet Connection Server adlı paket kurulduğu zaman, bir PCnin fiziksel olarak kaldırabileceği kadar Internet bağlantısına cevap vermesini sağlamaktadır. Macintosh bilgisayarları için Starnine firmasının MacHTTPd programı gibi, ücretsiz edinilebilecek http4Mac ve EasyServe adlı programlarla, Internet servisi sağlamak mümkün.

Ayrıca, bugün Plerde de UNIX işletme sistemi kurmak hem kolay, hem ucuz hale gelmiş bulunuyor. Solaris, BSDI, Esix, SCO UNIX bu alandaki ticarî programlar. Ayrıca Linux ve FreeBSD adlı, ücretsiz dağıtılan UNIX işletme sistemleri de, ticarî olanları aratmayacak niteliklere sahip. Ayrıca bu tür ücretsiz programlar, Apache Web Serverın ücretsiz sürümünü de içeriyorlar.

Bir PC ile Web Server hizmeti yapacaksanız, önünüzdeki bir çok seçeneğe rağmen, başarınızın PCnin gerçekten sabit disk alanı ve belleği bol olmasına bağlı bulunduğunu hatırlamalısınız. PClerin, Internetin gerektirdiği en önemli özellik olan aynı anda birden çok iş yapabilme becerisi, işletim sistemi kadar, donanım kaynaklarının genişliğine bağlı olduğunu unutmamalısınız.

Bir Web Server yazılım paketi seçerken dikkat edilmesi gereken bir kaç ilkeyi sıralayalım:

1. Yazılım paketi yeterli güvenliği sağlayacak özelliklere sahip olmalıdır. Binalarda bir odadaki yangının yandaki odaya sıçramasını önleyen ateşe dayanıklı duvarlardan (Firewall) esinlenerek adlandırılan bir dizi program, Web Server yazılımının bulunduğu bilgisayarın, kötü niyetli kişiler tarafından bozulmasına engel oluyor. Ancak Web Serverın kendi içinde mevcut güvenlik önlemlerinin neler olduğunu dikkatle araştırmanız gerekir. UNIX işletme sistemi ve ona bağlı çalışan Web Server programlarının daha güvenli olduğuna ilişkin, kimi zaman Web tasarımcısını ve Internet hizmet sunucusunu rahatlatan, yaygın bir söylenti vardır. Bu doğru değil. Ne türü olursa olsun, UNIX de bir işletme sistemidir ve el elden üstündür. Kötü niyetli bir kişi Windows NT sistemine verebileceği zararı, aynı rahatlıkla UNIXe de verebilir. Bir diğer yaygın ve aynı ölçüde yanlış inanç ise NTnin güvenli olmadığıdır. Microsoft firmasının NTnin 4ncü sürümünü güncelleştirmek için dağıttığı SP3 adlı tamir programının yerleştirilmesinden sonra, NT sistemleri güvenlik açısından herhangi bir başka işletme sistemiyle boy ölçüşebilir hale geldi. Burada önemli olan, Internete açılmanın, iyi niyetli-kötü niyetli herkese açılmak olduğunu unutmamaktır. Özellikle form denilen, HTMLin ziyaretçi bilgisayarın evsahibi bilgisayara talepten başka şeyler göndermesine imkan veren etiketlerini ve ona bağlı CGI (Common Gateway Interface-Ortak Geçit Arabirimi) adı verilen ziyaretçinin ev sahibi bilgisayardaki programları harekete geçirebildiği buluşma noktasında yer alacak programları tasarlarken, daima kötüniyetli kişileri dikkate alarak hareket etmek gerekir. Internette güvenliğin ne kadar kolay sarsılabildiğine ve ne kadar kolay önlem alınabileceğini bir örnek verelim. Sayfanızda, ziyaretçinin doldurması gereken Elektronik Posta Adresiniz: diye bir metin kutusu bulunduğunu düşünün. Bu kutuya bütün ziyaretçilerin elektronik posta adreslerini yazacaklarını düşünüyor ve bu bilgiyi işleyecek CGI programında, ziyaretçinin bu kutuya yazacağı bilgiyi, alıp doğruca Web Serverın Mail programına veriyorsunuz. Peki, ya kullanıcı adres yerine herkimse@herneredeyse.com; mail haydut@soygun.com<) ve büyüktür (>) dediğimiz iki işaretin arasına alırız. Bu işaretlere, kimi İngilizce kaynaklardan doğrudan çevirerek köşeli parantez dendiğine de tanık oluyoruz. Oysa köşeli parantez adını [ ve ] işaretleri için kullanmak daha doğrudur. Sadece Web tarayıcınız değil, HTML dilini anlayan her program, bu işaretlerin arasındaki kelime veya kelimelerin ekranda gösterilmek üzere değil, gereği icra edilmek üzere verildiğini anlayacaktır. HTMLi geliştiren uzmanların etiket olarak üzerinde anlaştıkları kelimelerin büyük harfle veya küçük harfle yazılması arasında fark yoktur. Bir etiket kelimeyi büyük harfle de yazsanız, küçük harfle de yazsanız, hatta büyük harflerle küçük harfleri gelişi-güzel bile kullansanız, tarayıcı tarafından anlaşılacaktır. Bir başka deyişle, tarayıcı için OKU ile Oku, oKu, oku ve oku aynı emirlerdir.

Bir kaç istisnası dışında, bütün HTML etiketlerinin kapsadığı alanın bittiği aynı kelimenin önüne bölü işareti (/) konularak oluşturulan ikinci etiketle belirtilir. Yani, diyelim ki komutuyla başlattığınız işi, komutuyla bitirirsiniz.

/////////////////////////NOT////////////////////

Büyük Harf, Küçük Harf?

Oluşturacağınız Web sayfaları, ilerde bu görevi devralacak başkaları tarafından düzeltilebilir, değiştirilebilir, kısmen kullanılabilir. İyi bir mimarın planlarının başka bütün mimarlar tarafından hiç tereddütsüz anlaşılabileceği gibi, sizin sayfalarınızın da başka Web alan yöneticileri ya da sayfa tasarımcıları tarafından kolaylıkla okunabilmesi şarttır. Nasıl bir yöntem izlerseniz izleyin; ama bir alanda yer alan bütün sayfalarınızda aynı yöntemi izleyin: kodlarınız ya tümüyle büyük harf olsun, ya da tümüyle küçük harf. HTML tarayıcıların okuduğu ama gereğini yerine getirmediği yorum/açıklama tarzındaki etiketleri kullanarak, sayfalarınızın bölümlerinin insan gözüyle okunulup anlaşılabilmesini sağlayın.

/////////////////////////////////////////////////////////

HTML Dosyasının Bölümleri
HTML dosyasının bir tarayıcı tarafından tanınması, yorumlanması ve gereğinin ekranda yapılabilmesi için, belgenin bir HTML belgesi olduğunun bildirilmesi şarttır. Bu bildirimi dosyanın tümünün etiketi anlamına gelen etiketi, bir HTML belgesinin ilk kelimesi olarak yazılır. Tarayıcıya, HTML dosyasının bittiği de etiketiyle bildirilir.

/////////////////////////////////////////NOT//////////

Açtığınızı Kapatmayı Unutmamak İçin

İyi bir tasarımcı olarak, HTML belgesini oluştururken, yazdığınız her etiketi bitiş etiketi ile birlikte yazın: gibi. Sonra, iki etiketin arasına ilgili komutları ya da metinleri koyun.

//////////////////////////////////////////////////////////// //

HTML belgesi, iki bölüme ayrılır: Baş taraf (başlangıç) () ve gövde () bölümleri. Web tarayıcılar, bir belgeyi sizin arzu ettiğiniz tarzda yorumlayabilmek için, HTML etiketini gördükten sonra derhal HEAD ve BODY etiketlerini arar ve ekrandaki sayfayı buna göre biçimlendirirler. Sayfanın baş tarafısayfanın en üstünde, örneğin bir gazetenin başlığı gibi gösterilen bir metin olmayıp, ilerde ele alacağımız belge hakkında genel bilgileri kapsayan bölümdür. Burada yer alabilecek genel etiketleri (meta tag) ayrıntıları ile inceleyinceye ve ne işe yaradıklarını görünceye kadar, şimdilik örnek sayfalarımızda baş tarafı başlatan ve bitiren etiketleri koyup, aralarına, HTML sayfalarının İngilizce metinlerden oluştuğunu varsayan tarayıcıya, sayfamızın Türkçe olduğunu bildirmek içinşimdilik anlamının üzerinde durmadanbir genel etiket koyacağız. Şimdi herhangi bir kelime işlemcisinde, örneğin Windows ortamında Not Defterinde, Macintoshta SimpleTextte şu örneği aynen yazın ve dosyayı düz yazı dosyası olarak kaydedin.

Web Tasarım Rehberine Hoş Geldiniz!

Gördüğünüz gibi ilk HTML sayfamız, tarayıcıya bu dosyanın bir HTML dosyası olduğu beyanıyla başlıyor. İlerde anlamını öğrenmek üzere baş taraf etiketlerinin arasına sayfamızın Türkçe olduğunu belirten genel etiketi koyuyoruz; ve gövde bölümünde, ziyaretçilerimize hoşgeldiniz, diyoruz. Bu dosyayı, örneğin hosgeld.htm adıyla kaydedin. Kelime işlemcinizi kapatmayın; bir kenarda dursun. Kaydettiğiniz dosyanın simgesini bulunduğu yerde iki kere tıklayın; .htm uzantısı ile bağlantılı tarayıcınız hangisi ise, o açılarak, sayfayı yükleyecektir.

reh004.tif

//////////////////////NOT////////////////////

Open mı, Browse mı?

Internet Explorerın ncü sürümünde programı başlattıktan sonra, Dosya (File) menüsünden Aç (Open) maddesini seçerek, ve açılacak diyalog kutusunda Araştır (Browse) düğmesine basarak oluşturduğunuz dosyayı bulabilirsiniz. Netscape Navigatorda ise yine File (Dosya) menüsünden Open Page (Sayfa Aç) maddesini seçerek, ve gelecek dilayog kutusunda Choose File (Dosya Seç) kutusunu tıklayarak oluşturduğunuz dosyayı arayabilir ve yükleyebilirsiniz. İşini kolaylaştırmak için, .htm ve .html uzantılarını en beğendiğiniz tarayıcı ile ilişkilendirirseniz, herhangi bir HTML dosyasını iki kere (Internet Explorer 4.xün masaüstü unsurlarını koymuş iseniz, bir kere) tıklayınca, tercih ettiğiniz tarayıcı dosyayı otomatik olarak açacaktır.

//////////////////////////////////////////////////////////

İlk HTML sayfanız şimdi karşınızda. HTML etiketleri arasına yazdığınız mesaj ekranda, tarayıcının varsayılan fontu ile ve yine varsayılan büyüklükte, gösteriliyor.

Şimdi, tarayıcının program adının yazılı olduğu üst çerçeveye dikkat edin: F:\hosgeld.htm Microsoft Internet Explorer ya da sadeceNetscape kelimelerini göreceksiniz.

Şimdi, hala açıksa, hosgeld.htm dosyasını yazdığınız kelime işlemcisini ön plana getirin ve üçüncü satıra kelimelerini yazın. Dosyanızın tümü şu şekli almış olacaktır:

Web Tasarım Rehberi

Web Tasarım Rehberine Hoş Geldiniz!

Burada yaptığımız, sayfamıza bir başlık vermekten ibarettir. Title/Başlık etiketi, tarayıcıya, bu etiketin, programın adıyla birlikte, çerçevede gösterilmesi talimatını verecektir.

Şimdi bu sayfayı aynı isimle bir kere daha kaydedin; ve oluşan dosyayı iki kere tıklayın. Açılan tarayıcıya, en üstteki çerçevenin üzerindeki başlığı okuyun:

reh005.tif

Title/Başlık komutu, IEde, dosya adı yerine sayfanıza verdiğiniz Benim Sayfam başlığının tarıyıcı programının adıyla birlikte, programın çerçevesinde gösterilmesini sağladı. Netscape de şimdi program başlığında sadece kendi adını değil, bizim sayfamızın başlığını da göstermektedir. Yani, Title komutu ile, HTML sayfamızın içinde bir iş yapmış olmuyoruz, sadece tarayıcıya, kendi başlık alanında sayfamızı bilgisayar kullanıcısına hangi başlıkla sunmasını istediğimi söylemiş oluyoruz.

////////////////////////////////////////NOT//////////

HTML Editörleri

HTML kodunu kendisi oluşturan ve tasarımcıya görsel araçlar kullanma imkanı veren bir çok program çıktı. Kısaca HTML editörü denen bu programların bir özelliği WYSIWYG imkanına sahip olmalarıdır. İngilizce Ne Görüyorsan, Onu Alırsın kelimelerinin başharflerinden oluşan bu terim, yaptığınız tasarımın ekranda nasıl görülüyorsa aynen o şekilde HTML dosyasına haline dönüştürüleceğini ifade ediyor. Bu tür programların bir özelliği, oluşturduğunuz sayfaya hemen Untitled (Başlıksız) başlığını vermektir. Sayfalarınızı böyle bir program yardımıyla oluşturuyorsanız, ilk işiniz sayfa özellikleri (Page Properties) kutusunu açıp, sayfanın başlığını vermek olmalıdır.

//////////////////////////////////////////////////////////

İlk HTML sayfamızı yazmış ve incelemiş olduk. Bundan sonrası, sayfalarımıza daha çok içerik koymak ve onları biçimlendirmekten ibaret. Bunun için ilk adım olarak Style Sheet (Stil Sayfaları) denilen, tarayıcıya toplu biçimlendirme komutları veren etiketleri inceleyeceğiz.

Web Sayfasının Biçimlendirilmesi
Bir anlamda, HTML etiketlerinin yarısından fazlası metin biçimlerdirme komutlarıdır. Ama bu komutlar, HTML etiketlerini geliştirenlerle, ürettikleri tarayıcı programların bunları nasıl yorumlayacağına karar veren uzmanların belirlediği biçimlerden ibarettir. Örneğin, HTML, temel metin unsuru oharak paragraf (

) ve altı ayrı büyüklükte başlık (Heading) kodu içerir (H1, H2, H3, H4, H5, ve H6). Ne var ki, temel metin harfleri ile başlıkların gerçekten ne kadar büyük olacağına, tarayıcı program karar verir. Bir programda H1, 16 punto olabilir; bir diğerinde 14. Ayrıca kullanıcı, kendi tarayıcısında bazı seçenekleri değiştirmiş, varsayılan metin yazısı ölçüsünü azaltmış ya da arttırmış olabilir. Bu durumda, ölçüsünü göreceli olarak normal paragraf harfi büyüklüğünden alan diğer bütün başlıkların da ölçüsü değişecektir. Bu değişiklik, sizin sayfalarınızın kullanıcının ekranında arzu ettiğiniz görsel etkiyi oluşturacak şekilde canlandırılmasını önleyebilir. Ayrıca HTML etiketlerini benimseyip, kullanmak, tarayıcı programlarını üreten firmalara kalmış bir tutum olduğuna göre, bütün HTML etiketlerinden yazı biçimlendirmede yararlanamayabilirsiniz. Örneğin, metin biçimlendirmede kullanılan bir diğer, alıntıları belirten Q (quotation) etiketidir. Netscape, bu etiketi taşıyan metni sabit genişlikteki fonta çevirirken, Internet Explorer, bu etiketin sonucu olarak metinde hiç bir biçim değişikliği yapmayacaktır.

////////////////////////////////NOT///////////////////////// ///

Harf Genişliği

Eski daktilolarda, kağıdı hareket ettiren mekanizma, her harfin genişliğine göre farklı hareket edemediği için i harfi gibi sadece bir çizgiden olan harf de, içine üç adet i harfi alabilecek olan m harfi de aynı genişlikte bir alana yazılırdı. Zamanla dizgi makinalarının akıllı hale gelmeleri ile, her harf, m harfinin kaçta kaçı kadar bir alan kapladığına bakarak, farklı yere yazılır hale geldi. Harfleri büyüklüklerine göre göreli genişlikte olan fontlarla bütün harfleri aynı genişlikte olan fontların farkı buradan kaynaklanır. Günümüzde, eski daktilo metinlerin sağladığı görsel etkiyi sağlamak üzere, bilgisayar fontları arasında da her harfinin alanı eşit, fontlar var.

/////////////////////////////////////////////////////////

Ne var ki, HTML 4 ile, etkisi duragan ve niteliği bir anlamda kullanıyıca bağlı olan bu etiketleri kullanma yerine, artık her paragrafı, hen cümleyi, hatta her harfi arzu ettiğiniz gibi biçimlendirebilirsiniz. Artık duragan etiketleri de, tarayıcının değil, kendi ettiğiniz biçimde kullanma imkanınız var. Dahası, bir tek dosyada bir tek kelimeyi değiştirerek, yüzlerce sayfadan oluşan bir Internet alanınında söz gelimi bütün başlıkları maviden turuncuya çevirebilir; bütün alıntıları italikten siyah harfe, Timesdan Ariala çevirebilirsiniz.

HTML sayfada metin stili dediğimiz zaman, metnin Internet alanımızı ziyaret eden kişinin bilgisayar ekranında hangi tür harfle (Arial, Times, Verdana, Helvetica, vd.), bu harfin normal türüyle mi, ya da siyah (bold) veya italik tarzıyla mı, hangi büyüklükte (12 punto, 18 punto, 24 punto), ve ne renk gösterileceğini, sayfanın ya da içinde bulunduğu tablo hücresinin sağına mı, soluna mı, ortasına mı bloklanacağını kasdediyoruz. HTML 4de, metin stil unsurları arasında, geri plan rengi gibi, daha başka unsurlar da vardır. Bunları, daha sonra ele alacağız. Şimdi sadece sayfa tasarımında kullanabileceğimiz unsurlardan biri olarak, stillerin HTML sayfasında nasıl yer aldığına bakalım.

HTML 4, üç ayrı stil imkanına sahiptir. Bir paragrafın (paragraf, bir kelime, hatta bir harf bile olabilir), ya da bir paragrafın bir bölümünün stili, hemen önüne konulacak bir stil komutu ile belirlenebilir. Buna in-line (aynı satırda) biçimlendirme komutları denilir. Burada bu tür biçimlendirmeyi biraz ayrıntılı ele alacağız ve bir iki örnekle nasıl kullanıldığına değineceğiz. Diğer iki biçimlendirme yöntemi olan HTML sayfasının başlangıç bölümüne gömülmüş ve gövde bölümünden buraya atıf yapılan Embedded stil etiketleri ile HTML dosyasının tamamen dışında, dosya adı uzantısı .css, içeriği düz yazı dosyası biçiminde olan Cascading Style Sheets (Yığılma Stil Sayfaları) tarzındaki stil olanaklarını Dinamik HTML bölümünde ayrıntılı ele alacağız. Burada kısaca söz etmek gerekirse, Gömülmüş (Embedded) stil bölümü, biraz sonra ayrıntılı olarak ele alacağımız yerel biçimlerdirme kodlarını HTML dosyasının başlangıç bölümüne toplu halde koymaktan ibarettir. Böylece dosyanın gövde bölümünden toplu stil kodlarıyla tanımlanmış etiketleri kullanarak her seferinde yerel biçimlendirme kodları girmekten kurtulmuş oluruz, Ancak bu yöntemi uygulamak için, Internet alanınızdaki her sayfanın baş tarafına bu kodları girmek zorundasınız. Oysa toplu biçimlendirme kodlarınızı ayrı bir düz yazı dosyası halinde saklamanız ve Internet alanınızda yer vereceğiniz bütün sayfaları bu stil dosyası ile bağlantılandırmanız mümkündür. Buna bağlı (linked) stil dosyası denir. Bu yöntem, tasarımcıya bu dosyada yapacağı değişiklikle, bütün sayfalarda değişiklik yapma imkanı verir.

HTML 4ün tanıdığı bu üç stil yöntemini kullanarak Web alanındaki bütün sayfalar baştan sona tutarlı bir görünüme kavuşabilir. Web tasarımcıları, stil belgeleri sayesinde, adeta gazete, dergi ve diğer basılı yayınları hazırlamakta kullanılar masaüstü yayıncılık programlarını kullananlara yakın bir tasarım esnekliği ve kalite düzeyine ulaşmış bulunuyorlar. HTML ile henüz herhangi bir masaüstü yayıncılık programında yapılan bütün tasarım incelikleri uygulanamaz; ama stil belgelerinin dikkatli ve titiz şekilde kullanan ve bu alandaki gelişmeleri takip eden bir tasarımcı, herhangi bir gazete sayfası tasarımcısını bile kıskandıracak sayfalar hazırlayabilir.

Stil etiketlerini yorumlama ve özellikle yukarıda değindiğimiz son iki yöntemin kullanılma açısından bütün tarayıcıların eşit düzeyde olmadığını söylememiz gerekir. Internet Explorerın 4ncü sürümü HTML ün bütün etiketlerini tanırken, Netscapein 4cü sürümü HTML 3.2nin etiketlerinin tümünü, HTML 4ün de bir kısmını tanıyor. Web sayfasını tasarımcısı olarak, tarayıcıların hangi stil etiketlerini tanıdıklarını, hangisini tanımadıklarını izlemeniz ve sayfalarınızın bütün kullanıcıların bilgisayarında hemen hemen aynı tarzda gösterilmesini sağlamak için bunlardan hangisini kullanacağınıza, hangisini kullanmayacağınıza karar vermeniz gerekir. Başvuru bölümünde bazı etiketlerin tarayıcıların hangi sürümü tarafından tanındığına bakabilirsiniz.

Şimdi yerel biçimlendirme yöntemine ayrıntılı olarak bakalım.

Yerel Biçimlendirme
Diyelim ki, Webde sayfa tasarımı konularını bir araya getiren, karşınıza çıktığında beğendiğiniz sayfaların adreslerini, bir yerlerde okuduğunuz bir makalenin ana mesajını aktaran ve Web tasarımcılarının birbirleriyle fikir alışverişi yaptıkları bir Internet alanı oluşturmak istiyorsunuz. Sayfanıza şu metni koymak istiyorsunuz:

Bizler, inandığımız için ve bilinçli olarak harf tasarımcısıyız, harf dökümcüsüyüz, sayfa dizgicisiyiz.. Yoksa, yeteneğimiz daha yüksek şeyler için elverişsiz olduğu için değil. Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır.

Rudolf Koch - Alman harf dökümcüsü, kaligraf

Dikkat ederseniz, metinde bir cümle siyah harflerle dizilmiş ve kaynak italik harflerle gösterilmiş bulunuyor. Şimdi bu paragrafı, biraz önce oluşturduğumuz Hoşgeldiniz sayfasına alalım ve siyah harflerle italikleri oluşturmaya çalışalım. Yukarıdaki örnekte kaydettiğiniz HTML dosyasını açın ve Benim Web Sayfama hoş geldiniz! kelimelerini silip, yerine yukarıdaki paragrafı yazın:

Bitirdiğinizde ekranınızdaki HTML kodu şöyle olmalıdır:

Web Tasarım Rehberi

Bizler, inandığımız için ve bilinçli olarak harf tasarımcısıyız, harf dökümcüsüyüz, sayfa dizgicisiyiz.. Yoksa, yeteneğimiz daha yüksek şeyler için elverişsiz olduğu için değil. Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır.

Rudolf Koch - Alman harf dökümcüsü, kaligraf

Burada paragraf etiketini kullandığımıza dikkat edin.

etiketleri, tarayıcıya, ana metin unsurunu verir. Tarayıcı bu etiketi gördüğü anda, takibeden unsuru (bu bir başka metin olabileceği gibi, bir grafik öge, veya tablo da olabilir) bir satır aşağıya ve yeni satırın en başına alır.

/////////////////////////////////NOT///////////////

Yeni Paragraf ile Yeni Satırın farkı.

etiketi, tarayıcıya, yeni bir paragraf başlatmasını söyler. Buna karşılık, bir metinde bir satır, nerede bitiyorsa orada bitsin, takibeden satır yeni bir paragraf yapmadan, alttaki satırın başına gitsin isteyebilirsiniz. Bu iki durumun, yani yeni paragraf ile paragraf başlatmadan yeni satıra gitmenin farkı da mekanik daktilodan geliyor. Daktilo yazma kurallarından biri, yeni paragraf başlatırken, iki paragrafın arasında normal satır aralarına verdiğiniz boşluktan daha fazla boşluk vermekti. Diyelim satırlarınız tek aralıkla yazılıyorsa, paragraflarınızın arasında en az bir buçuk aralık olması gerekirdi. Ayrıca her yeni paragraf bir miktar içerden başlardı. Elektrikli daktiloların icadıyla, yazana kolaylık olması için mühendisler, yeni paragraf yapmayı ve sadece satır atlatmayı ayrı ayrı tuşlarla yapılır hale getirdiler. Bugün ENTER veya RETURN tuşu, kelime işlem programınızın varsayılan ayarlarına bağlı olarak, iki parafraf arasında arzu ettiğini bir miktar boşluk bırakır ve yeni paragrafı biraz içerden başlatır. Yeni paragrafın normal satır aralığından daha fazla boşluk bırakmadan ve birinci satırı içeri girmeden yazılmasını istiyorsanız, yine programına bağlı olarak, örneğin ENTER veya RETURN tuşuna basarken, CONTROL tuşunu da tutmanız gerekir. Internetin ilk günlerinde, yazıların ekranda mümkün olduğunca kelime işlem programlarına benzer şekilde oluşturulması amacıyla etiketine yeni paragraf başlatma, buna karşılık
(line break) etiketine de sadece satır atlatma görevi verilmişti.

/////////////////////////////////////////

Paragraf etiketinin nasıl bloklanacağını ALIGN yüklemi belirlersiniz. Örneğin paragraf etiketini

şeklinde kullanırsanız,

etiketine kadar gireceğiniz bütün metin, bulunduğu yerde ortalanacaktır. Paragraf etiketinin çeşitli kullanım özelliklerine aşağıda döneceğiz, Ama şimdi bu HTML sayfasını farklı bir isimle kaydedin ve kaydettiğiniz dosyayı tarayıcınızda açın. Bu paragraf, herhangi bir tarayıcının ekranında, şöyle gösterilecektir:

reh007.tif

Bu görünümü sağlayan HTML komutları, koyu renkli (matbaacılıktan kalma deyimle siyah harfler) için (ve tabiî, bu etiketin etki alanının bittiğini belirten eşi ), italik için (ve ) etiketleridir.

Aynı şekilde istersek. bir paragrafın veya bir bölümünün harf ailesini (fontunu) da değiştirebiliriz. Yukarıdaki örnekte, metnimizin tarayıcının ekranında nasıl gösterileceğini bilgisayar kullanıcısının seçtiği varsayılan fonta bırakıyoruz. Başka bir deyişle, sayfamızın tarayıcıda hangi temel harfle gösterileceğini biz tayin etmiyoruz, işi bir bakıma şansa bırakıyoruz. Oysa oluşturduğumuz Internet alanı edebiyatla ilgili olduğuna göre, harf ailesini, sanata biraz daha önem verecek şekilde biz seçebiliriz.

/////////////////////////////NOT////////////////////////

Internette Font meselesi

HTML sayfanızı tasarlarken, kendi bilgisayarınızda mevcut fontların, Internet alanınızı ziyaret edecek herhangi bir kişinin bilgisayarında mevcut olacağını varsaymanız hata olur. Bunun için hemen hemen bütün Windows ve Macintosh ortamlarında mevcut harf ailelelerinden ayrılmamanız gerekir. Netscape ve Internet Explorer programlarının yeni sürümleri, kurulurken, kullanıcının bilgisayarına Internetin klasik fontları olmaya başlayan bazı harf ailelerini yüklüyorlar. İşletme sistemlerinin temel harfleri ile tarayıcıların eklediği harfler arasında seçim yaparak da görsel etkisi arzu ettiğinize yakın sayfalar tasarlamanız mümkün. Bir başlıkta, ya da bütün sayfalarınızda ortak bir logoda mutlaka arzu ettiğiniz bir fontu kullanmak istiyorsanız, bu başlık ya da logoyu, grafik haline getirebileceğinizi unutmayın. Ama grafiklerin de sayfanızın ziyaretçinin bilgisayarına aktarılması süresini uzatacağını akıldan çıkartmayın. Metinlerinizi, sırf görsel etki için grafik halinde sunarsanız, bir süre sonra ziyaretçilerinizin beklemekten bıkıp, başka sayfalara gidebileceğini hatırlayın.

////////////////////////////////////////////////////////

/////////////////////NOT/////////////////////////

SERIF-SANS SERIF Harfler:

Latin alfabesine bugünkü biçimini veren eski Romalılardır. Harflerin kol ve bacaklarının ucunda, ana çizgiye dik gelecek kısa sonlardırma çizgisi olan serifin ilk kez kağıt üzerinde mi, yoksa harfleri anıtlara oyan yontma ustalarının keskilerinden mi doğduğu bugün bile tartışmalıdır. Serif, daha sonra matbaacılıkta da çok iyşe yaramıştır. İlk yıllarda kağıt üzerinde harf şeklinde iz bırakan harf kalıpları çoğu zaman şimşir tahtasından oyularak yapılırdı. Bu kalıplara mürekkep sürülür ve üzerine konan kağıda basılırdı. Tıpkı lastik damga gibi! Ama tahta harf kalıplarının uçları çok çabuk aşınırdı. Aşınmanın uzun zaman alması için, zamanla harflerin kol ve bacaklarının çıkıntılı, yani serif yapılması gelenek oldu. Daha sonra, kurşun ve tunç gibi dayanıklı malzemeden harf kalıpları üretildiği zaman, çıkıntıları olmayan, sans-serif (serifsiz) harfler yaygınlaştı. Günümüzde de bilgisayar fontları, serif, sans serif ve dekoratif diye üçe ayrılıyor. Basılı eserlerde görsel etki, zıtlıklardan yararlanrak sağlanır. Bir sayfada yer alacak iki yazı unsuruna gerekli dikkati çekebilmek için bunlardan birinin serif, diğerinin sans serif harfle verilmesi yaygın bir uygulamadır. Ekranda zıtlıklar yoluyla dikkat çekebilmek için harf türünden başka şeyler, örneğin renk ve hareket unsuru da kullanabiliriz. Fakat matbaacılıktan kalma bir gelenekle, HTML tasarımcıları arasında başlıkla metni birbirinden serif-sans serif harflerle ayırmak giderek yaygınlaşıyor. Ekranda okuma kolaylığı açısından sans serif harfleri tercih edin. Özellikle küçük puntolu serif harflerin okunması çok zor olabilir.

//////////////////////////////////////////////////////////

Sayfamızda metinlerimizi Arial veya Helvetica; başlık ve kaynakları kaynağı da Times veya Times Roman ile gösterelim. Bunun için, HTML kodumuzda bir değişiklik yapmak zorundayız. Dosyamızın baş tarafına dokunmadan, paragrafın başladığı yere FONT etiketi koyalım. Bu etiketin parametreleri, başka bir ifadeyle, bu etikete niteliğini veren yüklemler, face, (font ailesinin adı), size (harfin büyüklüğü) ve color(harfin rengi) olarak sıralanır. Bu yüklemlerin nasıl kullanıldığını daha yakından görmek için, Başvuru bölümüne bakabilirsiniz. Biz burada sadece harfin türünü belirlemek istiyoruz; onun için sadece face yüklemini kullanacağız. HTML sayfasında paragraf etiketinden sonra yazınız. Tabiî, bu etiketi sonlandıran, bitiren eşini ihmal etmeden! Kaynak cümlesi için aynı ifadeyi bu kez fontun adını değiştirerek yazacağız. Bitirdiğinizde, HTML kodunuzun paragraf bölümü şöyle olmalıdır:

Rudolf Koch - Alman harf dökümcüsü, kaligraf

Bu sayfayı kaydedin ve kaydettiğiniz dosyayı, tarayıcınıza açtırın. Herşeyi doğru girdi iseniz, sayfanız şu sayfaya benzeyecektir:

reh008.tif

Metin Düzenleme Etiketleri
Bu örneklerde HTMLin temel unsuru olan paragraf (

) etiketini kullandık ve çeşitli şekillerde biçimlendirdik. Ancak HTML paragraftan başka metin unsurlarını da tanır. Bu bölümde bu etiketleri ele alacağız.

HTMLin paragraftan sonra metne ilişkin en önemli yapı taşı, başlık etiketleridir. nitekim bizim yaptığımız örnek sayfanın da eksiği başlığının olmaması. Sayfamıza başlık koyşmadan önce HTMLin başlık etiketlerini daha yakından tanıyalım.

HTML bize H1, birinci yani en büyük, H6 sonuncu, yani en küçük olmak üzere altı ayrı büyüklükte başlık kullanma imkanı veriyor. Farklı başlık büyüklüklerini daha yakından tanımak için, şu sayfayı yazarak, örneğin baslik.htm adıyla kaydedin:

Başlıklar

H1: Bir numaralı başlık

H2: İki numaralı başlık

H3: Üç numaralı başlık

H4: Dört numaralı başlık

H5: Beş numaralı başlık

H6: Altı numaralı başlık

Normal Metin

Bu dosyayı tarayıcınızda açın. Tarayıcınızın temel font ölçüsünü ortalamada tutuyorsanız, şuna benzer büyüklükler verir:

reh009.tif

Şimdi bu bilgiyle, örnek sayfamıza başlık verebiliriz. Bunun için, paragrafın hemen üstüne,

Tasarımcı kimdir?

Tasarım nedir?

satırlarını yazın ve sayfanızı kaydedin. Tarayıcıda açtığınız zaman sayfamızda iki başlık göreceksiniz.

reh010.tif

Paragraf etiketi gibi, başlık etiketinin de arkasına koyabileceğiniz tek özellik ALIGNdır ve bununla başlığın sola, sağa, ortaya bloklanmasını veya sağ sol marjların aynı anda bloklanmasını sağlayabilirsiniz.

Yerel biçimlendirmede kullanabileceğimiz stil unsurları paragraf, başlık ve bunların , ve FONT etiketleri ile biçimlenmesinden ibaret değildir. Diğer temel biçimlendirme etiketlerini kısaca sıralayalım:

: Temel font etiketi, bir sayfadaki bütün metinlerin temel fontunu, tarayıcının varsayılan fontu ne olursa olsun, istediğiniz font ailesine (Helvetica, Times gibi) veya font türüne (serif, sans serif gibi) çevirmenizi ya da büyüklüğünü belirlemenizi sağlar. (Bu etiketin sonlandırıcı eşi, yani etiketi yoktur.)

...: İşaretlediği metnin temel fonttan bir ölçü büyük olmasını sağlar. Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel fonttan iki ölçü büyük olacaktır.

Örnek:

Rudolf Koch - Alman harf dökümcüsü, kaligraf

...: İşaretlediği metnin temel fonttan bir ölçü küçük olmasını sağlar. Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel fonttan iki ölçü küçük olacaktır.

Örnek:

Rudolf Koch - Alman harf dökümcüsü, kaligraf

reh013.tif

..: Ortalama etiketi, işaretlediği metnin, içinde bulunduğu kutuda (bu bir tablonun hücresi olabileceği gibi, sayfanın kendisi de olabilir) yatay olarak ortalanmasını sağlar.

Örnek: Rudolf Koch - Alman harf dökümcüsü, kaligraf

reh014.tif

..: Ortasından Çizgi Çek (Strikethrough) etiketi, işaretlediği metnin ortasından çizgi çekilmesini sağlar. Bu etkiyi, bir metinden çıkartılmış yerleri göstermek için kullanabilirsiniz.

Örnek: ~~Biz inanıyoruz ki,~~ en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır..

reh015.tif

..: Teleks Metni (Teletype Text) etiketi, işaretlediği metnin eşit genişlikte fontlarla (Courier gibi) gösterilmesini sağlar. Bu etkiyi, bir metinde örneğin bilgisayar kullanıcısının kendi yazması gereken bölümleri göstermekte kullanabilirsiniz.

Örnek:

Programın kullanıcının adını soran diyalog kutusuna adınızı yazınız

reh016.tif

..: Altını Çiz (Underline) etiketi, işaretlediği metnin altına çizgi çekilmesini sağlar. Bu etkiyi, bir metinde vurgulamak istediğiniz bölümü göstermekte kullanabilirsiniz.

Örnek: Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır..

reh017.tif

: Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde, vereceğiniz yüklemlere göre yatay bir çizgi çizilmesini sağlar. Bu etiketin etkisinin bittiği yeri belirten eşi yoktur. Yatay çizginin yüklemleri arasında sağa, sola veya ortaya bloklanacağını gösteren ALIGN, gölgesiz olmasını sağlayan NOSHADE, pixel veya yüzde olarak kalınlığını belirleyen WIDTH vardır. Doğrudan betin biçimlendirmeye yaramamakla birlikte bu etiket, metnin bölümlerini ayırmakta kullanılabilir.

Örnek: <

Rudolf Koch - Alman harf dökümcüsü, kaligraf

reh018.tif

HTMLin metin biçimlendirmekten çok metnin bölümlerini tanımlamakta kullanılan ve özellikle Internetin metin ağırlıklı olduğu ilk dönemlerinden kalma, ACRONYM, BLOCKQUOTE, CITE, CODE, DEL, DFN, EM, INS, KBD, PRE, Q, SAMP, STRONG, SUB, SUP, VAR etiketlerini ve kullanıldıkları yerleri Başvuru bölümünde bulabilirsiniz.

Fakat burada kısaca da olsa, Internet giderek daha çok bilgi sunma ve bu bilgilerin bulunduğu yerleri gösteren bağlantıların listesi haline döndüğüne göre, listelerden söz etmek yerinde olacaktır. HTML bize birçok liste türü kullanma imkanı veriyor. Bunları sırayla inceleyelim ve uygulayalım.

Sıralı Listeler

: Sıralı (Ordered) listeler, liste unsurlarının başına, tasarımcının arzusuna göre, ya rakam, ya harf koyarak, sıralanmış listelerdir. Listenin başladığını ve bittiğini belirten bu iki etiketin arasına liste unsurları (list item)

etiketi ile yazılır. (Bu etiketin bittiğini gösteren eşi yoktur.) Etiketi biçimlendiren TYPE (1, rakamla; A, büyük harfle; a, küçük harfle; i küçük Romen rakamları ile; ve I, büyük Romen rakamları ile sıralanmayı sağlar), COMPACT, (listenin mümkün olduğu kadar az satır aralığı ile verilmesine yarar) ve START (listenin harfi harf veya rakamdan başlayacağını belirtir) şeklinde üç yüklemi olabilir.

Örnek sayfamıza, Webde hemen herkesin tarayıcısının gösterebileceği güvenli renklere ilişkin bir sayfa koyalım. Akılda kolay kalması için kaç adet renk olduğunu belirtmek üzere, listemizde yer alacak unsurların rakamla veya harfle sıralanması uygun olur. Web Tasarım Rehberi sayfasının HTML kodunu açın ve mevcut paragrafı şöyle değiştirin:

Web Tasarım Rehberi - Renkler

HTML Sayfada Güvenli Renkler

#000000=black (Siyah)

#000080=navy (Lacivert)

#0000FF=blue (Mavi)

#008000=green (Yeşil)

#008080=teal (Koyu Yeşil)

#00FF00=lime (Parlak Yeşil)

#00FFFF=aqua (Turkuaz)

#800000=maroon (Vişne çürüğü)

#800080=purple (mor)

#808000=olive (Zeytunî yeşil)

#808080=gray (Gri)

#C0C0C0=silver (Gümüşî gri)

#FF0000=red (kırmızı)

#FF00FF=fuchsia (Parlak pembe)

#FFFF00=yellow (Sarı)

#FFFFFF=white (Beyaz)

Herşeyi yolunda gitti ise, tarayıcınızda şu sayfa karşınıza çıkacaktır:

reh019.tif

Denemiş olmak için, liste etiketinde, TYPE yüklemini 1 değil, a olarak verin. Sayfadaki listeniz, bu kez rakamla değil, küçük harflerle sıralanmış olacaktır:

reh020.tif

(Bu liste ç veı gibi Türkçe harflerin olmadığını görüyorsunuz. Peki, listemiz çok unsur içerse, z harfinden sonra ne olur? İşte size güzel bir ev ödevi konusu!)

Sırasız Listeler

Sayfamızı tarayıcıda inceledikten sonra, aslında bu listenin rakam veya harfle sıralanmış olmasının istediğimiz görsel etkiyi yapmadığına karar verdik, diyelim. İstiyoruz ki listemizde, unsurların başına siyah, yuvarlak bir nokta gelsin. Bunun için, HTMLin sağladığı sıralanmamış liste etiketini kullanmak zorundayız.

: Sırasız (Ordered) listeler, liste unsurlarının başına, tasarımcının arzusuna göre, ya içi dolu ya da içi boş bir yuvarlak, veya dört köşe nokta konularak sunulan listelerdir. Listenin başladığını ve bittiğini belirten bu iki etiketin arasına liste unsurları (list item)

etiketi ile yazılır. (Bu etiketin bittiğini gösteren eşi yoktur.) Etiketi biçimlendiren TYPE (DISC, içi dolu daire; CIRCLE, içi boş daire; SQUARE dörtköşe nokta ile sıralanmayı sağlar) ve COMPACT, (listenin mümkün olduğu kadar az satır aralığı ile verilmesine yarar) şeklinde iki yüklemi olabilir.

Şimdi HTML kodumuzda gerekli değişikliği yapalım. Yani liste etiketini olarak değiştirelim, TYPE yüklemini de DISC yapalım:

Listemiz, tarayıcıda değişik bir görünüm alacaktır:

reh021.tif

Liste türünü diğer iki unsuru deneyerek, değiştirebilirsiniz.

Tanımlama Listeleri

HTMLin, Internetin daha çok bilimadamlarının bilimsel rapor alışveriş alanı olduğu günlerde, sayfa tasarımcılarına kolaylık sağlamak üzere geliştirilmiş tanımlama listeleri üç gruba ayrılabilir.

: Tanımlama (definition) listesi etiketinin içinde, tanımlamalara (
), tanımlama terimlerine (
) veya her ikisine birden yer verilir. DL etiketine sadece COMPACT yüklemi verilebilir. DD ve DTnin sonlandıran eşi yoktur. Bu etiketlerle oluşturulacak listeleri de birer örnekle inceleyelim:

Diyelim ki Web tasarımını ciddî bir şekilde meslek olarak edinmek isteyenler için Web Tasarım rehberi sayfamızda bazı HTML işlemcilerin ve grafik programlarının tanıtımını yapalım. Tabiî önce bu programları gruplara ayıracağız. Dolayısıyla önce sayfamızı ziyaret edenlere, bu gruplarda ne tür programların yer aldığını anlatmak zorundayız. Başka bir deyişle tanımlama listemiz üç tanı

Dreamweaver Dersleri

noreply@blogger.com (sporttube) — Wed, 20 Feb 2008 00:25:00 +0000

Arayüz ve kullanım

Dreamwaver'ı en verimli biçimde kullanabilmek için öncelikle arayüz konusunda bilgi sahibi olmamız gerekmektedir. Bu anlamda en çok işimize yarayacağını zannettiğimiz başlıca kısımlar şunlardır:

Toolbar: Buradan sayfayı yaparken kullancağınız arayüzü seçebilirsiniz. Show Code View diyerek kodları inceleyebilir yada 'ben koddan anlamam kardeşim' derseniz Design View'i kullanabilirsiniz. Odamı olmadı o zaman Show Code and Design View diyerek aynı zamanda hem görüp hemde kodlamanız mümkün. Title kutucuğuna Sitenizin adını yazmanız yeterli olacaktır. Preview/debug in Browser Diyerek sayfanızın Web Tarayıcınızda nası bişeye benzediğini görebilirsiniz. References Buttonu size sıkıştığınız anlarda ingilizce olarak kısa ipuçları vermeye yarar. View Option Butoonu ile kenarlara cetvel yerleştirebilir (Rulers), Klavuz çizgileri görüntüleyebilir (Grid), devreye sokabilir (Vusual Aids) Basit yardımcıları devreye sokabilirsiniz.

Objects panel: Bu pencere yardımıyla sitenize çeşitli mataryeller ekleyebilirsiniz. Örnek olarak Table, resim, layer, rollover resim ekleme gibi işlemleri bu kısımdan yapabilirsiniz. Üst kısmındaki ufak oka tıklayarak deişik mataryel gurplarını görüntüleyebilirsiniz. (Characters, Common, Forms, Frames, Head, Invısıbles, Special)

Property Inspector: Bu pencere sayfamıza eklediğimiz her türlü dökümanın genel özelliklerini değiştirmemize ve yönetmemize yarar. Örnek olarak insert ettiğiniz bir resimin sağa mı yoksa sola mı hizalanması gerektiği veya bir table ın background renginden borderına kadar tüm özelliklerini değiştirmek için bu penceriyi kullanabilirsiniz. İşlerinizi kolaylaştırmak ve hızlandırmak için çok kullanışlı bir araçtır.

Document Window: Burası sizin arenanız. Sayfayı buraya yapıyorsunuz anlıyacağınız. Macromedia Dreamweaver WYSWYG (What You See What You Get/Ne Görürsen Onu Alırsın) mantığına dayanan bir program olduğu için bu alan bizim için çok önemli.

Floating Panel: bu pencere ise sayfa ile ilgili ince ayarların yapıldığı kısımdır. Adından da anlaşılacağı üzere, değişken bir paneldir. Yani aktif duruma getirdiğiniz özelliklerle ilgili ayarlar bu panel üzerinde sıra ile değişir. CSS styles, Fames, vs....

Sayfa Ayarları & Encoding

Yeni bir döküman oluşturduktan sonra sayfanızın background, link, text, ziyaret edilmiş link, actif link renkleri ve Encoding (Dökümanın dili) Left & Top marign (sol ve üst hizalama boşluğu) ve sayfanın title'ını değiştirmek için:

- Modify/Page Properties menüsüne tıkladıktan sonra karşınıza çıkan pencereden bu ayarları kolaylıkla yapabilirsiniz.

Gelelim Encoding sorunlarına:
Sayfadaki Türkçe karakterlerin görünmemesi sıkça rastlanılan bir sorundur. Bunun için Page Properties menusunden encoding'i doğru ayarlamalısınz.

Bunun için:
- Öncelikle Macromedia Dreamweaver'a türkçe dil desteği sağlayan Encoding.zip ve win1254.zip dosyalarını download etmek zorundasınız.
- Bu dosyaları indirdikten ve zipli dosyaları açıp onları özgür bıraktıktan sonra C./Program Files/Macromedia/Dreamweaver 4/Configuration/Encodings klasörü altına kopyalıyarak varolan dosyalarla bunları değiştirmelisinz.
- Bu işlemleri yaptıktan sonra Page Propertiesdan Encodingi ISO Latin 5 (Windows 1254) olarak girmelisiniz.
- artık sayfanız Türkçe karakterleri de tanıycaktır. Eğer Türkçe karakterler Dreamweaver da görünmezse paniklemeyin, Browserda görünecektir.

Text, Link ve Biçimlendirme

Sayfanın en sade ve en önemli kısımlarından biri olan Textler bilinmesi gereken en temel konuların başında gelir. Sayfanızdaki text ve linklerin renklerinin uyum içinde olması ziyaretçileri hem hoşnut eder hemde sayfanızın kolay anlaşılır bir biçimde olmasını sağlar.

Textleri biçimlendirmek için:
- Yazdığınız paragraf yada kelimeyi seçili durumua getiriniz.
- Ayarların büyük bir kısmını Propery Inaspector üzerinden yapabiliriz. Bunun için özellikle bunun üzerinde yoğunlaşmamız mantıklı olacaktır.
- Seçtiğiniz yazının büyüklüğü 'size', onun solundaki yazi tipi 'Font Familiy', sağındaki font rengi 'Font color', üzerine tıklandığında açılacak olan URL 'Link', ne tarafa hizalanacağını belirten 'Align' Buttonları, Alt alta uzayan satırların listemi 'List' yoksa sıralanmış 1 2 3 şekline giden açıklamalar şekline olacağı 'Ordered' ayarları, İçerden yada dışardan başlamasını sağlayan 'text 'Outdent', 'text Indent' ayarları, textin kalın olmasını sağlayacak 'bold', eğik olmasını sağlayacak 'italic' en çok işimize yarayanlarıdır.
- Daha çok ayarı değştirmek ve texti biçimlendirmek için 'Text' menüsünü kullanabilrsiniz.

Non Breaking Space (Ekstra Boşluk)

Dreamweaver'da ve diğer HTLM editörlerinin çoğunda extra boşluk bırakmak genelde problem yaşanan bir aktivitedir. Dreamweaver'da bu problemi aşmak için basit bir klavye kısayolunu kullanmamız mümkün.

Extra boşluk bırakmak için:
- Extra boşluk bırakmak istediğiniz metin alanına farenin sol tırnağıyla tıklayınız
- İster CTRL+Shift+Space (boşluk) tuş kombinasyonuyla, ister insert/Special Characters/Non Breaking Space menüsü ile extra boşluğunuzu bırakabilirsiniz. odamı olmadı; Property İnspector üzerinden Special Characters grubundan İnsert Non Breaking Space butonuna tıklayarak aynı işlevi yerine getirebilirsiniz.
- Bu yöntemlerden birini kullanarak istediğiniz kadar extra boşluk bırakabilirsiniz.

Line Break (Bir Alt Satıra Geçmek)

Dreamweaver'da yeni bir paragrafa başlamak için Enter tuşuna basmamız yeterli. Fakat bir alt satıra geçmek istediğimiz zaman daha farklı bir yol izlemek zorundayız.

Bir alt satıra geçmek için:
- Bir alt satıra geçmek istediğiniz metin alanına farenin sol tırnağıyla tıklayınız.
- Shift+Enter tuş kombinasyonuyla veya İnsert/Special Characters/Line Break menüsü ile bir alt satıra geçebilirsiniz Property İnspector üzerinde Special Characters grubundaki İnsert Line Break butonu ile de aynı sonuca ulaşabilirsiniz.
- Burada dikkat edilmesi gereken; bırakılan Line Breaklerde geçilen her alt satır yine Line Break bıraktığınız paragrafa bağlı bir alt satır yaratır. Yani bıraktığınız her Line Breakde geçtiğiniz her alt satır yine bağlı olduğu paragrafın özelliklerini taşır.

Object Panel ve kullanımı

Object Panel Dreamweaver'ın en önemli bileşenlerinden biridir. Bu panel sayesinde Tablelar, imageler, rollover imageler, fırmlar, özel karakterler... gibi bi çok elementi sayfanıza dahil edebilirsiniz.

Object Paneldeki başlıca buttonlar ve görevleri şöyle sıralanabilir:

Characters	Forms	Invisibles
Insert Copyright (©)	Insert Form	Insert Named Anchor
Insert Em-Dash (—)	Insert Text Field	Insert Script
Insert Euro (€)	Insert Button	Insert Content
Insert Poud (£)	Insert Checkbox	Special
Insert Registered Tradernark (®)	Insert Radio Button	Insert Applet
Insert Quote (“”)	Insert List Menü	Insert Plug-in
Insert Tradermark (™)	Insert File Field	Insert ActiveX
Insert Line Break (Shift+Enter)	Insert Image Field
Insert Non Breaking Space	Insert Hidden Field
Insert Other Crackter	Insert Jump Menü
Commons	Frames
Insert image	Insert Left Frame
Insert Rollover image	Insert Right Frame
Insert Table	Insert Top Frame
Insert Tabular data	Insert Botton Frame
Draw Layer	Insert Left-Top Corner And Top Frames
Insert Navigator Bar	Insert Left And Nested Top Frame
Insert Horizontal Rule	Insert Top And Nested Left Frame
Insert E-mail Link	Split Frame Center
Insert Date	Head
Insert Server Side Include	Insert Meta
Insert FireWorks Html	Insert Keywors
Insert Flash (fla)	Insert Description
Insert Flash Button	Insert Refresh
Insert Flash Text	Insert Base
Insert Shockwave (swf)	Insert Link
Insert Genrator Buttonu

Tablelarla Çalışmak

Table lar özellikle sayfayının görünümünü koruması açısından çok önemli bileşenlerdir. Örnek olarak bir sayfada yazıları ve dökümanları direk üst üste yerleştimektense, onları yapacağınız table lara basamak basamak yerleştirmek hem işinizi kolaylaştıracak hemde ilerde değiştirilmesi gereken yerleri diğer kısımları bozmadan değiştirmenizi sağlayacaktır.

Sayfanıza Table eklemek için:
- Objects paneli üzerinde insert table buttonu na tıklamanız yeterli olacaktır.
- Açılan iletişim kutusundan table'ınızla ilgili ayarları yapmanız mümkün. Colons: dikey aşağıya doğru uzanan kolonlardır, Raws: Yatay sıralar, with: Table ın genişliği, Border: Kenar çizgilerinin kalınlığı (eğer bunu 0 olarak girerseniz borderlar görünmez, bu tüm uygulamalar için geçerlidir) Cell Pladding: table'ın hücrelerinin gevşeklik payı, Cell Spacing: Hücreler arası boşlukğun değeri
- Tüm ayarlarınızı yaptıktan sonra OK butonuna basarak tableınızı insert edebilirsiniz.

- Table ın herhangi bir hücresini seçerek ve o hücrenin arkafon rengini ve align özelliklerini değiştireilrsiniz. Bunun için seçmek istediğiniz hücrenin içine bir defa tıkladıktan sora içinden bir noktaya sol fare düğmesi ile tıklayıp sürüklemeniz yeterli olcaktır.
- Seçim işlemini yaptıktan sonra Property Inspector üzerinden Gerekli ayarları rahatlıkla yapabilirsiniz. Property Inspector eğer küçük konumda ise daha çok ayarlara erişmek için sağ alt köşesindeki aşağı ok tuşuna bir kez tıklayarak onu genişletmelisiniz.

Sayfaya Resim Eklemek

Word Wide Webin en önemli silahlarından biri olan image'ler yani sayfanızdaki resimleri eklemek ve onların ayarlarını yapmak konusunda Dreamweaver size birçok kolaylık sağlıyor. Öncelikle sayfanıza ekleyeceğiniz gif veya Jpeg dosyalarını HTML dosyaları ile aynı dizin altına (aynı dizin altında bir klasör olabilir mesela images klasörü gibi) taşımanız gerekmektedir. Şayet bu işe yeni başlayanların en çok takıldığı noktalardan biri olan sayfayı servera gönderdikten sonra resimlerin görünmemesi resim dosyalarının farklı klasör altında olmasından kaynaklanır.

Sayfanıza image eklemek için:
- Objects Panel üzerinden insert image butonuna tıklamalısınız.
- Açılan pencereden ekleyeceğiniz dosyayı seçerken yan tarafta preview olarak görmenizde mümkün.
- İşin en önemli noktası: eğer sayfaya eklediğinz resimlerin her yerde (Yani servara gönderdikten sonrada )görünmesini istiyorsanız Reletive to ksımını Document olarak girmelisinz. Şayet bunu yaptıktan sonra image in adresinin 'images/resim.gif' şekline olduğuna dikkat ediniz.
- 'select' diğerek resmi sayfanıza dahil edebilirsiniz.

- Resminiz sayfanıza eklendikten sonra resmin üzerine bir kez tıklayarak onu seçili duruma getirebilirsinz. Böylece Property Inspector üzerinden Resimle ilgili ayarları yapabilirsiniz.
- Resmin hizalanacağı yer, border kalınlığı, resmin boyutu, alt metin (Fare imlecinin resmin üzerine gelince üzerinde çıkan ve resim yüklenmeden önce altta görünen Metin), link ekleme gibi özellikleri buradan yapabilirsiniz.

Rollover Image Kullanımı

Imagelere biraz hareket biraz da eğlence ve gösteriş kazandırmak için rollover image çok kullanılan bir yöntemdir. Mause ile üzreine gidildiğinde farklı bir resimin çıkması olayı rollover image olarak adlandırılır. Dreamweaver her konuda olduğu olduğu gibi bu konuda da bize çok yardımcı olmakta ve elinden geleni yapmaktadır. Bu işe başlamadan önce normal resimle fareyle üzerine gidildiğinde çıkacak olan resimlerin önceden hazırlanması gereklidir.

Rollover Image eklemek için:
- Object Panel üzerindeki insert Rollover image buttonuna tıklamalısınız.
- Açılacak olan pencerede sizden sıraylaResim dosyaları belirlemenizi ve buttonun url'sinin ne olacağını soracaktır.
Image name: bu kısma Buttonun görevi ile ilgili herhangi birşey yazabilirsiniz.
Orginal Image: adından da anlaşaılacağı gibi sayfa yüklendiğinde görünecek olan sabit dosyayı belirtmektedir. Browse diyerek resim dosyasını seçebilirsiniz.
Rollover Image: Bu ise mause imleci ile üzerine gidildiğinde çıkcak olan olan resim dosyasını belirtmektedir. Aynı şekilde bunuda belirleyebilirsiniz.
When Clicked Go To URL: bu ise buttonun URL sini yani bağlanacal olan linki belirtmektedir.
- Tüm bu ayarları yaptıktan sonra OK tuşuna tıklayarak Rollover Buttonu'nuzu kullanabilirsiniz.

CSS Styles

Eğer Sayfanızdaki metinlerin yanlızca sizin yaptığınız şekillendirme ölçüsünde kalmasını ve sonradan browserlar tarafından görünümün tecavüzeCSS Styles sadece sayfanın formunu korumak açısından önemli değildir. Eğer sayfada çok metin varsa ve bunların bazıları kendi aralarında gruplaşabiliyorsa (örneğin başlıklar, normal açıklama textleri, ve küçük açıklama textleri vs vs) bunları tek tek biçimlendirmek yerine önceden hazırlanan bir CSS Styles dökümanı ile biçimlendirmek daha mantıklı olacaktır.
Bu anlamda, bir defaya mahsus olarak hazırlayacağınız bir style'i defalarca farklı yerlerde kullanabilrsiniz. uğramamasını istiyorsanız CSS styles kullanmalısınız.

CSS Styles eklemek için:
- Windows/CSS Styles penceresini eğer aktif değilse aktif duruma getiriniz.
- Bir Floating Panel açılacaktır. Bu panel üzerinden CSS style'leri yönetebilir yeni style'lar ekleyebilirsiniz. Yeni bir style eklemek için: Panelin sağ üst köşesindeki ok tuşuna bir defa tıklayınız.
- Açılan menüden New Style diyoruz. Karşımıza çıkan kutucukta Style'ın adını istediğiniz gibi değiştirebilirsiniz. Alttaki seçeneklerden style'in türünü belirleyebilirsiniz. Biz bu kısma hiç dokunmacağız, en alttaki seçenekte ise yeni bir css dosyası oluşturacağımızı belirterek (NEW STYLE SHEET FILE) OK buttonuna tıklıyoruz.

- İlk oluşturulan CSS style'de Dreamweaver bizden bir tane css style belgesi oluşturmamızı isteyecektir. Bu dosyanın adını verdikten sonra (örnek: html dosyaları ile aynı klasör altına styleler.css olarak kaydedebilirsiniz) save diyebilirsiniz.
- Şimdi karşımıza çıkacak olan pencereden style'imizin özelliklerini belirteceğiz. Biz sadece genel özellikleri belirtip noktalıyacağız. Siz daha sonra isterseniz tüm özellikleri değiştirip (bgcolor, font color, underline, puntolar arası genişlik, satırlar arası genişlik vs vs) farklı kombinasyonlar yaratabilirsiniz. Buradan Font boyutunu, family kısmını ve diğer ayarları kendinize göre seçtikten sonra OK diyebilirsiniz. artık sayfanızda bir css style eklediniz ve css styles dosyası (stles sheet) attach etmiş olduk.

- Eğer bu styler.css dosyasını hazırladığınız diğer sayfalarda da kullanmak isterseniz; CSS Styles panelinden Sağ üst köşedeki ok işaretine tılayarak Attach Style Sheet demelisniz. Bundan sonra dosyayı belirleyip ekleyebilirsiniz.

NOT: Eğer hazırladığınız bir CSS Style uyguladığınız text in CSS style'de belirlenmiş özelliklerinden birini Property Inspector üzerinden tekrar değiştimeye kalkarsanız, (yani CSS style özelliklerinde büyüklüğü 12 piksel olarak verilmiş bir text'in büyüklüğünü siz tekrar +3 gibi bşey olarak değiştirirseniz) CSS style devre dışı kalacaktır. Fakat şunu belirtelim: CSS style de belirtilmemiş özelliklerden birini değiştitrirseniz herhangi bir aksaklık çıkmayacaktır.

Rollover Text-linkler

CSS stylelerin belkide en çok bilinen özelliklerinden biri olan rollover text-linkler, oldukça çok dile getirilen problemlerden biri. Bu özellik elbette Dreamweaver'da da mevcut. Dreamweaver'da bu işi yapmanın bir çok yolu olduğuda bir gerçek.
Bu özelliği basitleştiren Extension ların yanı sıra tagları arasına ekleyeceğiniz STYLE kodları ile de bu olayı gerçekleştirmek oldukça kolay. Sırayla bir bilinen bu tekniklerin hepsinie bir göz atalım isterseniz.

STYLE Koduyla:
- Sayfanızı Dreamweaver ile açtıktan sonra Code View'a geçerek ... tagları arasına şu kodu yerleştirrmelisiniz:

- Daha sonra burada geçen color komutlarının karşısına kendi renklerinizin kodlarını veya ingilizce isimlerini yazarak kendi isteğiniz doğultusunda düzenleyebilirsiniz.
- Bir çok arkadaşın da takıldığı gibi linklerde altçizgi sorununuda bu kod sayesinde halledebiliriz. Örneğin linklerinizde altçizgi olmamasını ama üzerine gidince altçizgi (underline) çıkmasını istiyorsanız, bu kodda olduğu gibi; a:hover komutundaki text-decoration: komutu karşısına underline yazmalısınız.
- Uyguladığınız renkler Dreamweaver da göünmeyecektir ama Browser'ınızla kontrol edip sonuçları değerlendirmeniz mümkün.

NOT: a:link = linklerin rengi
a:active = linke tıklandığı anda çıkan renk
a:visited = ziyaret edilmiş link rengi
a:hover = linkin üzerine gidildiğinde değişen rollover renk
text-decoration komutları ise linklerin altıçizgilimi yoksa çizgisiz mi olması gerektiğini belirten komuttur.

Extension Yardımı ile:
- Öncelikle ilgili extension'ı (Text Link Rollover Extension) bilgisayarınıza çekerek kurmalısınız. (extensionlar hakkında daha ayrıntılı bilgi için Extension ve Kullanımı dersine göz atabilirsiniz.)
- Daha sonra Object panel üzerinde oluşan yeni buton yardımı ile extension'ı çalıştırmanız mümkün. Extension'ın arayüzü oldukça basit.
On MauseOver: linkin üzerine gelince değişecek renk
On MauseOut: linklerin rengi
Visited Link: ziyaret edilmiş likin rengi.
- Tüm bu ayarları yaptıktan sonra OK diyip extension'ın kodu sayfanıza otomatik olarak eklemesini sağlayabilirsiniz.

CSS Style Editörü ile:
Bu yöntem ise biraz önce Extension yardımı ile anlattığımız yöntemin deyim yerindeyse manuel olarak yapılmasıdır.
- CSS style ediötrünü açık deyilse açıyoruz. Windows/CSS Styles veya Shift+F11
- New Style diyoruz ve açılan iletişim kutusundan Type kısmını Use CSS Selector'ü işaretliyoruz.
- Selector ksımında ise yanındaki drop down menüden yaralanarak ekleyeceğimiz style'a göre birinini seçiyoruz.
- OK dedikten sonra açılacak olan pencereden gerekli ayarları yaptıktan sonra tekrar OK diyip Style'ımızı tamamlıyoruz. (CSS style'ler hakkında daha çok bilgi için tıklayınız)

Bu üç yöntemden biri mutlaka sizi çözüme ulaştıaracaktır.

Online Photoshop Dersleri

noreply@blogger.com (sporttube) — Tue, 19 Feb 2008 23:41:00 +0000

"Photoshop'u Tanıyalım" bölümümüz de en popüler resim işleme programı olan Adobe Photoshop'u daha yakından tanıyıp, onunla neler yapabileceğimize göz gezdireceğiz.
Profesyonel bir resim işleme programı olan Adobe Photoshop'un kullanım alanının çok geniş olduğu bir gerçektir. Ancak bizim buradaki ilgi alanımız internet ve dolayısıyla web olduğu için daha çok web sayfalarının tasarımındaki rolü ve web'deki etkisi yönüyle Photoshop'u inceleyeceğiz.
Photoshop'un eski versiyonları da var tabi ki, ama biz burada en son versiyonu olan 6.0'ı hatta 11.03.2001 tarihinde Free Upgrade ile güncellenen 6.0.1versiyonu nu tanımaya çalışacağız.
Photoshop 6.0 (6.0.1) daki yeniliklere basitçe bakarsak; eski versiyonlarına göre kullanım açısından fark olmamasıyla birlikte yetenekleri açısından bir çok değişiklikler var. Basitçe bir gözlemle, daha çok matematiksel özellik eklenmesi, vektörel uygulamalara daha yatkın olması, eski efektlerin, "Layer Style" olarak daha çok gelişmesi, hazır şablonların eklenmesi, Yazı Aracı (Type Tool) nın marifetlerinin gelişmesi, 8000 'den fazla layer'e izin vermesi, vektörel şekillerin ve maskelerin (shapes) eklenmesi, programın arayüzündeki en önemli görsel değişikliği ise en üstte Ana Menünün hemen altında yer alan ve uygulamaları daha kolay ve etkili yapmamızı sağlayan "Tool Options Bar" -Araç Seçenekleri Çubuğu- 'nun ilave edilmesi ki Photoshop'un 6.0 versiyonu ile gelen en önemli yenilikler olarak sayılabilir.
Photoshop'u kullanabilmek için öncelikle "Tool Box" denilen "Araç Kutusu" nu çok iyi bilmemiz ve tanımamız gerekir.
"Photoshop'u Tanıyalım" bölümümüz de öncelikle Araç Çubuğunu tanımaya çalışacağız, daha sonra Photoshop'un önemli unsurları olan, Layer (Katmanlar) 'leri, Efektleri (Layer Style), Filitreleri (Filter) tanıyacağız. Daha sonra da uygulamalara geçip basit uygulamalar olan ve web sayfalarının vazgeçilmez unsurları butonların yapımlarını, Yazı Efektlerini, reklam bannerlarının yapımı ve ImageReady yardımıyla animasyon uygulamasını, Arayüzlerin (Interface) yapılmalarını, yaptığımız arayüzlerin nasıl bölünüp web sayfalarına yerleştirileceğini linklerin nasıl verileceğini göreceğiz. Bunları yaparkende Photoshop'un nasıl kullanılacağını daha iyi öğreneceğiz.

Photoshop Araç Kutusu (Toolbox)

Photoshop'u kullanmak için öncelikle yanda resmini gördüğünüz "Araç Kutusu" nu iyice öğrenmeliyiz.
Araç Kutusuna ulaşmak için programın arayüzündeki Ana Menüsünden, Window>Show Tool ile Toolbox'ı açalım (Kapatmak için ise Window>Hide Tool yolunu seçiyoruz).
Araç Kutusu, yandaki resminde görünen araçlarından başka araçları da içerir.

Gizli olan bu araçlara, yanında " " işareti bulunan ikonların üzerinde mouse nuzu basılı tutup bir süre bekleterek açılacak olan yeni ikon penceresinden erişebilirsiniz.
Bunlardan birini seçerseniz Araç kutusunda ki diğer ikon ile yerini değiştirecek, kullanmaya hazır hale gelecektir. Herbirinin yanlarındaki klavye kısa yol tuşlarını da görebilirsiniz.

Şimdi "Araç Kutusu" üzerindeki ikonları sırası ile tanıyalım

Aşağıda Araç Kutusunun özelliklerini her ne kadar açıklasak da buradaki Araçların hangisine tıklarsanız tıklayın, altta resmini gördüğünüz Photoshop'a 6.0 ile beraber eklenen yeni özelliği "Tool Options Bar" ( Araç Seçenekleri Çubuğu ) 'daki ayarları ortaya çıkar. Araçlar, Ana Menünün hemen altında bulunan "Tool Options Bar" 'daki ayarları ile daha çok yetenek kazanırlar. Bunu, Photoshop'u kullanarak daha iyi anlayacaksınız.

"Tool Options Bar" ( Araç Seçenekleri Çubuğu )

"Rectangular Marquee Tool", Kare, dikdörtgen çizmek için seçili alan yaratır. Klavye kısa yolu gördüğünüz gibi "M" tuşudur. Kare çizmek istersek, kare şeklini seçip, klavyemizdeki Shift tuşuna basılı tutarak imajımız üzerinde mause muzu sürüklemeliyiz. Aksi halde dikdörtgen alan seçer. Elliptical Marquee Tool, Şayet Daire çizmek istersek, daire şeklini seçip yine klavyemizdeki Shift tuşuna basılı tutarak imajımız üzerinde mause muzu sürüklemeliyiz. Aksi halde elips alan seçer.Diğerleri, tek pixel olarak yatay (Single Row Marquee Tool) veya dikey (Single Column Marquee Tool) alan seçmeye yarar.

"Move Tool", Seçilen bir alanı veya Layer (Katman)'ı taşımanıza yarar.Otomatik seçim özelliği olduğu gibi imajın üzeründe iken sağ tuş yaparsanız hangi Layer de olduğunuzu da belirtir. Klavuzluk görevi vardır. (V)

"Lasso Tool", Kement Aracı denir. İmajınız üzerinde serbestçe çizerek alan seçebilirsiniz. Resmin belli noktalarını tek tek seçmenize Polygonal Lasso Tool ile yapabilirsiniz. Magnetic Lasso Tool ise kontrast ve renge duyarlıdır.

"Magic Wand Tool", İmaj üzerindeki benzer renkleri seçim aracıdır. Benzer renkleri veya tonları seçebilirsiniz.

"Crop Tool", Kesme Aracı denir. İmajınızdaki fazlalıkları kesmenize, fazlalıkları temizlemenize ve imajınızı serbest olarak döndürmenize yarar. (C)

"Slice Tool", Dilimleme Aracı, imaj üzerinde dilimler yaratmanıza yarar. İmajınızı dilimlere bölebilirsiniz. Slice Select Tool ise dilimleri seçmemize yarar.

"Airbrush Tool", Yumuşak kenarlı hat şeklinde boyama yapmamızı sağlar. (Kalem hareketi sağlar.)(J)

"Pencil Tool", Kalem Aracıdır. Airbrush Tool aksine sert kenarlı çizgiler çekmeye yarar. Adından da anlaşılacağı üzere Kalem olarak kullanılır. Paintbrush Tool ise Fırça etkisi sağlar ve boyama yapmamıza yarar.

"Clone Stamp Tool", Istampa Aracı ile İmajın bir yerine Alt tuşu ile tıkladığımızda buranın resim ve doku örneğini alır ve bu örneği istediğimiz yere tıklayarak yapıştırmamızı sağlar. Pattern Stamp Tool ise hafıza-şablon (Pattern) olarak aldığımız görüntüyü kullanmaya yarar.

"History Brush Tool", İmajın arkaplan rengini kopyalayıp imaj üzerine seçilen alanı fırça etkisiyle boyar. Art History Tool ise kullanılan seçili alandaki farklı boyama stillerine bakıp onları taklit ederek, fırça etkisiyle boyama yapar.

"Eraser Tool", Silme Aracı, imaj üzerinde beğenmediğiniz yerleri siler ancak silerken alttaki Layerdeki rengin vaya imajın görünmesini sağlar. Background Eraser Tool, arkaplan rengini silerek imajı transparent yapar. Magic Eraser Tool ise tek tıklama ile imajın arkaplan rengini silerek imajı tranparent yapar.

"Paint Bucket Tool", Boya Kovası ile seçili alanı, Foreground denen renk değiştirme aracındaki üstteki renk ile doldurabilirsiniz. "Gradient Tool" ise iki yada daha çok rengin birbiri arasında yumuşak geçiş yaparak seçili alanın boyanmasını sağlar.

"Blur Tool", İmaja kenarlardan dışa doğru belirsizlik hissi verir, Sharpen Tool, imajın kenarını dışa doğru keskinleştirme hissi verir, Smudge Tool, imajın rengini dağıtmak, renkleri birbirine karıştırma, leke hissi verir.

"Dodge Tool", İmajda aydınlanmış-ışıklanmış alan sağlar, Burn Tool, İmajda koyulaşmış-kararmış alan sağlar, Spone Tool, ise imajın renk doygunluğunu azaltıp, çoğaltmaya yarar.

"Path Companent Selection Tool - Direct Selection Tool", Pen Tool ile İmaj üzerinde herhani bir yerde seçim yaptığımızda vaya bir parça seçtiğimizde seçim noktalarını ve kontrol hatları ile kontrol noktalarını tespit ederler.

"Type Tool", İmaj üzerinde yazı (text) yazmamızı sağlar, Photoshop'un Yazı Editörüdür (T).
Geniş bilgi için Tıklayın!

"Pen Tool", Etkili ve denetimli seçim alanları sağlar, yapılacak imajın düzgün kenar rotaları-yönleri çizmemize izin verir. Uygulamalarda daha geniş açıklanacaktır.

"Rectangle Tool", en üstte Rectangular Marquee Tool bölümünde anlattığımız işlemleri yapar. Ancak bu araçın farkı Foreground denen renk değiştirme aracındaki üstteki renk ne ise uygulandığı yerde direkt o rengi kullanır ve maskeleme yapar. İsterseniz daha sonra üzerine çift tıklayarak rengi değiştirebilirsiniz. Resimde de görüldüğü gibi, köşeleri yuvarlatılmış, elips, poligonal olarakta kullanılır.Herbirinin kenarlıkları, yarıçapları "Tool Options Bar" 'dan ayarlanabilir. Line Tool, çizgi aracıdır. İstenilen kalınlıkta düz çizgiler çizer. Custum Shape Tool, Photoshop'un hazır şekiller listesini kullanmamızı sağlar.

"Notes Tool", imaja açıklayıcı yazı ve ses ekler. Ancak bu eklentiler sadece PSD formatında etkindirler.

"Eyedropper Tool", imaj için örnek renk seçmemizi sağlar. İmajın hangi rengine tıklarsanız o rengi alır. Color Sampler Tool, Info sekmesinde seçilen rengin değerini gösterir. Measure Tool, imajda iki nokta arasındaki uzaklığı ölçmemizi sağlar.

"Hand Tool", ekrana sığmayacak şekilde büyültülen imajlarda görünmeyen yerlere ulaşmak için kullanılır.(H)

"Zoom Tool", imajın istenilen bölümüne yakınlaşmayı veya uzaklaşmayı sağlar.(Z)

"Palet (Renk Seçim Aracı)", Foreground üstteki rengi, Background alttaki rengi belirtir. Defaunt renk (D) resimdeki gibidir. 'a tıklayarak da default ayarlara geçilebilir. 'a tıklayarak alttaki ve üstteki renkleri yer değiştirebilirsiniz(X). Ancak alttaki daima Background, üstteki daima Foreground olacaktır.

"Quick Mask Mode", Hızlı maskeleme yapmaya veya maskelemeden çıkmaya yarar.(Q)

"Full Screen Mode", tam ekran yapar, eski hale gelir. (F)

"Jump to ImageReady", ImageReady'ye atlama yapar. Herhangi bir imajınız açıksa doğrudan ImageReady'e gönderip aynı imajda bütün katmanları, efektleri ve filitreleri ile ImageReady'de kullanıma hazırlar. (Ctrl+Shift+M)

Katmanlar (Layers)

Ana Menüden File > New ile yeni bir döküman açıyoruz.

New Penceresinin Kullanımını Animasyonlu Seyretmek için Tıklayınız!

"Layer" leri açmak için Ana Menüden, Window > Show Layers yolunu kullanıyoruz. (Kapatmak için ise Window > Hide Layers yolunu seçiyoruz.).
Katmanlar olarak da ifade edilen Layer'ler Photoshop gibi resim işleme programlarının en önemli unsurlarıdır. İmajımızı hazırlarken yaptımız her desenin, yazının, grafiğin birbirine karışmaması, değiştirmek istediğimizde herbirine ayrı ayrı hükmetmemizi sağlarlar. İmajımızı hazırlarken, imaja ekleyeceğimiz her yeni parça ayrı bir katman (Layer) açılarak yapılmalıdır. Yani meydana getireceğimiz imajımız bir Üstüste Gelmiş Layer - Katmanlar - Bütünüdür.
Bunu şöyle de açıklayabiliriz;nasıl ki bir sinema filmi çekilirken film kamerası şerit halinde ve her hareketi ayrı ayrı karelere çeker de ancak film oynatıldığı zaman perdede hepsi tek bir sahne imiş gibi görünürse Layer ler de aynı böyle bir filmin kareleri gibi ayrı ayrı hazırlanır ama yapılan imaj tek bir resimmiş gibi görünür.
Tabiki bizim imajımızda -Katmanlarda- film kareleri gibi hareketlilik, animasyon yoktur. :)))
Bunun nedeni Photoshop'un sadece pixel tabanlı, bitmap resim işleme programı olmasıdır.
Ancak pixel tabanlı imajlara da animasyon uygulamasını Adobe-ImageReady Programını incelerken göreceğiz. (Animasyonlu Banner vb.)
Layer'lerin herbirisi birbirinden bağımsızdır.
Onları istediğimiz gibi yerlerini değiştirebilir, herbirine ayrı ayrı çeşitli Effect'ler (Yeni adıyla "Layer Style" ) uygulayabilir, saydamlaştırıp, altındaki layerin görünmesini sağlayabilir yada imajımızda görünmesini iptal edebiliriz.

Şimdi bu anlattıklarımızı uygulamalı olarak görelim:
Açılan New penceresi ile yeni açılacağımız dökümanımızın hangi özelliklerde olacağını belirliyoruz.
Bu Pencereyi biraz açıklayalım, Name kısmını dökümanınıza (imajınıza) bir ad vermek için kullanabilirsiniz. Image Size Bölümünde, imajımızın genişliğinin (Width), yüksekliğinin (Height) pixel cinsinden ne olacağını yazacağız. Bütün resim işleme programları gibi Photoshopta da ölçü birimi pixel olduğundan bu kısmın pixels olarak kalması çok önemlidir. Resolution penceresi ise imajımızın pixels/inch olarak çözünürlüğünü belirliyoruz. Bu sayfalarda Photoshop ile web sayfalarımızda kullanılacak imajları düzenleyeceğimizi var sayarak ve imajımızı web de yayınlayacağımızı düşünerek monitör çözünürlükleri de 72 pixel olduğundan Resolution bölümünün mutlaka 72 pixels/inch olması gerekiyor. Yani monitör de 1 inc (2,54 cm) lik bir alanda de 72 pixel görünecektir. Mode Kısmı, yine monitörler açısından ekran görüntü renkleri olan RGB Color olarak kalacaktır. Contents Bölümünü imajımızın arkaplan rengini belirleyeceğimiz bölümdür.Yani imajımız hangi renk üzerine oturacaktır? Bu bölümde White, Background,Transparant olarak 3 seçenek görüyoruz. White:Seçilirse arka plan renginin Beyaz olur, Background:Palet'te) alttaki rengi ifade eder.
Araçlar Kutusunu açıklarken sözü edilen Renk Seçim aracında (

	Yan taraftaki resimde görüleceği üzere, Background (Alttaki Renk) Kırmızı, Foreground (Üstteki Renk) Sarı dır. Resimdeki Kırmızı nın olduğu yere hangi rengi verip, "Contents" bölümünde, Background seçeneğini işaretlersek imajımızın arka plan rengi o renk olur. İsterseniz, 'a tıklayarak Background Sarı, Foreground Kırmızı olarak renkleri yer değiştirebilir (Klavyedeki X Tuşu) yada 'a tıklayarak da default ayarlara (Background Beyaz, Foreground Siyah) geçebilirsiniz. (Klavyedeki D Tuşu)
Renk Seçim Aracı (Palet)

	Transparet: Seçilirse, imajımızın arka plan rengi olmayacak, imaj penceresi zemini yandaki resimdeki gibi görünecektir.Transparent olan imajlar, yerleşecekleri web sayfalarının arka plan rengi () ne olursa olsun o renk ile uyumlu olacaklardır.
Transparent Zemin

New Penceresindeki ilgili yerleri düzenledikten sonra OK Tuşuna basıp Nihayet Nihayet yeni imajımızı açıyoruz ve Layer lere devam ediyoruz. Şayet Layer sekmesi görünmüyorsa Ana Menüden, Window > Show Layers ile Layerlerimizi aktif hale getiriyoruz. İlk açılışta Layer Penceresi görüntüsü yandaki gibidir.

Şimdi imajımıza yeni bir Layer ekleyerek, Layer Penceremizi biraz daha iyi tanımaya çalışalım

Katmanlar (Layers) - 2

	Alttaki 1.Layer kırmızı, Opacity değeri: %100, Üstteki 2.Layer Yeşil. Opacity değeri: %100
	Alttaki 1.Layer kırmızı, Opacity değeri: %100, Üstteki 2.Layer Yeşil. Opacity değeri: %36

Ana Menüden Layer > New > Layer ile yeni bir Layer açalım. (Shft+Ctrl+N).
*Yeni Layer i, ayrıca Layer Penceresinin altında bulunan 'a tıklayarakda açabiliriz.
New Layer Penceresini incelersek,
Name: Yeni Layer'ımıza bir isim verebiliriz.
Group With Previous Layer: Alttaki Layer ile beraber hareket ettirmek istersek burayı işaretliyoruz.
Color: Yeni Layer'ımızı diğerler layer lardan ayırabilmek için bir renk seçebiliriz.
Mode: Altındaki layer ler ile çalışma tarzını buradaki listeden seçebiliriz.
Opacity: Layer ımızı saydamlaştırmak, şeffaflaştırıp, altındaki layer'ın görünmesini sağlamak için % değeridir. 100% değeri Layer ımızın mat, saydamlaşmamış halidir. Bu değeri % cinsinden düşürdükçe saydamlaşarak alttaki Layer ın görüntüsünü açar. İki Layer beraber görünürler.

Layer penceremiz daha yakından tanımak için yandaki resmi inceleyelim:
1-Göz (Indicates layer visibility): Layeri görmemizi sağlar, şayet mause ile gözün üzerine tıklayıp kapatırsak o layer'i imajımızda göremeyiz. Açık olan Layer'i gösterir.
2-Fırça (Indicates painting on layer or layer mask): Hangi Layer de işlem yapılıyorsa orada belirir.Çalıştığımız Layer'i gösterir.
3-Efekt Uygulaması (Add a layer style): Layer ımıza çeşitli efektler uygulamamızı sağlar. Tıkladıktan sonra açılan pencereden bir efect seçersek seçtiğimiz efektin işaretlendiği Layer Style penceresini açar.
4-Maskeleme Aracı (Add a mask): Layer e mask ekler.
5-Yeni set yaratma Aracı (Create new set): Daha sonra inceleyeceğiz.
6- Renkleri ve Tonlarını değiştirme Aracı (Create new fill or adjustment layer): Mecut renklerimizde çok güzel değişiklikler yapmamızı sağlayan özellikleri çalıştırır. Uygulamalarda daha çok inceleyeceğiz.
7-Yeni Layer Yaratma Aracı (Create a new layer): İmajımıza yeni bir layer ekler.
8-Layer'i silme Aracı (Delete layer): İptal etmek istediğimiz için işaretlediğimiz layer i siler.
9-Layer seçenekleri: Buradan yeni Layer yaratabilir, seçilen Layer in kopyasını çıkarabilir, Layer i silebilir, Layer özelliklerini görebilir, Layer Style de Blending Seçeneklerine ulaşabilir, Layer leri birbirleri ile birleştirebilirsiniz.
10-Opacity: Yukarıda anlatınan Matlık değerini ayarlayabilirsiniz.
11-Mode: Yukarıda anlatılmıştır.
12-Layer'deki transparent pixel leri kilitler.
13-Layer'in üzerinde herhangi bir boyama işlemini engeller.
14-Layer sağ-sol, aşağı-yukarı hareketini kilitleyerek engeler.
15-Layer'i bütün müdahalelere karşı kilitler.

Katmanlar (Layers) - 3

Bir kaç küçük uygulama yaparak Layer penceresini biraz daha yakından tanıyalım;
Daha önceden gördüğümüz gibi, şayet kapalı ise, Ana Menüden, Window > Show Layers ile Layer penceresini açalım.
Yeni bir imaj başlamak için Ana Menüden File > New ' seçiyoruz, yada Ctrl+N klavye kısa yolunu kullanarak dökümanımızı açıyoruz. Önceden gördüğümüz New
Width bölümüne 250 yazıyoruz, Height bölümüne de 250 yazıyoruz pixels ler olduğu gibi kalıyor. Resulation 72 pixels/inch, Mode: RGB Color, Contents de ise White'ı işaretliyoruz. Bu verdiğimiz değerlere göre imajımız, 250 x 250 Pixels ölçüsünde yani Kare şeklinde, 72 pixels/inch çözünürlükte, RGB (Red:Kırmızı, Green:Yeşil, Blue:Mavi'dir. Monitörler için Ana Renkler modu) Renk modunda ve beyaz zeminli olacaktır. OK deyip imajımızı açıyoruz. Çizimlerimizi daha düzgün yapmak için, mesafelerini ayarlamak içinimajımızın etrafına Ruler (Cetvel)'i açmamızda fayda vardır (View > Show Rulers).
Burada bir hatırlatma yapalım, eğer Photoshop'a çok yabancıysanız, bu anlattıklarımız size çok tuhaf gelebilir. Bu nedenle öncelikle Photoshop Programını edinip, makinanıza kurmanız ve bir süre sağını solunu iyice kurcalayıp, aşina olmanız gereklidir. Penceresi karşımıza geliyor. Ayarlarımızı yapalım, Name bölümüne bir isim yazabilirniz veya boş bırakabilirsiniz. Nasılsa kayıt sırasında bir isim vereceksiniz! Biz yine "Photoshop-Layers" yazıyoruz.

İmajımızı Açıyoruz. (Ruler-Cetvel Görünüyor.) [İmaj Penceresi]

Anlatılanlara Göre Layer Penceremizdeki İşlemler:

Swatches Penceresinden Renklerimizi Seçebiliriz.

"Layer Order" Yaparken Layer Penceremizdeki İşlemler:

İmajımızı çizmeye başlayalım; Öncelikle Layer Penceresinden tuşuna basarak yada Layer > New > Layer ile yeni bir Layer açalım. (Shft+Ctrl+N). Bu yeni layerimızın üzerine sağ tuş ile tıklayarak açılan pencereden Layer Properties i seçip Name kısmına, "Daire" yazalım. Böylece Yeni Layer ımıza "Daire" adını vermiş olduk.
Daha sonra Tool Box dan Marquee Tool dan Elliptical Marquee Tool u seçerek "Daire" Layer ımızın içine istediğimiz boyutta bir daire çizelim. Düzgün bir daire çizmek için bir elimiz de mause ile daireyi çizerken diğer elimizi de klavyemizde shift tuşuna basılı tutalım (Çizim Bitene Kadar!). Eğer Shift tuşunu basılı tutmazsak çizimimizin elips olacağını, tam daire yapmak için çok uğraşacağımızı hatırlatırız. Şimdi çizdiğimiz bu daireyi boyamak için Swatches penceresinden bir renk seçelim. (Window > Show Swatches) Biz burada Kırmızı'yı seçtik (RGD Red). Renk Değişim Aracında (Palet'te) üstteki renk "Foreground" Kırmızı oldu. Tekrar Tool Box dan bu defa Paint Bucket Tool'u seçerek dairemizi seçtiğimiz kırmızıya boyamak için seçili alanın üzerine bir kere tıklıyoruz. İşte bu kadar. Artık "Daire" isimli Layer ımız da Kırmızı renkte bir Dairemiz var.
Tekrar Layer Penceremize gidip, basarak ikinci bir Layer açalım. Bu Layer ımıza da yukarıda bahsettiğimiz şekilde " Kare" adını verelim. Artık "Kare" adında ikinci bir Layer ımız oldu. "Kare" Layer ımız seçili iken (Mavi Renk) ( Göz ve Fırça açık - görünür olacak), tekrar Tool Box dan Marquee Tool aracına gidip bu defa Rectangular Marquee Tool u seçerek yine Shift tuşunu basılı tutarak istediğimiz büyüklükte bir kare çizelim. Eğer Shift tuşunu basılı tutmazsak çizimimizin dikdörtgen olacağını, tam kare yapmak için çok uğraşacağımızı bir kez daha hatırlatırız. Karemizi boyamak için tekrar Swatches penceresinden bir renk seçelim. Bu defa Lacivert'i seçtik(RGB Blue). Bu defa Renk Değişim Aracında (Palet'te) üstteki renk "Foreground" Lacivert oldu.Tekrar Tool Box'dan Paint Bucket Tool'u seçip, imajımızda seçili olan karemizin içine tıklıyoruz. İkinci Layer'imiz olan "Kare" isimli Layer ımız da da Lacivert renkte bir Karemiz oldu.
Layer'leri daha iyi tanımak ve mantığını anlamak için "Kare" isimli Layer'imizdeki Kareyi Dairemizin üzerine sürükleyerek taşımak için Tool Box 'tan Move Tool aracını seçip , Karenin üzerine basılı tutarak Dairenin üzerine sürükleyerek taşıyoruz. Layer Penceresine dikkat ederek, gördüğünüz gibi İmajımızda, Layer sırasına göre Layer Penceresindeki alttaki "Daire" Layer'ında olan daire altta, üstteki "Kare" Layer'ında olan kare üstte duruyor.
Arzu edersek bunların yerini değiştirmemiz de mümkündür. Yani Daireyi üste, Kareyi alta alabiliriz. Şöyleki; Layer penceresine gidelim, "Daire" Layer'ına tıklayalım, mause'umuz üzerinde iken basılı tutarak üstteki "Kare" Layarının üzerine sürükleyelim (Layer Order), artık Daire, Karenin üzerinde yer aldı. Layer leri yer değiştirmek için bunun tersini de, üssteki layer'i sürükleyerek alttaki layer'in altına taşımak suretiyle de yapabiliriz. Yani Layer ler birbirlerinin altına ve üstüne sürüklemek suretiyle taşınabilirler, böylece içlerinde çizili olan resimlerde birbirlerinin altında ve üstünde olmak üzere yer değiştirmiş olurlar (Layer Order).
Yaptığımız imajımızı PSD Formatında kaydedelim ki tekrara açtığımızda Layer'lerimiz kaybolmamış -kapatılmamış- olsun. Aksi halde bütün Layer ler birleşecek, imajı açtığımızda Layer Penceresinde sadece tek bir "Background" 'da Kırmızı bir daire resmi ve Lacivert bir kare resmi görünecek, Daire ve Kare isimli 2 adet Layerler görünmeyecektir.
Bu anlattıklarımızı animasyonlu (Flash) görmek için Tıklayınız!
(Ancak, Flash Player Gereklidir!)

Palet de (Renk Seçim Aracı), Üst renkleri (Foreground)seçiyoruz.

Katmanlar (Layers) - 4

İmajımızı PSD Formatında Kaydettik.

Üçüncü "Dikdörtgen" Layer'ımızı yaptık.

Move Tool ile Tool Options Bar'da "Auto Select Layer"'i Seçmek.

Layer Penceremizin Boyutlarını Değiştirebiliriz.

İmajımızı PSD Formatında kaydettikten sonra, Layer özelliklerini biraz daha inceleyelim.
Layer Penceresinden tuşuna basarak yada Layer > New > Layer ile yeni bir Layer açalım. (Shft+Ctrl+N).
Layer Properties'de Name kısmına, "Dikdörtgen" yazalım. Layer ımız seçili iken (Mavi Renk) ( seçerek - bu defa Shift tuşuna basılı tutmadan - istediğimiz büyüklükte bir Dikdörtgen çizelim. Eğer çizim sırasında Shift tuşunu basılı tutarsak çizimimizin Kare olacağını bir kez daha hatırlatalım. Dikdörtgenimizi boyamak için tekrar Swatches penceresinden bir renk seçelim. Bu defa Yeşil'i seçtik (RGB Green). Bu defa Renk Değişim Aracında üstteki renk "Foreground" Yeşil oldu. Tekrar Tool Box'dan Paint Bucket Tool'u seçip, imajımızda seçili olan dikdörtgenin içine tıklıyoruz. Layer Penceremizde Üçüncü Layer'imiz olan "Dikdörtgen" isimli Layer ımız da da Yeşil renkte bir Dikdörtgenimiz oldu.
Önceden gördüğümüz gibi imajın içinde Layerleri -Layerlerin içindeki resimleri- sürükleyerek taşımak için Tool Box 'tan Move Tool aracını , seçip sürükleyerek taşıyorduk. Move Tool Aracının özelliklerinden bahsedersek, bu aracı seçtiğimizde, Tool Options Bar'a dikkat edersek, "Auto Select Layer" kutucuğunu görürsünüz. Şayet bu kutucuk işaretli değilse, Move Tool Aracını imajımızın içindeki herhangi bir resmin üzerinde sağ tuş ile tıklarsak o resmin hani Layer de olduğu en üstte olmak üzere altındaki bütün Layerlerin listesini gösterir. Buradan Layer Penceresindeki istediğiz Layer'i seçebiliriz. Ancak bu kutucuk işaretli ise Move Tool Aracını hangi resim üzerine tıklarsak, Layer Penceresinde o resmin Layer'ini otomatik olarak seçer.

Göz ve Fırça açık - görünür olacak), tekrar Tool Box dan Marquee Tool aracına gidip Rectangular Marquee Tool'u "Move Tool" da iken "Auto Select Layer" seçimini animasyonlu görmek için Tıklayınız!

Layer Penceresinde Layerlede bulunan göz şekline ise tıklarsanız, "Göz" ikonu kaybolur ve o layere ait resim imajımız da görünmez. Resmi tekrar görmek için "Gözün" kaybolduğu ikonuna tekrar tıklayıp "Göz" ikonunu aktif hale getirmemiz gereklidir. Yani istemediğimiz layerleri imajdan silip, sonradan pişman olmaktansa, "Göz" ikonu ile kapatıp, tekrar açabiliriz.

"Move Tool" Aracının Kullanımını animasyonlu görmek için Tıklayınız!

Layer Penceremizin Boyutlarını sağ alt köşesinde bulunan noktasından tutup çekerek -yandaki şekildeki gibi- büyültüp, küçültebiliriz.

İmajımızı, tekrar PSD Formatında kaydedelim ( File > Save ).

Katmanlar (Layers) - 5

Layer'leri Kontrol Penceresi. (1)


	Zincir ile Layerleri Link haline getiriyoruz.

Zincir ile işaretlenmiş Layer'lerin Kontrol Penceresi. (2)

Palette Options ile Layer'in iç pencerelerinin büyüklüklerini ayarlayabiliriz veya pencereleri "None" ile kapatabiliriz.

İmajımızı PSD Formatında kaydettikten sonra, Layer Penceremizde üst köşede bulunan 'un özelliklerini de biraz daha inceleyelim.
Bu yan ok tuşuna basınca, yandaki resimde görüldüğü gibi Layer'leri Kontrol Penceresi açılır. Bunları yukarıdan aşağıya doğru sırası ile inceleyelim; (1)
New Layer: Yeni bir Layer yaratmamıza yarar.
Dublicate Layer: İşaretleyerek seçtiğimiz (mavi renk olan ve önünde fırça resmi bulunan ) Layer'in bir kopyasını çıkarıp yeni bir layer olarak Layer Penceresine yerleştirir.
Delete Layer: İşaretli Layer'i siler.
New Layer Set: Yeni bir Layer Set oluşturur.
Layer Properties: İşaretli Layer'in Özelliklerini açar.(Layer'e yeni bir ad verebiliriz,adını ve rengini değiştirebiliriz.)
Blending Options: İleride göreceğimiz efektleri düzenlememize yarayan ve çok sık kullanacağımız "Layer Style" Penceresini açar. ("Harmanlama-Karışım Seçenekleri" penceresi de denebilir).
"Layer Style" Penceresini Görmek için Tıklayınız!

Merge Down: Layer bir altındaki Layer ile birleşip tek bir Layer yapar.
Merge Visible: Layer Penceresinde Göz ikonlarının yanlarındaki boş kutucuklara tıklarsak bu kutucuklarda zincir şekli yer alır. Bunu anlamı; zincir ile işaretlenmiş Layerler beraber hareket etmek zorundadırlar (Constrain).Yani birbirleri ile alakalı olmuşlardır. Buna "Link" oluşturma da denir. Hatırlarsanız, Layerler, yanlarındaki Göz ikonlarını kapattığımızda imajımızdan kayboluyorlardı. Yani "Görünmez" oluyorlardı. zincir ile işaretlenmiş herhangi bir Layerleri görünmez yaparsak (Göz İkonunu kapatarak), "Merge Visible" seçeneği ile sadece görünen Layerleri birleştirip tek bir Layer yapar, görünmeyen Layeri yalnız bırakır.
Flatten Image: Bütün Layerleri birleştirip kapatır. İmajımızı bu şekilde kaydedip kapatırsak, bir daha açtığımızda Layerlerimizi göremeyiz.
Palette Options: Layerlerin içlerindeki küçük pencerelerin (Paletlerin) büyüklük ve küçüklüklerini ayarlamamızı sağlar veya pencereleri yok edip Layer Penceresinde sadece Layer adlarını gösterir.
Eğer Layerleri zincir ile işaretleyip, tekrar 'u tıklarsak bu defa Layer Kontrol Penceresinin yeni özellikleri ortaya çıkar (2).
Şimdi buradaki yenilikleri inceleyelim;
New Set From Linked: zincir ile işaretleyip Link oluşturduğumuz Layerlere yeni bir "Set" yaratır.
Lock All Linked Layer: Link oluşturduğumuz bütün Layerleri müdahalelere karşı kilitler. Kilitli Layerlere işlem yapamayız.
Merge Linked: Sadece zincir ile işaretleyerek Link oluşturduğumuz Layerleri birleştirip tek bir Layer yapar.

Yukarıda anlatılanları animasyonlu görmek için Tıklayınız!

Layer Penceresine herhangi bir Layer'e Sağ tuş ile tıklarsak yandaki şekildeki gibi yeni özellikleri açılır. Gerçi bu özellikleri ileride Maskeleme, Type Tool yazı aracı kullanımı ve imaja filitrelerin uygulanmasında daha geniş olarak açıklayacağız. Ancak Layer penceremizi tanımak açısından burada da kısaca gözgezdirmek zorundayız. Yandaki resimde aktif olanlardan yukarıda bahsetmiştik, şimdi sadece aktif olmayan pencereleri açıklarsak;
Enable Layer Mask: Layer'e uyguladığımız maskelemeyi aktif hale getirir.
Rasterize Layer: Photoshop'un Yazı Aracı olan Type Tool ile bir yazı (Text) yazdığımızda bu yazıya direkt olarak filitreleri uygulayamayız. Bunun gibi Photoshop'un Türkçe karakterleri tanımama özelliği olduğundan yazılarımızda Türkçe karakter kullanamıyoruz. Örneğin küçük harf ile " ı " yazamıyoruz. Bu nedenle önce küçük harf ile " i " yazıyoruz. Daha sonra Layeri "Rasterize Layer" ile rasterize ederek, yazımızı "Text - yazı" özelliğinden çıkarıp, " i " harfini üzerindeki "nokta (.)" işaretini Marquee Regtanguar ile işaretleyip seçerek siliyoruz. İşte artık küçük bir " ı " harfimiz oldu.
Copy Layer Style: Layer üzerine evvelce uygulanmış Efektleri kopyalar. (Photoshop'un eski sürümlerindeki "Efektler" adının 6.0 sürümü ile "Layer Style" olarak değiştiğinden evvelce bahsetmiştik.)
Paste Layer Style: Kopyalanmış Efektleri seçilen Layer'e yapıştırır.
Paste Layer Style to Linked: zincir ile link verilmiş olan tüm Layerlere kopyalanmış efektleri yapıştırır. Böylelikle aynı efekti her Layer'e vermek için tek tek uğraşmazsınız.
Clear Layer Style: Layerdeki efekti siler.

Layer'e "Sağ Tuş" ile tıklarsak yeni özellileri açılır.

Katmanlar (Layers) - 6

Transparent Layer Seçimi yapabiliriz.

"Transparent Layer Seçimini" örnek imajımızın, imaj penceresinde inceleyelim.

"Arrange" özelliği ile Layerleri alta ve üste taşıyabiliriz.

"Alink Linked" ile resimlerimizi hizalıyoruz.

Filitreler (Filters) - 1

Photoshop için bir çok firma tarafından çeşitli "Filter" ler hazırlanmış olmakla beraber biz burada sadece Photoshop'un kendi orijinal filitrelerini (Photoshop-Plug-Ins) inceleyeceğiz. Aslında diğer firmaların hazırladıkları filitreler de Photoshop'un orijinal filitrelerinden çok farklı şeyler yapmazlar. Ancak birkaç etkiyi bir arada yapabildikleri için zaman kazandırdıkları ve kullanımları daha kolay oldukları için bunlardan bazıları tercih edilebilir. Ama yine de en güzel etkileri Photoshop'un Orijinal Filitreleri ile elde edebileceğimizi hatırlatalım.
Filitrelere ulaşmak için Ana Menüden Filter ' i seçiyoruz. Yan tarafta gördüğünüz Photoshop Orijinal Filitrelerini gösteren liste açılır. Dikkat ettiğiniz gibi bunlar Ana Flitrelerdir. Herbirini kendi içlerinde bölümleri vardır. Şimdi bunları açıklamaya çalışalım;
Artistic:
Colored Pencil: İmajda bir renk haritası çıkararak baskın olan renkleri alarak fırça darbeleri oluşturur. Feather seçilirse yağlı boya etkisi verir.
Cutout: İmajımızdaki köşeleri basitleştirerek detayını azaltıp yarattığı köşeler ve çizgilerde anti-alias özelliği nedeniyle yumuşak hatlar oluşturur. Yüksek kontrastlı grafiklerde iyi sonuç verir.
Dry Brush: Kuru boya etkisi verir. Renk geçişlerini en aza indirip kenarları rastgele büker, anti-alias etkisi verir.
Film Grain: Bir tür kirlenme etkisi vererek beyaz kirler aydınlatır, siyah kirler koyulaştırır. Yazılar üzerinde iyi etkiler verir.
Fresco: Kontrastı yüksek bir görüntü verir. Kenarlar daha keskin, koyu renkler daha koyu olmakla birlikte "Dry Brush" a benzemektedir.
Neon Glow: Uygulandığı bölgenin renklerine göre 2-3 renk tonu içeren sonuçlar yaratır.
Palette Knife: Paletteki renk sayısını azaltarak keskin hatlı, az renkli bir imaj yaratır.
Poster Edges: İmajımızı posterize ederek renk sayısını azaltır. Kenarlara siyah detaylar ekler.
Rough Pastels: İmajımızın kenarlarını geliştirir. Bunun için bir doku dosyası kullanır.
Smudge Stick: Birbirine karışmış renklerdeki bir bezin kağıt üzerine etkisi gibi sonuç verir.
Sponge: Buzlu cam etkisi vb. etkiler verir.
Underpainting: Kumaş kaplama havası verir.
Water Color: İmajımızın kenarlarına sulu boya etkisis verir. "Fresco" ya benzer.
Blur:
Blur: Yumuşatma, bulanıklaştırma etkisi verir. Standart değere uygular.
Blur More: "Blur" etkisini standart değerin üzerinde uygular.
Gaussian Blur: Photoshop'un en çok kullanılan filitresidir. Bulanıklaştırma ve yumuşatma etkisini istediğiniz gibi ayarlayabilirsiniz.
Motion Blur: Hareketli bir kameranın yakaladığı görüntüyü simule eder. Hareketin şiddeti ve yönü belirlenebilir.
Radial Blur: Çok özel bir kamera efektidir.
Smart Blur: İmajımızdaki kenarları tespit ederek, "Gaussian Blur" etkisini kenarlara dokunmadan iç bölgelere uygular.
Brush Strokes:
Accented Edges: Küçük imajlara uygulanmasında fayda olan kenarlara doku ekleyen geliştirme filitresidir.
Angled Strokes: Kenarları sertleştirip ana hatlara dikkat çeker.
Crosshatch: İmajı geliştirmek için rastgele dokular ve zigzaglar yaratır.
Dark Strokes: Koyu renkli set kenarlar üretir.
Ink Outlines: İmaj kenarlarına mürekkep bulaşmış havası verir.
Splatter: Sudaki yansıma etkisi verir.
Sprayed Strokers: Kenarlarda yatay veya dikey deformasyonlar yaratır.
Sumi-e: Yazılarda (Text) kullanırak hoş görüntüler elde edilir.
Distort:
Diffuse Glow: Aydınlık alanlara gölgeler verir.
Displace: Seçtiğimiz ikinci bir imaj (PSD Formatlı) ile etki eden grafiğin tüm pixellerini düzenleyen bir flitredir. Kullanımı biraz karışıktır.
Glass: İmajımıza eğrilmiş cam kaplaması yapar.
Ocean Ripple: Su dalgalarının verdiği etkiyi yapar.
Polar Coordinates: İmaja iki çeşit bükülme etkisi verir.
Ripple: Küçük su dalgaları etkisi verir.
Shear: Verdiği eksen üzerindeki noktalar ile dikey doğrultuda imaja eğrilik vermeyi sağlar.
Spherize: Deformasyonları küresel yapmamızı sağlar.
Twirl: Girdap hareketi etkisi yapar.
Wave: Su dalgası gibi yumuşak bir deformasyon sağlar.
ZigZag: Zigzaglar, su dalgaları oluşturur.
Noise:
Add Noise: Belirttiğiniz yoğunlukta pixelleri rastgele ekler.
Despeckle: Tarayıcı ile tarattığınız fotoğraflardaki kirleri yok eder.
Dusk & Scratches: Renkleri birbirine yaklaştırarak contrast'ı azaltır.
Median: Pürüzsüz yüzeylerin oluşmasını sağlar. En çok kullanılan filitrelerden biridir.

Filitreler (Filters) - 2

Pixelate:
Color Haftone: İmajımızı renk sayısı az, düşük kalitede bir hale getirir.
Crystallize: İmajımızı renkli hücrelere bölerek petek gibi bir doku yaratır.
Facet: İmaj içindeki kenarlardan anti-aliasing'i kaldırır.
Fragment: İmajımızda deprem etkisi yaratır.
Mezzotint: İmajımıza kirlilik ekleyecek rastgele noktalar üretir.
Mosaic: İmajımızı kareselleştirir. Düşük çözünürlükte zoom yapmış gibi bir hava verir.
Pointtillize: Doku yaratmaya yardımcı olur, uygulanan bölgeyi noktasallaştırır.
Render:
Clouds: Fırça ve zemin rengini kullanarak bulut etkisi veren doku çalışmalarında sık kullanılan bir filtredir. Boş bir Layer de kullanılması daha iyi olur.
Differance Clouds: "Clouds" filitresine benzer. Uygulandığı yüzeyin karşıt renklerini alarak bulut etkisi yaratır.
Lens Flare: Photoshop'un en çok kullanılan filitrelerinden birisidir. Kamera objektifine ışık vurmasıyla oluşan sanal hüzmeleri simüle etmemizi sağlar.
Lighting Effects: Buda Photoshop'un en çok kullanılan filitrelerinden birisidir. Herhangi bir yüzeye ışık efekti vermeyi sağlar.
Texture Fill: Bir PSD dosyasını desen olarak döşemeye yarar.
Sharpen:
Sharpen: İmajdaki kenar ve köşeleri belirginleştirir.
Sharpen More: Daha şiddetli bir "Sharpen" etkisi sağlar.
Sharpen Edges: Düşük şiddette "Sharpen" etkisi yapar.
Unsharp Mask: Kenarların keskinliğini azaltır.
Sketch:
Bas Relief: Kompleks çizgileri alıp iki renkli bir imaj yaratır.
Charcoal: Siyah ve beyaz renkleri kullanarak kara kalem çalışması benzeri üretilebilir. Görüntünün contrast'ı çok fazla olur.
Chalk and Charcoal: Paletteki backgrond ile tebeşir etkisi, foreground ile "Charcoal" etkisini birleştirir.
Chrome: Metal etkisi sağlar.
Conte Crayon: Renk sayısını 6 ya indirir ve doku ekler. Contrast'ı yüksek imajlarda iyi sonuçlar verir.
Graphic Pen: İki renkli bir grafiği detay seviyesi düşük olarak yaratır.
Halftone Pattern: "Graphic Pen" in gelişmişidir.
Note Paper: Basit görüntüler sağlar.
Photocopy: Renkleri azaltır.
Plaster: Siyah, beyaz, gri tonlarda plastik etkisi yapar.
Reticulation: Siyah-Beyaz kirli bir görüntü sağlar.
Stamp: İki renkli sert kenarlı bir sonuç verir.
Torn Edges: "Stamp" filitresine gri tonlar ekler.
Water Paper: Su içindeki bir imajın sert hatlarını su üstüne çıkan bir mürekkep etkisi yaratır.
Stylize:
Diffuse: Pixelleri dağıtır.
Emboss: En çok kullanılan filitrelerden biridir. Resmi gri yaparak üç boyutlu bir görünüm verir.
Extrude: İmajı değiştirip farklı bir imaj yaratır.
Find Edges: Kenarların kontrastını arttırır.
Glowing Edges: "Invert" (tersyüz eder) edeceği uçları otomatik bulur.
Solarize: Renk eğrilerine yaptığı etki ile imajı %50 koyulaştırır.
Tiles: Kaplama yapar.
Trace Contour: Kontur çizgilerini bulur, geri kalanları yok eder.
Wind: Rüzgar efekti verir.
Texture:
Craquelure: Texture yaratır. Yazılarda iyi sonuç verir. Eskimiş yağlı boya tablo etkisi yaratır.
Grain: "Add Noise" filitresi gibidir.
Mosaic Tiles: Gelişmiş mozaik de denilebilir. "Craquelure" a benzer.
Stained Glass: "Mosaic Tiles" ın contrast ile kristalize edilmiş halidir.
Texture: Yazılarda iyi sonuçlar verir.
Video:
De-Interlace: Videodan aktarılan resmin üzerinde temizlik yapar.
NTSC colors: Resmin renklerini titremeyen, kaymayan renklere çevirir.
Other:
Costom: Resim üzerinde numerik olarak bir çok efekt yaratmayı sağlar.
High Pass: Resimdeki contrast'ı azaltır.
Minimum: Resimdeki koyu pixelleri vurgular.
Maximum: Resimdeki açık pixelleri vurgular.
Offset: Birbirini takip eden döşenebilen desenler yaratmaya yarar.

Yazı Aracı "Type Tool"

Bu bölümde çok sık kullanacağımız olan Photoshop'un yazı aracı olan "Type Tool" (T) 'u tanıyalım.
Ancak burada hemen bir hatırlatma yapmamız gerekiyor. Malesef Photoshop'un Çoklu Dil (Multi Language) desteği olmadığı için yazılarımızda Türkçe karakterler olan ı,ö,İ,ç,ş,ğ kullanamıyoruz. Bu nedenle ya Türkçe karakter setli fontları kullanmamız gerekir ki bunların bir çoğunu internet'ten temin edebiliriz, yada kullanacağımız "." nokta veya "," virgülleri başka bir Layerde yaratıp imajımızdaki text'in üzerine veya altına taşıyıp hizalamak zorundayız. Yada Type Tool ile yazdığımız "Text" in bulunduğu Layeri, "Rasterize Layer" ile Rasterize ederek, aynı Layer'e Pencil Tool (kalem) ile nokta, virgül yada "ğ" nin inceltme işaretini elle yaparız. Ancak bu uygulamanın yazının kalitesini biraz bozacağını da hatırlatırız. Çünkü "Rasterize Layer" ile artık yazımız "Text" özelliğini kaybetmiştir.
İmajımıza "Text" eklemek üzere, Araç Kutusundan "Type Tool" 'u seçtiğimiz anda Layer Penceresinde kendiliğinden yeni bir Layer açılır. Yazdığımız yazı (Text) bu yeni Layer'in içinde yer alır. Çünkü her "Text" ayrı bir Layer de bulunur. Layer Penceresinde o Layer'e ait küçük Pencerenin içine de, " Hop, Bu Layerde "Text" var!.." demek ister gibi Type Tool'un simgesi " T " yerleşir.
Araç Kutusundan "Type Tool" seçildikten sonra yada Text'in bulunduğu Layer'deki küçük pencere içindeki Type Tool " T " simgesi üzerine sol tuş ile çift tıkladığımızda "Araç Seçenekleri Çubuğunda" Type Tool (Yazı Aracı) nın komutları ve özellikleri ortaya çıkar.

Şimdi de Araç Seçenekleri Çubuğunda bulunan Yazı Aracının Komutlarını inceleyelim;

	Bu araç ile "Text" in türünü seçiyoruz. Başta seçili olan, normal Text aracıdır. Yanındaki ise "Text" e maskeleme için seçili alan yaratır.
	Yazılacak "Text" in soldan sağa veya yukarıdan aşağı olarak seçimini sağlar.
	Buradaki Açılır Menüden, kullanacağımız Yazı Tipini seçeriz. Sistemimizde kullandığımız fontları burada görebiliriz.
	Açılır Menüden, Kullandığımız font karakterine göre, Regular (Normal), Italik (Eğik), Bold (Koyu), Bold Italik (Koyu ve Eğik) olarak Font Style (Yazı Şekli)'i seçmemizi sağlar.
	Açılır Menüden, Pixel cinsinden Font Size (Yazı Boyutu)'ı seçmemizi sağlar.
	Açılır Menüden, Strong (Katı), Crisp (Parlak), Smooth (Yumuşak) etki ile Anti-aliasing yöntemini seçmemizi sağlar. None seçilirse Anti-aliasing uygulanmaz. (Anti-aliasing, Text kenarlarındaki keskin hatların, kırıklıkların giderilmesi, etrafının yumuşak hatlar ile doldurulması.)
	"Text" in zemin üzerindeki pozisyonunu belirler (Solda, ortada, sağda).
	Yazımızın rengini belirlememize yarar. Üzerine tıklayınca açılan "Color Picker" den yazı rengimizi değiştirebiliriz.
	Çeşitli eğiklik, çarpıklık gibi değişik pozisyonlara sokarak Text'e güzel görünümler sağlar.
	Yazı Karakteri ve Paragraf özellikleri gibi bütün komutların bir arada bulunduğu "Yazı Paletin" ini aktif hale getirir.
	"Text" e yapılan bütün bu ayarlamaları onaylar veya iptal eder.

Yanda resmini gördüğünüz ve Photoshop 6.0 ile beraber eklenen yeni özelliği, "Yazı Karakteri ve Paragraf Paleti" ile yazımızın, Yazı Türünü, Karekterini, kalınlığını, yana yatıklığını, Harf büyüklüğünü (pixels cinsinden), Text yazarken ilmecin bulunduğu harfler arası mesafeyi, Yazı büyüklüğünü (% cinsinden), bulunduğu yerden yukarı veya aşağı yer değiştirmesini (pixel cinsinden), satır arası mesafesini, mevcut Text'in harfler arası mesafesini, rengini, paragraf özelliklerini, yazı başı ve sonunun pozisyon değiştirmeleri gibi bir çok özelliğini düzenleyebiliriz.
Animasyonu görmek için Tıkayın!
Yazı Paletinin sağ üst köşesinde bulunan 'a tıklayarak açılan menüden, "Yazı Stili" ne ilave özellikler olan, extra koyuluk, yatıklık, harflerini tamamının büyük harf olması, script yazı türleri, alt çizgi, ortadan çizgi, harfler arası eşitliği düzenleyen "Fractional Widths" gibi seçeneklere ulaşabiliriz.
Yine 6.0 ile beraber Text Tool'a eklenen yeni bir özellik olan, "Wrap Text" ise Text'i eğip büküp çeşitli şekillere sokarak ve bunları yatay veya dikey çekip sıkıştırarak yazıya güzel görüntüler verir.

Layer Penceresi: Layerdeki Text'e,
"Wrap Text" Uygulaması Sonrası
Görünümü.

"Yazı Karakteri ve Paragraf Paleti" ile yazımızı çok kolay denetleyebiliriz.

"Yazı Paletinde" Extra Özellikler'e Erişebiliriz.

"Wrap Text" Seçenekleri ile Text'e
güzel efektler verilebilir.

"Wrap Text" Örnekleri

"Arc Upper" Efekti

"Arc Lower" Efekti

"Bulge" Efekti

"Flag" Efekti

"Wave" Efekti

"Fish" Efekti

"Rise" Efekti

"Fisheye" Efekti

"Squeeze" Efekti

Tekrar bir hatırlatma yapalım; "Text" olan Layer'e, vektörel olduğu için Filitrelerin tamamının ve ayrıca Transform > Distort ile Transform > Perspective uygulamalarının hiçbirini gerçekleştiremeyiz. Ancak bunları uygulayabilmemiz için Text'in " T " bulunduğu Layer'e sol tuş ile tıklayarak açılan menüden "Rasterize Layer" i seçerek Layer'in "Text" özelliğinin iptali için "Rasterize" etmemiz yani solid hale getirmemiz gereklidir. Aynı işi, Layer > Rasterize > Type ile de gerçekleştirebiliriz. Ancak bu işlemden sonra (Yazı Kalitesinde biraz bozulma olacaktır...), Filitreleri uygulanabiliriz.

Efektler (Effects) - 1

Photoshop'un eski versiyonlarındaki "Effects" uygulamalarının, yeni 6.0 versiyonunda "Layer Style" adını alarak değiştiğinden daha önceden bahsetmiştik. Efektlerin, Ana Menüden, Layer > Layer Style alt menüsünü açarak "Blending Options" adı altında sıralandığını görebilirsiniz. ) tıklayarak açılan "Layer Style Penceresi" nden ulaşabiliriz. Diğeri ise hem Layer Penceremizin üst tarafında bulunan Açılır Menüden hemde Layer Style Penceresinde ki "Blend Mod" Efektleri incelemeye başlamadan önce iki ayrı efekt çeşidinin olduğunu bilmemiz gerekir. Bunlardan birisi, "Blending Options" dan ulaşılan ve Drop Shadow (Gölge Vermek), Inner Shadow (İçe Gölge), Outher Glow (Dışa Parlaklık), Inner Glow (İçe Parlaklık), Bevel end Emboss (Eğim - şev ve Kabartma Etkileri), Satin (Saten etkisi), Color Overlay (Renk verme), Gradient Overlay(Eğim verme), Pattern Overlay (Desen-model verme), Stroke ( Hat verme) olarak adlandırılan efektlerdir. Bu efektlere, yukarıda belirttiğimiz gibi "Blending Options" altından ulaşabileceğimiz gibi daha kolay yolu olan, Layer Penceresindeki Layer'e çift tıklayarak yada Layer Penceresinin altındaki Effect simgesine ( dan ulaşabileceğimiz Layer Efektleridir.
Bu efektler Photoshop'un birçok komutunda karşımıza çıkacaklar. Ancak her yerde aynı özellikleri taşıdığından sadece burada açıklayacağız.

Hatırlarsanız, meydana getirdiğimiz imajımızın üst üste gelmiş bir katmanlar bütünü olduğundan bahsetmiştik. Katmanları alta ve üste sürükleyerek yerlerini değiştirebiliyor, şeffaflıklarını ayarlayabiliyorduk (Opacity). Bu nedenle, Layerleri asetat kağıtlara da benzetebiliriz. "Opacity Değerini" düşürdükçe (Şeffaflaştırdıkça) geçirgenliği artıyor ve bir alttaki resmin görüntüsü ortaya çıkıyordu.
Bu hatırlatmadan sonra, öncelikle, yan tarafta resmini gördüğünüz Layer Efektlerini tanıyalım;
Normal: Sıradan asetat katmanıdır. "Opacity" değeri % 0 iken tam geçirgen, % 100 iken geçirgen değildir.
Dissolve: Erime, dağılma etkisi verir. Dağınık, kirli, pürüzlü yüzeylerin yapımında bu efekt çok etkilidir.
Multiply: Siyah rengin hakim olduğu koyu bir görüntü elde ederek, iki Layer'i birbirine kombine eder.
Screen: Yine iki Layer'i kombine ederek bu defa açık renklerin hakim olduğu bir görüntü elde eder.
Overlay: "Multipy" ve "Screen" efektlerinin tam orta noktasını bulur.
Soft Light: Hafif bir spot ışığı etkisi verir. Etki rengi koyu ise "Multipy", açık ise "Screen" uygular. İmajın kontrastını yükseltir.
Hard Light: "Soft Light'ın daha şiddetlisidir.
Color Dodge: Uygulanan renk, uygulayıcının renk değerlerine göre parlaklaşır.
Color Burn: Color Dodge'nin tam karşıtıdır.
Darken: Birbirleriyle etkileşim yapan renklerden koyu olanı baskınlaştırır.
Lighten: Darken'in tam karşıtıdır.
Difference: Etkileşen renklerden açık tonda olanı bularak diğer renkten RGB değerini çıkarır.
Exclusion: Difference ile aynı mantıkta çalışmasına rağmen daha yumuşak sonuç verir.
Hue: Etki eden ile etki edilen renk değerleri kombine edilir.
Saturation: Rengin şiddetidir. Etki eden ile edilenin kombinasyonu neticesi renk elde eder.
Color: Rengi farklı şeffaf bir Layer in diğer Layer'e etkimesini sağlar.
Luminosity: Rengin parlaklığıdır.

Şimdi de Layer Penceremizde efekt vermek istediğimiz Layerin ortasına çift tıklayarak, "Layer Style" penceresini açıp, yandaki resimde sadece ilgili kısmı görünen ve "Layer Style - Blending Options" dan ulaşacağımız Efektleri inceleyelim;

Drop Shadow: Herhangi bir Layer' de olan ve imaj penceremizin içine çizdiğimiz şekle gölge verir. İçindeki ayarları:
Structure:
*Blend Mode: Yukarıda açıklanmıştı (Normal, Dissolve, vd.).
*Opacity: Geçirgenlik, şeffaflık oranıdır. Default (Varsayılan-Standart) değeri %75 dir.
*Angel: Açı'dır. Işık kaynağı ile cisim arasındaki sanal doğrunun yatayla yaptığı açıyı ifade eder. Default değer 120° dir.
*Use Global Light: "Genel ışık değerini kullan." Bunu seçersek, resimdeki gölgeleme yapan tüm ışık değeri ile genel ışık değerini kullanırız. Bunu değiştirirseniz tüm Layerlerdeki ışık değerleri ve açıları değişecektir.
*Distance: Resim ile gölgenin düştüğü zemin arasındaki pixel cinsinden uzaklığı belirler. Default değeri 5' dir.
*Spread: Gölgeyi yaymak için kullanılan % değeridir. Yüzde değeri çoğaldıkçe gölgenin bulanıklığı azalır. Default değeri 0' dır.
*Size: Gölgenin pixel cinsinden ebatalarını belirler.
Quality:
*Contour:Photoshop'un bünyesindeki desenlerle veya bizim "Define Pattern" ile kaydettiğimiz desenleri, gölgenin dış hatlarına uygular.
*Anti-aliased:Tek pixellik çizgilerin açı kazandıklarında oluşan rahatsız edici çıkıntılarının daha açık bir renkle yumuşatılması ve boşlukların daha koyu bir renkle doldurulması işlemi olan Anti-Alias'ın gölgeye uygulanmasını sağlar.
*Noise:Gölgeye % cinsinden rastgele pixeller ekler.

Efektler (Effects) - 2

Layer Penceresindeki "Göz"leri kapatarak, verdiğimiz Efektleri imajımızdan kaldırabiliriz.

Efektlere devam edelim, buradaki efektlerin özelliklerinin bir çoğu "Drop Shadow" ile aynı olduğundan sadece farklı olan ayarlarını inceleyeceğiz;
Inner Shadow: İçe gölge verme efektidir. Resmin daha uzakta gömülü gibi görünmesini sağlar. Farklı olan, Choke: Gölgeyi içe doğru yayarak imajı boğar.
Outher Glow: Dışa parlaklık efektidir. Resmin etrafına neon ışıkları ile aydınlanma kazandırır. Biz yine farklı olanları inceleyelim,
Structure:
Bu bölümde işaretli kutucuk içine tıklarsanız açılacak olan "Color Picker" den efekte vereceğiniz rengi seçebilirsiniz. Hemen yanındaki "Gradient" ( Eğim ) penceresini açarsanız, buradan hazır şablonları kullanabileceğiniz gibi isterseniz kendinizde şablon hazırlayarak bu efekte uygulayabilirsiniz.
Elements:
Technique: Softer: Parlaklığa yumuşak bir etki verir. Precies: Tam parlaklık sağlar.
Inner Glow: İçe Parlaklık efektidir. Neon ışıkları türündeki efekti cismin içine uygular.
Elements:
Source: Parlaklığı, Center: Ortadan dışa doğru, Edge: Kenardan ortaya doğru verir.
Quality:
Range: Parlaklığın menzilini % cinsinden belirler. Default değeri % 50 dir. Yüzde değeri küçüldükçe içe, büyüdükçe dışa doğru mesafesini ayarlar.
Jitter: Parlaklığın imaj üzerindeki stresini % cinsinden belirler.
Bevel and Emboss: Eğim-şev, kabartma efektidir. Aydınlatma ve karartma ile imajın kabarık, zemine gömülü veya şişkin görünmesini sağlar.
Structure:
Style: Burada açılır menüde 5 tane efekt vardır. Outher Bevel: Dışa eğim-şev verir. Inner Bevel: İçe eğim verir. Emboss: Kabartma etkisi yapar. Pillow Emboss: Zeminin alt yüzeyine kabartma efekti vererek imajın zemine gömülmesi etkisini yaratır. Stroke Emboss: İmaj kenarlarına kabartma etkisi verir. Default ayarı, Inner Bevel'dir.
Technique:Buradaki açılır menüde de üç adet efekt vardır. Smooth:Düzgün, yumuşak etki yapar. Chisel Hard: Kabartmaya sert yontma etkisi yapar. Chisel Soft: Kabartmaya yumuşak yontma etkisi yapar. Default ayarı, Smooth'dur.
Depth: Efektin derinliğini yüzde cinsinden belirler. Default ayarı, % 100 'dür.
Direction: Burada yanındaki radyo düğmeleri ile seçilen iki değer vardır. "Up", Işığın sol üstten, "Down", ışığın sağ alttan gelmesini sağlar.Default ayarı, "Up" tır.
Size: Efekt etkisinin yüzde cinsinden boyutudur. Default ayarı, % 5' dir.
Shading:
Bu bölüm, efekte yapılan gölgeleme ayarları bölümüdür. Gloss Contour: Buradaki hazır şablonlar ile veya kendiniz şablon ekleyerek efektin dış hatlarına parlaklık ekleyebilirsiniz.
Highlight Mode - Shadow Mode: Işık ve gölge tarzlarını, daha önce anlattığımız Layer Efektleri bölümündeki ayarlardır. (Normal, Dissolve, vd.) Default ayarları, Highlight Mode'da Beyaz renk ve Screen, Shadow Mode'da Siyah renk ve Multiply'dir. Opacity değerleri her ikisinde de % 75 'dir.
Dikkat ederseniz, "Layer Style Penceresi"nde, Bevel and Emboss efekti altında bulunan "Contour" ve ""Texture" sekmelerini göreceksiniz. Buradan, "Contour" sekmesinden ayrıca efektin dış hatlarına verilen efekt değerlerini ayarlayabilirsiniz. "Texture" sekmesinden de hazır şablonları kullanarak veya kendiniz "Define Pattern" ile yarattığınız şablonlarınız ile imajın üstüne desenler ekleyebilirsiniz.

İmajımıza "Texture" ile hazır şablonları kullanarak, iki farklı desen ekledik.

Efektler (Effects) - 3

Üstteki küçük dökümanı "Define Pattern" ile hafızaya alarak, altındaki büyük dökümanımıza "Fill" ile döşedik.

Satin: İmaja verdiği efekt ile saten etkisi yaratır. Default ayarları, Blend Mode: Multiply, Opacity %50, Angel 19°, Distance:11px, Size:14 px'dir.
Color Overlay: İmaja renk kaplama efektidir. Blend Mode'un yanındaki renk kutusuna tıklayarak, açılan Color Picker'den seçilen renk ile Blend Mode daki seçime göre renk efekti ekler.
Gradient Overlay: İki yada daha çok rengin birbiri arasından yumuşak geçiş yaparak imajı boyar. Default ayarları resimdeki gibidir.
Pattern Overlay: Hazır Şablonları Kullanarak veya Define Pattern ile kendi yarattığınız şablonlardan oluşan desenler ile imaja kaplama yapar.
Stroke:
İmaj altında etkisi ile dış kenarlarına çerçeve ekler. Position: Çerçevenin pozisyonunu belirler, çerçeveyi, Outside: Dış kenara, Inside: İç kenara, Center: Kenarların ortasına ekler. Fill Type: Doldurma tipini seçebiliriz. Çerçeveye, Color: Renk Doldurur, Gradient: Eğim vererek doldurur, Pattern: Desen vererek doldurur (Bunlardan daha önce bahsetmiştik).

Efektleri kısaca incelemiş olduk. Ancak bunların işlevlerini görebilmeniz için mutlaka Photoshop programını temin edip, satın almasanız dahi deneme versiyonunu indirip ( deneme versiyonun da kayıt yapmaya izin verilmiyor), kendinizin deneme yanılma yöntemi ile ve sabırla uğraşarak öğrenmenizden daha kolay yolu yoktur. Biz burada sadece basit şekilde inceleyerek, ileride ihtiyaç duyduğunuzda kullanmanız için size bir kaynak yaratmış oluyoruz.

Bu bölümde adı çok sık geçen ve Photoshop'u kullanırken çok sık kullanacağımız bazı özelliklerinden, olan "Define Pattern" , "Fill" , "Stroke" efektlerini ve "Transform" özelliklerini de incelememiz gerekmektdir. Bu efektlere, Photoshop'un Arayüzünde bulunan Edit Menüsünden ulaşabilirsiniz.
Şimdi bunları inceleyelim;

Define Pattern:
Öncelikle "Pattern" kelimesinin Türkçe karşılğının "Desen" olduğunu hatırlamalıyız. Böylece "Define Pattern" nin de "Desen Tanımlamak" olduğunu bilmeliyiz. Yani bu özellik ile programa bir mesaj vererek, "İmajımızı bir desen ile kaplamak istediğimizi" bildiriyoruz.
Bir örnek verirsek, 10x10 pixels ebatlarında yeni bir döküman açıp, içine bir şeyler çizgik, boyadık ve efekt vererek süsleyerek bir imaj (desen) elde ettik.
Şimdi bu imajımızı daha büyük ölçülerde 100x100 pixels ebatlarında başka bir dökümanımıza desen olarak kaplamak istiyoruz. Bunu Kopyala (Ctrl+C) - Yapıştır (Ctrl+V) yöntemiyle yapmaya kalkarsak hem çok zaman alır, hemde çok uğraştırır. Ayrıcada her zaman istenen etkiyi de vermez. Bu nedenle işlemi "Define Pattern" ile yapacağız. Öncelikle, desen olarak kullanacağımız 10x10 pixels edatlarındaki dökümanımızın tamamını seçelim (Ctrl+A), [Şayet tamamını değil de bir kısmını, kullanacağımız desen olarak seçmek istersek, bunun için Araç kutusundaki seçim aracımız olan "Marquee Tool" dan birisi, örneğin, "Rectangular Marguee Tool " (M) ile seçmimizi yapmamız gerekiyor.]
Daha sonra Edit > Define Pattern ile bu seçimimizi desen olarak programın hafızasına alırız. ( Program, Edit/Define Pattern seçimini yapınca bir pencere açarak hafızaya aldığımız desen'e bir isim vermemizi ister. Buraya bir isim yazarsak ileride kullanacağımız zaman bize kolaylık sağlayacaktır.)
Artık istediğimiz kadar Kopyala-Yapıştır yapsak da hafıza daki desen bilgisi değişmez taki başka bir Define Pattern yapıp da aynı isim ile kaydedene kadar.
Yukarıda ki Efektler bölümünde sık sık anlattığımız "kendiniz Define Pattern ile desen yaratabilirsiniz." açıklaması bunu ifade eder. Peki yarattığımız ve Define Pattern ile hafızaya aldığımız bu deseni nasıl kullanacağız? Şimdi diğer bir özellik geliyor;

Efektler (Effects) - 4

Fill:
Belirli bir seçili alanı veya Layer'i bir renkle ve önceden seçilmiş bir desen ile doldurmaya, boyamaya yarar.

"Fill" Penceresi

Bu pencereyi açıklayalım;
Contents: Use: Doldurma işlemini yaparken neyi kullanacağımızı belirliyoruz. İmajımızı, seçime göre: Foreground; Paletteki üst renk-çizim rengi, Background; Paletteki alt renk-zemin rengi, Pattern; "Define Pattern" ile hafızaya alınan desen (resimde, önceki sayfadaki örneğimiz seçilidir.), History; Undo bekleyen geçmişteki düzeltmeler, Black; Siyah renk, %50 Gray; siyah ve beyaz rengin tam ortası, White; beyaz renk ile doldururuz.
Blending: Mode: Önceden Layer Efektlerinde açıklanmıştı (Normal, Dissolve vd.). Opacity: Doldurma işleminin imaj'a etki yüzdesi. Preserve Transparency: Bunu seçersek, yapılan işlem, Layer'deki şeffaf olmayan bölgelere etki edip, şeffaf olan bölgelere dokunmayacaktır.

Stroke:
Kenar çerçevesi düzenler. Bir Layer'in tamamının yada içindeki imajın veya seçili bir alanın kenarlarını oluşturmak için kullanılan bir komuttur. Default olarak Paletteki Üst Renk-Boyama rengini kullanır. Ancak istenirse bu renk "Stroke" Penceresi içinden "Color Picker" den seçilen başka bir renk ile değiştirilebilir.

"Stroke" Penceresi

Stroke penceresinde, Stroke, Location, Blending bölümleri bulunur. Bunlar sırasıyla;
Stroke: "Width":Çizilecek çerçevenin kalınlığını pixel cinsinden belirler. "Color": Çerçevenin rengini belirler. Default olarak Paletteki üst rengi (Foreground) kullanır. Ancak yukarıdaki resimde Kırmızı renk ile gösterilen kısma tıklarsak, açılan Color Picker'den başka bir renk seçerek çerçeve rengini değiştirebiliriz.
Location: Çizilecek çerçevenin, imajın kenarının neresine çizileceğini tespit ederiz. "Inside": Kenardan içe doğru. "Center": Kenarın ortasına. "Outside":Kenarın dışına doğru.
Blending: Bu kısım daha önce anlatılanlar ile aynı olduğu için burada ayrıca değinmiyoruz.
"Stroke" un Photoshop uygulamalarında en çok kullanılan bir komutlardan biri olduğunu hatırlatırız.

Define Brush:
Birçok özelliği ile Define Pattern'e benzer. Ancak bu defa, "Edit > Define Brush" ile hafızaya alınan deseni, Tool Options Bar (Araç Seçenekleri Çubuğu) daki "Brush" listesine ekler. Tool Bar'dan Paintbrush Tool (B) aracını kullanırken, Tool Options Bar'da ki Brush listesinden hafızaya aldığımız deseni seçebiliriz. Bu taktirde Paletin boya-üst rengini kullanarak fırça etkisi ile boyar.

Efektler (Effects) - 5

"Transform" için imajımızı seçili hale getirdik.

Orijinal İmaj

Efektleri incelerken, yaptığımız işlemler ile çok yakın alakalı olan Edit Menüsününde bulunan özelliklerden de bahsettik. Edit Menüsünü bu kadar inceledikten sonra burada bulunan çok önemli araçlar olan ve bir imajın boyutlarını değiştirmeye, eyip-bükmeye, şeklini değiştirmeye, perspektif vermeye ve yatayla yaptığı açıyı değiştirmeye, döndürmeye, yarayan "Free Transform" yada "Transform" dan da bahsetmeden, Edit Menüsü ile ilgili bu konuyu kapatmayalım istedik.
Edit > Free Transform yada Edit > Transform ile bu özelliklere ulaşabiliriz. Transform yapabilmemiz için imajımızın, transforrm yapacağımız yerini önceden seçmemiz gerekir. Şayet bu seçimi yapmazsak transform işlemi, o layerdeki bütün resimlere uygulanır. Bu hatırlatmadan sonra, "Free Transform" u açıklamadan önce "Transform" un alt menülerini açıklayalım.
Scale:İmajın enini boyunu değiştirmeye yarar. Bu işlem yand resmi görünen ve imajın, altındaki-üstündeki yada sağındaki-solundaki küçük kutuların içe veya dışa hareket ettirilmesi ile yapılır. Köşelerdeki küçük kutular ile yapılacak değişiklik ise imajın her iki doğrultuda en ve boyunun değişimini sağlar.
Örnek resimde imajın tam ortasında bulunan simgesi, bölgenin merkez noktasını belirler. Photoshop'ta bir çok araçta karşımıza çıkacak olan merkez noktası simgesinin yeri değiştirilirse imajın ağırlık merkezi de değişmiş olur ve yapılacak açı değişikliklerinde yeni merkez noktası dikkate alınarak etki sağlanır. Burada konumuz olan transform işlemleri de bu yeni değişen merkez noktası esas alınarak yapılır. Bu özellik, Photoshop'un merkez noktasına etki eden bütün araçlarında aynı sonucu verir.
Rotate: İmajı, sağa-sola döndürmeye, yatayla yaptığı açıyı değiştirmeye yarar. Tool Options Bar daki ayarlar ile bu işlemi çok düzgün br şekilde yapabilirsiniz. Örneğin tam 45° döndürmek için açı penceresine 45 yazmak yeterlidir. Bunu gibi daha bir çok özellik tüm transformlar için Tool Options Bar da mevcuttur.
Screw: İmajın eğriliğini değiştirmeye yarar. Güzel şekiller elde edebilirsiniz.
Distord: Küçük kutucukların birbirinden bağımsız hareket ettirilmesi ile imajın biçimini değiştirir. "Render" edilmemiş "Text" lere uygulanmaz.
Perspective: İmaja perspektif kazandırır. "Render" edilmemiş "Text" lere uygulanmaz.
Rotate 180°: İmajı bulunduğu konumdan 180° aksi yöne çevirir.
Rotate 90° CW: İmajı bulunduğu konumdan 90° saat yönünde çevirir.
Rotate 90° CCW: İmajı bulunduğu konumdan 90° saat yönüne ters yönde çevirir.
Flip Horizontal: İmajın sağını soluna çevirir.
Flip Vertical: İmajı baş aşağı çevirir.
Free Transform: Scale, Rotate, Flip gibi işlemlere kolaylık sağlamak amacıyla kullanabiliriz. Bu işlemleri manuel olarak yapmamızı sağlar. (CTRL+T)

Scale

Rotate

Skew

Distort

Perspective

Rotate 180°

Rotate 90° CW

Rotate 90° CCW

Flip Horizontal

Flip Vertical

Yukarıdaki Orijinal İmaj'a "Transform" Uygulama Örnekleri.

Daha İyi Anlamak İçin, Herbirini Yukarıdaki "Orijinal İmaj" ile Karşılaştırın.

Efektler (Effects) - 6

Orijinal Resim

"Desature" Uygulanmış Resim.

Bu bölümde Photoshop'un en önemli özelliklerinden birisi olan renklere etkisi üzerinde duracağız. Ana menüden, Image > Adjust ile erişeceğimiz renk etkileşim menüsünü inceleyelim. Buradaki ayarlara, Layer Penceresi altında bulunan "Creat new fill or adjustment layer" ikonundan da ulaşabiliriz.
Bu harika renk efektlerini sırasıyla inceleyelim;
Levels: Level Penceresindeki, "Channel" açılır menüsünde bulunan RGB Modunda iken 4 channel seçeneği ile resimdeki renk aralıklarını ve min. max. değerlerini ayarlamayı sağlar. R modunda iken Kırmızı, G modunda iken Yeşil, B modunda iken Mavi renk aralığını belirlemeye yarar. Scanner ile taranan fotoğrafların orijinal renklerine döndürülmesinde çok yararlı olur. Örnekte, 255 olan Input Levels ayarı, 153 olarak değiştirilmesi ile resmin aldığı sonuç gösterilmiştir.
Auto Levels: "Levels" mantığını kullanarak optimal ayarlarla renklerde gelişme sağlar.
Auto Contrast: Resmin kontrastını optimal seviyeye getirir.
Curves: Renk ayarlarının eğrilerle yapıldığı, Level mantığı ile aynı şekilde çalışan bir efekttir. Curves Penceresinde, eğrinin üzerinde sol tuşa basılı tutarak istediğimiz gibi ayarlayabiliriz. Tek rengin tonlarına uygulanırsa daha etkili sonuçlar verir.
Color Balance: Özellikle CMYK'dan RGB'ye geçişte renk değişimlerini açık, orta ve koyu ton olarak düzeltmede kullanılır.
Brightness/Contrast: Resmin aydınlık ve kontrast(zıtlık) ayarlarını değiştirir.
Hue/Saturation: Resmin, renk, aydınlık ve parlaklık ayarlarını değiştirmemize yarar. Ancak "Colorize" seçeneği işaretli ise tüm renklerin tonlarını değiştirir. Hue: Renk değeri, Saturation: Parlaklık, Lightness: Aydınlık.
Desature: Resmi siyah-beyaz hale getirir.
Replace Color: Resimde, seçilen bir rengi diğer bir renk ile değiştirir.
Selective Color: Kırmızı, sarı, yeşil, mavi, beyaz, mor gibi renkleri seçerek, resimdeki miktarlarını ayarlamaya yarar.
Channel Mixer: Resimde bulunan kırmız, yeşil ve mavi miktarlarında değişiklikler yapmaya yarar.
Invert: Resmin negatifini alır. (Ctrl+I)
Equalize: Aydınlık alanları daha aydınlık yaparak resmin parlaklığını arttırır.
Threshold: Resmin karanlık ve aydınlık noktalarını açığa çıkarır veya geri plana iter. Sonuçta resim siyah-beyaz olur.
Postarize: Resmin renk sayısını belirlememize yarar. Postarize Penceresindeki kutucuğa yazdığımız sayı kadar, renk sayısını o seviyeye indirir.
Frame#1: Resme çerçeve eklemeye yarar. "Border Width": Çerçevenin kenar kalınlığını, "Frame Widht": Çerçevenin kalınlığını belirler.
Variations: Resimdeki renkleri değiştirmeye yarar. Kırmızı, yeşil, mavi, sarı, mor, gibi renkleri daha çok kullanarak, bunlara ışık ve gölge verip, resimin reklerini değiştirir, yeni varyasyonlar yaratır. Bu işlemi, ilgili renk penceresinin üzerine, istediğimiz renk tonunu alana kadar sol tuş ile tıklayarak gerçekleştiririz.

Bütün bu anlatılanlar da Photoshop'un web'e etkisi üzerinde duracağımızdan daha önceden bahsetmiştik. Bu nedenle web'de az yer kaplaması için Photoshop da yaratacağımız grafiklerimizin, RGB formatında hazırlanması gerekir. Şayet RGB hariçinde herhangi bir renk modundaki hazır bir grafiği açarak, üzerinde değişiklikler yapmak isterseniz, İmage > Modeİmage > Mode menüsünden RGB Color'a çevrilmelidirler. Ancak JPEG olarak kaydedilen grafikler, RGB Color formatında kalırlar ve Layer özellikleri de aktifdir.

menüsünden "RGB Color" a çevirmeniz uygun olacaktır. Örneklersek; web'de en çok kullanılan, GIF grafikler "Indexed Color" formatındadırlar (RGB Color formatında hazırlanıp, GIF olarak kaydedilen grafikler kayıt sırasında kendiliğinden "Indexed Color" a çevrilirler) ve bütün Layer özellileri iptal edilmiştir. GIF'ler, üzerinde çalışmak için mutlaka

"Replace Color" Uygulanmış Resim.

"Equalize" Uygulanmış Resim.

"Posterize" Değeri, "3" Olarak Uygulanmış Resim.

"Threshold" Uygulanmış Resim.

"Invert" Uygulanmış Resim.

"Frame#1" Uygulanmış Resim.

Dreamweaver Ders Videoları

noreply@blogger.com (sporttube) — Tue, 19 Feb 2008 23:31:00 +0000

Flash dersleri ve örnekleri

noreply@blogger.com (sporttube) — Tue, 05 Feb 2008 02:31:00 +0000

Örnek 1 : Motion Tween kavramı Düzgün Doğrusal Hareket

1 . File – New

2 . Timeline da 1. kareye araç kutusundan oval aracı seçilerek sahneye bir daire çizilir.

3 . Seçim aracı ile bu daire seçilerek Insert - Convert To Symbol bileşeni kullanılarak sembol tipini Graphics olarak belirlenir.

4 . Timeline da 25. kare alanına tıklanarak F6 ile bir anahtar kare eklenir.

5 . Bu 25. karede dairenin konumu değiştirilir.

6 .

1. kare ile 25. kare alanları arasında herhangi bir kareye tıklayarak Properties penceresinden Tween alanını Motion yapılır.

7 . CTRL+ENTER

Örnek 2 : Shape Kavramı Şekil Değişikliği

1 . File - New

2 . Timeline da 1. kareyi seçerek araç kutusundan dikdörtgen (Rectangle Tool) çizim aracıyla beraber sahneye bir tane dikdörtgen çizilir (kenar çizgisi çizilmez)

3 . Timeline da 20. karede F7 (Insert Blank Keyframe) ye basılır. Bu işlemle beraber 20. kareye boş bir anahtar kare eklenmiş olur.

4 . Bu karedeyken sahneye oval aracı ile bir daire çizilir. Dolgu rengi farklı bir renk seçilebilir.

5 . Timeline da 1. ile 20. kare arasında bir kareye tıklayarak Properties den Tween alanı Shape seçilir.

6 . CTRL+ENTER

Örnek 3 : Motion Tween Kavramı ile Yer Değiştirme

1 . File - New

2 . Timeline da Insert – Layer ile 4 tane layer eklenir.

3 . Her Layer’in 1. karesinde araç kutusundan oval ve rectangle araçlarıyla sahneye 4 tane şekil çizilir.

4 . Her şekil seçim aracı ile seçilerek Insert - Convert To Symbol bileşeni kullanılarak sembol tipi Movie Clip olarak belirlenir.

5 . Her Layer’ın 10. karesine F6 ile anahtar kare eklenir. Ve bu karelerdeyken her şeklin sahne içindeki koordinatı değiştirilir.

6 . Aynı şekilde 20., 30, 40 ve 50. karelerde de F6 ile anahtar kare eklenerek şekillerin yerleri değiştirilir.

7 . Şekillerin yerleri değiştirilirken aynı zamanda renkleri ve boyutları da değiştirilir.

8 . Her anahtar kare arasında bir yere tıklanarak Properties den Tween alanı Motion seçilir.

9 . CTRL+ENTER

Örnek 4 : Motion Tween Kavramı ile Yazı Üzerinde İşlem

1 . File - New

2 . Timeline da Insert – Layer ile 4 tane layer eklenir.

3 . İlk katmanın 1. karesindeyken araç kutusundan Text aracı ile sahneye bir yazı yazılır. Properties alanından yazını rengi , tipi ve boyutu belirlenir.

4 . Her bir yazı seçim aracı ile seçilerek Insert - Convert To Symbol bileşeni kullanılarak sembol tipi Movie Clip olarak belirlenir.

5 . 25. karede F6 ile anahtar kare oluşturulur. Burada yanın boyutuna büyük bir değer verilir.

6 . Bu iki kare arasında herhangi bir yere tıklanarak Properties den Tween alanı Motion seçilir.

7 . Timeline de 2. layer de 25. karede F6 ile anahtar kare oluşturulur. Burada eklenmek istenen diğer yazı yine araç kutusundan Text aracı ile sahneye yazılır.

8 . Diğer layer larde de aynı şekilde 25. kare F6 ile anahtar kare oluşturulur. Ve istenen yazılar sahneye eklenir.

9 . Her bir layer da 40. karede F6 ile anahtar kare oluşturulur. Ve her yazı üzerinde istenen değişiklik yapılır. Boyutları ve renkleri değiştirilir.

10 . Aynı şekilde 75. karede F6 ile anahtar kare oluşturulur ve yine yazılar üzerinde yer değişikliği ve renk değişikliği yapılır.

11 . Timeline de 1. layer dayken 90. karede F6 ile anahtar kare oluşturulur ve bu karede ilk yazılan yazının son hali belirlenir.

12 . Bütün Layerlarde 120. karelere Insert – Frame ile boş kareler oluşturulur. Böylece animasyon bittikten sonra bir süre beklenmesi sağlanır.

13 . CTRL+ENTER

Örnek 5 : Motion Tween Kavramı ile Top Oynatma

1 . File - New

2 . Timeline da Insert – Layer ile 3 tane layer eklenir.

3 . 1. Layerin üzerinde çift tıklayarak ismi TOP olarak değiştirilir. İlk karesinde sahneye Oval aracı ile kenar çizgisi olmayan bir daire çizilir. Seçim aracı ile seçilerek Insert - Convert To Symbol bileşeni kullanılarak sembol tipi Graphics olarak belirlenir.

4 . 2 Layerin üzerinde çift tıklayarak ismi ilk raket olarak değiştirilir. İlk karesinde sahneye Rectangle aracı ile kenar çizgisi olmayan bir çubuk şeklinde bir dikdörtgen çizilir. Seçim aracı ile seçilerek Insert - Convert To Symbol bileşeni kullanılarak sembol tipi Graphics olarak belirlenir.

5 . 3. Layerin üzerinde çift tıklayarak ismi ikinci raket olarak değiştirilir. İlk raket katmanındaki şekil Edit – Copy ile kopyalanarak bu katmanın ilk karesinde Edit – Paste ile yapıştırılır. Seçim aracı ile seçilerek Insert - Convert To Symbol bileşeni kullanılarak sembol tipi Graphics olarak belirlenir.

6 . Her layer ın 10, 20 30 ,40, 50,60. karelerinde Insert - KeyFrame ile anahtar kareler eklenir.

7 . Her anahtar kare eklemeden sonra sahnedeki nesnelerin yerleri tenis oynanıyormuş gibi değiştirilir.

8 . Ve her kareler arasında herhangi bir yere tıklanarak Properties den Tween alanı Motion seçilir.

9 . 65. karede Insert - KeyFrame ile anahtar kareler eklenir. Topun rengi Propertis alanında Color alanından Alpha seçilerek soldurulur.

10 . İlk Layerin 75. karede Insert - KeyFrame ile anahtar kareler eklenir. Burada soluk renkteki topun üstüne Text aracı ile MAÇ BİTTİ yazısı eklenir.

11 . Kareler arasında herhangi bir yere tıklanarak Properties den Tween alanı Motion seçilir.

12 . Diğer layerlerin 75. karesine Insert – Frame eklenir ve son karelerde çubukların şekli yatay olarak değiştirilir.

13 . CTRL+ENTER

Örnek 6 : Motion Guide Kavramı ile ActionScriptli Bir Animasyon

1 . File - New

2 . Timeline de Layer in 1. karesindeyken sahneye kenar çizgisi olmayan bir daire çizilir. Seçim aracı ile seçilerek Insert - Convert To Symbol bileşeni kullanılarak sembol tipi Graphics olarak belirlenir.

3 . Layer üzerinde sağ tıklanarak Add Motion Guide seçilir ve üste bir Guide layeri eklenmiş olur.

4 . Bu layer ın 1. karesindeyken araç kutusundan fırça yardımıyla sahneye dairenin izleyeceği yol çizilir.

5 . Her iki layer ın de 35. karede de Insert - KeyFrame ile anahtar kareler eklenir.

6 . 1. karede daire çizilen yolun başına 35. karede ise sonuna getirilir.

7 . 1 ve 35. kareler arasında herhangi bir yerde tıklanarak Properties den Tween alanı Motion seçilir. Burada Orient to path Sync, Snap seçenekleri seçili hale getirilerek dairenin yol üzerinde tutunarak gitmesi sağlanır.

8 . Daire katmanının 35. karesinde daire üzerinde sağ tıklanarak Actions seçilir ve açılan Actions penceresinde + işaretine tıklanarak Actions – Movie Control – stop seçilir. Böylece dairenin o anki konumunda bir süre bekletilmesi sağlanır.

9 . Daha sonra yine + işaretine tıklanarak Actions – Movie Control – play seçilir. Ve dairenin tekrar hareket etmesi sağlanır.

10 . Daire katmanının 60. karesinde Insert – KeyFrame seçilir ve daire yolun bitiminden sonra sahnenin alt kısmında ortaya yerleştirilir. Kareler arasında herhangi bir yerde tıklanarak Properties den Tween alanı Motion seçilir.

11 . Daire katmanının 80. karesinde Insert – KeyFrame yapıldıktan sonra daire sahnenin tam ortasına çekilir. Ve Properties alanında Colors kısmından Alpha değeri değiştirilir. Dairenin üzerinde sağ tıklanarak Scale seçeneği ile boyutu değiştirilebilir. Kareler arasında herhangi bir yerde tıklanarak Properties den Tween alanı Motion seçilir.

12 . 105. karede tekrar anahtar kare eklenir ve dairenin boyutu büyütülür, Alpha değeri 100 yapılır. Kareler arasında herhangi bir yerde tıklanarak Properties den Tween alanı Motion seçilir.

13 . 145. karede sahneye Rectangle aracı ile bir kutu çizilir. Text aracı ile kutunun içine yazı yazılır. Ve seçim aracıyla seçilerek Insert – Convert to Symbol seçeneğinde Buton olarak belirlenir.

14 . Butonun üzerinde çift tıklanır ve açılan düzenleme penceresinin Over kısmında bir anahtar kare eklenir. Burada kutunun yan tarafına kutu çizilir ve üzerine yazı yazılarak Insert – Convert to Symbol seçeneğinde Movie Clip olarak belirlenir.

15 . Bu kutuya çift tıklanarak açınla pencerede 20. kareye anahtar kare eklenir ve kutunun Alpha değeri, boyutu değiştirilir. Kareler arasında herhangi bir yerde tıklanarak Properties den Tween alanı Motion seçilir.

16 . Tekrar bir önceki butonun düzenleme penceresine geri dönülür. Burada Over kısmında Window – Common Library seçilerek Flashın sahip olduğu kütüphane çağrılır. Buradan Sound seçeneği ile sesler açılır ve istenilen ses çekilerek sahneye sürüklenir.

17 . Şimdi Scene1 penceresine dönülür. Buradan 160. karede anahtar kare eklenir ve buton üzerinde sağ tıklanarak Actions penceresinde Actions – Movie Control – stop komutu seçilir.

18 . CTRL+ENTER

Örnek 7 : Maske Kavramı ile Işıklı Metin Oluşturma

1 . File - New

2 . Properties penceresinden sayfanın arka planı siyah olarak ayarlanır.

3 . Timeline de Insert – Layer ile 2. bir layer eklenir. Üsteki yeni layer üzerinde sağ tıklanarak Mask seçeneği seçilir. Bu durumda üsteki katman Mask , alttaki de Masked oldu.

4 . Maske katmanında Text aracı ile sahneye yazı yazılır. Yazının rengi Properties penceresinden beyaz olarak ayarlanır.

5 . Masked katmanında ise oval araç kutusu ile sahneye bir daire çizilir.

6 . Her iki katmanında 40. karelerinde F6 ile anahtar kare oluşturulur.

7 . Daire 1. karedeyken yazının başına, 40. karede ise yazının sonuna yerleştirilir.

8 . İki kare arasında bir yere tıklanarak Properties penceresinde Motion olarak ayarlanır.

9 . Aynı hareketi başka bir yazı üzerinden daireyi ters yöne hareket ettirmek için 40. karede başka bir yazı yazılır ve 60. kareye de bir anahtar kare eklenir.

10 .

Bu karede daire u kez yazının başına çekilir ve İki kare arasında bir yere tıklanarak Properties penceresinde Motion olarak ayarlanır.

11 . CTRL+ENTER

Örnek 8 : Animasyonlu Düğme Oluşturma

1 . File - New

2 . Properties alanından arka plan yeşil ayarlanır.

3 . Timeline de yeni layer eklenir ve iki layer olmuş olur.

4 . İlk layer de çiçeğin koyulacağı bahçe şekli oluşturulur. Bunun için araç kutusundan fırça seçilir ve dolgu rengi değiştirilerek sahneye şekiller çizilir.

5 . Diğer layerde fırça yardımıyla çiçek çizilir. Seçim aracı ile seçilerek Insert – Convert to Symbol ile Buton özelliği verilir.

6 . Çiçek üzerinde çift tıklanır ve açılan pencerede Up kısmında F6 ile anahtar kare eklenir. Over kısmında da F6 ile anahtar kare eklenir ve çiçeğin boyutu ve Alpha özelliği değiştirilir.

7 . Yine Over karesindeyken Text aracı ile çiçeğin yanına bir yazı yazılır.

8 . CTRL+ENTER

Örnek 9 : ActionScript ile Düğmeye Eylem Verme

1 . File - New

2 . Timeline de Insert - layer ile yeni layer eklenir. İlk layerin ismi İÇERİK diğeri de EYLEM olarak değiştirilir.

3 . İçerik katmanındayken sahneye Rectangle ile bir kutu çizilir ve seçim aracı ile seçilerek Insert – Convert to Symbol ile Buton özelliği verilir.

4 . Buton özelliği verilmiş kutunun üzerinde sağ tıklanarak Actions penceresi açılır ve Normal moddayken Actions - Movie Control – play seçilir.

5 . Butonun üst kısmına Text aracı ile yazı eklenir.

6 . İçerik katmanının 10. karesine F7 ileboşkare eklenerek başka bir yazı eklenir. Bu şekilde 20,30 ve 40. karelere de yazı eklenir.

7 . EYLEM katmanında 1. karede Actions penceresinde Actions - Movie Control – stop seçilir.

8 . CTRL+ENTER

Web Dersler

Web Tasarım Başlangıç Dersleri

H1: Bir numaralı başlık

H2: İki numaralı başlık

H3: Üç numaralı başlık

H4: Dört numaralı başlık

H5: Beş numaralı başlık

H6: Altı numaralı başlık

Normal Metin Bu dosyayı tarayıcınızda açın. Tarayıcınızın temel font ölçüsünü ortalamada tutuyorsanız, şuna benzer büyüklükler verir: reh009.tif Şimdi bu bilgiyle, örnek sayfamıza başlık verebiliriz. Bunun için, paragrafın hemen üstüne,

Tasarımcı kimdir?

Tasarım nedir?

HTML Sayfada Güvenli Renkler

Dreamweaver Dersleri

Online Photoshop Dersleri

Dreamweaver Ders Videoları

Flash dersleri ve örnekleri

Normal Metin

Bu dosyayı tarayıcınızda açın. Tarayıcınızın temel font ölçüsünü ortalamada tutuyorsanız, şuna benzer büyüklükler verir:

reh009.tif

Şimdi bu bilgiyle, örnek sayfamıza başlık verebiliriz. Bunun için, paragrafın hemen üstüne,