Bu makalemizde Photoshop kullanarak çok basit bir iki adımda kendi Rss ikonumuzu yapacağız. Bunun ihtiyacımız olan tek şey Photoshop. Hadi başlayalım!

(NOT: Sitemizde elimizden geldiğince Photoshop makaleleri yayınlıyoruz ama bir Photoshop kategorimiz bile yokmuş, ben de bir tane oluşturuverdim. Photoshop isimli kategorimizin ilk yazısı bu oluyor böylelikle :)
Önce Photoshop’ta 72px resolution değerine sahip 200*200px bir doküman açalım. Dokümanımızın arkaplan rengi beyaz olsun. Dokümanımızı açtıktan sonra şimdi Rss ikonumuzu oluşturacağız. Photoshop Araçlar bölmesinden Custom Shape aracını seçin. (U kısayolunu da kullanabilirsiniz) Burda aşağıdaki örnekte görünen şekli seçelim ve 200px’lik dokümanımızın yarısına gelecek şekilde şeklimizi çizelim. Şeklimizi çizerken Shift tuşuna basılı tutarak fare hareketi yaparsanız daha düzgün bir çizim elde edersiniz. :)

Rss ikonumuzun ana hattını elde etmiş olduk. Şimdi bu shape üzerinde bir değişiklik yapacağız. Şeklin bulunduğu layer seçili durumdayken üst menüden Layers >> Rasterize >> Layer bölümünü tıklıyoruz. Böylelikle şeklimiz bir Shape olmaktan çıkıp normal layer (katman) haline gelmiş oldu.

Bu aşamadan sonra elde ettiğimiz şekli belli bölgelerden keserek klasik Rss ikonunu elde edeceğiz. Ben kesim sırasında kılavuz çizgilerden faydalandım. Kılavuz çizgilerinizi çıkarabilmek için öncelikle Photoshop’ta Rulers alanını açmanız gerekiyor. İsterseniz Ctrl+R tuş kombinasyonuyla dilerseniz de View >> Rulers menüsünden bunu seçebilirsiniz. Böylelikle dokümanımızın dış hatlarında cetvelimiz görünecek. Cetvelin herhangi bir bölmesinden fareyle tutup istediğiniz kadar kılavuz çizgi elde edebilirsiniz. Ben aşağıda şeklimizi keseceğimiz kılavuz çizgileri hazırladım ve bu sayede keseceğim alanı daha iyi ayarlayabiliyorum. Siz de örnek resimden faydalanarak kılavuz çizgilerinizi oluşturabilirsiniz.

Şimdi kesim için uygun zemini hazırladık. Bu aşamadan sonra birçok teknik vasıtasıyla klasik Rss şeklimizi elde edebiliriz. Ben kılavuz çizgilerimden yararlanarak şeklim üzerinden almak istediğim alanı Polygonal Lasso Tool yardımıyla belirliyorum ve Ctrl+C tuşu ile kopyalıyorum. Daha sonra Ctrl+V ile yapıştırıp şeklimi elde etmiş oluyorum. Siz dilerseniz farklı yöntemler kullanabilirsiniz. Şekil üzerinde kılavuz çizgilerinden yararlanarak şeklin belli bir bölümünü keserek yine aynı şeyi elde etmiş olursunuz.

Elimizde artık klasik Rss ikonumuz var ve bununla istediğimiz şekli hazırlayabiliriz. Ben yuvarlık bir Rss butonum olmasını istiyorum ve örneğimi de bu yönde hazırladım. Şimdi dilerseniz klasik Rss butonumuzu yuvarlak bir şekil üzerine oturtalım ve ikonumuzu tamamlayalım.

Bunu yapabilmek için yeni bir layer oluşturuyoruz. Sonrasında Elliptical Marquee Tool ile Rss ikonumu saracak bir daire oluşturuyorum. Yine shift tuşuna basarak düzgün bir şekil elde ediyorum. Şeklimizin dolgu rengi hiç önemli değil.

Daire şeklini elde ettikten sonra bu şekle verilecek görünüm özelliklerini ayarlayacağız. Layer üzerinde iki kere tıklayıp Layer Properties penceresini açıyoruz. Burada önce Gradient ve daha sonrasında Stroke efektleri ile dairemizi güzelleştireceğiz. Vermiş olduğum efektler ve renk değerleri için aşağıdaki resimleri inceleyebilirsiniz.

Bu aşamadan sonra ilk etapta oluşturduğumuz Rss ikonumuzu yeni oluşturduğumuz dairenin üzerine çıkarıyoruz. Bunu layer penceresinde layer1′i layer2′nin üzerine fare ile sürükleyerek yapabilirsiniz. Böylelikle layer1′de bulunan Rss ikonumuz layer2′nin üzerinde görünmeye başlayacak. Bu kadar mı, tabi ki hayır. Biraz da Rss ikonumuzun görünümüyle oynuyoruz ve daha iyi bir görünüm elde ediyoruz. Bunun için vermiş olduğum değerler yine aynen ilk etapta yaptığımız gibi olacak. Dilerseniz sadece renk değerleriyle oynayabilir ya da farklı efektler verebilirsiniz.


Gördüğünüz gibi hiçbir ekstra araca ihtiyaç duymadan kendi Rss ikonumuzu oluşturduk. Siz dilerseniz ikonununuzu farklı zeminlere ve farklı renklere oturtabilir böylelikle daha değişik görünümler elde edebilirsiniz. Örnek PSD dosyasını da aşağıdaki bağlantıdan indirebilirsiniz. Umarım sizler için faydalı olmuştur.

ÖRNEK PSD DOSYASINI İNDİR

Klasik tabirle anlatmak gerekirse Search Engine Optimization denilen bu kavram Arama Motoru Optimizasyonu olarak dilimize çevrilebilir. Peki buraya kadar herşey güzel. Arama motoru optimizasyonu olduğunu biliyoruz ancak ne kadar gerekli, ne şartlarda kullanılır, kullanılabilir veya gerçekten nedir bu SEO? (Amacım SEO yapmak değil bilakis elimden geldiğince, bildiğimce anlatmak zira ben “seo uzmanı” değilim ki size Seo yapayım, of metin içinde ne kadar çok geçti bu seo… :)Makalemizin başında da belirttiğimiz gibi Arama motoru optimizasyonu bir web sitesinin arama motorlarında kolayca bulunabilmesi, belli konularda üst sıralarda yer alabilmesi ve bu sayede hitlerinin artması olarak tanımlanabilir. Bu kavram hayatımıza girdiğinden bu yana birçok seo yapım türü oluşturuldu. Hatta çeşitli İçerik Yönetim Sistemleri için harici eklentiler ve hack dosyaları kullanılarak seo bile yapıldı. Bunlarla da yetinilmeyip Seo adına servisler/websiteleri bile kuruldu.

Arama motorlarında (belli kelimelerde) yapılan aramalarda üst sıralarda yer alabilmek için genellikle klasik kod yazımında META dediğimiz etiket grubu kullanılır. Meta dediğimiz bu etiketlerin farklı parametreleri ile arama motorunun örümceklerine karşı sitemiz hakkında bilgi verilir. Örneğin, sitemizin konusu, içerdiği kelimeler, yazarının ve tasarımcısının kim olduğu, hangi yazılımın kullanıldığı gibi. Meta etiketlerinin birçok özelliğinden faydalanılarak sitemiz hakkında bilgiyi arama motorlarına veriyoruz.

O halde seo denilen şey tamamen bu meta etiketlerini düzenlemekten mi ibaret? Tabi ki hayır. Aslında yeni nesil web anlayışına göre bu sitemiz için sadece bir başlangıç teşkil ediyor. Neden derseniz, sadece meta kodlarını düzenlemek bir arama motoruna artık eskisi kadar güvenli gelmiyor.

Güven konusunu doğru yerde açtığımı tahmin ediyorum. Arama motoru devi Google bu güven ortamını sağlamak için bildiğiniz gibi her siteye bir değer biçiyor. Biçilen bu özel değerin adı da Pagerank.

Google’da bir arama yaptığınızda her zaman Pagerank’ı yüksek siteler size gösteriliyor. Gösterim yüksekten düşüğe doğru ilerliyor. Google bu algoritmayı yani her siteye 0 ile 10 arasında bir değer verme işini o sitenin içeriğine ve güvenilirliğine göre devreye sokuyor.

Burada sitenizin güvenini sağlayacak olan etmenler işin içine giriyor. Şayet sizin siteniz hani o bas bas bağırdığım “özgün içerik”e sahipse ve insanlar aramalarında sizin sitenizde yazmış olduğunuz o içerikten çokça faydalanıyorsa hele ki diğer site sahipleri sitenize bu yüzden bağlantı ekleyip sizi referans gösteriyorsa o zaman bu sizi Google gözünde daha değerli yapıyor. Bu değer de sizin Pagerank değerinizin karşısındaki rakamın 10′a yaklaşmasıyla son buluyor. :)

Biraz daha açıklayıcı olmak gerekirse SEO için sitenize verilen bağlantılar da çok önemli. Bağlantı veren sitelerin PR değerleri ne kadar fazlaysa bunun size geri dönüşü o kadar iyi oluyor. Bu yüzdendir ki yüksek PR’li sitelerden düşük Pr değerine sahip sitelere backlink satışı yapılıyor. (Hayda, backlink nedir ki? Hemen anlatayım, yüksek Pr değerine sahip sitenin sizin sitenize vermiş olduğu bağlantı anlamına geliyor, söz gelimi sitenizin bağlantısının Pr değeri 7 olan bir sitede verilmesi size olumlu bir geri bağlantı sağlıyor)

Sitenizin harici bağlantıları dışında siteniz üzerinde de bazı düzenlemeler yapmanız gerekiyor. Kaldı ki zaten görücüye çıkardığımız kendi sitemiz. Google, Yahoo, Msn gibi arama motorlarında yükselmek istediğimiz “anahtar kelime”mizi site içinde belli başlı yerlerde kullanmamız gerekiyor.

Bu kullanım şeklinin de muhakkak metin tabanlı olması şart. Çünkü bildiğiniz gibi bir arama motoru sitenizde görsel objeleri tarayamıyor. Aslında site üzerinde yapmanız gereken arama optimizasyonları çok derin bir konu. Çünkü bu noktada işin içine sadece arama kelimesine yönelme değil aynı zamanda “arama motoru dostu url kullanımı” da giriyor.

Klasik olarak eskiden belli başlı hazır yazılımlarla kurduğumuz sitelerimizde adreslerimiz www.siteadi.com/index.php?kategori=1&haber=23 gibi bir url değeri oluyordu. Son zamanlarda (bazı siteler hariç) bu tarz adres barındıran siteler görmemeye başladık. Hepsi www.siteadi.com/index/kategoriadi/haber23.html gibi bir değere sahip.

Adreslerde yapılan bu değişikliğin temel noktası ise Arama motorlarına daha iyi görünebilmek. Yani bir nevi “user friendly” (kullanıcı dostu) bir yaklaşım sergilemiş oluyoruz. Böylelikle arama motoru aranan kelimede bağlantı vereceği sitemize veya sitemiz alt bölümüne bu şekilde daha kolay ulaşmış oluyor. Zira bu kullanımda arama kelimesi direkt olarak sitemiz bağlantılarında geçebilir. Şimdi bir örnek vererek durumu daha iyi anlatalım. Arama kelimesi “wordpress temalar” olan bir aramada siteniz görünecektir neden çünkü sitenize daha önce yazmış olduğunuz Türkçe Wordpress Temaları isimli makale Google ve diğer arama motorları tarafından indexlenmiştir. Kullanıcı yaptığı aramanın sonucunda sizin sitenizde www.siteadi.com/kategoriadi/Turkce-wordpress-temalari isimli bağlantıyı görecektir. Arama kelimesinin sitenizin bağlantısı içinde geçmesi Arama motorlarının şu sıralar sevdiği bir durumdur. :)

Olayı biraz toparlarsak, arama motoru optimizasyonu için sitemiz içinde yapacağımız düzenlemeler (kod, anahtar kelime kullanımı, tasarım, özgün içerik gibi) ve sitemiz dışından gelecek olan kaliteli backlinkler şart. Bu optimizasyonların tümünün yapılması veya belli başlı yöntemler edinilerek yapılması aslında gerçek arama motoru optimizasyonu oluyor.

SEO GEREKLİ MİDİR YOKSA OLMASA DA OLUR MU?

Bu sorunun cevabı aslında biraz size bağlı. Seo uygulayarak arama motorlarında üst sıralarda yer almak ve bu sayede hit kazanmak tabiki herkesin istediği bir şeydir. Ancak bunun ne için olduğu sorusu da önemli. Ticari kaygılar taşıyor olabilirsiniz. Şirket siteniz sattığı ürünlerin tanıtımında web ayağında başarısızsa mutlak suretle seo’ya ihtiyacınız vardır. Yahut web sitenize aldığınız reklamların daha fazla kişiye ulaşması ve bu sayede tık başına para kazanabilmeniz için seo mutlak suretle gereklidir(!) İşin şakası bir yana seo gerçekten arama motorlarında alanındaki kelimeye göre yükselmek isteyen sitelerin mutlaka uygulaması gereken birşeydir.

Bu zamana kadar sitemde seo adına hiçbir faaliyet yapmadım. Seo için mutlak gerekli olduğu düşünülen sitemaplar oluşturmadım, Pr değeri yüksek sitelerden backlink satın almadım, seo için Wordpress tabanlı sitelerde kullanılan eklentilerden de kullanmadım.

Sadece elimden geldiğince özgün içerik yazarak ve farklı yazmaya çalışarak sitemi diğerlerinden ayırmaya çalıştım. Sanıyorum bu çabamı Google amca’da takdir ediyor ki sitemize 10 üzerinden 4 değerini biçiyor. (4 benim için çok iyi bir değer, daha fazlasında gözüm yok :)

Bu yazıda amacım seo’yu kötülemek veya nasıl uygulandığını harfiyen anlatmak değildi. Sadece bu olgunun ne olduğu ve ne gibi durumlarla etkin hale geldiğini anlatmaktı. Tabi bahsettiğim şey böyle 3-4 paragraflık bir yazı da anlatılabilecek birşey değil. Hala değinmediğim birçok konu mevcut üstelik. Ancak…

Ancak internette kısa bir araştırma yaptığınızda başarılı olmuş birçok seo uygulamasına ve bu yönde hazırlanmış makalelere rastlayabilirsiniz. Bu konuda yazılmış olan (lütfen işinin ehli kişilerin makalelerini tercih edin) dokümanları okuyabilirsiniz. Bu sayede konu hakkında daha fazla fikre sahip olmuş olursunuz.

Hepinize bol seolu ve bol backlinkli günler efendim. Pr’niz bol olsun… :)

Menümüzün yapısal tasarımını hazırlarken Html’de çokça kullandığımız Ul ve Li etiketlerinden faydalanacağız. Bu etiketlerin yazılımını düzgün bir şekilde yaptıktan sonra Stil dosyamızla bu etiketlerin değerlerini düzenleyeceğiz. Her zaman olduğu gibi Xhtml kodumuz gayet basit olacak, görünümümüzü de Css kodlarımızla şekillendireceğiz. Menümüzü oluşturmak için klasik olarak yine ihtiyacımız olan şey boş bir editör sayfası. Ben yine sizlere Notepad++ tavsiye edeceğim. Tabi klasik alışkanlarımızdan vazgeçemiyoruz, siz yine de kendi editörünüzü kullanmaya devam edin. :) Sözü fazla uzatmadan hemen menümüzü yapmaya başlayalım.

Makalemizin başında Ul ve Li etiketlerinden faydalanacağımızı söylemiştik. Menü yapımızda göreceğiniz üzere ul ve li etiketlerinin sıralı başlangıç ve kapanışı ile menümüzü kod olarak inşa ediyoruz. Şimdi aşağıya menümüzün Xhtml kodlarını yazalım.

<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Bölümler</a></li>
<li><a href="#">Makaleler</a></li>
<li><a href="#">Dosyalar</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>

Yukarıdaki kodlarda gördüğünüz üzere bir Ul etiketi başlattık ve daha sonra gelen Li etiketleriyle menümüzün asıl görünecek bağlantılarını li içinde a etiketiyle tanımladık. Tabi menümüzün ana zeminini oluşturan menu isimli div yapısını da en başta tanımladık ki menümüzün sınırları belli olsun. Yapı bakımından karmaşık birşey yok sanırım.

Şimdi menümüzde yazmış olduğumuz Html etiketlerini stil dosyamızda tanımlayalım. Burada ayrıca bir parantez açmak istiyorum. Şayet bir tasarım yaparken Xhtml/Css kodlama yapmam gerekirse (ki bu en basit menüden en karmaşık Xhtml/Css sayfaya kadar ne olursa olsun) öncelikle Xhtml kodlarını yazmayı tercih ediyorum. Sizlere de bu tarz makalelerde verdiğim örneklerde göreceğiniz gibi her zaman ilk sırayı Xhtml kodları alır. Tabi önce Css kodları yazılıp bu kodlar üzerine Xhtml kodları da yazılabilir. Ancak ben yıllardır böyle bir kodlama yöntemini kendime daha yakın görüyorum. Çünkü Xhtml ile sınırlarını belirlediğim bir yapıda Css ile düzenleme yapmam daha kolay oluyor.

Lafı fazla uzatmadan Xhtml kodunda yazmış olduğumuz tüm etiketlerin sırasıyla stillerini yazalım.

#menu {margin:0;padding:0;background:#333 url(menu_back.gif);height:40px}
#menu ul {margin:0; padding:0;}
#menu li {display:inline;margin:0;padding:0;list-style-type:none;line-height:40px;}
#menu li a {color:#fff;padding:0px 10px 0px 20px;text-decoration:none;font:1.1em arial, verdana, helvetica, sans-serif;}
#menu li a:hover {color:#759C0A;padding:0px 10px 0px 20px;text-decoration:none;font:1.1em arial, verdana, helvetica, sans-serif;}

Css kodlarında gördüğünüz üzere öncelikle menü isimli div etiketimizi tanımlıyoruz. Burada menümüzün arkaplanının menu_back.gif olmasını istedik ve yüksekliğini ayarladık.

Daha sonra menu isimli div’in içinde açılacak olan ul etiketinin değerlerini belirliyoruz. Ul etiketinin margin ve padding değerlerini 0 yaptık. Sonrasında ise menu div içinde çağrılan li etiketini düzenliyoruz. Burada dikkat edeceğimiz husus görünümün yani display parametresinin inline olması. Inline değerini kullanıyoruz ki menümüzün ögeleri birbirini izlesin. Şayet bu parametreyi block olarak alırsak menü birimlerimiz birbirinin altına kayacaktır. Sonrasında line-height değerini 40px olarak ayarlıyoruz. Bunu yapmamızın nedeni menu isimli div’e arkaplan olarak atadığımız menu_back.gif isimli resmin 40px yüksekliğe sahip olması. Böylelikle menü birimlerimiz arkaplan üzerinde ortalanmış bir şekilde görünecek.

İşin belkide en öldürücü kısmı tabi ki menümüzün bağlantıları. Xhtml kodlarında gördüğünüz gibi menu li a ile menü birimlerini tanımladık. Bu etikete atayacağımız değerler menümüzün görünümünü büyük oranda şekillendirecek. Tabi sonrasında a etikenin a:hover özelliğinden yararlanarak menümüze fare ile geldiğimizde nasıl bir görünüm alacağını da belirliyoruz.

Bu aşamadan sonra menümüz büyük oranda şekillendi. Ancak makalemizin başında söylediğimiz gibi menümüzü küçük ikonlarla destekleyeceğiz demiştik. Peki bu ikonları yapıları belli olan bir Css dosyasında nasıl tanımlayacağız? Zira menümüz bu haliyle yeni bir Css koduna ihtiyaç duyuyor.

Aslında olay çok basit. Sadece kullanmış olduğumuz menu li a etiketine yeni Css sınıfları ekleyeceğiz. Hatta bu sınıfları öyle inşa edeceğiz ki li class=”sinifismi” değeri vererek her şekillendirdiğimiz li a etiketinin görünmesini sağlayacağız. Şimdi dilerseniz sadece gerekli bu alanı yazalım.

#menu li.anasayfa a {background:url(anasayfa.gif) no-repeat;color:#fff;padding:0px 10px 0px 20px;text-decoration:none;font:1.1em arial, verdana, helvetica, sans-serif;}

Yukarıda yazan koda baktığınızda menu li a etiketine .anasayfa isimli bir Css sınıfı dahil ettik. Normal kodlarımızdan farklı olarak bir arkaplan resmi atadık. Bu arkaplan resmi bizim küçük ikonumuz tabi ki. Başka hiçbir değerle oynamadık. Bu şekilde kodumuzu yazdıktan sonra Xhtml kodu üzerinde Anasayfa bağlantısının li etiketine şunu ekliyoruz.

<li class="anasayfa">

Böylelikle Css olarak tanımladığımız sınıfı Xhtml koduyla çağırmış olduk. Atamadan sonra menümüzün anasayfa yazan bölümü değişmiş olmalı.

Oluşturduğumuz menüye ait örnek sayfada yazılmış olan tüm sınıfları görebilirsiniz. Ayrıca menümüzün son halini de bulabilirsiniz. Makalemizin sonuna indirme adreslerini yazacağım. Siz bu menüyü ikonları değiştirerek, arkaplanları, hover renklerini değiştirerek dilediğiniz gibi şekillendirebilirsiniz. Menü tasarım mantığını kavramanız açısından kodları incelemenizi tavsiye ediyorum. Son olarak makalemizde kullandığımız küçük ikonlarımızın kaynağını FamFamFam sitesinde bulabilirsiniz.

Umarım sizler için faydalı olmuştur… (Yakın bir zamana kadar sitemizde yazmış olduğumuz bu teknik anlatımlı makaleleri t’infection.com Atölye bölümünde toplayacağım, o yüzden şimdilik örneklerin yeri site üzerinde biraz karışık. İlerleyen günlerde yeni bir alan açıp düzenlemesini yapacağım.)

Menü Örneği | Menüyü İndir (7kb)

Wordpress hepimizin bildiği üzere gelişmiş özellikleriyle birçok alanda üzerinde değişimler yapabildiğimiz bir yazılım. Bu müdahaleler o kadar gelişmiş ki Wordpress üzerinde kendi özel hata sayfalarımızı yani diğer bir deyişle 404 hata sayfalarımızı oluşturabiliriz.

Tema dizinimde 404 sayfası bulunmuyor, nasıl oluşturabilirim?

404 Hata Sayfası bildiğiniz gibi web siteniz üzerinde var olmayan bir sayfaya veya kayıp bir URL’ye ulaşmaya çalıştığımızda karşımıza çıkan sayfalardır. Wordpress üzerinde kullandığımız temaların büyük bölümünde 404.php isimli Php dosyası bulunmaktadır. Bu dosya yoksa bile aşağıda yer alan kod bölümünü boş bir .php dosyasına 404.php ismiyle kaydederek tema dizinine atıp kendiniz oluşturabilirsiniz.

< ?php
get_header();
?>

<div id="content">
Hata Mesajımızın Bulunacağı Alan
</div>

< ?php get_sidebar(); ?>
< ?php get_footer(); ?>

Bu kodu ekleyip dosyamızı 404.php olarak kaydettikten sonra asıl işlemimize geçebiliriz. Wordpress Codex üzerinde kaynak olarak aldığım sayfada anlatılan yöntemde şu adımlar izleniyor;

• Wordpress sitenizde Yönetici girişi yapın.

• Tasarım menüsüne tıklayın.

• Buradan Tema Editörü bölümüne tıklayın.

• Kullanmış olduğunuz tema üzerinde 404.php isimli sayfayı editör üzerinde açın.

• Bu sayfada hata mesajı alanını kendinize göre düzenleyerek kaydedin.

Bu yol bizim için basit ve yapılması gayet hızlı. Ancak sadece hata mesajı alanını değiştirmek ve böylece sayfayı göndermek pekte 404.php sayfamızın özelleştirilmesi anlamına gelmiyor.

404 SAYFAMIZDA NE GİBİ ÖGELER BULUNABİLİR?

Hata sayfamızın özelleştirilmesinden bahsediyorsak mutlaka bazı noktalara dikkat etmeliyiz. Madde madde sıralayacak olursak;

• Sitemizin Anasayfasına bir bağlantı

• Ziyaretçilerimize Hata sayfasında olduklarını bildiren bir açıklayıcı yazı

• Amacımıza hizmet edecek, uygun biçimde seçilmiş veya tasarlanmış bir görsel öge

• Herhangi bir eklenti yardımıyla, aranan içeriğe en uygun bağlantıların listesi veya önerilen içerikler

Bu sayede ziyaretçilerimiz ulaşmaya çalıştıkları içeriğin sunucu üzerinde bulunmadığını daha iyi anlayabileceklerdir.

Hata sayfamızın özelleştirilmesinde başta verdiğimiz kod üzerinde yapacağımız değişimler 404.php dosyamızın şekillenmesini sağlayacaktır.

Örnek olarak vermiş olduğumuz kodda blogumuzda header, sidebar ve footer alanlarının görünmesini istedik. Bunu klasik olarak Wordpress’in Template mantığına bağlı kalarak bir .php dosyamız içinde tanımladık. Dilersek sidebar, footer gibi ögeleri kaldırarak 404 hata mesajını vereceğimiz alan için daha geniş bir bölüm ayırabiliriz.

Makalemiz içinde söylediğimiz gibi hata sayfamızı resim ile desteklemek ziyaretçilerimiz açısından daha iyi olacaktır. Hatta dilerseniz internette bu yönde hazırlanmış özel 404 sayfa tasarımları bulabilirsiniz.

Efendim en basit ve kısayoluyla sizlere 404 sayfalarını ve hazırlanış mantığını anlatmaya çalıştık. Vaktimiz sınırlı olduğu için örnek 404 sayfası oluşturamadım ancak daha sonrasında hazırlayıp yazıya ek olarak sizlerle paylaşmayı düşünüyorum. Belki örnek kodlarıyla birlikte vererek sizlerin de kullanımına sunabileceğim iyi bir çalışma olur bu. Bir başka makalemizde görüşmek üzere.

Merhabalar, daha önce de sitemizde Dreamweaver ile ilgili bir takım makaleler yazmıştık. Şimdi bunlardan bir başkasını da sizlerle paylaşıyoruz. Bu makalemizde Dreamweaver ile hali hazırda kullanmış olduğumuz bir local sunucu üzerinde barınan veritabanına nasıl ulaşabileceğimizi anlatacağız. Ancak makalemize başlamadan önce kullanmış olduğunuz local sunucu yazılımını açıp (Wampserver, Xampp, PhpTriad, EasyPhp gibi) Dreamweaver’da bir site tanımlamış olmanız gereklidir.

Şimdi uygulamamıza geçelim, öncelikle Dreamweaver üzerinde bir Php doküman açalım. Daha sonra Window menüsünden Database bölümüne tıklayalım. Dilerseniz Ctrl+Shift+F10 kısayol tuşuyla da bu bölümü görebilirsiniz. Yan menüde (şayet yan menünüz açıksa) Application başlığı altında bölümü görebilirsiniz.

Bu aşamadan sonra Database bölümünde yer alan + işaretine bir kez tıklayalım. Bağlantının hemen altında Mysql Connection bölümü çıkacak. Buna tıkladıktan sonra karşımıza aşağıdaki gibi bir pencere gelecek.

Bu aşamadan sonra yapacağımız şey burada istenen bilgileri doldurmak ve verdiğimiz bilgilere göre programın kullandığımız veritabanına erişmesini sağlamak. İstenilen bilgilerde veritabanımıza bağlanmak için geçerli olan klasik kullanıcı adı, şifre, veritabanı sunucu ismi gibi bilgiler. Örnek resimde gördüğünüz üzere ben bunları doldurdum.

Son aşamada pencerenin en altında bulunan Databases bağlantısına tıklıyoruz. Burada vermiş olduğumuz bilgiler ışığında bağlanılabilecek veritabanlarının listesini görüyor olmalısınız. Buradan herhangi bir veritabanını seçerek penceremizi kapatıyoruz. Artık veritabanı bağlantımız hazır!

Peki bu bağlantı ile neler yapılabilir; bu bağlantıyı sağlayarak istediğiniz veritabanı tablosuna işlem yaptırabilir, sorgu (Recordset) gönderebilir, sonuçları harici bir .php sayfada gösterebilirsiniz. Tabi yapılabilecek birçok işlem sizi bekliyor.

SORUNLAR VE BAĞLANAMAMA DURUMLARI

Bazı hallerde veritabanı bağlantınızı sağlayamayabilirsiniz. Bu durumların bazı olası nedenleri şöyledir;

• Sunucu programınız açık olmayabilir,

• Mysql çalışmıyor olabilir,

• Daha önce Site Defination (Site Tanımlama) yapmamış olabilirsiniz,

• Veritabanına bağlanmak için gerekli olan kullanıcı şifresini yazmamış olabilirsiniz. Kaldı ki veritabanına ulaşmak için yetkili girişine bir şifre tanımladıysanız bunu Dreamweaver üzerinde yazmanız gerekiyor.

Merhabalar, başlığın oldukça itici olduğunun farkındayım. Ancak yazmak istediğim makale ve uygulamaya başka bir isim bulamadım inanın. (Web’de yaptığım araştırmada bu tarz uygulamalara Glossy Text deniyor ancak tam olarak sizlere Glossy Text’i anlatmayacağım, ismini bilen bir dostumuz yazarsa çok sevinirim :)

Yazımızın giriş kısmında örneğini gördüğünüz üzere bu tür metin efektleri Web 2.0′ın bir tasarım özelliği olan “gradient” kullanımıyla mümkün. Kullanacağımız metinlere Photoshop’ta vereceğiniz “Gradient Overlay” efekti ile bu tarz yazı stillerine sahip olabiliriz. Kaldı ki yeni nesil web sitelerinde bu tarz yazıları sıkça görmekteyiz. O halde sözü fazla uzatmadan uygulamamıza geçelim. Öncelikle Photoshop’ta 400*400px’e sahip bir doküman açalım. Bu dokümanda Text aracını seçerek bir yazı yazalım. Ben örneğimizde “t’infection.com” yazdım ve yazıtipi olarakta Arial Black/36px belirledim. Siz farklı bir yazı tipi kullanabilirsiniz. Yapacağımız uygulamanın etkisini daha iyi görmek bakımından bold bir fontu kullanmayı tercih ettim.

Daha sonra yazımızı yazdıktan sonra yazımızın sahip olduğu layer penceresine iki kere tıklayarak Layer Style penceresini açalım ve sırasıyla aşağıdaki özellikleri verelim. (Bu bölümde örnek resimlerdeki değerleri ve renkleri vererek uygulamanıza yansıtabilirsiniz)

Uygulamamızda dikkat edeceğimiz en büyük nokta şu ki; Gradient Overlay efekti verirken yazıda görmüş olduğunuz orta hat. Bu orta hattı oluşturmak için önce sağ alana #1BADF8 renk değerini sol alana ise daha açık bir mavi tonu olan #AAE0FA renk değerini uyguladım. İşin can alıcı noktası olan orta hat içinde bu iki renk kodunun arasında kalan bölümde 3 tane daha geçiş kullandım. Geçişleri oluşturmak için Gradient alanının altına tıklayarak yeni bir bölme açabilirsiniz. Daha sonra fare yardımıyla bu bölmeleri Location değeri %48 ve %52 olacak şekilde sıralayın. Bu sayede ara renkleri kullanarak tam bir hat elde etmiş olacaksınız. Biliyorum biraz karışık gibi görünüyor ancak bir iki fare hareketi ile hemen halledilebilecek bir durum. Uygulamayı yaparken siz de bana hak vereceksiniz.

Bu tarz uygulamalar aslında hazır stillerle de yapılabilir, hatta çok daha değişik çeşitlerde� yazı denemeleri ve katman uygulamaları da yapabilirsiniz. Ancak her zaman söylediğim gibi önemli olan “işin mutfağı”. Bu efektin nasıl verildiğini öğrendikten sonra hazır stilleri mecbur kalmadıkça kullanmadım. Kaldı ki bir başka bilgisayarda kendi stillerinizi kurmanız ve bulmanız çok zor.

Umarım sizler için faydalı olmuştur.

Daha öncesinde sitemizde Dreamweaver ile ilgili birkaç makale yazmıştık. Bu makalemizde de Dreamweaver ile çok basit bir iki adımla nasıl Hızlı Menüler (Jump Menu) oluşturacağımızı anlatacağız. Hızlı menüler birçok web sitesinde gördüğümüz bir uygulamadır. Sitenizin tüm alt bölümlerine verilen hızlı bağlantılar sayesinde ziyaretçileriniz menülerin ve navigasyonların içinde kaybolmadan gitmek istedikleri sayfaya ulaşabilirler. (Özellikle kurumsal web sitelerinde çokça kullanılan bir uygulama olduğunu görebilirsiniz)

Makalemize başlamadan belirtmek isterim ki bu uygulamayı ben Dreamweaver 8 üzerinde geliştiriyorum. CS3 kullanan arkadaşlar da yine aynı şekilde menülerini oluşturabilirler. Öncelikle Dreamweaver üzerinde yeni bir HTML sayfa açın. Bu sayfa ister tasarımınız geliştirdiğiniz bir sayfa olsun isterseniz de boş bir sayfa olsun. Bizim için önemli olan menüyü ekleyeceğimiz yer ve menünün bileşenlerini doğru atamak.

Sonrasında menüyü eklemek istediğimiz yerde yukarı alandan Form bölümüne geliyoruz, buradan da Jump Menu ikonunu tıklıyoruz.

Bu ikona tıkladığınızda karşınıza Insert Jump Menu penceresi gelecektir. Bu pencere içinde menümüzün öğelerini yazacağımız alanları görebilirsiniz.

Text bölümüne bağlantımızın görünecek metin halini yazıyoruz. “When selected, go to URL” yazan alana ise bağlantımızın ulaşmasını istediğimiz sayfayı yazıyoruz. Buraya http:// ile başlayan bir adres yazabileceğimiz gibi index.html, sayfa.html gibi site içi sayfaların olduğu bağlantıların adreslerini de verebiliriz. Bu tamamen size kalmış bir olay.

Şayet bir menü öğesini eklediyseniz hemen pencerenin üzerinde bulunan artı (+) işaretine tıklayın ve daha sonra yeni bir öğe eklemeye başlayın. Bu sayede menünüze dilediğiniz kadar öğe ekleyebilirsiniz.

Bu aşamadan sonra pencere üzerinde OK tuşuna basarak menümüzü bitirebiliriz. Sayfanızı kaydettiyseniz F12 tuşuna basarak tarayıcınız üzerinde direk görüntüleyebilirsiniz.

DAHA FAZLA OPSİYON…

Bu menüyü yaparken aslında Dreamweaver’ın nimetlerinden biraz daha fazla yararlanabiliriz. Örneğin menümüzü oluşturduktan sonra menü öğesinin kullandığı form elemanına Css ataması yapabilirsiniz. Böylelikle menümüz daha güzel görünecektir.

Yine menü oluştururken Url yazdığımız alana Browse diyerek bir veritabanından veri çekmesini de sağlayabiliriz. Tabi bunun için öncelikle yerel sunucunuz üzerinde bir veritabanına Dreamweaver’ın tanıyacağı şekilde bağlı olmanız gerekiyor.

Umarım faydalı olmuştur. Bir başka makalemizde görüşmek üzere.

Dreamweaver, piyasada bulunan benzerlerine göre birçok işlevi ve özelliği ile diğer web tasarım editörlerinden ayrılıyor. Belki de bu denli çok tercih edilmesinin ve profesyonellerce kullanılmasının sebebi budur. Geliştirilen özellikleri ve eklentileri ile Dreamweaver, MX serisinden bu yana birçok web tasarımcısının gözdesi.

Bu makalemizde sizlere kısaca Dreamweaver’ın bir başka özelliği olan “Site Defination” dan bahsedeceğim. Site Tanımlama olarak Türkçemize çevirebileceğimiz bu fonksiyon sayesinde Dreamweaver ile tasarım işlerimizi biraz daha kolaylaştıracağız ve hızlanacağız. Dilerseniz hemen konumuza geçelim.

Dreamweaver’da Site Tanımlama Nedir?
Kısaca bahsetmemiz gerekirse Site Defination bilgisayarımızda çalıştığımız yerel bir klasörün Dreamweaver’da tanımlanması ve varsa kullanılan dil ile birlikte (Php, Asp, Jsp gibi) çalışma dizinimizin Dreamweaver’a tanıtılmasıdır. Bu pencereden bakıldığında biraz karışık bir tanımlama gibi duruyor ancak aşağıda yapacağımız örnek uygulama ile konuyu biraz daha ayrıntıya kavuşturacağız.

Site Tanımlama bizlere birçok alanda kolaylık sağlar. En basit durumda hepimiz bilgisayarımızda bir Web Sunucu programına sahibizdir. Bilhassa Php, Mysql işlemlerimizi yapabilmek için PhpTriad, EasyPHP, Wampserver gibi Windows üzerinde çalışan sunucu programları edinmişizdir. (Şahsen ben bunlardan Wampserver’ı tercih ediyorum) Bu sayede sunucu programımızın bizlere vermiş olduğu dizin altında Php script uygulamalarımızı geliştirebilir, örneğin bir Wordpress yazılımı kurabilir ve “localhost” üzerinde bunu geliştirebiliriz.

Bununla birlikte farklı alanlardaki çalışmalarımız için açtığımız dizinleri bir araya toplamak ve birbirleri arasında geçiş yapmak için de Site Tanımlama kullanılabilir. Bu sayede bir çalışmayı kapatmadan başka bir dizin üzerinde bulunan .html, .php, .css dosyalarımızı açabilir ve düzenlemeye geçebiliriz.

Genellikle Site Tanımlama çalışmak istediğimiz Php, Asp gibi doküman tipine sahip sayfaların kolay organizesi ve veritabanı bağlantısı kurmak için kullanılmaktadır. (Sanıyorum bu tanımlama daha açık ve iyi oldu)

Şimdi bir örneklem üzerinden sizlere konuyu ayrıntılı olarak anlatacağım.

Bilgisayarımda Wampserver kullanıyorum. Programın öngördüğü çalışma dizinini değiştirmedim. Bu dizinim C:\wamp\www şeklinde şu anda kullanımda. Bu şu demek; kurmak ve geliştirmek istediğim tüm Php bileşenlerini bu dizin içine atarak (www dizini) işlemlerimi yapabilirim. Wordpress, Drupal, Xoops, Joomla ve aklımıza gelmeyen yüzlerce Php, Mysql tabanlı scriptin düzenlenmesi ve kullanılması işlemi bu dizin altından yapılabilir.

C:\wamp\www dizini benim “localhost” dizinimdir ve ana klasör olarak tüm scriptlerim bu alanda bulunur. Şayet bu alanda yer alan script klasörlerinden birisini Dreamweaver ile düzenlemek istersem bu dizini Dreamweaver’a göstermem ve tanımlamam gerekir.

C:\wamp\www\wordpress dizinimde son sürüm bir Wordpress scripti kurulu ve bunu Dreamweaver’a tanımlamak istiyorum. O halde hemen Dreamweaver’ı açıp işlemimize başlıyoruz.

Site Tanımlama’ya Başlıyoruz
Dreamweaver üzerinde bir Php doküman tipine sahip yeni çalışma sayfası oluşturun. Karşınızda boş bir Php sayfası olacak ve bunun üzerinden işlemimizi yapacağız.

Üst menüden Site >> New Site bağlantısını tıklıyoruz. Karşımıza Site Tanımlama için bizi yönlendirecek olan sihirbaz gelecek. İlk pencere üzerinde site ismimiz ve kullanacağımız dizinin localhost’taki bağlantısını isteyen alanlar göreceksiniz. Site ismimizi Wordpress olarak belirleyelim. Ana URL olarakta http://localhost/wordpress diyelim. (Neden böyle dedik, çünkü benim Wordpress dizinim C:\wamp\www\wordpress üzerinde bulunuyor ve C:\wamp\www = http://localhost/ demektir, çok basit değil mi?)

İkinci adımda ise bize herhangi bir sunucu dilini tercih edip etmeyeceğimiz soruluyor. Wordpress Php, Mysql bileşimi bir sistem olduğu için bu soruya “Yes, I want to use a server technology” cevabını verip aşağıdan Php Mysql kardeşleri seçiyoruz.

Üçüncü adımda ise mevcut dosyalarımızın geliştirme durumunda nasıl kullanılacağı soruluyor. Bu şu demek belirttiğimiz dizinde bir dosyamız değiştirildiğinde bunun durumu ne olacak. Yeni dosyamız tanımlı dizine mi gönderilecek yoksa sadece bu dizin test ve deneme amaçlı mı kullanılacak. Bu alanda ise her zaman ortadaki seçenek default olarak geliyor. Biz de bu alanı seçili bırakıyoruz ve aşağıya dosyalarımızın bulunduğu dizini tanımlıyoruz. Benim örneğimden gidecek olursak C:\wamp\www\wordpress dizinini belirtmem gerekiyor.

Sonraki adımda ise genel bağlantı tipimiz soruluyor. Bağlantı tipinden kastım yanlış anlaşılmasın bu bir internet veya proxy bağlantısı değil. Dosyalarımız nerede düzenleyeceğimize dair bir bağlantı sorusu. Local/Network seçeneği zaten default olarak geliyor. Bu şu demektir ki; ben sadece localhost üzerinde işlemler yapacağım. Burada bulunan dosyalarımı değiştirip yine bu bilgisiyarda kalmasını istiyorum. Dilerseniz bir FTP hesabı veya WebDav hesabı kullanarakta işlemlerinizi yapabilirsiniz. Ancak bizim asıl amacımız zaten yerel dosyalarımızı ve uygulamalarımızı düzenlemek. Bu nedenle Local/Network seçeneği aktifken aşağıda yine bir önceki adımda olduğu gibi dizinimizi tanımlıyoruz. Ben yine C:\wamp\www\wordpress olarak dizinimi belirledim.

Sonraki adımda ise Dreamweaver’ın kullancağı Ana URL soruluyor. Kullanacağımız mevcut Http yapısına sahip url’yi programa bildiriyoruz. Yukarı maddelerde de söylediğim gibi benim ana dizinime kurulu bir wordpress klasörüm olduğu için bu alana http://localhost/wordpress yazmam yeterli. Bu aşamadan sonra dilerseniz hemen TEST URL tuşunu kullanarak vermiş olduğunuz bağlantının çalışıp çalışmadığını test edebilirsiniz. Aşağıdaki resimde göreceğiniz üzere ben bağlantımı kontrol ettim ve bir sorun olmadığına dair uyarı mesajımı aldım.

Son adımlara gelirken artık Dreamweaver size Dosyaların Paylaşımı ile ilgili kriterlerinizi soracak. Tanımladığınız dizindeki klasörlere erişim yetkisi gibi bir sistem olarak düşünülebilir. Şayet sizin dışınızda bu dosyalara başka kimsenin erişimi olmayacaksa bu alanı No ile başlayan seçeneği işaretleyerek geçebilirsiniz. (Ben hiç yes seçeneğini kullanmadım)

Bu bölümden sonra da artık Dreamweaver bize son adımı gösterecek ve yapmış olduğumuz değişimleri ekrana yansıtacak. Bu bölümde girmiş olduğumuz tüm bilgilerin bir derlemesini göreceksiniz. Şayet herhangi bir yanlışınız yoksa Done tuşuna basarak işlemi sonlandırabilirsiniz.

Bu aşamadan sonra Dreamweaver otomatik olarak belirttiğiniz dizini okuyacak ve Cache alarak size program içinde “Files” sekmesi altında tüm dosyalarınızı gösterecektir. Artık Dreamweaver ile bir dizinimizi tanımlamış olduk. Bundan böyle çalışmak istediğimiz bu dizini seçerek işlemlerimizi yapabiliriz.

Yukarıda anlattığımız aşamalar Dreamweaver’ın Site Defination sihirbazı ile yaptığımız adımlardı. Bunlarda kullanıcıya sorulan sorular ve alınan cevaplar ile tanımlama işlemi yapılıyor. Siz dilerseniz Advanced seçeneğinde daha ileri opsiyonlar kullanarakta site tanımlama işlemini gerçekleştirebilirsiniz.

Pekala Site Tanımlama işlemini başarıyla gerçekleştirdik ancak tanımladığımız dizini her zaman yeniden mi tanımlamak ya da programa göstermek mi gerekiyor? Hayır, çalışmak istediğiniz tanımlı siteler arasında geçişler yapabilirsiniz. Bunun için basit yöntemle yine üst menüden Site >> Manage Sites bağlantısını kullanabilirsiniz. Karşınıza çıkan küçük pencerede tanımladığınız dizinler görünecektir. Bunların arasında geçişler yapabilir veya dilerseniz bir sitenin tanımlanmış bilgilerini değiştirebilirsiniz.

Site Tanımlama işlemi yapılan ve sunucu teknolojisi belirtilen bir dizinde Dreamweaver’ın özelliklerinden yararlanılarak rahatlıkla Veritabanı Bağlantısı kurulabilir, veri ekleme çıkarma formları oluşturulabilir. Sahip olduğunuz eklentiler (Extensions) sayesinde farklı fonksiyonlar ekleyebilirsiniz.

Efendim Site Tanımlama işlemini bu kadar uzun uzadıya anlatmamızın nedeni; program üzerinde profesyonel bir çalışma ortamı sağlamak isteyen kişilerin evvela bu işlemi yapması gerektiğine inandığımdır. Kaldı ki Site Tanımlama opsiyonu kullanılarak hem farklı sunucu dilleri kullanılabilir ve kendi yaptığımız uygulamaları geliştirebiliriz.

Dreamweaver ile rahatlıkla bir “Blog” yazılımı oluşturabilir ve bunu sitemizde kullanabiliriz. Belki bu da başka bir makale konusu olur. Sürç-i lisan ettiysek affola. Yanlışlarımız ve hatalarımız konusunda uyaran dostlarımız olursa çok çok seviniriz. Bir başka makalemizde görüşmek üzere.

Herkese selamlar, Photoshop Uygulamalarına elimizden geldiğince sitemizde yer vermeye çalışıyoruz. Bu makalemizde de bunlardan birine yer vereceğiz. Basit Photoshop uygulamalarıyla sitelerimiz için rahatlıkla birkaç adımda oluşturulabilecek butonlar ve navigasyonlar yapabiliriz. Aslına bakılırsa yukarıdaki navigasyonu 1-2 dakika içinde oluşturmak hiçte zor değil. Şimdi dilerseniz hemen nasıl adımlar izleyeceğimizi ve navigasyonumuzu nasıl şekillendireceğimizi anlatalım. Öncelikle Photoshop üzerinde 500*500 px değerine sahip bir doküman açalım. Açacağımız dokümanın Resolution değerini 72 olarak belirleyelim.

Boş dokümanımız üzerinde Rounded Rectangle Tool’u (U kısayolu) seçerek yukarıda Radius değerini 4px olarak ayarlıyoruz. Renk seçimi önemli değil. Siyah veya başka bir renkte kullanabilirsiniz. Şimdi hemen hemen 470*40px değerlerine sahip olacak bir dörtgen çizeceğiz. Bunu siz göz kararı da ayarlayabilirsiniz. Ancak yukarıdaki örnekte ben tam bir piksel değeri uygulamadan göz kararı dörtgenimi çizdim. Şimdi dörtgen aşağıdaki şekle benziyor olmalı. (Rengi gözönünde bulundurmayalım)

Bu aşamada Layer penceremizde Shape 1 alanının belirlenmiş olması gerekiyor. Şimdi navigasyonumuzun arka alanını oluşturacak bu katmanın özelliklerini düzenleyeceğiz. Layer penceresinde Shape 1 üzerine iki kere tıklayarak Layer Style penceresini açın. Bu alanda yapacağımız değişimler ile navigasyon arkaplanımız şekillenecek. Aşağıdaki alanlarda ilgili değerleri uygulayalım ve işlemimize devam edelim.

Inner Glow >> Blend Mode: Screen | Opacity:%25 | Elements, Size: 12px
Gradient Overlay >> Blend Mode: Normal | Gradient Renkleri: 1. renk #23A8E4 2. renk #54C4F6 olacak şekilde ayarlayın.
Stroke >> Size: 1px | Color: #6DCBF5

Yukarıda yer alan değerleri uyguladıktan sonra şeklimiz aşağıdakine benzer olacak. Şayet aynı görüntüyü alamadıysanız önemli değil, makalemizin sonunda kaynak psd dosyasını indirip gözatabilirsiniz.

Bu aşamadan sonra makalemizin giriş resminde vermiş olduğumuz örneğe ulaşmak için aktif buton olan ANASAYFA butonunu hazırlayacağız.

Shape 1 üzerindeyken yine Rounded Rectangle Tool’u seçerek aynı Radius değeriyle navigasyonumuzun içine oturacak bir dörtgen daha çiziyoruz. Yine renk önemli değil. Çünkü yukarıdaki gibi renk ve dolgu değerlerini kendimiz şekillendireceğiz.

Bu seferde Shape 2 üzerine çift tıklayarak butonumuzun renk ve dolgu ayarlarını yapacağız. Shape 2 Layer Style penceresini açtıktan sonra aşağıdaki değerleri giriniz.

Inner Glow >> Blend Mode: Screen | Opacity: %10 | Color:#80D2F6 | Element Size: 15px
Gradient Overlay >> Blend Mode: Normal | Gradient 1. renk #333333 2. renk #727272

Uygulamamız yukarıdaki örneğe benzemiş olmalı. Bu aşamadan sonra menümüz üzerine yazılarımızı yazarak işlemimizi sonlandıracağız. Yazı tipi ve boyutu tamamen size kalmış ancak ben uygulamam da beyaz renk ve Arial yazı tipine sahip 11px büyüklüğünde bir yazı tercih ettim. Yazımı Shape 2 üzerinde iken yazarak Shape 1 üzerinde de görünmesini sağladım.

Gördüğünüz gibi sadece iki shape alanı oluşturduk. Bunlara Layer Style ile belli değerler atadık ve sonra menümüz üzerine yazılarımızı yazdık. Bu aşamada minimal bir çalışma sergilemiş olduk. Zira sitenizde kullanmak istediğiniz alana göre vermiş olduğumuz değerler değişiklik gösterebilir. Özellikle Shape 2 alanını çoğaltarak diğer menü başlıklarına da uygulayabilir veya farklı renk değerleri vererek navigasyonunuzu renklendirebilirsiniz.

Umarım sizler için faydalı olmuştur. Giriş resmindeki uygulamanın PSD dosyasını BURADAN indirebilirsiniz.

Bu yazımızda bir resme yağmur efekti uygulayacağız. Kaynak bir resmin üzerinde yapacağımız bir iki basit Photoshop efekti ile yağmur yağıyormuş izlenimi uyandıracağız. Dilerseniz hemen makalenin devamına geçelim.
Efekti uygulayacağımız kaynak resim aşağıdadır.

Kaynak dosyamızı açıyoruz ve yeni bir layer oluşturuyoruz..

Edit > Fill > Foreground Color e gelerek, siyah ile dolduruyoruz.

Siyah layer seçili iken, Effect > Noise > Add Noise uyguluyoruz ve resimdeki gibi ayarlıyoruz.

Ok deyip, Filter > Blur > Motion Blur ‘ a gelip resimdeki ayarları uyguluyoruz.

Bunu da tamamladıktan sonra, Motion Blur ayarlarına geliyoruz ( CTRL + L ) ve resimdeki ayarları uyguluyoruz.

Şimdi efektimiz hazır fakat, siyah ekrandan kurtulmak için Layer sekmesindeki Screen‘i seçmeliyiz.

Son hali :

Screen’i seçtiğimiz yerden Soft Light, Linear Dodge, Difference ve Exclusion gibi efektlerle de değişik görüntüler elde edebilirsiniz.. Favorim, Soft Light : )