Arayüz Tasarımının Kullanıcı Psikolojisine Etkisi

Birkaç hafta önce üstümdeki tembelliği atmak için (işleyen demir pas tutmaz misali xD) Bildirgeç‘e IE 6′da Sıkça Karşılaşılan 6 CSS Hatası ve Düzeltme Yöntemleri ve IEs4Linux – Linux için Internet Explorer adında iki tane yazı yazdım. Yazdığım yazılar görebildiğiniz üzere kadim dostumuz (!) Internet Explorer 6 hakkında idi. Bu yazıların her ikisinde de az da olsa yorumlar yazıldı ve yazıyı tutanlar da oldu.

Yazılarımdan birinde aşağıdaki şekilde birazcık alaycı olarak nitelenebilecek bir yorum yazıldığını gördüm. Bu yorumu görünce içimden “Lan kibrit, bu yazıda modern tarayıcılara alternatif bir tarayıcı tanıtmıyoruz. Sadece Linux kullanıcılarının web sayfalarını Internet Explorer 6′da herhangi bir emülator kullanmadan nasıl test edebileceklerine dair bir yöntem anlatıyoruz.” diye düşünüp Bildirgeç‘in yeni özelliği olan yorumlara puan verme özelliğini kullanarak -1 puanı bastım. Evet bunu yaptım! xD

Bir diğer yazımda da yazılan bir yorum üzerine “Aman sen de… B.kun içinde boncuk arıyorsun. Ha Internet Explorer 6 logosu ha Internet Explorer 7 logosu… Ne farkı var?” diye içimden beni düşündüren bir yorum gördüm. Yine -1 puanı bu yoruma bastım. Evet yine yaptım! xD

Sonra birden birşey aklıma geldi. Bildirgeç‘teki yorumlarda yer alan puan verme özelliği olmasaydı az önce her iki yorum hakkında içimden düşündüğüm karşı cevabı sanırım burada yazacaktım. Belki de yazacağım bu cevaplar gereksiz bir yorum olacaktı. Hatta daha sonra yine gereksiz bir sürü polemik ile karşılaşabilecektim. Bu da yorumları okuyanlar için ve benim için boşa vakit harcamaktan başka birşey olmayacaktı. Ne kadar saçma bir durum değil mi?

İşte bu durumdan sonra edindiğim ders oluşturduğumuz arayüzlerle kullanıcıların psikolojisini etkileyebileceğimiz, hatta onları yönlendirebileceğimiz oldu.

Sonuç olarak web tasarımında olsun, web uygulamalarında olsun veya geliştirilen programların arayüzlerinde olsun kendimizi kullanıcı yerine koyup, onun gibi düşünüp bu doğrultuda arayüzleri tasarlamamız gerekli olduğunu düşünüyorum.

Siz de bu tip bir durumla karşılaştıysanız çekinmeden yorumlarda yazabilirsiniz.

Bu yazı Fatih Turan tarafından 05 Ekim 2008 13:19 tarihinde yazıldı. 5 yorum var.

sIFR’i Optimum Şekilde Kullanın

Image Replacement teknikleri arasında en popüleri sIFR‘dir. Her tarafta gördüğümüz ve bazı projelerde uyguladığımız bu teknikle kullandığımız işletim sistemindeki standart yazıtiplerine bağlı olmadan herhangi bir yazıtipini başlıklarımızda kullanabiliyoruz. Hem de daha düzgün bir Anti-Alias tekniği ile. Aşağıdaki görüntüde sonuca dair bir örnek görebilirsiniz. Veya sIFR 3′ün demosuna bakıp canlı olarak görmeniz de mümkün.

sIFR Kullanımı

Bu yazımda size sIFR‘in temelde nasıl kullanılacağını değil, bu tekniği nasıl daha optimum bir şekilde kullanabiliriz buna değineceğim. Zaten etrafta yeterince kullanımı anlatan yazılar var. Mesela bunun için sevgili dostum Muhammet Sevim‘in yazdığı sIFR 3 Kullanım Kılavuzu adlı makaleyi okuyabilirsiniz. Ayrıca sIFR Tutorial: Use Your Own Fonts, This is How You Get sIFR to Work ve sIFR 3 Documentation & FAQ adlı makaleleri de okuyabilirsiniz.

Eğer sIFR ile daha önce hiç tanışmamışsanız mutlaka yukarıda bağlantılarını verdiğim yazılardan en azından birini okumanızı ve sIFR‘in kullanımına aşina olmanızı öneririm.

sIFR‘in yukarıdaki makalelerde anlatılan normal kullanımlarında HTML dosyamıza birçok dosya eklememiz gerektiğini söylüyorlar. Ben sIFR‘i projelerimde kullanırken böyle yapmıyorum. Genelde mümkün olduğunca az dosyayı HTML sayfamdan çağırıyorum.

Yani normal kullanımda HTML dosyanızda aşağıdaki CSS dosyalarını;

1
2

<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

ve aşağıdaki dosyaları JS dosyalarını çağırmamız gerekiyor:

1
2

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>

Toplamda 4 dosyayı çağırıyoruz. Sizce çok değil mi? Peki şimdi burada ben size sadece üstteki <script src="sifr.js" type="text/javascript"></script> dosyasını HTML sayfamıza ekleyerek sIFR‘i kullanabileceğimizi söylesem nasıl olur? İyi olur değil mi?

Böyle bir yöntem izleyince sunucuya daha az istek göndermiş ve ayrıca kullanımı daha da basitleştirmiş olacağız.

Neden daha az istek göndermemiz gerektiğini ise daha önce Siberkültür‘de Sitenizin Performansını Arttırın adlı yazıdaki aşağıdaki paragrafta gayet iyi bir şekilde açıklanmıştı:

Sayfanızda ne kadar çok öğe bulunuyorsa, sunucuya gidecek istek de o kadar fazlalaşacaktır. Sunucuya giden her istek ise milisaniyelerle talep/cevap paralelini uzatacaktır. Sayfanızdaki öğelerden kastım tabiki de CSS dosyaları, JavaScript dosyaları ve imaj gibi harici dosyalar.

Hareket Vakti

Şimdi ilk olarak sifr.js dosyasını ve web sayfamız için diğer gerekli fonksiyonları taşıyan functions.js dosyasını aşağıdaki şekilde HTML sayfanıza ekleyin.

1
2

<script src="scripts/sifr.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>

Bakın ben yukarda bütün JS veya gerekli olabilecek küçük PHP betiklerini scripts adlı klasörde tutuyorum. Siz hangi klasörde bu dosyaları tutuyorsanız yukarıdaki kodu ona göre düzenlemeniz gerekir.

Az önce tek bir JS dosyası ile bu işi halledebileceğimizi söyledim. Evet bu doğru. Çünkü çoğu web sayfasında ufak tefekte olsa muhakkak JS kodları kullanıyoruz. Ben genelde yukarıdaki örnekteki gibi bu dosyamın ismini functions.js veriyor ve kodlarımı o dosya içinde tutuyorum.

Sonra functions.js dosyanızı açın, aşağıdaki örnek kodu yapıştırın ve tabi ki kendi kullanım ihtiyacınıza göre yeniden düzenleyin:

1
2
3

var agora_regular = {src: 'images/swf/agora_regular.swf' };
sIFR.activate(agora_regular);
sIFR.replace(agora_regular, {selector: 'div#content h1, div#content h2', css: ['.sIFR-root { color: #3e3e3e; font-weight:bold; letter-spacing:-1 }'], wmode: 'transparent', tuneHeight: '-5'});

Yine burada ilk satırda Flash’da ürettiğim Agora Regular adlı yazıtipini barındıran agora_regular.swf dosyasını images/swf klasöründen çağırıyorum. Yine siz kendi gereksinimlerinize göre yuarıdaki kodu düzenleyebilirsiniz.

Son olarak varsayılan olarak kullandığınız CSS dosyanızı açıp aşağıdaki kodları dosyanızdaki uygun bir yere yapıştırın:

1
2
3
4
5
6
7
8
9
10
11
12

.sIFR-flash { visibility:visible !important; margin:0; padding:0 }
.sIFR-unloading .sIFR-flash { visibility:hidden !important }
.sIFR-replaced, .sIFR-ignore { visibility:visible !important }
.sIFR-alternate { position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden }
.sIFR-replaced div.sIFR-fixfocus { margin:0pt; padding:0pt; overflow:auto; letter-spacing:0px; float:none }
 
@media print {
 .sIFR-flash { display:none !important; height:0; width:0; position: absolute; overflow:hidden; }
 .sIFR-alternate { visibility:visible !important; display:block !important; position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important }
}
 
.sIFR-active div#content h1 { visibility:hidden; font-size:30px; line-height:1em }

Yukarıdaki kodda 1. satırdan 5. satıra kadar sIFR için gerekli CSS kodlarını (yani standart kurulumdaki sifr-screen.css dosyasındaki gerekli satırları), 7. satırdan 10. satıra kadar normalde sifr-print.css adlı sIFR için gerekli dosyadaki kodları ve 12. satırda da sIFR tekniği uyguladığımız başlığın boyutunu belirliyoruz.

Yukarıda @media print kodu sayesinde gereksiz yere sifr-print.css dosyasını HTML sayfamıza gömmekten kurtardık. Ama burada dikkat etmemiz gereken birşey var. Yukarıdaki kodu eklediğiniz ana CSS dosyasını (ben genelde screen.css olarak adlandırırım) HTML dosyasına gömerken <link href="styles/screen.css" rel="stylesheet" type="text/css" media=”screen” /> şeklinde media="screen" özelliğini kullanarak verirseniz az önce bahsettiğim @media print arasındaki kodlar çalışmayacaktır. Çünkü bu CSS dosyasını tanımlarken sadece ekran için çalışmasını söylediniz.

Dolayısıyla web sayfanızı yazdırırken sIFR‘in ürettiği .SWF dosyaları yüzünden kimi boşluklar veya birtakım gariplikler görebilirsiniz.

Kısacası HTML sayfamıza ana stil sayfamızı çağırırken media="screen" özelliğini kullanmamamız gerekir.

Ayrıca eğer hali hazırda yazıcı için bir CSS dosyası kullanıyorsanız yukarıdaki örnekte yer alan @media print {} arasındaki kodları o dosya içine de atabilirsiniz.

Sonuç olarak web sayfalarımızı kodlarken mümkün olduğunca az dosya kullanmamız iyi olacaktır. Gerektiğinde bu yazımda anlattığım tarzda bir değişiklik yapmamız da optimizasyon adına iyi olacaktır.

Bu yazı Fatih Turan tarafından 19 Eylül 2008 23:52 tarihinde yazıldı. 13 yorum var.

Merhaba Dünya! Yeniden…

Herkese merhabalar. Uzun bir aradan sonra blogumu revizyondan geçirip sonunda yayına sokabildim. Nihayet! Aslında blogumu dün açmam gerekiyorken Wordpress’te Header By Sent adlı hata ile karşılaştım. Bir de bazı veritabanı sorunları da vardı. Bütün bunları aşmam tam iki günümü aldı! Nasıl zor geçti bu iki gün anlatamam. Tam anlamıyla öldüm öldüm dirildim diyebilirim. Herneyse… Sonunda buradayım ve bir “Merhaba Dünya!” yazısı yazabildim bloguma.

Az önce blogumu revizyondan geçirdiğimi söylemiştim. Evet blogumda birtakım yenilikler var. Artık benim hakkımda biraz daha ayrıntılı bilgi edinebilecek, tüm yazılarıma arşiv sayfasından erişebilecek, daha önce yapmış olduğum ticari ve serbest çalışmalarımı görebilecek ve yeni keşfettiğim Search Unleashed adlı arama eklentisi sayesinde daha gelişmiş aramalar yapabileceksiniz.

Ayrıca artık sağ tarafta görebileceğiniz üzere bloguma aylık 75$ karşılığı 125×125 boyutunda reklam verebiliyorsunuz. Eğer reklam vermek veya ödeme koşulları hakkında bilgi almak istiyorsanız benimle iletişime geçebilirsiniz.

Kullandığım temamda tasarım olarak da biraz değişiklik yaptım. Mesela artık yazı boyutları daha büyük. Bir önceki sürümde çok küçük olduğunu düşünüp böyle bir değişikliğe gittim. İyi de yaptığımı düşünüyorum. Herkesin gözleri küçük boyutlu yazıları okumaya elverişli olmayabilir. Sonra yorum kutularında birtakım ince detaylar ekledim. Bazı çapalarda (anchor) ufak bir kayma efekti ekledim (Opera’da biraz sorunlu ama olsun napalım ).

Diğer yandan nihayet bir isim verebildim bu temaya. Adı Emerald. Yani zümrüt… Unutmadan söylemem gerekir; Burada kullandığım Emerald adlı temayı bir süre sonra ücretsiz olarak dağıtacağım. Beni izlemeye devam edin.

Arkadaşlar yorum ve eleştirilerinize açığım. Aşağıdaki yorum kısmından yorum, eleştirilerinizi ve yakaladığınız hataları yazabilirsiniz.

Bu yazı Fatih Turan tarafından 18 Eylül 2008 01:18 tarihinde yazıldı. 11 yorum var.

Illustrator Araçları: Type Tool

Illustrator’un önemli araçlarını tanıtmaya devam ediyorum. Bu seferki tanıtacağım Illustrator aracı Type Tool. Type Tool Illustrator’de yazı yazmamızı sağlayan bir araç. Ve bu araçla normal yazı yazmamızın yanısıra path üzerine, path içinde ve dikey olarak da yazı yazabiliyoruz. Bu küçük tanıtım bilgisinden sonra gelin hep birlikte bu aracı derinlemesine inceleyelim.

Karakter Paleti

Type Tool’u kullanırken yazdığınız yazıya dair bir çok seçeneği aşağıdaki görüntüde yer alan Character adlı palet ile ayarlıyoruz. Bu palet eğer sizde kapalı ise Window menüsünden Type-Character veya klavyeden CTRL+T tuşlarına basarak açabilirsiniz.

Karakter paletinde yazı tipini (1), yazı stilini (2), yazı boyutunu (3), satır aralığı (leading) (4), espas (kerning) (5), harf aralığı (tracking) (6), yatay boyutlandırma (7), dikey boyutlandırma (8), referans çizgisi (baseline) (9), karakter döndürme (10) gibi seçenekleri ayarlayabiliyoruz.

Seçenek Paleti

Ayrıca yazımızın rengini (1), kenar çizgisinin rengini (2), kenar çizgisinin kalınlığını (3), yazının şeffaflığının (4) yanısıra az önce yukarıda anlattığım karakter paletindeki seçeneklerin bir kısmını buradan yani ekranın üstünde beliren seçenek paletinden de ayarlayabiliyorsunuz.

Paragraf Paleti

Paragraf paleti ile Illustrator’de tek satır olarak yazdığınız yazıların aksine, paragraf halinde yazdığınız yazıların seçeneklerini ayarlayabiliyorsunuz. Bu palet genellikle karakter paletinin hemen yanında bulunur. Fakat sizde görünmüyorsa Window menüsünden Type-Paragraph komutu ile veya klavyeden ALT+CTRL+T tuşları ile bu paleti açabilirsiniz.

Paragraf paletindeki seçenekler ile paragrafınızı sola hizalayabilir (1), ortaya hizalayabilir (2), sağa hizalayabilir (3), paragrafı her iki tarafa yaslayıp paragrafın son satırını sola hizalayabilir (4), paragrafı her iki tarafa yaslayıp paragrafın son satırını ortaya hizalayabilir (5), paragrafı her iki tarafa yaslayıp paragrafın son satırını sağa hizalayabilir (6) veya bütün paragrafı her her iki tarafa yaslayabilirsiniz (7).

Ayrıca paragrafa soldan (8) ve sağdan (9) girinti vermenin yanısıra ilk satır için de girinti (10) verebilirsiniz.

Type Tool Alt Araçları

Type Tool (1) dışında yine yazı yazma ile alakalı fakat biraz daha farklı fonksiyonlara sahip alt araçlar mevcuttur. Bunlar Area Type Tool (2), Type On A Path Tool (3), Vertical Type Tool (4), Vertical Area Type Tool (5), Vertical Type On A Path Tool (6) araçlarıdır.

Area Type Tool

Bu araç ile ekranda hazır şekillerle (örneğin Rounded Rectangle Tool veya Ellipse Tool ile çizilen şekiller) veya path tool ile birleştirilmiş (veya kapatılmış diye tabir edebiliriz) biçimde çizilen şekillerin içinde yazı yazmamızı sağlar. Type Tool gibi direkt sahneye tıklayıp yazınızı yazamazsınız. Eğer öyle yapmayı denerseniz size hata mesajı olarak “You must click on a non-compound, non-masking path to create text inside a path” belirecektir. Tekrar ediyorum bu aracı kullanabilmeniz için sahnede bir birleştirilmiş bir path olan bir şekil olması veya çizmeniz gerekir.

Yukarıdaki örnekde görüleceği üzere en üstte Ellipse Tool ile çizilen yuvarlak şeklin içi Area Type Tool ile yazı ile doldurulmuş. Hemen altında ise Rounded Rectangular Tool ile çizilmiş oval kutuyu Area Type Tool ile nasıl doldurulacağı gösteriliyor.

Bunu yapmak gayet basit; ilk önce sahneye örneğin Rectangular Tool ile (klavye kısayolu M’dir) bir kutu çizin. Sonra Area Type Tool ile çizdiğiniz kutunun kenar çizgisinin hemen kenarına geldiğinizde fare imleci yukarıdaki görüntüdeki gibi değişecek. Ardından istediğiniz bir yazıyı buraya girebilirsiniz.

Type On A Path Tool

Bu araç ile sahnede çizilmiş herhangi bir path üstünde (pathler nasıl yapılır bilmek istiyorsanız Pen Tool’u tanıtan bir önceki yazımı okuyun) yazı yazabiliriz. Yine bir önceki Area Type Tool gibi sahneye tıklayıp direkt kullanamıyoruz. Bu aracı kullanabilmemiz için sahnede önceden bir path çizmemiz gerekir.

Yukarıdaki örnekde görebileceğiniz gibi path üzerine yazılmış bir yazı bulunmakta. Hemen altında da görebileceğiniz üzere bir path bulunmakta. Bu pathin üzerine geldiğinizde fare imleci şekil değiştirecek ve o anda pathin üzerine tıklarsanız yazınızı artık onun üzerinde yazabileceksiniz. Yine kullanımı gayet kolay değil mi?

Vertical Type Tool

Bu araç ile aşağıdaki örnekde de görebileceğiniz üzere dikey olarak yazı yazabiliyoruz.

Kullanımı yine gayet basit. Vertical Type Tool’u seçtikden sonra sahnemizde istediğimiz yere tıklayıp yazımızı dik olarak yazıyoruz.

Vertical Area Type Tool

Bu aracın çalışma mantığı Area Type Tool ile hemen hemen aynı. Tek farkı yazıyı yatay olarak değil dikey olarak yazması.

Kullanımı Area Type Tool’a çok benziyor. Aynı örneği bu araç içinde uygulayabiliriz; Rectangular Tool ile (klavye kısayolu M’dir) bir kutu çizin. Sonra Vertical Area Type Tool ile çizdiğiniz kutunun kenar çizgisinin hemen kenarına geldiğinizde fare imleci yukarıdaki görüntüdeki gibi değişecek. Ardından istediğiniz bir yazıyı buraya dikey olarak girebilirsiniz.

Vertical Type On A Path Tool

Bu araç da az önce anlattığım Type On A Path Tool’a çok benziyor. Tek farkı harfleri farklı bir açıda daha doğrusu path üzerine göre dikey olarak yerleştirmekdedir.

Kullanımına dair Type On A Path Tool’daki örneği vermek istiyorum; ilk önce sahnede bir path çizin. Sonra bu pathin üzerine geldiğinizde fare imleci yukarıdaki görüntüdeki gibi şekil değiştirecek ve o anda pathin üzerine tıklarsanız yazınızı artık onun üzerinde yazabileceksiniz.

Bu yazı Fatih Turan tarafından 30 Aralık 2007 14:29 tarihinde yazıldı. Hiç yorum yok.

Internet Explorer’ın Web Standartlarına Uymasını Sağlayın

Internet Explorer bana göre Microsoft‘un kendi kafasına göre yaptığı standartları destekleyen, web standartlarını doğru düzgün desteklemeyen ve desteklese de bir sürü hata ile web tasarımcıların kafasını bozan aptal bir tarayıcıdır. Tamam belki de sıradan bir kullanıcı için bu kelimeler pek bir anlam ifade etmeyebilir. Fakat web standartlarına uygun site/uygulama yapmaya çalışan ve Internet Explorer yüzünden kafayı yeme noktasına gelen web tasarımcıları/geliştiricileri ne demek istediğimi anlayıp bana hak verecektir. xD

Eee Peki Ne Yapabiliriz?

Birazdan kullanımını anlatacağım Dean Edwards‘ın 22KB’lik IE7 adlı Javascript betiği sayesinde Internet Explorer 6 ve aşağı sürümlerinin(5, 5.5 sürümleri) daha fazla web standartlarına uymasını sağlayabilirsiniz.

Bu betik sayesinde Internet Explorer 6 ve aşağı sürümlerinde her element üzerinde CSS ile :hover, :focus, :active gibi pseudo sınıf ve elementlerini kullanabilecek, şeffaf PNG dosyalarını farklı bir Javascript betiği veya CSS hilesine ihtiyaç duymadan kullanabilecek, W3C kutu modelini standart ve garip(quirks mode) modlarının her ikisinde de kullanabileceksiniz.

Bunlar betiğin ilk göze çarpan özellikleri idi. Daha detaylı bilgiye buradan erişebilirsiniz.

Kullanım Kılavuzu

İlk adım olarak IE7_0_9.ZIP dosyasını buradan indirip kullanmak istediğiniz çalışmanızdaki dosya klasörüne atıyorsunuz ve bütün dosyaların ie7 klasöründe olduğundan emin olun(bakınız). Eğer dosyaları farklı bir klasöre atacak olursanız, bir sonraki adımda belirttiğim yolu değiştirmelisiniz.

Sonra bu betiği kullanmak için aşağıdaki kodu meta etiketlerinin hemen sonrasına(eğer sonrasına yerleştirmezseniz bizarre bug denilen bir hata ile karşılaşabilirsiniz) yerleştirin.

1
2
3
4

<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

Bu noktada dikkat edecek olursanız Conditional Comments denilen şartlı HTML yorumları ile Internet Explorer 7′nin aşağısındaki sürümlerde(6, 5.5, 5) bu betiğin yüklenmesini söyledik. Böylece sadece Internet Explorer 5, 5.5 ve 6′da bu betik çalışacak. Bu betiğin Internet Explorer 7′de çalışmasının pek bir anlamı yok. Zira Internet Explorer 7 zaten web standartlarını destekliyor. Ayrıca bu şartlı yorumların kullanımını daha sonra ayrıntılı olarak anlatmayı düşünüyorum.

Şeffaf PNG’lerin Kullanımına Dair Küçük Bir Not

Şeffaf PNG dosyalarını kullanırken dosya isimlerinizin sonuna -trans eklemeyi unutmayın. Örneğin elimizde deneme.png adlı dosya var ise deneme-trans.png olarak değiştirmelisiniz.

Sonuç

Son olarak sizin için bir örnek hazırladım(Internet Explorer 6′da betik aktifken bakın ve bir de betik pasifken bakın). Artık web standartlarını daha fazla destekleyen bir Internet Explorer’ımız oldu.

Bu yazı Fatih Turan tarafından 18 Eylül 2007 13:37 tarihinde yazıldı. 9 yorum var.

Web Tasarımlarında Desenlerin Kullanımı

Bir önceki yazımda web tasarımlarınızda kullanabileceğiniz desen kaynaklarını kısa kısa açıklayarak listelemiştim. Şimdi bu desenleri Photoshop’da nasıl kullanılacağına dair ufak tefek teknikler göstereceğim.

Adım-1

İlk adımda kullanmak istediğimiz bir deseni seçiyorsunuz. Ben Kaliber10000 sitesinden bu deseni örneğimizde kullanmak için seçiyorum ve bilgisayarıma kaydediyorum.

Adım-2

Photoshop’a geçip CTRL-O kısayol tuşlarına basarak az önce kaydettiğimiz desen dosyamızı açıyoruz. Sonra CTRL-A kısayol tuşlarına basıp aşağıdaki görüntüdeki gibi desenin tamamını seçili hale getiriyoruz.

Adım-3

Desen seçili iken aşağıdaki görüntüdeki gibi EDIT menüsünden DEFINE PATTERN komutunu uygulayıp desenimize bir isim verdikden sonra OK düğmesi ile desenimizi Photoshop’a aktarmış oluyoruz.

Adım-4

CTRL-SHIFT-N kısayol tuşları ile yeni bir katman(layer) açın. Sonrasında deseni döşeyeceğimiz boş bir dosyayı CTRL-N kısayol tuşları ile açıyoruz. Ardından SHIFT-F5 kısayol tuşlarına basarak FILL penceresini açıyoruz. Buradaki USE listesinden PATTERN’ı seçiyoruz. Ve son olarak aşağıdaki görüntüdeki gibi daha önce seçmiş olduğumuz desene basıp OK düğmesi ile desenimizi arkaplana döşemiş oluyoruz.

Sonuç

Desenimiz aşağıdaki görüntüdeki gibi döşenmiş olacak. Ayrıca burada bir not düşmek istiyorum. Dört maddelik anlattığım bu işlemde deseni bütün bir dosyanın boyutuna döşemiş olduk. Eğer siz istiyorsanız araç kutusundaki RECTANGULAR MARQUEE TOOL(M) ile kendi yaptığınız şekillerede aynı yöntem ile deseninizi döşeyebilirsiniz.

Biraz Daha Ayrıntı İster misiniz?

Desenlerle uğraşmak gerçekten zevk verici bir iş. Hadi bu işe biraz daha ayrıntı katalım.

Adım-5

Desenin bulunduğu katmanın(layer) bir altında bulunan BACKGROUND adlı katmanını PAINT BUCKET TOOL(G) veya farklı bir yöntem ile siyaha(#000000) boyayalım. Ardından aşağıdaki gibi desenin bulunduğu LAYER’ı seçip SHIFT-ALT-H tuşu ile desenin bulunduğu katmanın BLENDING MODE ayarını HARD LIGHT’a çevirelim.

Adım-6

D kısayol tuşuna basarak renkleri standart değere yani siyah ve beyaza çevirin. Sonra araç çubuğundan GRADIENT TOOL(G)’u seçip aşağıdaki görüntüdeki ayarları uygulayın. Yani REFLECTED GRADIENT’i seçin.

Adım-7

Desenin bulunduğu katmanı seçip ardından LAYERS paletinin altında bulunan ADD LAYER MASK düğmesine veya LAYERS menüsünden LAYER MASK-REVEAL ALL komutunu uygulayın. Desenin bulunduğu katmana maskeyi ekledikden sonra aşağıdaki görüntüdeki gibi GRADIANT TOOL(G) ile sayfanın ortasından soluna doğru geçiş oluşturuyoruz.

Sonuç

Böylece desenimiz aşağıdaki gibi sadelikden kurtarmış olup daha farklı bir görünüme kavuşacak.

Bu yazı Fatih Turan tarafından 30 Ağustos 2007 18:05 tarihinde yazıldı. 3 yorum var.

Tekrarlı ve Arttırımlı Geliştirme (Iterative and Incremental Development)

Yazan : Şadi Evren ŞEKER

Yazılım mühendisliğinde (software engineering) kullanılan bir geliştirme metodudur. Bu metdo şelale modelindeki (waterfall model) eksiliklerden yola çıkılarak geliştirilmiştir ve yazılımın geliştirilmesi sırasında bir tekrar ile (döngü) yazılımın daha iyi hale getirilmesi hedeflenir.

Yukarıdaki şekilde görüldüğü üzere planlama ile başlayan ve tertip (deployment) ile biten süreçte bir döngü (iteration) sürekli olarak tekrarlanmaktadır.

Bu daire içerisinde yapılan işler sırasıyla :

• ihtiyaç (Requirements)
• tahlil (analiz, analysis)
• tasmim (tasarım, design)
• tatbik (uygulama, implementation)

Adımlarından oluşur. Bu adımlar tamamlandıktan sonra şayet yeterli olgunluğa ulaşılmadıysa yazılım geliştirme süreci:

• Tecrübe (Test)
• Takdir (Evaluation)

Aşamaları ile devam eder ve tekrar ihtiyaç aşamasına dönülür. Ancak yazılım belirli bir kabul seviyesine ulaştıktan sonra bu daireden çıkılır.

Neden blog yazıyorum ?

Merhaba arkadaşlar Serkan Cura arkadaşım geçenlerde bir mim göndermişti. Mim konusunu neden blogluyorum olarak bildirmiş.  Açıkcası bir süredir bu sorunun cevabını yazmak istiyordum. Bu aralar biraz yoğun olduğumdan olsa gerek pek vakit ayıramadım.  Zaten düzenli okuyucularım fark etmiştir. Günde 1 veya  daha fazla yazı yazarken şimdilerde 3-4 günde bir yazmaya başladım.

Yoğunluğum iş yükümden ve bu aralar uğraştığım bir scriptten kaynaklanıyor.  Açıkcası birde yeni doğan kızımın faktörü yok değil   Gelelim konumuza…

Neden blog yazıyorum ?

Bu soruyu düşündüğüm zaman yıllar öncesi aklıma geliyor. İnternet müthiş bir hazine ve nasıl kullanacağımız hakkında araştırma yapıyordum. Açıkcası şunu gördüm ki ne kadar araştırırsam araştırayım internette bulduğum kaynakların büyük bir çoğunluğu ingilizce olduğu için sıkıntı çekiyordum. Tabi o zamanlar bu kadar çok Türkçe içerikli sayfa yoktu.

Sonra düşünmeye başladım neden yok ?  Bu soruyu kendime sorduktan sonra en azından kendi bilgi ve tecrübelerimi ortaya koyarak Türkçe bir kaynak olmak istedim.  Mesela şöyle bir örnek vereyim. Sokağınızda yerlerin çöp olduğunu düşünün her sokaktan geçen adam şuraya bak çok pis diyor.  Halbuki her geçen eline bir çöp alıp çöp kutusuna atsa o sokakta çöp kalmayacaktır.  Bende öyle yaptım elime bir çöp alıp şöp kutusuna attım.

Şimdilerde bakıyorumda evet gerçektende herkez bu işe bir el attı. Profesyoneller de olsun amatörlerde artık internette Türkçe kaynak bulabiliyorsunuz.  Bunun yanında ulusal birçok internet sayfasıda artık Türkçe destekli.

Beni blog yazmaya iten bir diğer unsurda içimdeki kişidir. İçimde öyle bir his var ki açıkcası karşı koyamıyorum.  Bunada bir örnekle yaklaşırsak ;  Mesela bilgisayarınız bozuldu ne yapıyorsunuz ? Bir bilgisayarcıya götürüyorsunuz ve onların yaptıklarıda format atmak.  1-2 saat içinde formatı basıp haydi tamamdır muhabbeti. Sadece bununla kalsa iyidir.

Açıkcası yıllardır bu mesleği yapıyorum ve işin içindeki çakallıkları ve çakalları gördükçe isyan edesim geliyor.  İşte bu isyan edişimin bir yansımasıda blog yazmaktır.  İnsanımız malesef ki bilgisayar konusunda biraz bilgisiz. Bende kendi tecrübelerimle bu konuda insanlara yardımcı olmaya çalışıyorum.  Çok basit bir iki tuşla halledilebilecek birşey için insanların okumasını ve yararlanmasını istiyorum.  Kısacası paylaşmak… En azından bilgisayarınızı bir bilgisayarcıya götürmeden önce sorunu araştırmak ve çözüm bulabilmek.

Birşeyler başardığımıda görebilmekteyim. İnsanlar mail atıp yada internet sayfama yorum yazıp teşekkür ediyor.  İşlerini halledebiliyorlar.

Bu konu için çok teşekkür ederim. Dosyalarımı kurtarmama yardımcı oldu. Ayrıca çok güzel bir site. Başarılarınızın devamını dilerim.

teşekkür ederim arkadaşım vallah bana ilaç gibi geldi dosyalarımı kaybettim zannetmiştim gerçekten çok teşekkür ederim 2 aydır bunla uğraşıyordum

Kardeş inan bana bu öyle bi işime yaradı ki. Bilgisayara linux kurduktan sonra grub denetleyicisi yüzünden windows’a erişemedeim daha sonra

tekrar windows kurduğum da eski klasörlerime erişemedim. Sana çok teşekkür ederim. Umarım birgün benim de sana bi faydam dokunur….

Bunlar gibi yorumlar aldıkça içimdeki o istek bir nebze daha kabarıyor. Sanırım insanlara yardımcı olabilmek ruhumda var. Bunu başardığımı kısmende olsa görebiliyorum.

Gerek yorum gerek mail gereksede MSN gibi sistemler üzerinden insanlar istekte bulunuyor ve sorunlarını dile getiriyorlar.  Yardımcı olabilmek insanlara en azından birşeyler öğretebilmek bilgisayar konusunda birazda olsa insaları bilgilendirebilmek …

Sanırım blog yazmamda ki en büyük etkenlerden birisi budur.  Ayrıca sosyal bir ortam. Birçok insan bilgisayar başındakilere anti sosyal olarak baksada. Gerek blog toplantıları olsun gerekse de internet üzerindeki ortamlar olsun birazda sosyalleşebiliyorum bu sayede…

Peki siz neden blog yazıyorsunuz ? Bu soruyu beni takip eden tüm arkadaşlarıma göndermek isterim.

İlgilinizi çekebilecek diğer yazılar…

• Blogumun en çok… (4)
• MindShare Interaction ile dijital dünyaya merhaba (0)
• TEAkolik.info Aktif (5)
• Sistemimi 2.2.2 Sürümüne Güncelledim. (0)
• Blogcu.Com El değiştirmiş..! (0)