Uluslararası piyasada çalışmayı planladığmıız için Xhtml Kitchen‘ı ilk etapda İngilizce dil desteği ile yayına aldık. İlerleyen zamanlarda Türkçe dil desteği ile sitemizi tekrar güncellemeyi düşünüyoruz.

Hizmetlerimiz

Xhtml Kitchen‘da sunduğumuz temel hizmetlerimiz 4 ana başlık altında toplanıyor:

XHTML/CSS Dönüştürme Hizmeti

Photoshop veya Fireworks programlarında hazırladığınız tasarımlarınızı elle kodlayarak XHTML/CSS dosyalarına dönüştürüyoruz. Dönüştürdüğümüz XHTML/CSS dosyalar bütün modern tarayıcılarda (IE7-8, Firefox, Safari, Opera, Chrome) sorunsuz olarak gözükür.

Wordpress Tema Adaptasyonu

Wordpress için hazırladığınız blog veya CMS tasarımlarınızı Wordpress’e adaptasyonu, eklenti kurulumu ve eklenti entegrasyonu yapıyoruz.

HTML E-Posta Şablonu Hazırlama

Tasarladığınız e-posta bültenlerinizi Gmail, Yahoo! Mail Classic/Beta, Hotmail, Outlook 2003/2007, Thunderbird 2+ and Apple Mail ile uyumlu HTML e-posta şablonlarına dönüştürüyoruz.

Özel Javascript Uygulaması Oluşturma

Tamamen projenizin ihtiyaçlarına ve kendi isteğinize göre Javascript uygulamaları oluşturuyoruz.

Xhtml Kitchen Nasıl Çalışıyor?

Adım 1:

Sipariş formunu kullanarak projenize ve size ait tüm bilgileri girdikten sonra XHTML’e dönüştürülmesini istediğiniz tasarımlarınıza ait dosyaları (tasarım dosyalarınız katmanlı olacak şekilde .PSD (Photoshop), .PNG (Fireworks), .AI (Illustrator) biçimlerinde olabilir ve eğer varsa tasarımlarınıza ait font dosyalarını) bize ulaştırıyorsunuz.

Siparişinize ait bilgileriniz ve tasarımlarınız incelenir, projeniz onayladıktan ve siparişinize ait yapmanız gereken ödemenizi aldıktan sonra ustalarımız projenize hemen başlar.

Adım 2:

Ustalarımız vermiş olduğunuz bilgi ve talimatlara göre projenize azami özen göstererek çalışır, bitirilmesi gereken süre içinde tasarımlarınız elle ve anlamlı biçimde (semantik) kodlanarak lezzetli web sayfalarına dönüştürülür.

Adım 3:

Dönüştürülen web sayfaları Windows ve Mac işletim sistemlerinde en çok kullanılan IE 7, IE 8, Firefox, Safari, Chrome ve Opera tarayıcılarındaki olası hata veya farklılıklara karşı test edilir. Bütün bu testlerde karşılaşılan her hata mümkün olan en kısa sürede düzeltilir.

Adım 4:

Proje, söz verilen tarihte size yani proje sahibine servis edilir.

Daha fazla bilgi için sizi Xhtml Kitchen‘a bekliyoruz. Xhtml Kitchen hakkında herhangi bir soru, öneri, görüş bildirmek istiyorsanız contact -at- xhtmlkitchen.com e-posta adresini kullanabilir veya burada yorumda bulunarak geri dönüş sağlayabilirsiniz.

Ayrıca Xhtml Kitchen‘daki hizmetlerimize ait fiyat listesini bu sayfadan görebilir ve dilerseniz sipariş sayfasından şimdi yeni bir sipariş verebilirsiniz.

Bu yazı Fatih Turan tarafından 21 June 2010 15:03 tarihinde yazıldı. 4 yorum var. Sen de yorum yaz.

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 October 2008 13:19 tarihinde yazıldı. 5 yorum var. Sen de yorum yaz.

Adobe Photoshop

CS ailesinin amiral gemisi sayılabilecek Photoshop bir önceki CS sürümündeki gibi Photoshop ve Photoshop Extended adı altında iki ayrı versiyon ile satılmakta. Her iki sürüm arasındaki farklılıkları buradaki sayfadan öğrenebilirsiniz. Fakat ben burada Photoshop Extended’daki özelliklerden bahsedeceğim (nasılsa diğer sürümdeki özellikleri kapsıyor değil mi?).

Adobe hemen hemen her sürümde Photoshop’un arabiriminde mutlaka bir değişikliğe gidiyordu. Anlaşılan bu sürümde de bu huyundan vazgeçmemiş görünüyor ve Photoshop CS4′u yenilenmiş arabirim ile bizlere sunuyor. Açıkcası Photoshop’u -az önce de dediğim gibi- kurup inceleyemediğimden dolayı tam bir yorum yapamayacağım ama görebildiğim kadarıyla yeni arabirim gayet iyi. Arabirimde ilk dikkatimi çeken üst kısımdaki sekmeler oldu. Daha önceden dökümanlar arasında kaybolup duruyorduk. Sekmeler sayesinde bu sorun ile artık daha az karşılaşacağız gibime geliyor. Bu arada bu sekme özelliği sanırım diğer programlarda da mevcut.

Açıkcası Photoshop’un en çok ilgimi çeken Akıcı Tuval Yönü denen yeniliği oldu. Bu yenilik sayesinde tuvalimizde birtakım değişiklikler meydana geldi. Mesela önceki sürümlerde tuvalimize sadece %1600 boyutunda yakınlaştırma yapabiliyorduk. Oysa tanıtım videosundan gördüğüm kadarıyla tuvaldeki görselin piksellerine kadar yakınlaştırma yapabiliyoruz. Diğer yandan Rotate View Tool ile tuvalimizi 360 derece açıyla döndürebiliyoruz ki bu da çok ilginç bir özellik.

Bir diğer yeni özellik olan İçerik Bilinçli Ölçekleme ile Photoshop’ta görselleri yeniden boyutlandırırken içeriğin de boyuta göre yeniden şekilleniyor. Bunun pratikte işe yarayıp yaramayacağını bilmiyorum. Ama yararlı bir özellik gibi görünüyor. Herneyse ilerleyen günlerde deneyip göreceğiz.

Sık sık fotoğraflarla uğraşan kullanıcıların beğeneceğini düşündüğüm yeni Ayarlamalar Paneli sayesinde önceki sürümlerde birçok menü altında kaybolup levels, curves, brightness&contrast vs. ayarlamak artık tarih oldu. Adjustment adlı panel sayesinde bütün bu ayarlamaları menüler altında kaybolmadan kolayca yapabileceğiz artık.

Bir de bu Photoshop CS4′ün çıkmadan önce bir yerde Photoshop’un bilgisayarımızın GPU’sunu kullanacağını okumuştum. Ama nedense Adobe’nin yayınladığı özellik listesinde bu ibareye rastlayamadım. Photoshop’un yeni ve geliştirilmiş bütün özelliklerini bu sayfadan okuyabilirsiniz.

Adobe Illustrator

Adobe Illustrator vektör tabanlı programlar arasında -bana göre- kullanıcıya en iyi imkanları verebilen vektör çizim programıdır. Ben de vektörel çalışmalarımı (bazılarını çalışmalarım sayfasında bulabilirsiniz) Illustrator ile yapıyorum. Bunun birçok nedeni var ama en önemlisi sanırım Photoshop’a benzer arabirimi sayesinde kolay kullanımı ve dolayısıyla da kolay öğrenilebilir bir yapıya sahip olmasıdır.

Yeni Illustrator’de gradientlerde (Türkçesi ile degrade) büyük değişiklikler oldu. Artık oluşturduğumuz gradiantlardaki renk duraklarında şeffaflık belirleyebileceğiz. Bundan önce böyle bir özellik yer almıyordu Illustrator’de. Açıkcası bu durumu ben de önceden Illustrator’de çalışırken farketmiştim ve biraz da canımı sıkıyordu. :) Kısacası artık bu sorun yok ve gradientlerimize şeffaflık verebiliyoruz.

Yine Illustrator’de gradientlerin açı, konum ve boyutunu çalışılan nesne üstünde kolayca ayarlayabileceğimiz yeni bir özellik gelmiş. Daha önce Gradient paletinde kırk takla atarak çeşitli manevralarla yaptığımız değişiklikleri artık daha kolay yapabileceğiz. :)

Burada yazamadığım daha birçok yenilik Illustrator’de yer almakta. Yanlız Adobe’nin hala Illustrator’e çoklu sayfa özelliğini koymamasını biraz garipsedim. Keşke InDesign’daki o güzel özellik Illustrator’de de  olsaydı. Ama yine de Hot Door‘un Illustrator için geliştirdiği Multipage eklentisi sayesinde bu özelliği Illustrator’e katabiliyorsunuz.

Adobe Fireworks

Fireworks’de de diğer Adobe ürünlerinde olduğu gibi yeni özellikler geldi. Bir önceki Fireworks CS3 sürümündeki arabirimde eski Macromedia’nın arayüz tarzı ağır basıyordu. Bu sürümde nihayet Fireworks’un arabirimi tamamen yenilenerek Fireworks’un arabirimine Adobe’nin bakış açısı hakim oldu.

Fireworks’le pek çalışmadığım için bir önceki sürümde tasarımı otomatik HTML’ye dönüştürürken tam bir CSS desteği verip vermediğini veriyorsa ne denli verimli çalışıyor bunu bilmiyorum. Ama bu sürümde Adobe’nin iddia ettiğine göre web tasarımınızı tek adımda CSS tabanlı HTML dosyalarına dönüştürmeniz mümkünmüş. Gerçi hiçbir zaman bu tip yöntemleri tasvip etmiyorum (bunun XHTML KITCHEN‘da çalışmam ile alakası yok arkadaşlar :)). Elle yazılan kod her zaman otomatik oluşturulan koddan daha iyidir. Herşey elinizin altında olur, kontrol sizin elinizdedir falan (daha birçok neden yazılabilir aslında :))… Ama bu özellik sayesinde bu işten hiç anlamayan kullanıcılar için yararlı bir fonksiyon olmuş.

Yeni özellikler arasında tasarımınızı şifre korumalı olarak PDF dosya biçiminde dışarı aktarabiliyorsunuz. Hatta görüntüleme, baskı, kopyalama vs. gibi işlemler içinde ayrı olarak şifre belirleyebiliyorsunuz. Bu özelliğin diğer CS4 programlarında olup olmadığını bilmiyorum ama umarım vardır. :) Çok güzel bir özellik değil mi? Bence harika…

Adobe’nin bildirdiğine göre yeni Fireworks bir önceki sürüme göre daha performanslıymış. Bir önceki Fireworks’u ben de denerken kimi zaman bazı işlemlerde yavaşlığını farkediyordum. Bu da yararlı bir gelişme olmuş.

Fireworks’da bir önceki sürümün aksine metin motoru olarak Adobe’ninkini kullanıyormuş. Sanırım diğer Adobe programlarında olan anti-alias, paragraf ayarları seçenekleri gibi özellikleri artık Fireworks’da da kullanabileceğiz.

Kısacası Fireworks bu sürümle bayağı bir olgunlaşmış. Hatta kimi zaman Photoshop’u bırakıp Fireworks’a mı geçsem web tasarımlar için diye düşünmüyor değilim. :)

Adobe Dreamweaver

Dreamweaver’ı kullanmayalı bayağı oluyor. Bundan sonra da kullanmayı açıkcası düşünmüyorum. Çünkü WYSIWYG tarzı editörlere hiç ihtiyaç duymuyorum. “Ben Kimim?” sayfasında da yazdığım üzere çoğu işlerimde E Text Editor adlı programı kullanıyorum. Yine de Dreamweaver’da ilgimi çeken birkaç yenilik oldu. Bunlardan bahsetmem yararlı olacak.

Bundan önce bir sürü basit editörler de bile yer alan Subversion özelliği (geçenlerde bu konu hakkında Eren Emre bir yazı yazmıştı) nihayet Dreamweaver’a teşrif etmiş bulunmakta. :) Geç olsun güç olmasın diyerekten bu özelliğin önemli olduğunu belirtmekte fayda var.

Adobe, Dreamweaver’a Akıllı Nesneler adında yeni bir özellik eklemiş. Bu özellik sayesinde herhangi bir PSD belgesini Dreamweaver’daki çalışmanıza sürükleyerek bağlayabiliyorsunuz. Daha sonra bu bağladığınız belgeyi Photoshop’dan düzenlediğinizde Dreamweaver’a geçip hemen güncelleyebiliyorsunuz.

Bundan başka Dreamweaver’ın da arabirimi değişikliğe uğramış (biliyorum şaşırmadınız xD). Daha önce 3 adet olan görünüm kipleri arttırılmış ve 8′e çıkarılmış.

Adobe Flash

CS3 ailesi içinde belkide en çok yenilikle gelen program Flash’dır. Flash’daki yeni özellikler inanılmaz güzel görünüyor. Genel olarak görebildiğim kadarıyla bu sürümde animasyon konusunda bayağı gelişme sağlanmış.

Nesne Tabanlı Animasyon denen yeni Flash özelliği sayesinde Motion Tween tekniğiyle uyguladığınız animasyonları sahnedeki bir eğri yardımıyla kolayca gerçekleştirebiliyorsunuz. Bu yeni özellik gerçekten harika olmuş. Daha önceki sürümlerde bu tür olaylar tam eziyetti. :)

Öte yandan yine animasyon konusunda yarar sağlayacak Kemik Aracı adı altında yeni bir aracı bizlere bahşetti Adobe. :) Bu sayede daha önce 3D programlarda gördüğüm kemik editörü benzeri bir aracı Flash’da da görüyoruz.

Bir başka yeni özellik ile sahnemizdeki 2D nesneleri 3D çevirme ve döndürme araçları ile 3D animasyon yapabiliyoruz.

Yine ilgimi çeken güzel bir araç geldi Flash’a. Adı Spray Brush Tool olan bu araç ile herhangi bir sembolü sahnemize püskürtme şeklinde yerleştirebiliyoruz.

İzlenimlerim

Yeni Adobe Creative Suite 4 hakkında izlenimlerim genel olarak olumlu yönde. Şahsen yeni özelliklerden tatmin oldum diyebilirim. :) Siz bu konuda ne düşünüyorsunuz bilmek istiyorum doğrusu. Yeni özellikleri beğendiniz mi? Beğenmediğiniz yönleri neler? Eğer siz de CS4 ailesi içinde yer alan programları deneyebildiyseniz veya yukarıdaki yazımdan okuduğunuz kadarıyla edindiğiniz izlenimleri burada yorum olarak yazabilirsiniz.

Bu yazı Fatih Turan tarafından 25 September 2008 17:17 tarihinde yazıldı. 5 yorum var. Sen de yorum yaz.

Üstteki görsellerin soldakine dikkatlice bakın. Alias kelimesindeki l harfi i harfine göre biraz daha yukarıya kaymış. Yine aynı şekilde Alias kelimesinin sonundaki s harfi de yukarıya doğru kaymış.

Şimdi üstteki görsellerin sağdakine dikkatlice bakın. Soldaki gibi harf oynamaları yok. Çünkü Character paletindeki Anti-Alias yöntemi olarak Smooth seçilmiş durumda.

Benim gibi ayrıntılara önem veren bir kişiyseniz bu ipucu işinize yarayabilir. Zira ayrıntılar önemlidir. :)

Bu yazı Fatih Turan tarafından 11 April 2008 14:00 tarihinde yazıldı. 4 yorum var. Sen de yorum yaz.

Projemizin tasarımını ve genel işleyişini Web 2.0 özütüne uygun olarak yapmaya çalıştık. Altyapısını da kendi yapımımız olan bir CMS ile yaptık. Arkadaşlarla ilk projemiz olduğu için sistemde ufak tefek hatalar olabileceğini belirtmek isterim. Eğer sizin de gözünüze çarpan herhangi bir hata var ise bize iletişim formu aracılığıyla bunu bildirebilirsiniz. Ayrıca bu çalışma ile W’07 web tasarım yarışmasına katılıyorum. :)

Bizimle Çalışırken Elde Edeceğiniz Avantajlar

Aslında yukarıda da birazcık değindiğim avantajlara ek olarak bizimle çalışırsanız şu avantajları elde edebileceğinizi söyleyebilirim:

• Güncel tarayıcılarda uyumlu sayfalar
• Arama motorları için optimize edilmiş sayfalar
• El ile yazılılarak düzenli kodlanmış sayfalar
• Size sunduğumuz özel panel ile siparişlerinizi rahatça takip edebilirsiniz

Ayrıca bu konu hakkında daha fazla bilgiye XHTMLMUTFAĞI üzerinden de erişebilirsiniz.

XHTMLMUTFAĞI Nasıl Çalışıyor?

İlk önce sipariş formunu doldurarak bize web tasarımınızı ve siparişiniz ile ilgili bilgileri iletiyorsunuz. Ardından biz sipariş bilgilerinizi ve tasarımınızı kontrol ediyoruz. Herşey yolunda ise size siparişinizin onaylandığına dair bir e-posta yollayıp ödemenizi gerçekleştirebileceğiniz banka hesabını veya sipariş verirken Paypal‘ı seçtiyseniz Paypal üzerinden ödeme ekranı için bir bağlantı sunuyoruz. Ödemenizi yapıyorsunuz ve ardından dekont bilgilerinizi bize ulaştırıyorsunuz. Eğer tasarımınız çok karışık veya teknik anlamda herhangi bir eksiklik var ise sizinle iletişime geçip bunu bildiriyoruz.

Sonrasında bize seçtiğiniz zaman tercihine göre (standart süre 3 gün) bir süre veriyorsunuz. Biz de o süre içinde tasarımınızı mutfağımızda pişirip size sunuyoruz. :)

Ya Ücretler Ne Alemde?

XHTMLMUTFAĞI‘ndaki her işi ben ve arkadaşlarımla beraber en üst kalitede yapmaya özen gösteriyoruz. Kaliteden ödün vermemek adına fiyatlarımızı da tatminkar bir seviyede tutmak zorunda olduğumuzu düşünüyoruz. Bu yüzden aşağıdaki fiyat tarifesi ile bu işe başlamayı uygun bulduk:

• XHTML/CSS Çevirimi: 249$
• XHTML/CSS Çevirimi + Wordpress Tema Entegrasyonu: 498$
• XHTML/CSS Çevirimi + XT-Commerce Tema Entegrasyonu: 848$

Ayrıca ilk sayfadan sonraki sayfalar 75$ olarak ücretlendiriliyor.

Söz Sizde…

Biz bu girişimi Türkiye’de başlatmış bulunuyoruz. Peki siz XHTMLMUTFAĞI adlı projemiz hakkında ne düşünüyorsunuz? Hadi bana ne düşündüğünüzü söyleyin. :)

Bu yazı Fatih Turan tarafından 24 October 2007 12:45 tarihinde yazıldı. 19 yorum var. Sen de yorum yaz.

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 August 2007 18:05 tarihinde yazıldı. 3 yorum var. Sen de yorum yaz.

Kaliber10000

Kaliber10000 desen kaynakları arasındaki en çok beğendiğim kaynakdır. Çünkü bana göre en özgün desenler burada sergileniyor. Ama tek eksiği var o da bazı kullanıcıların desenleri ticari olarak kullanmaya izin vermemesi. Buna uyup uymamanız yine size kalmış fakat ben her zaman bu kurala uyuyorum(sadece desenler için değil, ikonlar, yazıtipleri, stok fotoğrafları vs. vs. için de uyuyorum).

Kaliber10000‘de ‘Pixel Pattern List’ adında, kullanıcıların oluşturduğu desenleri görebiliyorsunuz. Burada herhangi bir desenin üzerine basınca, sağ kısımda o desen açılıyor. Ayrıca aynı kullanıcının diğer desenlerini de yine sağ alt kısımdan görebiliyorsunuz.

Deseninizi buradan almak için de az önce bahsettiğim sağ kısımdan önizleme için açılan desene basarak, açılan pencereden deseni dosya olarak farklı kaydedebilir veya kopyala-yapıştır yöntemi ile tasarımınızı geliştiriyor olduğunuz programa aktarıp direkt desen olarak kullanabilirsiniz(desenleri Photoshop’da nasıl kullanılacağını bir sonraki yazımda yazacağım).

Tile Machine

Tile Machine‘de bayağı bir güzel desenler yer almakta. Fakat buradaki güzel desenlerin arasında dandik olanları da olmuyor değil. Yine de iyi bir kaynak ve sıkça başvurmak gerekebilir.

Buradaki desenleri almak için Kaliber10000‘de uyguladığımız taktiğin aynısını kullanacağız. Yani farklı kaydet komutu veya kopyala-yapıştır yöntemi ile deseni alabilirsiniz.

The Inspiration Gallery

Buradaki desenler her ne kadar duvar kağıdı diye geçse de, desen olarak da kullanabildiğimiz için buraya yazmak istedim. Bir de buradaki desenler diğer kaynaklardaki desenlerden daha farklı. Örneğin buradaki örgü desenlerine bakın. Harika değil mi?

Buradaki desenleri almak diğer yöntemlere göre daha basit. Yukarıda görülen herhangi bir kategoriye girdikden sonra istenilen desenin altındaki ‘Download’ bağlantısına basarak .zip dosyasını bilgisayarınıza indiriyorsunuz. İşlem bu kadar basit.

bgMaker’s Gallery

Çok öncesinde desen kaynakları arasında ilk rastladığım kaynak bgMaker’s Gallery idi. Öte yandan Kaliber10000‘den sonra itibar ettiğim ikinci kaynak da budur.

Buradan da deseni almak gayet basit. Beğendiğiniz desenin altındaki ‘download’ düğmesine basarak, .png dosyasını bilgisayarınıza kaydediyorsunuz.

Peki Ben Bunları Nasıl Kullanacağım?

Bu yazıyı okuyan ve web tasarımında desenlerin kullanımını bilmeyen arkadaşlarımız yazının sonunda bu soruyu sormuş olabilirler. Ben bu sorunun cevabını bir sonraki yazımda vermeyi düşünüyorum.

Bu yazı Fatih Turan tarafından 29 August 2007 17:11 tarihinde yazıldı. 7 yorum var. Sen de yorum yaz.

Sxc

Stok fotoğraflar’ın ne işe yaradığını ve ne olduğunu kendimce tanımlayacak olursam; web ve grafik tasarımcıların çalışmalarında kullandıkları vermek istedikleri mesajı daha etkili vurgulayabileceği fotoğrafik malzemelerdir. Bu yazımda da ücretsiz stok fotoğraf sağlayabileceğimiz bu siteleri inceleyeceğim.

Bu sitede kategorilendirme işlevi gayet iyi yapılmış. Hemen üstte görebileceğiniz kategori listesinde ‘Hall Of Fame’ denilen sitedeki en ünlü fotoğrafları, ‘Highest Rated Images’ kategorisinde en çok puan verilen fotoğraflar, ‘Most Commented Images’da en çok yorum alan fotoğraflar ve ‘Most Downloaded Images’ kategorisinde ise en çok indirilen fotoğrafları görebilirsiniz. Ve tabiki yine listede yer alan diğer kategorilerle de aklınızdaki konuya göre istediğiniz fotoğrafı kolayca bulabilirsiniz.

Gelelim fotoğraf arama olayına. Aramak istediğiniz fotoğrafı sitenin sağ tarafındaki kısımdan kolayca arayabiliyorsunuz. Arama yaparken aklınızdaki terimin İngilizcesini yazmanızı öneririm(İngilizceniz yeterli değil ise bu siteden Türkçe-İngilizce çeviri yapabilirsiniz.). Zira buradaki kullanıcıların çoğu yabancı ve yükledikleri resimlerin etiketlerini de İngilizce olarak atıyorlar. Örneğin ‘karanlık’ kelimesi yerine ‘darkness’ı kullanırsanız bir sürü sonuca ulaşabilirsiniz. Ayrıca aşağıda da görüldüğü üzere kullanıcıları, dosyaları, fotoğraf makinesine göre, ülkeye ve şehire göre arama da yapabiliyorsunuz.

Standart arama bölümü sizi kesmediyse ‘Advanched Search’ bölümünden gelişmiş arama yapabilirsiniz. Buradan tek bir kategori veya bütün kategorilere ait, istediğiniz çözünürlükte, istediğiniz fotoğrafçı tarafından ve istediğiniz tarih aralığında arama yapabiliyorsunuz.

Arama sonuçlarındaki fotoğrafları filtrelemek istiyorsanız, arama sonuçları sayfasının sağında görülen filtreleme listesinde tarih, boyut, puan, yorum gibi kriterlere göre yeniden sıralandırabiliyorsunuz. Ayrıca arama sonuçlarında çıkan fotoğraf sayısını aşağıda görüldüğü gibi arttırabiliyorsunuz

Gelelim kendi fotoğrafınızı Sxc.hu’ya yollama metoduna. Sitenin sağ tarafındaki menüden ‘My Account’a, ardından ‘Upload Photos via web forms’ düğmesine bastıkdan sonra aşağıdaki gibi bir form ile karşılaşacaksınız. Başlık, açıklama, etiket gibi gerekli bilgileri doldurdukdan sonra fotoğrafınızı Sxc.hu’ya gönderebiliyorsunuz. Sxc.hu’nun fotoğraf yükleme kuralları ile ilgili ayrıntılı bilgiyi bu sayfadan bulabilirsiniz.

Son olarak Sxc.hu’nun diğer özelliklerinden kısaca bahsetmek gerekirse; üstte menüde görülen ‘Randomizer’ adlı düğmeye basarsak karşımıza rastgele fotoğraf da getirebiliyorsunuz. Öte yandan kendi galerimizde eğer fotoğrafımız olması şartı ile bize küçük bir blog alanı da tahsis ediyorlar. Yani sxc.hu hesabımız altında kendi blogunuzda yazı da yazabiliyorsunuz. ‘Tutorials’ bölümünde kullanıcıların yazmış oldukları çeşitli konulara ait eğitsel yazıları da okuyabilirsiniz. Beğendiğiniz, ilginizi çeken fotoğrafları favorilerinize ekleyebiliyorsunuz. Bunları ‘My Page’ bölümünden kendi hesabınız altında tekrar görebiliyorsunuz.

Photocase

Bu stok fotoğraf sitesi Alman kökenli olmasına rağmen İngilizce arayüze de sahip. Sitede gördüğüm kadarı ile diğer sitelere nazaran daha kaliteli fotoğraflar var ama yine diğer sitelere göre daha sınırlı dosya indirme izini vermişler. Günlük ücretsiz olarak 3 adet fotoğraf indirebiliyorsunuz. Bunun yanısıra eğer siz buraya fotoğraf yüklerseniz her kabul edilen fotoğrafa 5 kredi daha veriyorlar. Toplamda 10 adet kabul edilen sizin yüklediğiniz fotoğrafınız var ise günlük limitinizi 1 adet arttırıyorsunuz. Çok param var diyorsanız size tabi ki ücretli kredi satın alma seçeneğini de sunuyorlar. Herneyse işi böyle bir ince matematiğe bağlamışlar fakat dediğim gibi çok kaliteli fotoğrafları buradan temin edebiliyoruz.

Buraya kaydoldukdan sonra yine Sxc.hu’daki gibi elektronik posta adresimize bir aktifleştirme maili yolluyorlar. Gerekli talimatları izleyip hesabınızı aktifleştirdikden sonra üstteki ‘Login’ düğmesi ile kullanıcı adı ve şifremiz ile giriş yapalım. Eğer sitenin arayüzü sizde Almanca görünüyorsa üst kısımdan ‘English’ yazan yere basarak sitenin arayüzünü İngilizce diline çevirebilirsiniz. Giriş yaptıkdan sonra aşağıda da görüldüğü üzere sayfanın sağ üst köşesinde kullanıcı adı, kredi durumu ve duyurularınızı görebiliyorsunuz.

Anasayfadaki ‘Photo Search’ bölümü ile arama işlemine hemen geçebilirsiniz. Fakat burada arama yaparken yine Sxc.hu’da olduğu gibi daha fazla sonuç elde edebilmeniz için Almanca terimler kullanmanızı öneririm.(Almancanız yeterli değil ise bu adresden Almanca-İngilizce çeviri yapabilirsiniz.) ‘Advandced Search’ bölümünde ise site üzerindeki fotoğraflarda, forumda, haberlerde, yazılarda ve kısa öykülerde arama yapabiliyorsunuz. Sonuç olarak photocase.de’nin gelişmiş arama bölümü Sxc.hu gibi gelişmiş değil, daha basit yapılmış.

Sayfanın üstündeki ‘Photos’ adlı düğmeye basarsanız kendinizi en son yüklenilen fotoğraflar arasında bulacaksınız. Buradan ilerleyen sayfaları takip ederek fotoğrafları görebilir ve beğendiğiniz var ise indirebilirsiniz de. Ayrıca bu sayfada photocase.de’de her kullanıcıya ait galeri diye tanımlayabileceğimiz ‘Lighbox’lar bulunmakta. Bunlara sayfanın sağındaki ‘Public Lightboxes’ ile ulaşabilirsiniz.

Şimdi de kendi fotoğrafınızı photocase.de’ye nasıl yükleyebileceğinizi anlatacağım. Üst menüde bulunan ‘Take Part’ adlı düğme ile aşağıda görülen forma ulaşacaksınız. Buradan dosyanızın yerini belirtip diğer iki kutucuğu işaretledikden sonra ‘Submit’e basıyorsunuz ve fotoğrafınız yükleniyor. Eğer Photocase’in jürileri fotoğrafı beğenmişse sizin fotoğrafınızda diğer fotoğraflar arasında beliriyor.

Genel olarak photocase.de’yi değerlendirirsek; kısıtlı ama kaliteli fotoğrafları bünyesinde bulunduran bir stok fotoğraf sitesi olarak tanımlayabiliriz.

Imageafter

Son olarak imageafter.com adlı stok fotoğraf sitesini ele alacağım. Bu sitede stok fotoğrafların yer almasının yanısıra ‘Texture’ bölümünde doku fotoğrafları da yer almakta.

Hemen hızlıca belirli bir konuya ait fotoğraf bulmak için sitenin üst kısımında bulunan, aşağıdaki resimde de gördüğünüz gibi kategori listesinden yararlanabilirsiniz. Diğer stok fotoğraf sitelerinde olduğu gibi çeşitli kategorilere göre ayrılmış bölümlerden kafanızdaki konuya ait fotoğrafı bulabilirsiniz.

Imageafter.com’da fotoğraf aramak için üstde bulunan arama kutusunda gerekli terimi yazarak istediğiniz sonucu döndürmesini sağlayabilirsiniz. Ayrıca sonuç penceresinde sıralamayı değiştirebilir, renklere göre sonuçları filtreleyebilir, sayfada kaç adet fotoğraf görüntülendiğini ayarlayabilir, küçük fotoğraf görüntülerini büyütebilir ve sonraki sayfalara kısayoldan ulaşabilirsiniz.

Imageafter.com’un diğer özelliklerini görmek için sitenin sağ üst köşesinde bulunan ‘Extras’ adlı listede foruma bakmamız gerekir. Burada en son yüklenen fotoğrafları görebilir, belirli bir renge göre fotoğraf arayabilir, rastgele fotoğrafları gösterebilir, ‘Abstract Search’ denen farklı bir arama metodunu kullanarak contrast, brightness vs.. gibi özelliklere göre fotoğraf arayabilirsiniz.

Imageafter.com’un hoşuma giden bir özelliğinden size bahsetmek istiyorum. Fotoğrafların üzerinde gördüğünüz makas işaretine basarak bir nevi favori listesine fotoğraf gönderebiliyorsunuz.

Dahası bu favori listenizdeki fotoğrafları elektronik posta olarak arkadaşlarınıza veya yine kendinize gönderebiliyorsunuz. Favori fotoğraflarınıza ulaşmak için üst menüde bulunan makas ikonuna tıklamanız gerekiyor. Eğer favori fotoğraflarınızı göndermek istiyorsanız, ‘Email box’ düğmesine bastıkdan sonra göndermek istediğiniz fotoğrafları seçip ardından da üstteki alıcının elektronik posta adresi ve kendi isminizi girmeniz gerekiyor.

Son Sözler

Aslında bu tür stok fotoğraf siteleri internette epeyce mevcut. Genel bir liste arıyorsanız Blue Vertigo‘daki ‘Stock Photography/Free’ kısmındaki bağlantılara bakmanızı öneririm.

Bu yazı Fatih Turan tarafından 25 August 2007 16:14 tarihinde yazıldı. 3 yorum var. Sen de yorum yaz.

Vektör grafik nedir? Vektör grafikler hangi programlarla oluşturulabilir ve düzenlenebilir? Bitmap nedir? Bitmap grafikler hangi programlarla oluşturulabilir ve düzenlenebilir? Bütün bu soruların yanıtını bildiğim kadarı ile cevap verip en sonunda bu iki türü karşılaştırmaya gideceğim.

Vektör Grafik Nedir?

Vektör grafikler çözünürlükten bağımsız, herbir nesne matematiksel ifadelerle oluşturulan ve en önemlisi detay kaybetmeden herhangi bir boyuta yeniden ölçeklendirilebilen grafik türüdür. Aşağıda görüldüğü üzere vektörel nesne büyütüldüğünde herhangi bir bozulma gerçekleşmiyor.

Vektörel Grafikler Hangi Programlarla Oluşturulabilir?

Vektör grafik üretmek için yapılan birçok program mevcut. Bunların arasında en çok bilinen ve benimde severek kullandığım program olan Adobe Illustrator‘dur. Adobe Illustrator’un dosya uzantısı .ai’dir. Öte yandan ülkemizde özellikle baskı alanında kullanılan ve bence Illustrator kadar kullanışlı olmayan Corel Draw bulunuyor. Corel Draw’ın dosya uzantısı .cdr’dir. Yine ülkemizde pek bir popüler olan ve kullanımı diğer programlara nazaran daha basit olan fakat geleceği biraz meçhul olan Macromedia(Adobe) Freehand bulunur. Freehand’in dosya uzantısı .fh(X)’dir. Bu ticari programların yanısıra arabirimi Corel Draw’a benzeyen ve açık kaynaklı, ücretsiz bir program olan Inkscape‘de denenmeye değer bir program olduğunu söylemeden geçmeyelim. Inkscape ile çok sağlam çalışmalar yapıldığını gördüm ve Inkscape çoğu işletim sisteminde çalışır durumdadır. Inkscape’in kullandığı dosya uzantısı .svg’dir. Son olarak yukarda bahsettiğim programlar kadar gelişmiş olmasada web grafikleri için kullanabileceğiniz, vektörel çizim yeteneğine sahip olan Macromedia(Adobe) Fireworks‘dan da bahsedebiliriz. Öte yandan Fireworks’un bitmap çizim yetenekleride mevcut. Bunun için Muhammet Sevim’in hazırlamış olduğu yazıyı gözden geçirmenizi tavsiye ederim. Fireworks’un kullandığı dosya uzantısı ise .png’dir.

Bahsettiğim bu dosya uzantılarının yanısıra .svg, .eps, .wmf gibi dosya uzantılarını da yukarıdaki programlar ortak olarak kullanabiliyorlar.

Bitmap Grafik Nedir?

Bitmap türü grafiği tanımlayacak olursak, ilgili imajı oluşturan ve herbiri renk bilgisi içeren piksel veya noktaların yanyana ve alt alta dizilmesiyle oluşan grafik türüdür. Piksel’den kısaca bahsetmek gerekirse bir bitmap görüntüyü oluşturan en küçük noktadır. Aşağıdaki nesneye yakından bakıldığında piksellerden oluştuğu görülüyor ve büyütüldüğünde görüntü kalitesinde kayıp yaşanıyor.

Bitmap Grafikler Hangi Programlarla Oluşturulabilir?

Bu tür grafikleri oluşturmak için en bilindik ve en popüler olan, yine benim kullanıyor olduğum Adobe Photoshop‘u ilk başta sayabiliriz. Sonrasında uzun zamandır Adobe Photoshop’a alternatif olarak gösterilen Corel PaintShop Pro‘dan bahsedebiliriz. Yine bir açık kaynaklı ve ücretsiz bir program olan Gimp‘i de duymuşsunuzdur. Eğer Gimp’in arayüzüne yabancı iseniz GimpShop‘u deneyebilirsiniz. GimpShop’daki menüler ve kısayol tuşları Adobe Photoshop ile hemen hemen aynı yapılmaya çalışılmış böylece bir nebzede olsa Adobe Photoshop kullanıyor gibi Gimp’i kullanabiliyorsunuz. Bitmap grafiklerde en çok kullanılan uzantılardan bahsetmek gerekirse .jpg, .png, .gif, .bmp gibilerini sayabiliriz.

Avantajlar-Dezavantajlar

Vektör Grafik Türlerinin Avantajları

• Vektör grafikler farklı boyutlar ve farklı renklerde üretilmesi gereken çalışmalarda kullanmak için idealdir. Örneğin bir vektörel görsel çalışması büyük bir ilan tahtası için büyütülüp kullanılabilir. Aynı zamanda istenilen derecede küçültülüp kalite kaybı olmaksızın bir kartvizit üzerine de basılabilir. Çalışmanın görsel olarak detaylarıı her iki durumda da kayıba uğramaz.
• Vektör grafikler gerektiğinde bitmap haline kolaylıkla getirilebilir.
• Vektör grafikler istenildiğinde büyütülebilir, nesneler yeniden renklendirilebilir, nesneler yeniden şekillendirilebilir.
• Dosya boyutu olarak daha az yer kaplarlar.

Vektör Grafik Türlerinin Dezavantajları

• Vektörel grafik çalışmalarında görsel olarak fotoğraf kalitesinde üretim yapamassınız.
• Vektörel grafik çalışmaları web üzerinde bitmap olarak çevirmeden kullanamassınız. Yalnız son zamanlarda .svg diye bir dosya türü ile bu mümkün gibi görünsede bu konu hakkında tam olarak bir bilgim yok.

Bitmap Grafik Türlerinin Avantajları

• Bitmap grafikler milyonlarca renk değişimi alabilir.
• Bitmap grafiklerde piksellerin herbirine müdahale edebilirsiniz. Bu sayede fotoğrafçılar veya sayısal sanatçılar fotoğraflara rötüş işlemi veya manipüle edebiliyorlar.

Bitmap Grafik Türlerinin Dezavantajları

• Bitmap grafiğin sahip olduğu çözünürlükten daha yükseğe getirildiğinde keskinliğini yitirir ve görüntüde bozukluk meydana gelir. Aynı zamanda sahip olduğu çözünürlükten daha aşağı hale getirildiğinde de pikseller kaldırıldığı için orijinal görüntüsünü kaybeder.
• Bitmap grafikler özel dosya biçimlerini saymassak(Photoshop gibi programların kullandığı .psd dosya türü gibi) katman bilgileri içermezler. Bu yüzden düzenlenmesi vektör grafiklere nazaran zordur.
• Bitmap grafikler vektör grafiklere nazaran bilgisayarda dosya boyutu olarak daha fazla yer kaplar.

Yazımızın sonuna geldik. Eğer bir eksiğim veya hatam varsa bu konu üzerinde yorumda bulunup yazımı genişletebilirsiniz.

Bu yazı Fatih Turan tarafından 25 August 2007 11:29 tarihinde yazıldı. 2 yorum var. Sen de yorum yaz.