bildirgec.org - maxhoper - yazdıkları

Limitleri Zorlayan HTML 5 ve WebGl Örnekleri

maxhoper — Mon, 04 Apr 2011 14:40:00 GMT

Mozilla grubu firefox 4 ile birlikte tarayıcısının html 5'e verdiği desteği ve stabilitesini göstermek amacıyla birbirinden başarılı demoların ve tasarımların bulunduğu bir internet sitesi hazırladı.

web o wonder

Söz konusu siteye Web O'(pen) Wonder dan ulaşmak mümkün.
web o wonder ziyaretçilerine html 5 ve/veya webgl ile hazırlanmış özel tasarımlardan örnekler veriyor.
webgl: bilindiği üzere açık kaynak kodlu bir opengl api'si ve javascript ile yazıldı. webgl herhangi bir ekstra yazılım gerektirmeksizin tarayıcı üzerinden 3d objelerin modellenmesinde kullanılabiliyor.

örnek 1

Web o Wonder, web'in potansiyelini ve gelecekte ne tür tasarımlarla karşılaşabileceğimizi görmek açısından oldukça yararlı bir kaynak. Tasarımcaların ve tasarım meraklılarının kesinlikle ziyaret etmesi gereken eğlenceli bir proje.

örnek 2

ilgili yazılar

Firefox, Artık 3 Boyutlu (8)

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

en iyi 10 ikon arama motoru

maxhoper — Thu, 03 Feb 2011 08:18:00 GMT

Bildirgeçte zaman zaman ikon setleri görüyoruz. Ancak hazır bir ikon istediğimizde buna hızla ulaşmak için tüm ikon setlerini taramamız büyük vakit kaybına yol açacaktır. Bu problemden yola çıkarak ikonları isme göre bizim için tarayıp bulan arama motorları tasarlanmış. Arama sonuçlarında beğenilen ikonları derhal bilgisayara kaydetmeye de imkan tanıyorlar.

Bu arama motorlarından en başarı 10'u mostinspired.com tarafından derlenmiş.

1.Findicons

findicons

Find icons birinciliği hak ediyor. Kelimeye uygun ikonları hızla kullanıcının önün getiriyor. jpg gif ico formatlarında icon dosyasını bilgisayara kaydetmeye olanak tanıyor. Her hangi bir formatta ikon dosyasını upload etmek suratiyle diğer formatlara çevirme işlemini gerçekleştiriyor. İkon tarzı seçmeye büyüklük belirlemeye olanak tanıyor. Oldukça başarılı.

2.Icon Archive

icon archive

Kategori edilmiş 30.000 in üzerinde ikona ulaşmak mümkün hem web için hem de masaüstü uygulamaları için ikon bulunabiliyor.

3.icon drawer

icon drawer

icon drawer da bir miktar ücret ödeyerek yüksek kalitede ikonlara sahip olmak mümkün. Bir miktar ücretsiz ikon seti de mevcut

4.icon finder

icon finder

Oldukça güzel ikonların bulunabileceği bir arama motoru ancak tüm ikonlar ücretsiz değil. Bir miktar ücret ödeyerek özel tasarlanmış yüksek kaliteli ikon setlerine ulaşmak mümkün.

5.icon let

icon let

Temel ve gelişmiş arama seçenekleriyle hızlı ve özel aramaya olanak tanıyor.

6.iconspedia

iconspedia

iconspedia taranan ikonlar hakkında ikon yaratıcı bilgileri, boyut, format, hangi ikon setinde bulunduğu, ücretli ve ya ücretsiz oluşu gibi bir takım bilgileri de sayfasında veriyor.

7.iconssearch

icons-search

Tüm işletim sistemleri için iyi kalitede ikonlar bulunabilir. web için de ikonlar mevcut.

8.mr.icons

mr.icons

şu an için 125.174 ikon ve 437 ikon seti üzerinden tarama gerçekleştiriyor. İkonlar hakkında detaylı bilgilere ulaşmak da mümkün. reklam alanlarını saymazsak göze hoş gelen bir yapısı var.

9.Designer

designer

windows işletim sistemi için ico ve png formatında kaydedebileceğiniz ikonlara sahip.

10.veryicon

veryicon

20.000 adet ikon üzerinden tarama yapıyor. Kendi ikon setinizi de veritabanlarına eklemeniz mümkün.

ilgili yazılar

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

işe özel yaratıcı kart tasarımları

maxhoper — Wed, 02 Feb 2011 09:58:00 GMT

İş hayatında oldukça yaygın biçimde kullanılan kartvizitler için hazırlanan sıradışı tasarımları dzineblog ve 2expertsdesing bi araya getirmiş.

Kartvizitler için artık klasik kağıt türevleri yerine plastik , ahşap , yün ve metal gibi malzemelerden de yararlanılıyor.

şirket departmanları için

kişisel kartvizit

antrenörler için

boşanma avukatları için

çim ekimi işi için tasarlanmış

Bunlar gibi 200 ün üzerinde yaratıcı kartvizit tasarımına ulaşmak için dzineblog ve 2expertsdesing'ın sayfalarına göz gezdirmekte yeterli.

ilgili yazılar

Kartvizit Nasıl Yapılır ? (17)

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Blog tasarımı nasıl yapılır?

maxhoper — Tue, 01 Feb 2011 09:08:00 GMT

Blogdesingblog.com blog tasarlerken dikkat edilmesi gereken noktaları 9 parçaya ayırarak anlatıyor. Bu başlıkların Türkçe karşılıklarından çok genellikle İngilizce adlarına yatkın olunduğu için İngilizce adlarını da beraber vermek bu anlatım için daha yararlı olacaktır.
Bu dokuz alt başlık şöyle.

Başlık (Header)
İçerik Alanı (Content Area)
Birincil yönlendirici (primary navigation)
İkincil yönlendirici(secondary navigation)
Manşetler (Headlines)
Yorumlar (Comments)
Makale Sonu (Post’s Footer)
Sayfa Altı (Footer)
Reklamlar (Advertisements)

HEADER - başlık

Başlık ziyaretçilerin siteye girişlerinde karşılaştıkları ilk bölge olduğu için sitenin en önemli kısımlarından biridir. blogu diğer bloglardan ayırabilecek ve öne çıkarabilecek bir yapıda olduğu için üzerinde önemle durulması gerekir. Başlık benzersiz ve hatırlaması kolay olmalıdır. Bu yüzden blog tasarımcıları başlık üzerinde son derece titiz çalışırlar, öyle ki sadece hazır bir tasarımı kullanan bloggerlar dahi başlık kısmını kendilerine uyarlamaya çalışırlar. Blog başlığı tasarımını populer kılmak için Vinh Le'nin kaleme aldığı şu makaleye göz gezdirmekte fayda var.

not: 2008 yılında yayınlamış bir makale olmasından dolayı verilen örneklerden bazılarında tasarımlar değişmiş. Ancak bu makalenin orjinalinin yayınlandığı siteye giderek orada kaydedilmiş olan örnekleri inceleyebilirsiniz.

Birkaç mükemmel header örneği

1.Octwelve

octwelve

octwelve header da bir çizgi karakterin kullanıldığı iyi bir örnek.

2.Cult-foo

cult fo

cult foo header köşelerindeki başarılı tasarımıyla dikkat çekiyor.

3.darkmotion

darkmotion

darkmotion'un header tasarımı kullanıca eğlenceli görünüyor ve kullanıcıyı siteye çekiyor.

Header nasıl tasarlanmalı?

Blog tasarımına öncelikle header'dan başlayın. Photoshop'da tasarımı yapmadan önce header içerisinde vermek istediğiniz mesaj, site ismi ve slogan gibi metinlere önceden karar verin.
Header tasarlamanın pek çok yolu olmakla birlikte tasarım yapılırken dikkat edilmesi gereken en önemli noktalardan biri sitenin geri kalanıyla ve konusuyla ilgili olmasıdır. Header siteye ilk kez giren ziyaretçiye bile olabildiğince çabuk bir şekilde sitenin amacını aktarabilmelidir.
Yaratıcı olun ve farklı tasarımlar denemekten korkmayın. ilk kez denenmiş benzersiz bir tasarım her zaman ziyaretçiler tarafından hatırlanabilir.

Content Area - içerik alanı

Content area içeriği taşıyan bölgedir. Bu sebeple bloğu ziyaret eden kullanıcıların en çok zaman harcayacakları yer de burasıdır. bu bölge ziyaretçilerin dikkatini dağıtacak tüm unsurlardan arındırılmış olmalı, içerisinde barındırdığı metinler son derece okunaklı ve gözü yormayacak olacak şekilde yerleştirilmelidir. Bu yüzden içerik alanında sadelik önemlidir.

Harika içerik alanlarından örnekler

1.Simplebits

simplebits

simplebits okuması son derece kolay ve linklerin olduğu bölgeler yeteri kadar belirginleştirilmiş.

2.We love wp

we love wp

Karanlık temalardaki en büyük sorunlardan biri yazıların okunabilir kılınmasındaki zorluktur. Ancak we love wp bu sorunun üstesinden gelmiş.

3.we break stuff

we break stuff

Renk kombinasyonu başarılı. Linklerin altlarını noktalarla çizme fikri güzel.

Başarılı içerik alanı nasıl tasarlanır?

Hiyerarşiye dikkat edilmeli. Vurgular başlık, metin ve geri kalan ögelere doğru azalarak inmeli. Örneğin her zaman başlıklar metinden daha vurgulu ifade edilmeli.

İçerikler aktarılan konular açısından birbirine yakın olmalı. Okuyucu bir içerikle ilgileniyorsa yakınlarda o konuyla ilgili başka içerikleri de görebilmeli.

Linkler yeteri kadar belirgin olmalı ancak okuyucunun dikkatini dağıtmayacak kadar da tasarımla bütünleşmeli.

Primary Navigation - Birincil Yönlendirici

Bu yönlendirici ziyaretçileri blogun farklı bölümlerine yönlendirmek için kullanılır. Genellikle header'ın üstünde bulunur. Orada olması gerekmez ancak çoğu ziyaretçi bu yönlendiricinin orada olmasını bekler ve buna ihtiyaç duyar.

Mükemmel Primary Navigation örnekleri

1.A list a part

a list a part

a list a part doğru tasarlanmış navigasyon menüsü için oldukça iyi bir aday.

2.Mindtwitch

mindtwitch

mindtwitch doku kullanarak navigasyonu öne çıkarma üzerine oldukça iyi bir örnek.

3.Jogger

jogger

jogger'in navigasyon menüsü oldukça basit ve sade fakat tasarım içerisine oldukça iyi adapte edilmiş.

Mükemmel bir primary navigation nasıl tasarlanır?

Navigasyon linklerini olabildiğince az tutun. 6-7 linki aşmamasını öneririm.
primary navigation linkleri için blog tasarımında biraz geniş bir alan sağlayın. Bu linklerin her sayfada görünmesi gerekmiyorsa görünmemesi gereken sayfalarda linkleri secondary navigation bölgesinde vermeyi göz önünde bulundurun.
Hakkında ve İletişim linkleri genellikle primary navigation bölgesinde bulunur. Diğer linkler tasarımın nasıl yapıldığına ve kullanıcıya ne verilmek istendiğine göre değişir.

Secondary Navigation - ikincil yönlendirici

İkincil yönlendiriciler ziyaretçilerin bloğun diğer kısımlarına kolayca erişebilmesi için kullanılır. Genellikle bu linkler sidebar (yan sütun)'da verilir.
Birincil yönlendiricinin içermediği linkler bu bölümde sergilenir. Örneğin popüler makaleler, sayfalar, son yorumlar gibi. Siteyi ziyaret eden kullanıcıların kolayca erişmesi istenen kısımlara bağlantı sağlar.

Mükemmel secondary navigation örnekleri

1.elitistsnob

elitistsnob

temiz tasarımı sayesinde elitistsnob'un navigasyon menülerini okumak çok kolay.

2.Manclub

manclub

navigasyon menüsü içerik alanının arkasından kayarak çıkıyor ve tüm bölümler rahatlıkla ayırt edilebiliyor.

3.desingdisease

desingdisease

desingdisease turuncu rengin farkı tonlarını navigasyon menüsünde farklı bölgeleri ayırmak için kullanıyor.

Mükemmel second navigation bölümü nasıl tasarlanır?

Primary navigation da olduğu gibi burada da olabildiğince az link verilmesi yararlı olacaktır.
farklı linkler için secondary navigation alanını bölün. Bu algılamayı ve kullanımı kolaylaştıracaktır.
Secondary navigation alanını karmakarışık yapmayın. Okuyucu için gerçekten gereken nesneler hariç ne varsa çıkarın. Takvim güzel görünebilir ancak gerçekten işlevsel bir amacı yoksa (örneğin rezervasyon tarihi belirleme gibi) hiçbir okuyucunun buna ihtiyacı yoktur.

Headlines - manşetler
Manşetler kullanıcının dikkatini ilgili blog yazılarına çekmek için kullanılır. Yazarın ziyaretçiyi diğer blog yazılarından alıp ilgili yazıya yönlendirmek için kullandığı yöntemlerden biridir. Bu yüzden manşetler belirgin yapıda olmalıdır. Bunu yapmanın pek çok farklı yaratıcı yolu var.

Mükemmel manşet örnekleri

1.Henry Jones

henry jones

Henry sade tasarımı ve manşetleriyle kullanıcın ilgisini manşete çekebiliyor. ayrıca sevimli ikonlar kullanarak tarih ve yorum bölümüne de dikkat edilmesini sağlamış.

2. I love typography

i love typograpy

Bu font ve renkleri kullanarak nasıl ilgi çekici bir manşet yaratabileceğinizi gösteren mükemmel bir örnek.

3.blogsolid

blog solid

Blog solid başlık kenarında garip bir tasarım kullanarak kullanıcın ilgisini başlığa çekiyor.

Manşetler nasıl dikkat çekici yapılır?

Bunu yapmanın en kolay yolu manşet renklerini ana metin renginden farklı seçmektir. İçerik ve manşet için farklı fontlar kullanılabilir. Genellikle manşetler için serif fontlar ve içerik için non-serif fontlar kullanılır.

Daha büyük puntolar kullanmak manşetleri belirginleştirir. içerikle aynı büyüklükte fontlar içerikle manşetin ayırt edilmesini zorlaştırır. Manşet puntoları içerik puntosundan büyük olmalıdır.

Manşetleri belirginleştirmek için kullanılabilecek bir başka yol makale gönderim tarihi gibi bilgileri manşetin dışında bırakmaktır. (Bu makalenin orjinalinin bulunduğu blog bunu kullanmaktadır)

Comments - yorumlar

Yorum sekmesi blog içerisindeki iletişimi güçlendirmek için oldukça önemli yer tutar. Yorum kenarlarına numara vermek. Yorumcuların birbirlerini kolayca tanımlamalarını sağlar.
Yazarın yorumlarını daha belirgin yapmak bir ziyaretçiye yazarın yorumlarını sayfa içinde hızla ararken kolaylık tanıyacaktır.

Mükemmel yorum sekmesi tasarım örnekleri

1.Chris Shifflet

chris shifflet

Chris'in yorum alanını okumak oldukça kolay. Sade tasarımı ve yazarla yorumunu farklı bölümlere ayırması ilgi çekici.

2.Darkmotion

darkmotion

Yazar bilgilerinin ayrı tutulması oldukça hoş. Ayrıca yorum alanları da birbirinden ayrı görünüyor. Genel olarak sanki birisiyle sohbet halindeymiş gibi bir izlenim uyandırıyor.

3.Blog Desing Blog

blog desing blog

(Bu makalenin orjinalinin yer aldığı bloga ait olan yorum paneli. Makale yazarı ziyaretçilerinden oldukça olumlu eleştiriler aldığı için kendi bloğunun yorum bölümünü de makalesine eklemiş)

Mükemmel yorum bölümü tasarımı nasıl yapılır?

Yorumları birbirinden ve ana alandan ayırmanın en kolay yolu tasarımı alt alta gelen yorumları farklı renklerde olacak şekilde yapmaktır.
Yazarın yorumlarının diğer ziyaretçilerin yorumlarından daha belirgin kılınması faydalı olacaktır. Ancak bu yapılırken bütünlüğü bozacak kadar belirginleştirme yapmak da negatif yönde etki edecektir. Renklerde küçük değişiklikler bu belirginleştirme işi için ideal olacaktır.
İsim, tarih gibi bilgileri esas yorum metninden ayırmak ziyaretçilerin yorumları gözleriyle hızla tararken rahat etmesini sağlayacaktır. Böylece istediklerini daha hızlı bir şekilde bulabilirler.

Post's footer - içerik sonu

post's footer bölgesi içerikten sonra yorum bölümü başlamadan önce ziyaretçilere bir takım refereans linkler verebileceğeniz bir bölgedir. Bu bölüm gülünç bir şekilde sıklıkla tasarımcılar tarafından atlanır. Aslında oldukça kıymetlidir. Ziyaretçilerin içeriği okuduktan sonra dikkatini diğer önemli makalelere çekmesi için bir şans verir.
İnsanlar bloglarında diğer elementlerin dizaynı için oldukça zaman harcarlar ancak sıra page's footer a geldiğinde şablon temanınkine benzer sıradan bir dizayn hazırlayıp geçerler. Bu yeterli olmaz.

Mükemmel post's footer örnekleri

1.Freelanceswitch

freelanceswitch

Oldukça keskin, temiz ve okuyucunun dikkatini okuyucu içeriği okuduktan sonra nazikçe burada sergilenen linklere çekiyor.

2.PSDTuts

psdtuts

okuyucaların oylayabilecekleri ve eğer makaleyi beğendilerse paylaşım ağlarına gönderebilecekleri linklerin mevcut olduğu bir post's footer tasarlanmış. Farklı renk kombinasyonu kullanılarak kullanıcının dikkati içeriği okuduktan sonra buraya kaydırılıyor.

3.Standarts of Life

standarts of life

Oldukça temiz bir post's footer bölgesine sahipler. Benzeri makalelere verilen linklerin bulunduğu bölgede linkleri birbirinden ayırmak için alt alta gelen linklerin arkası farklı renklerde tasarlanmış.

Mükemmel post's footer nasıl tasarlanır?

Footer's post içeriğin sergilendiği bölümden kesin bir farklılıkla ayrılmalı. Okuyucu bunun içeğe ait olmadığını, ona yardımcı olmak için sayfaya eklenmiş olduğunu ilk görüşte anlayabilmeli. Bunun için farklı bir arkaplan rengi kullanmak farklılığı yaratabilmek için ideal yollardan birisidir.
Tasarıma başlamadan önce post's footer bölümünde ne istediğinize karar verin. Böylece bu bölgenin çöplük haline gelmesini önlemiş olursunuz ayrıca tasarımınız da daha hoş görünür.
Post's footer a koyabileceğiniz en iyi içeriklerden biri "benzer sayfalar" linkleridir. bu okuyucuya ilgilendiği konuyla ilgili daha çok makaleye kolayca ulaşma imkanı sağlar. Kullacının blogda sıkılmadan daha fazla vakit geçirmesi için önemlidir.

Footer - taban

Pek çok insan footer'ı sadece klasik telif hakkı yazısı için kullanır. Ancak footer sidebar'ı dolup taşırmadan fazladan link verebileceğiniz önemli bir alandır. daha çok secondary navigation linki burada tutulabilir. Ziyaretçiler makaleyi bitirip sayfanın altına indiklerinde sayfa sonuyla karşılaşacaklar. Burası aslında onları blogdaki diğer makalelere yönlendirmek için verimli bir alan olabilir. Buradaki secondary navigation linklerinde popüler makaleler, son makaleler, öne çıkan makaleler gibi farklı dallarda linkler vererek ziyaretçileri sitede yayınlanan diğer ilginç içeriklere gönderebilirsiniz.

Mükemmel footer tasarımlarına örnekler

1.Desingshack

desingshack

Sidebar kullanmadan secondary navigation linklerini footera aktarmayı denemişler. İncelenebilir.

2.Web Desingner Wall

webdesingnerwall

Nick sanırım header tasarımına harcıdığı zaman kadar footer da zaman ayırmış. Footer tasarımındaki detaylar dikkat çekici.

3.Chriss Shiflett

Chriss Shiflet

Gerçekten temiz ve işlevsel bir footer için iyi bir örnek. Tam olarak yapması gerekeni yapıyor.

Mükemmel footer tasarımı nasıl yapılır?

Footer'ı tasarımın geri kalanına biraz daha karşıt şekilde tasarlayın. Bu kullanıcının footer bölümüne geldiğini ve sayfanın sonuna yaklaştığını hissettirir.

Okuyucuların gerçekten nelerden hoşlanacağını tahmin ederek okuyucaları o konulara yönlendirmeye çalışın. Burayı gereksiz bilgilerle doldurmak okuyuculara yardımcı olmaz.
Basit ve kullanışlı olmayı burada da sürdürün. Kullanıcıların kolayca algılayabileceği şekilde tasarlayın.

Advertisement - reklam

reklamlar pek çok blogger için oldukça önemlidir. Ancak reklamlar çoğu zaman sayfanın korkuç gözükmesine yol açar ve bu kullanıcıların içeriği okuyamamasıyla sonuçlanabilir. Bir süre sonra kullanıcılar sitenizi ziyeret etmeyi bırakacaklardır.
Eğer reklamları doğru şekilde yerleştirmeyi başarır ve makaleyi reklamdan daha önde tutmanın yolunu bulursanız bu sorunu ortadan kaldırabilirsiniz. Sitenizi ziyaret etmeye devam eden kullanıcılar da böylece daha çok para kazanmanızı sağlar.

Mükemmel reklam bölümü tasarım örnekleri

1.Copyblogger

copyblogger

copyblogger 125*125 boyutlarında oldukça büyük bir banner ı sayfasının üstüne yerleştirmiş fakat sponsorlarımız bölümü altında ve içeriğe dahil olmadığı kolayca ayırt edilecek şekilde konumlandırmış. İçeriği okumada her hangi bir sıkıntı yaratmıyor.

2.webdesingerwall

webdesingerwall

webdesingerwall standart bir reklam görüntülemiyor. Ayrıca bunu içeriğin yanına eklemiş. ancak içerikle arasında bir ayıraç kullanarak bu reklamın içeriğe dahil olmadığını fark ettiriyor. böylece kullanıcıyı rahatsız etmemeyi amaçlamış.

3.problogger

problogger

problogger kendi logosu yanında standar bir reklam banner'ı kullanıyor. Ancak bu hem logosunun hem de içeriğinin gerisinde kalıyor ve ziyaretçinin dikkatini dağıtmıyor.

Reklam bölümü nasıl tasarlanır?

Eğer blogunuza reklam koymayı düşünüyorsanız, blogunuzun tasarımı daha taslak halindeyken reklamları nereye yerleştireceğinizi tasarlayın. Bu blogunuza daha fazla esneklik kazandıracaktır.
reklam vermekte en popüler yöntemlerden biri 125*125 boyutlarında google adsense bannerlerını kullanmaktır. google adsense pek çok farklı boyutta ve şekilde reklam veriyor olsa da 125*125 pixel boyutlarındaki reklamlar sidebar için uygundur.

Reklam almadan önce reklamların sitede nasıl görüneceğini anlamak için bir kaç reklam örneği bulup bunları siteye ekleyerek deneyebilirsiniz.
Reklamlar görülecek kadar dikkat çekmeli ancak içeriğin önüne geçecek kadar da dikkat toplamamalı. Sidebar reklamları konumlandırmak için en iyi yerlerden birisidir. fakat sidebar'daki navigasyon menülere ulaşımı engellememelidir.

Bol tasarımlı günler...

not: ingilizceden türkçeye çevirileri birebir yapmak yerine yeni cümleler kurdum. Bazı noktalarda ek bilgiler verdim. Bu yüzden bire bir çeviri değildir. Makalenin orijinalini ziyaret ederek orijinali de incelenebilir.

ilgili yazılar

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Photo manipulation nasıl yapılır ?

maxhoper — Mon, 31 Jan 2011 08:34:00 GMT

Photo manipulation terimini tam olarak karşılayan bir türkçe terim bulunmuyor. bu terim bir takım imgelerin birbiri üstüne bindirilmesi, iç içe geçirilmesi, birlikte uyum sağlayacak ve tek bir görüntü oluşturacak şekilde düzenlenmesi; bir takım doku örnekleriyle yeniden dokulandırılması, çeşitli efektlerle anlatımın etkili kılınması gibi işlemlerin tamamını içinde barındırır. Yazının geri kalanında da bu tanım photo manipulation olarak geçecektir. Elbette ki uygun bir türkçe terim arayışı sürdürülmelidir.

Bu ve benzeri kompozisyonları oluşturmak sanıldığı kadar zor değil

Peki photo manipulation Nasıl Yapılır ?

Günümüzde bu işlem dijital ortamda yapılmaktadır. Dijital ortama aktarılmış imaj dosyalarının oldukça popüler olan "photoshop" gibi programlarda işlenmesiyle bu sanata yeni eserler kazandırılmaktadır.

photo manipulation eseri oluşturmanın en zor kısmı kompozisyonu belirlemektir. başarılı kompozisyon ve doğru teknik ortaya konulan konuyu izleyiciye direk aktarmakta en önemli unsurlardır.

photo manipulation, fotomontajdan çok daha fazlasıdır.

Photo manipulation'ın diğer görsel sanatlarda olduğu gibi kesin kurallara dayanan yapılış yolu yoktur. Öğrenmek için profesyonelce hazırlanmış kaynaklar ve güçlü bir imaj işleme programı yeterlidir. Geriye kalan kısmı sanatçının hayal gücü ve yazılımları kullanma tekniğine bağlıdır. Oluşturulan konu mitolojik ögeler ve soyut imajlar barındırabileceği gibi günlük hayatta karşılaşılan sıradan nesnelerde farklı bir bakış açısıyla konuya dahil edilebilir.

Photo manipulation Yapım Aşamalarını İçeren Makaleler

İnternette bu konuyla ilgili sayısız makaleye ulaşmak mümkün. Elbette ki yine bu yüzden tamamını incelemek gereksiz olanları elemek oldukça büyük bir zaman kaybına yol açabilir ve bu konuyu öğrenme isteğini köreltebilir. Bu sebeple burada konu için gereken tekniklerin üzerinde durulduğu bir kaç örnek vermekte fayda var.

steampunk bilimkurgu tarzında ileri seviye örnek

Bu konu pek çok tekniğin bir arada kullanıldığı ileri seviye photo manipulation tekniklerini içerir

bu örnek için oldukça detaylı bir anlatım mevcut. Aynı sayfada yine aynı örneğin bir saati aşkın süresiyle video anlatımı da bulunuyor. photo manipulation severlerin ziyaret etmesi gereken bir makale.

3 boyutlu ortamlar oluşturmak

3. boyut

Photoshop'un 3D özelliklerini kullanarak neler yapılabileceğini gösteren oldukça kapsamlı ve başarılı bir uygulama. Ziyaret etmekte fayda var.

Doku ekleme, blending, kesme, kompozisyon oluşturma

Dokular ve blend işlemleri

Bu konunun temelini oluşturan dokular, imaj dosyalarını birbirleri üstüne bindirme ve doku kaplaması yapma üzerine hazırlanmış temel bilgileri profesyonel uygulamayla harmanlamış bir makele.

Blending İşlemleri İçin Detaylı Anlatım

Blending

Sahnelerin birbiri içerisine geçirilmesini konu eden bu makale ve blending işlemleri öğrenilmesi gereken temel tekniklerden.

İmaj üzerinde geometrik işlemler

imajın boyutları ve şeklinin değiştirilmesi üzerine oldukça yararlı bir makale

Şekil ve boyut değişiklikleri photomanipulation için olmazsa olmazlardan. Kompozisyon oluştururken çok büyük nesnelerin çok küçük nesneler üzerine yerleştirilimesi gerekebilir. İki nesnenin sanki gerçekte de öyleymiş gibi görünmesi ancak bu nesnelerin birbirleriyle doğru boyutlandırılmış ve doğru açılarda birbirlerine eklenmiş olmasıyla mümkün.

İmaj üzerinde efekt oluşturma

Kan efekti

Photoma nipulation sadece bir kaç farklı fotoğrafı bir araya getirip bunları eğip bükmek değildir. Bazen zihindeki kompozisyonun oluşturulması için hazır bir fotoğraftan daha fazlası gerekir. Kan bunlardan yalnızca biri. Efektler bize daha fazla kontrol ve daha fazla gerçekleştirme kabiliyeti sağlar. Kan, yağmur, ışık, su gibi ögeleri istediğimiz şekilde istediğimiz yerde kullanmak için bu efektlerin nasıl yapıldığı bilinmelidir.

Efektler daha fazla yapılabilirlik sağlar.

Güçlü efektler ve ışık oyunları

ışık efektleri

Işık oyunlarının kullanım alanları oldukça geniş. Bu sanatın dışında zaman zaman web tasarımında da kullanılıyor. Aslında tüm bu teknikler kısmen web tasarımlarında kullanılıyor. Bunu internet ortamında pek çok benzersiz tasarıma sahip web sitesinde görmek mümkün. Ancak bu teknik tek başına photomanipulation sanatını icra etmek için yeterli değildir. Profesyoneller bu örnekte verilen abartılı ışık efektleri için gereken tekniği farklı ortamlarda kaydedilmiş imajların birbirine uyum sağlamasında tamamlayıcı unsur olarak kullanmaktalar. Oluşturulan son imajlarda ışık efekti daha çok "gerçekçilik" katmak için kullanılıyor.

Yardımcılar:

Saçlı bölgelerde kesim işlemi nasıl yapılır ?

saçların kesimi çok sıkıntılı bir süreç olmaktan çıkabilir.

Fotoğraflarda saç, tüy gibi çok ince, rastgele dağılmış ve çok girintili çıkıntılı bölgelerin fotoğrafın geri kalanından düzgünce kesilip çıkarılması hep sorun olmuştur. Seçim araçlarıyla saatlerce her saç teli tek tek seçilse bile sonuç çoğu zaman tatmin edici olmaz. Bu gibi durumlarda farklı teknikler öğrenmek hem zaman kaybını önleyecek hem de sakinleştirici kullanımını azaltacaktır.

Fotoğrafı path kullanarak kesmek için en iyi ve en kötü yollar

Kesim süreçleri için yeni teknikler öğrenme zamanı

Photomanipulation'ın gücünü görmek için bir kaç basit örnek daha

örnekler

elbette ki bir makale tek başına tüm bu tekniklerin öğretilmesi için yeterli olmayabilir. Ancak bu makale bir yol çizebilir. Bu konuyla ilgili akıllarda bir ışık yakabilir. Photomanipulation'ın olanaklarını gösterebilir. Bu konuyla ister profesyonel olarak uğraşın ya da isterseniz sadece konuya göz gezdirin insan oğlunun benzersiz hayal gücüne tanık olacaksınız. Zaman zaman da "ya bu fotoğraflarda sergilenenenler gerçekte var olsaydı" düşüncesini içten içe kendinize sorup tebessüm edeceksiniz.

Daha fazlası için kaynaklara göz gezdirmekte fayda var.

Kaynaklar:

65 inanılmaz photomanipulation sanatı

80 farklı photomanipulation

creative tempest's art

30 farklı photomanipulation örneği

photoshop efektleri makaleleri

fotoğraf ilüstürasyonu

mariano villalba

Graphic Desing employment

45 adet dahice hazırlanmış photomanipulation eseri

ilgili yazılar

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Tasarımınızı Daha Popüler Yapın

maxhoper — Tue, 07 Jul 2009 13:17:00 GMT

buildinternet.com okurlarına web tasarımlarını geliştirebilmeleri için 8 tavsiyede bulunuyor

1.Renkleri Parlatın

Eğer tasarımınız size özel olduğunu hissettirmiyorsa tasarımınızdaki renkler üzerinde biraz oynamanız bu eksikliği giderebilir. Renkler hakkında fazla bilginiz yoksa Color Scheme Designer'dan yardım alabilirsiniz.

Sağda renkler biraz canlandırıldı.

2.Tek renkli temaları az kullanın

Siyah beyaz tasarımlar oldukça hoş görünebilir veya bu tür tasarımları oluşturmak daha kolay olabilir ancak daha fazla renk bize istediğimiz nesneyi vurgulama imkanı verir.

Farklı renk paletleri kullanmak vurguyu artırır.

3.Rehber Çizgiler üzerinde Tasarlayın

Yazılarınızı ve diğer nesnelerinizi rehber çizgiler (grid) kullanarak düzgün bir hizada yerleştirmeniz tasarımınızı daha hoş gösterecektir. Tasarımınızda bu çizgilerden yardım alın.

Rehber çizgilerle hizalanan nesneler.

4.Parlatmaya zaman ayırın

Gölgelemekten korkmayın, gölgeler düz ve sıkıcı görünümü engeller.
Tasarımlardaki farklı bantların sınırlarına 1 pixel kalınlığında çizgiler çekin. bu bantları daha canlı gösterir.
Yazı ve arkaplan üzerinde yapılacak hafif bir eğim efekti nesneler üzerinde 3 boyutlu hissi uyandırabilir.

Sınırlar daha belirgin arka alan cilalanmış gibi

5.İmajları sınırlandırmayın

İmajlar sınırların üzerine taşsın. Böylece tasarımınız daha hoş görünebilir. Birkaç css ayarlamasıyla bunu yapmak mümkün ve bu Lee Munroe'nun makalesinden öğrenilebilir.

Sınırlardan taşan imajlar

6.Boşluk Bırakın

Örneğin başlık tasarımlarında (header) logoyu İsmi ve sloganı dar bir alana hapsetmek yerine biraz daha geniş bir bant ayırın.

Daha geniş bantlar

7.Dokular
Ardalana biraz doku ekleyebilirsiniz böylece ardalanı tasarımınızla bütünleştirebilirsiniz.

Dokular

8.Vurgular

Vurguları kullanın. Vurgular imajlarınıza üzerinde bulunduğu yüzeyden daha üstte duruyormuş hissi verir.

Vurgular

Tavsiyeleri bu kadar. Tüm bu tavsiyelerin başarıyla uygulandığı örnek bir tasarım da Marketcircle.comda sergileniyor. tasarımına bakmak için ve tavsiyelerin başarılı olup olmadıklarını gözlemlemek için ziyaret etmekte fayda var.

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Ücretsiz Yüzlerce Desen

maxhoper — Mon, 16 Feb 2009 19:29:00 GMT

yayınlanan yüzlerce desenden biri

smashingmagazine yüzlerce ücretsiz photoshop deseninden oluşan büyük bir koleksiyon yayınladı.
imajlar doğrudan desen olarak kullanılacağı gibi farklı etkiler yaratmak için bir takım efektlerle diğer imaj dosyalarında doku olarak da kullanılabilir.

Dokular ve kullanım alanları için daha önce yayınlanan bir bildiriye de buradan ulaşabiliyoruz.

ilgili yazılar

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Etkileyici ve Ücretsiz Fontlar II

maxhoper — Sat, 07 Feb 2009 15:33:00 GMT

Etkileyici ve ücretsiz fontlar serisine yeni fontlarla devam ediyoruz.

Traveling Typewriter

Daktilo yazısına benzer bir görünümü var. Bu gibi fontlar bazı özel tasarımlarda kullanılıyor. İhtiyaç sahiplerinin ilgisini çekecektir. Ancak font lisansı shareware olarak geçiyor. Bu tip fontlar ne gibi kısıtlamaların olduğunu belirten bir dökümanla birlikte gelir ancak bu fontta onu göremedim. Kullanım kısıtlamasına dair hiç bir döküman içermiyor.

Violation

violation karakterleri el yazısına çok yakın tasarlanmış. Ancak tüm karakterleri küçük harfler şeklinde hazırlanmış. Büyük harf bulunmuyor. Font puntosu eğer çok küçük değilse rahatlıkla okunabiliyor. wordpress kullanıcılarının uğradığı lorellenin sitesinde yazıların altlarında kullanılan imza bu tarzda fontların ne kadar geniş bir alanda boy gösterebileceğinin kanıtı.

Angel

Angel bir kaç yıl önce JuliaL isimli bir tasarımcı tarafından tasarlanmış. Font paketinin içerisinde bir metin belgesi geliyor. Fontu internette kullanmanız halinde bir adresi sitenizin bir yerine iliştirmeniz rica edilmiş. Ancak linkteki adres çoktan kapanmış. Fontun dağıtımı serbest bırakılmış. Angel güçlü bir tasarımcının elinde internet sitelerinde mucizeler yaratabilir.

Architext

Architext ince ve sade yapıyısla dikkat çekiyor. Ancak harflerinde güçlülük ve profesyonellik hissi veren hatlar var. Font türkçeleştirmeye uygun.

Jellyka

Jellyka, Saint-Andrew's Queen

Jellyka, Saint-Andrew's Queen adındaki font yapımcısı Jellyka Nerevan tarafından kişisel kullanımlara açılmış ancak ticari amaçla kullanacaksanız sitemi ziyaret ederek bilgi edinin demeyi de unutmamış.

Font son derece şık. kaligrafik, script kategorisinde değerlendiriliyor. Ancak bu tarzda bir font aramayanlar için pek bir anlam ifade etmiyor. Genel bir kullanım alanı yok.

City Burn Night After Night And We Spraypaint The Walls

Başlıklar için kullanılabilir. Küçük puntolarda okunması güçleşiyor. Harfleri oldukça kalın tasarlanmış. İsminin uzunluğu ise bir başka hikaye.

Philosopher

Okunabilirliği yüksek bir font. Küçük ve büyük puntolarda rahatlıkla kullanılabilir. Temiz görünümlü ve yumuşak hatlara sahip. Minimalist tasarımlara da uyum sağlaması mümkün.

ilgili yazılar

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Fontlar Nasıl Türkçeleştirilir ?

maxhoper — Thu, 05 Feb 2009 10:12:00 GMT

Yabancı fontlarda türkçe karakterler bulunmuyor. Ancak bu fontlara türkçe karakterler ekleyebiliriz.
Öncelikle bir font editörüne ihtiyacımız var. Ücretsiz windows ve linux alternatifleri var ancak ben bu konuyu yeteneklerini yeterli bulduğum FontCreator v5.6 programı üzerinden anlatacağım.

1.Adım

high-logic.com adresinden FontCreator programını yüklüyoruz.
Programda düzenlemek istediğimiz fontu açıyoruz.

düzenlenmesi istenen fontu açıyoruz

2.adım

Şimdi türkçe karakterler daha önceden tanımlanmamışsa yeni karakterler oluşturmamız gerekiyor. Her hangi bir karaktere sağ tıklıyoruz buradan "Add" seçeneğine tıklıyoruz. Eklemek istediğimiz yeni karakter için boş bir kutucuk açılıyor. Bu kutucuğa karakterimizi eklemeden önce kutucuğu tanımlamalıyız. Yani klavyedeki hangi tuşa basında bu kutucuğun bir harf olarak ekranda belireceğini ayarlamalıyız. Bunun için oluşturduğumuz bu boş kutucuğa sağ tıklayarak Properties seçeneğine giriyoruz.

yeni harfimizi tanımlıyoruz

Açılan bu pencerede General sekmesi altında Postscript başlığı içerisindeki Name'e eklemek istediğimiz harfin ismini veriyoruz. Sonra Mappings sekmesine geçerek, mappings alanına yeni bir özellik eklemeliyiz. bunun için mappings penceresinin sağ tarafında bulunan Select butonuna tıklıyoruz.

Örneğin eklemek istediğimiz harf yumuşak g (ğ) olsun. Bu harf Latin Extended-A kategorisinde latin small letter g with breve olarak geçiyor. (Eğer harflerin isimlerini bilmiyorsak windowstaki sistem araçları arasında yer alan karakter eşlem aracından isimlerini öğrenebiliriz.)

ğ harfinin mappings sekmesinde tanımlanması

Harf tanımlama işlemleri bu kadar. Sonra Ok butonlarıyla işlemi tamamlıyoruz . Oluşturduğumuz boş kutucuğun üzerinde harfimize ait genel bir görüntü oluşmuş olacaktır. Ancak harfimiz henüz tasarlanmadı.

Adım 3

Fontu türkçeleştirme işleminin püf noktası burada yatıyor. Anlatım için Amaze isimli fontu kullandım. Bu font standart fontlara benzemiyor. Peki ben ğ harfini nasıl tasarlayabilirim? En küçük bir bozukluk diğer karakterler arasında uyumsuzluk yaratacaktır ve göze hoş gelmeyecektir.

Türkçe karakterlerin tasarımı

Ekleyeceğimiz karakterleri diğer karakterlerden kopyalayabiliriz. Örneğin yine (ğ) harfini fonta ekliyor olalım. Bunun için fontta hali hazırda var olan g harfini kopyalayıp eklemek istediğimiz (ğ) harfine yapıştırıyoruz. şimdi üzerinde bir çizgi eksik bunu da varsa diğer karakterlerden yine kopyala yapıştır yöntemiyle elde edip üzerine ekleyebiliriz. ya da kendimiz bir çizgi çizerek kopya g harfini ğ harfine dönüştürebiliriz. Temel mantık bu. Ben diğer karakterlerden aldığım bir çizgiyi biraz değiştirerek g harfine uygun hale getirdim ve fontta hiç bir bozukluk olmadı.

ğ nin üzerindeki çizgiyi oluşturmak için fonttaki bu karakterden yararlanılabilir.

Aldığım çizgideki bir takım oynamalardan sonra ğ harfini elde etmiş oluyoruz.

ğ harfi oluşturuluyor.

Bu işlemi diğer türkçe karakterler için de uyguluyoruz. ç nin altındaki çengeli s yi ş yapmak için kullanabiliyoruz. Bu ve benzeri eklemeler sonucunda türkçe karaktlerin tamamanını oluşturmak mümkün.
FontCreator programında F5 tuşuyla her an fontu test etmek harfler arasında uyumsuzluk olup olmadığını görmek mümkün. Testlerde de olumlu sonuçlar aldıktan sonra fontu ilgili klasöre yükleyebiliriz. Program bunu bizim için "install font" seçeneğiyle yapabiliyor. Ancak bir hatayla karşılaşma ihtimalimiz var. Bunun sebebi orjinal font dosyasının fonts klasöründe bulunmasından kaynaklanıyor. Önce orjinal fontu sistemden tamamen kaldırmalıyız. İşlem burada bitmiyor . Dilersek fontun ismini de değiştirebiliriz.

Fontun görünen ismini veriyoruz

Programda fonta isim vermek için Tools menüsünden Autonaming... seçeneğine tıklamamız gerekiyor. İsim verdikten sonra diğer detayları olduğu gibi bırakabiliriz.

Detaylar

Adım 4

Fontu ister program aracılığıyla ister elle sisteme yükledikten sonra herhangi bir metin editöründe test edebiliriz. Ben bu makaleyi hazırlarken kullandığım Amaze fontunu bilindik ve türkçe karakter içeren birkaç kelimeyle test ettim.

Sonuç

Fontun sisteme dahil olmasıyla tüm işlemler bitiyor. Tasarımlarınızda başarılar...

ilgili yazılar

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Etkileyici ve Ücretsiz Fontlar

maxhoper — Tue, 03 Feb 2009 18:00:00 GMT

Malumunuz fontlar tasarımlarda oldukça büyük bir öneme sahip. Tasarımların daha başarılı olması için etkileyici fontlar kullanmak bu tasarımları daha değerli kılabilir.

Etkileyici ve Ücretsiz fontlar serisine 6 seçkin ve ücretsiz fontla başlıyoruz :

Bleeding Cowboys

Bleeding Cowboys

Bleeding Cowboys true type font sınıfında. windows macos ve linux tabanlarında çalışabiliyor.
gösterişli ve kullanışlı olmasıyla popülerlik kazanıyor.

Freebooter Script

Freebooter Script

Freebooter Script el yazısını andıran bir font. yapımcısı yüzüklerin efendisi üçlemesinde yüzüğün üzerinde kullanılan fonttan etkilenmişe benziyor. Logoların altlarında siteyi tanımlayan küçük sloganlar için kullanılabilir. Çok küçük puntolarda okunması zor olabiliyor.

Walkway

Walkway

walkway'i tanımlamak için sade minimalist ve kendinden emin kelimeleri yeterli. Kullanım alanı oldukça geniş, okunaklı ve özel bir font.

Amaze

Amaze

Amaze sade ve şık görünüyor. küçük puntolarda okunması güç. Zaten bu font bir kitap yazmak için tasarlanmamış. Büyük puntoların bulunduğu her tasarımda rahatlıkla kullanılabilir. bu font windows linux ve macos platformlarında kullanılabiliyor.

A Bite

A Bite

Posterler sinema afişleri logolar gibi geniş bir yelpazede kullanıma uygun. Büyük kalın eskitilmiş harfler sokak modasına uygun tarzda. "underground" tasarımlara uyum sağlayabilir.

Riesling

Riesling

Riesling el yazısı kategorisinde değerlendirilen popüler bir font. Font tasarımcısı harf kıvrımlarında oldukça uğraşmış ve estetik bir font ortaya çıkarmış. Fakat harfler son derece küçük. yukarıdaki örnekte Riesling yazısı 100 puntoyla yazıldı. Bu fontu kullanırken devasa puntolarda yazmaya alışmak gerekiyor.

ilgili yazılar

Bu yazı maxhoper tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage