Lilja 4-ever (2002)

poster

Lilja sonsuza kadar.2002 yılında İsveç’li yönetmen Lukas Moodysson tarafından çekilmiş bir film. Rusya’nın küçük bir şehrinin unutulmuş bir mahallesinde annesiyle yaşayan Lilja (Oksana Akinshina)’nın dram dolu hikayesi. Sovyetler sonrası Rusya’sı, ekonomik imkansızlıklar, eğitim yetersizliği, soğuk ve sıkıcı kış ayları ve tüm bunların ortasında hayalleri olan genç kız Lilja. Annesinin daha sonra kendisini de götüreceği sözünü vererek sevgilisiyle Amerika’ya kaçmasının ardından hayatı tamamen değişen Lilja çareyi başka yollarda aramaya başlar.

Üstüste gelen sıkıntıların arasında edindiği sevgilisi Lilja’nın bir nebze olsun umutlanmasına ve soluklanmasına sebep olsa da olaylar hiç de hayallediği gibi gelişmez. Erkek arkadaşı Lilja’ya iş ve kalacak yer bulacağına dair söz vererek İsveç’e davet eder ancak gerçekler sanıldığından çok uzak ve acıdır.

poster

XHTMLMUTFAĞI Açıldı!

Ağustos ayından itibaren üç arkadaş birlikte çalışıp tamamladığımız yeni projemiz XHTMLMUTFAĞI‘nı sonunda açmış bulunmaktayız. XHTMLMUTFAĞI‘nda web tasarımlarınızı tamamen el ile yazılmış, düzenli, geçerli (W3C geçerlilik testlerinden geçen) ve semantik açıdan doğru biçimde yazılmış XHTML/CSS dosyalarına dönüştürüyoruz. Bunun yanısıra blog tasarımlarınızı hem XHTML/CSS dosyalarına ve hem de Wordpress teması haline de getirebiliyoruz. Ayrıca xt:Commerce e-dükkan uygulamasını için de yine tasarımlarınızı XHTML/CSS dosyalarına dönüştürüp ve xt:Commerce teması haline getirtebiliyoruz. İlerde daha fazla blog ve CMS uygulamalarına da destek vereceğimizi şimdiden söylemem gerekir.

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 Ekim 2007 12:45 tarihinde yazıldı. 19 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.

Adobe Illustrator’da Etiket Yapalım

Birkaç ay önce bazı ziyaretçilerimin bana e-posta aracılığıyla Adobe Illustrator konusundaki yazılara ağırlık vermemi söylemişti. Ben de bir önceki yazımda Illustrator’e yeni başlayanlar için bir yazı yazarak bu konuya bir başlangıç yapmış oldum. Şimdi de deviantart‘daki bazı çalışmalarda ve Web 2.0 trendini benimsiyen sitelerde görmeye alıştığımız bir grafik öğesinin Illustrator’de nasıl yapılacağına dair eğitsel yazdım. Bu eğitseli biraz uzunca yazmış olabilirim. Hedefim bu işe yeni başlayanların da birşeyler yapabilmesidir.

Hadi Başlayalım

İlk adımda File menüsünden New komutu ile veya CTRL+N kısayol tuşuna basıp aşağıda görülen ayarlarla yeni bir dosya açıyoruz.

Sonrasında araç kutusundan elips aracını seçip, Artboard(veya sayfa diyebiliriz)a SHIFT tuşunu basılı tutarak bir daire çiziyoruz.

Araç çubuğundan bıçak aracı(knife tool)u seçip ardından aşağıda görüldüğü gibi dairenin sağ üst kısmını ALT+SHIFT tuşunu basılı tutarak düzgün bir şekilde kesiyoruz.

Araç çubuğundan seçim aracı(selection tool)u seçip az önce kestiğimiz bölümü DELETE tuşu ile siliyoruz.

Sayfamızdaki çemberi CTRL+C ile kopyalayıp CTRL+V ile sahnemize tekrar yapıştırıyoruz. Yani çemberi çoğaltıyoruz. Daha sonrasında çemberlerin pozisyonlarını da aşağıda görüldüğü şekilde ayarlamamız gerekiyor. Bunu rahatlıkla yapmamız için dış çizgi moduna(Outline Mode) CTRL+Y tuş kombinasyonu ile geçiş yapıp çemberlerin pozisyonunu Selection Tool(kısayol tuşu V)’la ayarlıyoruz ve işimiz bitince yine CTRL+Y ile dış çizgi modundan(Outline Mode) çıkıyoruz.

Şimdi ise alt kısımdaki dairemize Selection Tool(kısayolu V) ile bir kere tıklayıp seçili olmasını sağladıkdan sonra CTRL+C ile kopyalayıp bu sefer CTRL+F ile yapıştırıyoruz. Bu arada belirtmeliyim ki CTRL+F tuş kombinasyonu, CTRL+C ile kopyalanan nesnenin ait olduğu orijinal pozisyona yapıştırmaya yarıyor.

Az önceki kopyalama işlemini tamamladıkdan sonra Layer paletine bakacak olursak(eğer layer paleti sizde görünmüyorsa Window menüsünden Layers komutu veya F7 tuşu ile açabilirsiniz) üç tane Path geldiğini göreceğiz. Ortadaki Path’i, yani ikinci Path’i aşağıdaki görüntüdeki gibi yukarıya doğru sürükleyip en yukarda yer almasını sağlayın. Veya Layer paletinden ortadaki Path’i seçip Object menüsünden Arrange>Bring to front komutu ile de aynı işlemi yapabilirsiniz. Bu işlemi de yaptığınızda sayfamızdaki nesnelerimiz bu görüntüdeki gibi görülmesi gerekiyor.

Aşağıdaki görüntüye bakacak olursak Layer Paletindeki Pathlerin yanlarında küçük çemberler olduğunu göreceksiniz. Bu adımda CTRL tuşunu basılı tutarak ortadaki ve üstteki Path’in yanındaki çemberlere basarak sayfamızdaki nesneleri seçmiş olacağız. Bu işlemi SHIFT tuşunu basılı Selection Tool(kısayolu V) ile her iki nesneye tıklayarak da yapabilirsiniz.

Object menüsünden Clipping Mask>Make komutu veya CTRL+7 tuşuna basarak maskemizi uyguluyoruz. Bu işlem sonucunda sayfamızdaki nesnemiz aşağıdaki gibi olmalı:

Layer paletindeki ilk Path(bu sayfadaki dairemiz oluyor)’i seçip, ekranın üstündeki kontrol paletindeki Fill kısmından White, Black adlı Gradient’e tıklayarak siyah beyaz gradient ile boyanmasını sağlayın. Sonuç aşağıdaki gibi olmalı.

Şimdi bu siyah beyaz rengi biraz değişelim. Büyük dairenin seçili olduğundan emin olun(üstteki resimdeki gibi). Ardından Swatches ve Gradient paletinin her ikisini de açın(eğer açık değilseler Window menüsü altındaki Gradient ve Swatches komutu ile açabilirsiniz). Aşağıda görüldüğü gibi Swatches paletindeki sol taraftaki koyu turuncu rengi(pumpkin) Gradient paletinin sol kutusuna bırakın ve yine aynı işlemi sağ tarafdaki açık turuncu rengi(squash) Gradient paletindeki sağ kutuya bırakın.

Bu işlemi tamamladıkdan sonra çalışmamız şu halini alması gerekiyor:

Şimdi ise üst dilimi renklendirmek için Layer Paletinde bir grup var ve bunun içindeki Path’i seçiyoruz(aksini belirtmediğim takdirde seçimi iptal etmeyin yoksa ilerdeki adımlarda problem çıkabilir ve eğer yanlışlıkla seçimi iptal ederseniz yine bu adımı tekrar edip üst dilimin seçilmesini sağlayın). Grubu açmak için aşağıdaki görüntüde işaretlenen aşağı oka basmanız gerekiyor.

Üst dilimi seçtikden ekranın üstündeki kontrol paletindeki Fill kısmından “White, Black” adlı Gradient’e tıklayarak siyah beyaz gradient ile boyanmasını sağlayın.

Araç kutusundan Gradient Tool(kısayolu G)’u seçin ve aşağıda görülen çizgi doğrultusunda fareyi sürükleyip bırakın.

Gradient Paletine geçip en sağdaki kutuya çift tıklayarak Color Paletine ulaşın ve oradan K renk kaydıracının değerini %50′ye ayarlayın.

CTRL+A ile bütün nesnelerimizi seçip ekranın üstündeki kontrol panelinde bulunan Stroke özelliğine girip aşağıda görülen görüntüdeki gibi ‘[None]‘yi seçerek dış çizgilerimizi yok ediyoruz.

Son olarak elde edeceğimiz görüntü aşağıdaki gibi olacak:

CTRL+A ile bütün nesnelerimizi seçip araç kutusundan Rotate Tool veya klavye kısayolu olan R tuşuna basarak 90 derece sağa doğru döndürün. Ve üzerine aşağıdaki gibi istediğiniz bir yazıtipi ile yazınızı yazın. İşte bu kadar. Elde edeceğimiz sonuç aşağıdaki gibi olacak.

Bu yazı Fatih Turan tarafından 25 Ağustos 2007 18:28 tarihinde yazıldı. 5 yorum var.

Vektör Ve Bitmap Grafik Türleri

Vektör ve bitmap(raster) grafikler. Bu iki terimi forumlarda, çeşitli portölyolarda ve büyük galerilerde mutlaka duymuşsunuzdur. Bilgisayarla oluşturulan grafikler bu iki türden oluşur.

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 Ağustos 2007 11:29 tarihinde yazıldı. 1 yorum var.