bildirgec.org - gekko - beğendikleri

mükemmel photoshop dersleri

gekko — Sat, 16 May 2009 06:50:00 GMT

En beğenilen Photoshop dersleri kategoriler altında toplanarak biz tasarımcıların beğenisine sunulmuş. Bazılarını daha önce çeşitli sitelerde görmüş olabilirsiniz ancak 60'dan fazla olan bu derslerin hepsinin bir arada ve kategorilenmiş olarak bulunması nedeniyle sizlerle paylaşmak istedim.

ışık Efektleri

the o series

Super Cool Abstract Vectors in Illustrator and Photoshop

Really Cool Eclipse Effect in Photoshop

Awesome Digital Bokeh Effect in Photoshop

Advanced Glow Effects

Create a Simple Vibrant Light Effect in Photoshop

Flying Girl in Photoshop

Magic Lighting Effect in Photoshop

Fantasy Light Effects in Photoshop

Sparkling Hot Girl in Photoshop

Fotoğraf Manüplasyonları

Combine Photo Elements to Create a Surreal Photo Manipulation

Design an Epic Fantasy Scene with Photoshop

Lighting a Giant Elephant

Create Amazing Photomontages

Making of a Sexy Humanoid

Combine 3D Renders with a Stock 3D Model

Slow Motion Bullet Shot Effect

Telling Stories with Shadows

Fotoğraf Efektleri

How to Make Digital Photographs Look Like Lomo Photography

Dark Grunge Photo Effect

Create a Retro Photo and Background

Alet Tasarımları

Create a Realistic Blackberry Style Mobile Phone from Scratch

Apple iPhone Mobile Phone Design

MacBook Air

Posterler ve duvar kağıtları

Creating an Old-Collage Effect Poster

Gig Poster Design

How to Make Retro/Futuristic Curves in 10 Steps

Trendy Geometric Lines Tutorial

Create Sci-Fi Poster Art

CD Cover Design

Create a Trendy Typographic Poster Design

Amazing Retro Rainbow Curves

How to Create a Movie Quality DVD Cover

Favorite Bands Tutorial

Yazı Efektleri

Create a Dream Design with 3D Typography

Create a Spectacular Grass Text Effect in Photoshop

Moon Shine Text Effect

Awesome Grunge Text Effect

Super Cool Frilly Bits Typography

3D Typographic Effects

Arayüz Tasarımı ve Yerleşim

Create a Clean Modern Website Design in Photoshop

Create a Sleek, High-End Web Design from Scratch

How to Create a Sleek and Textured Web Layout in Photoshop

Create a Nature-Inspired Painted Background in Photoshop

Photoshop Paper Texture from Scratch Then Create a Grungy Web Design with It

Create a Professional Portfolio Design in 17 Easy Steps

Design Watercolor Effect Menu

Hero Header

How to Create a Slick and Clean Button in Photoshop

Simge Tasarımı

How to Create a Super Shiny Pencil Icon

How to Create a Planet Icon Set in Photoshop

Araçlar

Photoshop’s Pen Tool: The Comprehensive Guide

Become a Master of the Pen Tool in Under 30 Minutes

Master Photoshop Selection Tools in Under 30 Minutes

Çeşitli

Creating Custom Patterns

Create a Retro Pop Art in Photoshop

Photoshop Tutorial: Space Environment

Photo Strip Photoshop Tutorial

How to Draw a Portrait in Photoshop

Custom Hang Tag

How to Make an Awesome Grungy Paper Texture from Scratch

Create a Realistic Blueprint Image from a 3D Object

Kaynak:vandelay

Bu yazı gekko 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

2008'in onlarsız yapamayacağınız 23 unutulmaz kaynağı

gekko — Tue, 10 Feb 2009 07:43:00 GMT

2008, benim gibi blogcular için mükemmel bir yıldı. Bu yıl ise her gün bir farklı blog üzerinde daha kaliteli içerik yayımlamak için oldukça büyük bir rekabet var. Bunun amacı geçtiğimiz yıl farklı bloglar üzerinde büyük ilgi çeken blogların yayımlanmış oluşu. Bugünkü makalemizde ise 2008 yılında en çok ses getiren blogların bir kısmını derlemeye çalışacağız. Kaynaklar arasında ilham kaynakları, ücretsiz içerikler, araçlar, rehberler ve benzeri kaynaklar yer alıyor. Bu kolleksiyon özellikle tasarımcılara yönelik olarak hazırlanmış olsa da "sadece" tasarımcılara yönelik değil. Bu sebeple ilgili kaynaklardan herkesin sebepleneceğini umuyorum.

Eğer sizin de 2008 yılında okumaktan büyük zevk aldığınız kaynaklar var ise yorumlarınızda paylaşmaktan çekinmeyin.

2008'in En Popüler 100 Photoshop Dersi

2008'de Oluşturlan En Güzel 50 Simge Seti

2008'in En Güzel Web Tasarımları

2008'in Blog Trendleri

İlham alabilmeniz için 2008'de yeniden tasarlanan 10 Logo

En İyi Web Tasarımcıları İle 2008'e Bir Bakış

2008'in En İyi Illustrator Dersleri ve Makaleleri

2008'den 60 Mükemmel Abduzeedo Makalesi

2008'de Kaçırmamış Olmanız Gereken 5 İlham Veren Web Tasarım Konferans Konuşması

2008 Tasarım Trendleri

2008'in En İyi 30 Photoshop Metin Efekti Dersi

2008'in Ürünleri

2008'in En İyi ve En Kötüleri

23 Kategoride 2008'in 50 Mükemmel Tasarım Makalesi + Kullanıcıların Gönderdiği 40 Makale

2008'in En İyi 75 Tasarım Kaynağı

2008'in En Güzel Web Siteleri

2008'in En İyi Kurumsal Kart Tasarımları

2008'den 25 Fantastik Tasarım Makalesi

2008'in Öne Çıkanları

2008'in En Popüler Tasarım Makaleleri, Rehberleri ve Kaynakları

2008'in En İyi 100 Web Tasarımı

2008'in En İyi iPhone Uygulamaları

2008'in En İyi Görünümlü Blog Tasarımları

Bu yazı gekko 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

21 yeni web servisi

gekko — Mon, 13 Oct 2008 19:14:00 GMT

atmail php ile yazılmış, sade ve güzel, ajaxlı açık kaynak kodlu bir mail client. demosu için

Graphsy web üzerinden yeni bir grafik çizme servisi. İhtiyacınız olan tek şey bir web browser. Şimdilik alpha yayınında ve her geçen gün yeni özellikler ekleniyor.

Fx: effect generator

Fx online flash tabanlı efekt üretgeci. bu üretgeç ile fotoğraf slaytları (yaklaşık 15 farklı efekt), yazı efektleri (15 örn), introlar (7 örn.), bannerlar (7 örn), kutlamalar, butonlar, kaydırmalı animasyonlar, efektler (kar, gece yıldızları, disko zemini) ve video (isterseniz eski stilde (çizgili) üretebilirsiniz. Ayrıca editöründe yazı, fotoğraf, şekil, kaydırma çubuğu, youtube'dan video ekleyebilme imkanı var. Publish diyerek, hızlı posta bölümünden MySpace, Friendster, Facebook, Orkut, Bebo, Hi5, Piczo, Xanga, MiGente gibi sitelere posta yapabilirsiniz. ya da isterseniz javascript veya javascript ve Fxml kodları olarak alabilirsiniz.

PlanningWiz3: Online oda planlayıcısı. odanızın ebatlarını giriyorsunuz, daha sonra,
mobilya kısmından bir kategori seçerek (Aile odası, salon, ev sinema sistemi, çocuk odası, yemek odası, mutfak, ev ofisi, bahçe vs...) odanızı yerleştiriyorsunuz.

Ayrıca hazır ev planları da var. bir zemini seçerek onu ahşap yapabiliyorsunuz (bolca çeşidi var).
yine kapılar, duş kabini, pencere vs... eklemeler yapılabiliyor.

podipodi kutusunu web sitenize değişik fonksiyonlar katmak için kullanabilirsiniz. bu kutuyu sitenize ekledikten sonra shift space tuş kombinasyonundan sonra bir metin girdisi isteniyor. buraya yazabileceğiniz komutlar ve yapacağı işlevler şöyle:
Shift Space: Open/Close Podipodi box
ESC: Close Podipodi box ve açık olan bütün servisleri kapatır.
calculate [expression]: basit matematiksel işlemleri hesaplamak için.
clocks: Italya, Amerika ve Japonya'daki saatleri Google'ın saatlerinden gösterir.
credits: web site credits
date: bilgisayardaki zamanı güzel bir takvim şeklinde gösterir.
find [text]: Sözkonusu sayfada arama yapmayı sağlar. Aranan kelime renklendirilir.
flickr [terms]: Flickr'da fotoğraf aramayı sağlar.
google [terms]: google'da arama yapmayı sağlar.
google images [terms]: google'ın görsellerinde arama yapmayı sağlar.
help: söz konusu site için yazılabilecek komutlar
info: site hakkında ayrıntılı bilgi
open [section]: Sitenin bir bölümünü açmayı sağlar.
say [words]: yazdığınız kelimeleri gösterir.
send comment: site sahibine yorum gönderir.
sitemap: site haritası
tell a friend: arkadaş davet etmeye yarar.
track my ip: IP address, hostname, proxy server, country name, Internet service provider görüntüler.
twitter: Twitter hesabındaki son 20 durumu gösterir.
weather: lokal hava durumunu gösterir (bende çalışmadı).
yahoo [terms]: yahoo'da arama yapmayı sağlar.
yahoo images [terms]: yahoo görsellerinde arama yapmayı sağlar.
youtube [terms]: youtube üzerindeki videolarda arama yapmayı sağlar.

comfypage, ücretsiz online web site oluşturucu. örnekler için

mutapic, online resim, grafik üretgeci.

mixxt: kendi sosyal ağını kurmayı sağlar. türkçe dil desteği de var.

deyey; isim kartı oluşturucu.

10-

ourbania; yapıların ansiklopedisi, wikipedia'sı.

11- mimoa; modern mimarlıkla ilgili olanlar için.

12-

designerpages; mimar ve tasarımcı sayfaları.

13-

maxtango: E-card'ınızı yükleyin, herkesle paylaşın.

14- pixelnovel; Fotoğraflarınızı Flickr'a atmak için Adobe Photoshop plugin'i.

15-

jukepix ile sevimli fotoğraflar oluşturun!

16-

frenzoo ile kendi 3 boyutlu karakterinizi oluşturun.

17-

idiomag; your magazine.

18-

subhub: kendi web sitenizin içeriğinden para kazanmanızı sağlayacak bir site.

19-

icharts.ne: grafik hazırlama ihtiyacınızı karşılayacak bir site. xls dosyasından veya el ile bilgi girişi yapılabiliyor. Ayrıca birçok kategoriye dağılmış halde diğer kişilerin hazırladığı grafikler bulunuyor.

20-

clutterme ile saniyeler içinde web sayfası oluşturun.

21-

cli.gs : kendi adresi de epey kısa olan bir istatistikli link kısaltma servisi. kısa domainlerin hepsi alınmışken, herhalde en kısa bağlantı oluşturanladan biri olacak burası.

Bu yazı gekko 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

gog.is: kolay ve kısa aramalar

gekko — Thu, 29 Jan 2009 17:59:00 GMT

google

bir çok link kısaltma servisi var ama bu çok farklı gog.is google aramalarınızı kısaltıyor. bunun için sitesine girmenize gerek yok mesela googlede bildirgeç kelimesini aramak istiyoruz bunun için http://gog.is/ ' in sonuna "bildirgeç" yazıp tıklamamız yetiyor yani siteye falan girmeden http://gog.is/bildirgeç yazarak arama linkimizi oluşturmuş oluyoruz.

bu basit ve kullanışlı özelliğinin yanında alternatif arama linkleride oluşturabiliyoruz. birden fazla kelime aratıcaksak örnek olarak şöyle yazabiliyoruz;
http://gog.is/remove,windows,spyware.
http://gog.is/install ubuntu.
http://gog.is/what/is/love.
ayrıca googlede dükkan, kitap, haberler, finans, wikipedia ve filmler için linkler oluşturabiliyoruz onlar ise şöyle;
google shopta ipod aramak için
http://gog.is/shop:ipod.
kitap aramak için
http://gog.is/book:poetry.
Google hakkında haberleri aramak için
http://gog.is/news:google.
google finansta arama yapmak için
http://gog.is/stock:apple.
direkt wikipedia'da arama yapmak için
http://gog.is/wiki:leo laporte
direkt imdb'de film araması yapmak için
http://gog.is/movie:slumdog.
Yani kısaca googlede, wikipedia'da, imdb'de yapacağımız aramaların linkini kısaltabileceğimiz bunun için her hangi bir siteye girmeye gerek duymayan bir servis linkin sonuna direkt olarak elimizle istediğimiz kelimeyi yazarak arama yapmış oluyoruz hemde linkleri kısaltmış oluyoruz, yazan mentira

Bu yazı gekko 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

öğrenilmesi gereken 15 css hilesi

gekko — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

Bu yazı gekko 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

Resim Koruma Teknikleri

gekko — Sat, 24 Jan 2009 15:38:00 GMT

Web sitelerimizde yer alan resimlerin kopyalanmaması için bahsedeceğim çeşitli teknikler uygulanabilir. Bu resim koruma yöntemleri bir takım önlemler olsalar da yine de kopyalanmamayı garanti edemez. En basitinden ekran kopyala (print-screen) tuşu bile resmi kopyalamaya yetecektir.

Resim koruma önlemleri:

1. Sağ tuş kilitleme (disable right click): Resmin üzerinde sağ tıklayıp "resmi kaydet"i önler.
Bakınız: No right click
Ayrıca: jQuery Plugin for no right click

2. Internet Explorer 6 Image Toolbar'ı kaldırma (Disable IE6 Image Toolbar): Resmin üzerine gelindiğinde otomatik görünen kaydetme seçeneğini kaldırır.

Disable IE6 Image Toolbar

3. Gerçek resmin üzerine boş resim koymak: Bu yöntemde gerçek resminizi "div" etiketi içinde arka plan resmi olarak kullanıyorsunuz. Transparan boşluk resminizi de aynı boyutlarda gerçek resimmiş gibi kullanıyorsunuz. Orijinal resmi gören kişi resmi kaydetmeye çalıştığında "blank-boşluk" resmi kaydetmiş olacaktır.

Bu problemin çözümü için iki javascript framework'ü oluşturulmuş:

dwProtector for MooTools
dwProtector for jQuery

4. Bir diğer yöntem JPG, GIF, BMP veya PNG gibi normal resim türleri yerine flash kullanmak.

Bu amaç için yapılmış bir uygulama: swfIR (swf Image Replacement).

5. Bildiğimiz bir yöntem de resimlerin üzerine yazı yazmak. Bu yöntem iki şekilde gerçekleştirilmekte. Birincisi çeşitli program veya siteler üzerinden yazılar eklenmekte (watermark). Online watermark işlemi için buraya ve şuraya bakabilirsiniz. İkincisi ise bizzat server'ın kendi tarafında orijinal resim ekrana basılırken yazı eklenerek basılması işlemi. Bunun için de şuraya bakabilirisiniz.

Image Watermarking

6. Bir diğer yöntem de resmin parçalara ayırılıp (image splitting) kullanılması. Şu sitede örneğini göreceğimiz gibi güzel bir yöntem.

7. Resimlerin dizinlerine erişimi ya da botların resimleri çekmesini engellemek: Bu yöntemde alınacak önlemler htaccess üzerinde hotlinking koruması ile ve robots.txt ile izin verip vermemeyle yapılabilir.

Örnek robots.txt:

User-agent: * Disallow: /cgi-bin/ Disallow: /images/

User-agent: vscooter
User-agent: DittoSpyder
User-Agent: Googlebot-Image
User-Agent: psbot Disallow: /

8. Son olarak da aklıma gelen bir yöntem olarak görüntü işlemeden bahsetmek istiyorum. Bu yöntemde "resmin içine yazı saklama" gibi copyright yazısı ya da site adresi gibi bilgilerin farkettirmeksizin resmin için de saklanmasıdır. Belirli kurallar çerçevesinde bazı piksellerin renk değerlerinde ufak değişiklikler ile bu yapılabilir ve uygulama yazılabilir.

Bu yazının hazırlanmasında buradan ve şuradan yararlanılmıştır.

Bu yazı gekko 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 İyi 65 mooTools Eklentisi

gekko — Mon, 26 Jan 2009 18:55:00 GMT

Hazır sözü 2008'in En İyi JavaScript Kaynakları'ndan açmışken jQuery'nin pratikliği karşısında dimdik duran ve kimilerine göre jQuery'nin pabucunu yakında dama attıracak olan bir başka JavaScript kütphanesi mooTools'dan bahsetmeden olmaz.

Bu yazımda, bugüne kadar yayımlanan en iyi 65 mooTools eklentisini sizlerle paylaşmak istiyorum. Listede olmayan ve sizin de beğenerek kullandığınız mooTools eklentileri varsa paylaşmaktan çekinmeyin.

SmoothScroll

SmoothScroll kullanıcıyı sayfanın belirli bir bölgesine yumuşakça yönlendiriyor. Normalde bu tip bağlantılar kullanıldığında tarayıcı herhangi bir efekt olmadan sayfayı doğrudan istenen bölgeye taşır. SmoothScroll işte bu eylemi yavaşlatarak kullanıcının gözüne daha hoş gelecek şekilde yeniden tanımlıyor.

MultipleSelect

MultipleSelect HTML çoklu seçim kutucuklarına özel stil eklemenizi sağlıyor. Üstelik birden fazla öğe seçmek için CTRL tuşuna basılı tutmanız da gerekmiyor.

Typewriter Effect

MooTools kullanılarak oluşturulmuş güzel görünümlü bir daktilo efekti.

MooColumns

MooColumns bir MooTools 1.2 sınıfı olup içeriği birden fazla sütuna kolayca ve çabucak bölümlendirebilmenizi sağlıyor.

Yatay kaydırmalı haber bandı

Bu haber bandı çok basit olup web projelerine entegre edilmesi çok kolay. Newsvine Live panel'den esinlenen bu eklentinin göze oldukça hoş gelen bir efekti mevcut.

MooScroll

MooScroll bir MooTools 1.2 sınıfı olup kaydırılabilir divler üzerindeki kaydırma çubuğunun görünümünü özelleştirebilmenizi sağlıyor.

Giriş Panelini Göster/Gizle

Sayfanın üst kısmından aşağı yumuşakça kayan güzel bir giriş paneli.

Kroppr

Kroppr güçlü bir betik olup ziyaretçilerine imaj kırpma desteği sunmak isteyen tüm site sahiplerinin işini kolaylaştıracak nitelikte. Diğer betiklerin aksine Kroppr resimleri döndürebilir, yakınlaştırabilir ve flash ya da java gibi herhangi harici bir eklenti kullanmadan imajları taşıyabilir. Kırpma işlemi kullanıcı seçiminden memnun olduktan sonra gerçekleştirildiğinden hem sunucuya bindirilen yük hem de kullanıcının işlem süresi azaltılmış oluyor. Kesinlikle önerilir.

Sayaç Eklentisi

Internet üzerinde ziyaretçinin bir işlemin sonucunu alabilmesi için bir süre beklemesini gerektiren ve bu esnada ekranda sayaç gösteren pek çok web sitesi bulunuyor, örneğin RapidShare. MooTools kullanılarak oluşturulan bu eklenti, sitenize benzer bir özelliği kolayca entegre edebilmenizi sağlıyor.

Twitter Emulation

Dünyanın her bir köşesindeki insanlar, Twitter'ı kullanımı çok kolay olduğu için seviyorlar, zira site üzerinde tek yapmanız gereken mesajınızı yazıp "Güncelle" düğmesine basmaktan ibaret. Pek çok kişinin bilmediği şey ise Twitter'ın işlevselliğini sitenize entegre edebilmenin aslında ne kadar kolay olduğu. PHP, MySQL ve MooTools JavaScript kullanılarak Twitter benzeri bir durum paylaşım sistemini sitenize kısa sürede entegre edebilirsiniz.

Fancy Navigation

Navigasyon menüleri genellikle sıkıcıdır, öyle değil mi? Çoğu zaman navigasyon menüsünün üzerine fare ile gelindiğinde bir imaj belirir. Peki bunun orijinalliği nerede? Bu makalenin yazarı MooTools kullanarak güzel görünümlü bir navigasyon menüsü oluşturmuş. Menünün üzerine fare imleci götürüldüğünde zincir efekti oluşuyor.

Select Box Factory 1.0

Alternatif bir çoklu seçim kutusu örneği. Arama kutusuna birkaç harf girerek, site üzerindeki öğelerden birini aramayı deneyin. Listenin hemen yanında benzer bir liste, açılır liste olarak belirecektir (bu geçişi sağlamak yaklaşık 5 saniye kadar sürüyor).

AutoCompleter

MooTools için hazırlanan bu otomatik tamamlama betiği metin önerme ve tamamlama özelliklerini bir arada sunuyor. Yerel, JSON ya da XML gibi farklı veri kaynaklarını desteklediği gibi farklı kullanıcı etkileşimleri, özel biçimlendirme, çoklu seçim, animasyon ve çok daha fazlası için desteği de bünyesinde barındırıyor.

mooSocialize

mooSocialize düğmesine tıkladıktan sonra, beğendiğiniz sosyal ağı seçebileceğiniz bir pencere beliriyor. Her bir sosyal ağ servis isminin yanında bulunan küçük resim, kullanıcının aradığı servisi kolayca bulabilmesini sağlıyor. Ama hepsi bu değil - bağlantılara tıkladığınızda bulunduğunuz sayfadan başka bir sayfaya yönlendirilmiyorsunuz, aksine seçilen sosyal ağ site üzerinde bir kutu içerisinde açılıyor. Kullanışlı ve kolay. Kutu üzerinde bulunan düğme aracılığı ile kutuyu gizlemek de mümkün.

SlideItMoo

SlideItMoo, imajlar için bir MooTools 1.2 kaydırıcısı. Pek çok tarayıcı üzerinde sorunsuz çalışan bu eklenti, JavaScript'in etkin olmadığı zamanlarda bile görünümü ve işlevselliğini bozmuyor. Tüm CSS stillemesi harici olarak yapılmış. Kaydırma işlemi hem ileri ve geri düğmeleri ile hem de fare üzerinde bulunan tekerlek aracılığı ile yapılabilir. Betik hem bir galerinin küçük resimlerini hem de reklam bannerlarını döndürmek için kullanılabilir. Betiği kullanım amacınızı değiştirmek de çok kolay, tek yapmanız gereken betiği sayfanıza eklerken kullanmak istediğiniz sınıfı belirlemek.

mooTools ile Yansıma (Reflection) Efekti

Bir ara popüler olan reflection.js'nin mooTools JavaScript çatısı için yeniden yazılmış sürmü. 2KB'dan küçük olan bu eklenti sayesinde sitenizdeki imajlar üzerinde herhangi bir oynama yapmadan onlara yansıma efekti ekleyebilmeniz mümkün hale geliyor.

MooTools Etkinlik Takvimi

Resmi olmayan MooTools Etkinlik Takvimi eklentisinin resmi sürümü. Halihazırda kullanılan web projelerine entegre edilebilen bu takvim, mooTools JavaScript çatısını kullanıyor. Şimdilik halen geliştirilme aşamasında olan bu betiğin şu anki hali bile pek çok kullanıcının işini görecektir.

AJAX Kullanıcı Adı Kontrol Mekanizması

Sitenize kayıt olmak üzere olan bir kullanıcının seçtiği kullanıcı adının sitede daha önce bir başkası tarafından alınmış olup olmadığını kontrol etmek için neden kullanıcıyı formu göndermek zorunda bırakasınız? AJAX ve MooTools 1.2 kullanılarak kullanıcı adı girildiği anda kontrol işleminin nasıl yapılabileceğini öğrenin.

Cam efektine sahip işlevsel navigasyon çubuğu

Ana menü üzerindeki bir sekmeye fare imlecinizi götürürken seçili olan sekmeye ait alt menü öğeleri görüntüleniyor. O sırada navigasyon çubuğunun sağ kısmında alt menüleri gizleyebileceğiniz 'Gizle' bağlantısı yer alıyor. Bağlantıya tıklandığında alt menü öğeleri güzel bir efektle gizleniyor ya da yeniden tıklandığında görüntüleniyor.

HTML Form İpuçları

Twitter benzeri bir karakter sayacı olan bu eklenti MooTools ile hazırlanmış. Giriş kutusuna karakter girdikçe, daha önceden tanımlayacağınız en yüksek karakter sayısı girilen karakter miktarına göre gittikçe azalıyor.

mooFlickr

Eğer Flickr istatistiklerinizi blogunuzda ya da web sayfanızda göstermek istiyorsanız bu küçük eklentiye ihtiyacınız olacaktır. Eklenti Flickr üzerinde gönderdiğiniz resimleri, sık kullandığınız etiketleri ve katıldığınız kullanıcı gruplarının bir listesini alabiliyor.

Göster / Gizle efektine sahip CSS dikey menü

Göster / Gizle efekti kullanılarak hazırlanmış ve göster/gizle efekti bulunan bir CSS dikey menüsü. Menünün ana öğeleri üzerine tıklandığında alt menü öğeleri bir efektle beliriyor.

mooSlide

mooSlide ile web siteniz üzerinde birkaç kaydırıcı elementini birden çağırabilirsiniz. Tek yapmanız gereken kaydırıcıyı bir sınıfa dahil etmek ve ardından betiğe o sınıfı tanıtmak.

MooFlow

Özünde bir resim galerisi olan bu eklenti, görünümü ile kendini benzerlerinden ayırıyor. iTunes'un CoverFlow özelliğinin web sitenizdeki resimlere entegre edebilmeniz için mükemmel bir eklenti.

AJAX MooTools Güvenli İletişim Formu
MooTools 1.1 çatısını kullanan bu iletişim formu form alanlarını kontrol ederek kullanıcıya eş zamanlı olarak girilen verinin doğru olup olmadığını bildiriyor. Örneğin İsim alanı sadece normal karakterleri, elektronik posta alanı girilen adresin bir elektronik posta adresinin karakterlerini içerip içermediğini ve mesaj alanı üzerinde de web sitesi adresinin girilmesini engelleyerek spam mesajların önüne geçilmesini sağlıyor.

Facebook Kaydırıcıları

Yumuşak bir kaydırma efekti.

Fotoğraf Galerisi

Büyüleyici bir interaktif fotoğraf galerisi (Demo burada)

Noob Slide

Güzel görünümlü bir başka resim galerisi.

Simple 3D Carousel

Gelişmiş bir 3B karusel.

Kaydırıcı

Yatay ve dikey çubuk ve kaydırıcısı.

Arkaplanı tıklayarak değiştirmek

Dinamik renk seçicisi - renk değiştiricisi. Renkler üzerine tıklandığında arkaplan değişiyor.

Pamoorama

Sayfa ilk yüklendiğinde resmin bir bölümünü gösteriyor. Ardından üzerine fare imleci götürülüp sürüklenerek imajın geri kalan kısımları görüntülenebiliyor. MooTools kullanarak panaromik efekt oluşturmak isteyenlere.

MooTools ile ipuçları

Güzel görünümlü bir ipucu tanıtımı.

JavaScript Resim Galerisi

Basit ama kullanışlı bir resim galerisi.

Basit bir Navigasyon Çubuğu

Basit ve kullanımı kolay bir navigasyon çubuğu.

Slidinglist

Ağaç dosya sistemi benzeri kayan bir navigasyon sistemi.

Multibox

Resim, Flash, Video, MP3 ve HTML destekleyen bir lightbox örneği.

Resim Menüsü

Üzerine fare imleci getirildiğinde imajın geri kalanını gösteren yatay bir menü.

Window Growl

Farklı bir ipucu eklentisi.

ReMooz

SqueezeBox'tan daha sade ve kolay olan bir eklenti. Resmin üzerine tıkladığınızda resmin orijinal boyutunu görebiliyorsunuz.

Accordions

Güzel görünümlü ve yumuşak geçiş efektleri olan bir navigasyon eklentisi.

Slideshow

En fazla özelliğe sahip olan en iyi resim galerisi / slayt gösterisi uygulamalarından birisi. Çok iyi bir eklenti.

mooSlide (lightbox'un yerine)

mooSlideBox, AJAX tabanlı küçük ve sade bir uzantı. Özellikle lightbox kullanmak istemeyenlerin ihtiyaçlarını karşılayacak türden.

Sayfa Yükleyicisi

Bir başka sayfadaki div'i geçerli sayfadaki div içerisine yükleyebilirsiniz.

textarea'yı genişlet

Sadece bir form oluşturmanız yeterli. Betik, textarea form alanının boyutunun kullanıcı tarafından değiştirilebilmesini mümkün kılıyor.

JavaScript Zaman Seçicisi

Çok kolay sürükle-bırak arayüzünü kullanan ilk zaman seçicisi.

JavaScript İle Hazırlanmış Seksi Yan Çubuk Kayan Menü Sistemi

Yumuşak ve evet, SEKSİ yan çubuk menüsü.

Slayt Gösterisi

Resimler arasında yumuşak geçiş efekti.

AJAX İle Hazırlanmış Giriş Formu

Kullanımı kolay bir giriş formu.

FancyUpload

Güzel görünümlü dosya gönderimleri için SWF AJAX ile birleşti.

Doğrulama

Sade bir form doğrulama mekanizması.

Dizilebilir Tablo

Tabloları dizin ve filtreleyin.

MooTabs - MooTools İçin Basit Sekme Sınıfı

MooTabs gerçekten çok küçük (3KB) ve adından da anlaşılabileceği gibi basit sekmeli navigasyon sistemi hazırlamak isteyenler için düşünülmüş. jQuery, MooTools gibi üçüncü parti JavaScript kütüphanelerini kullanmadan sekmeli içerik oluşturmak isteyenler için bir de bu var.

Sıralanabilir Liste Örneği

Sürükle-bırak desteğine sahip sıralanabilir liste. İşe yarar olabilir.

Takvim

Calendar (Takvim) bir JavaScript sınıfı olup form elementlerine erişilebilir ve kullanımı kolay tarih seçicileri ekler.

MooTools İle Yuvarlatılmış Köşeler

Sitenizde halihazırda bulunan divler üzerine yuvarlatılmış köşeler ekler.

Mediabox

Mediabox, "lightbox" tarzında bir pencere üzerinde flash, video ve html içeriğini görüntüleyebilmenizi sağlar.

Form Kontrolü
Formlar üzerinde farklı testler uygular ve hataları vurgular.

mooRainbow

mooTools çatısı altında inşa edilmiş bir renk seçicisi (color picker).

Lightbox

Geçerli sayfanın üzerinde beliren satıriçi resim penceresi.

SmoothGallery

Bu JavaScript galerisi ve slayt gösterisi sistemi sitenize sade ve yumuşak geçiş efektleri bulunan resim galerileri, slayt gösterileri, vitrinler gibi kullanışlı öğeler ekleyebilmenizi sağlar.

Popmenu

Arkaplan imajı yavaşça belirerek karaktersiz menülerinize canlılık katar.

MooWheel

Bu betiğin amacı JavaScript ve tuval nesnesi kullanılarak verinin görselleştirilebilmesine dair özgün ve kullanışlı bir örnek oluşturmak. Bu tip görselleştirmeler özellikle farklı nesneler arasındaki bağlantıları göstermek için kullanılabilir.

moo.rd

Bu bir dizi örnek uygulama moo.rd'nin nasıl çalıştığını ve sizin moo.rd ile nasıl çalışabileceğinizi gösteriyor. MooTools'un gücüne güç katmak için eşsiz bir uzantı.

Mootools Mocha UI

Mocha bir web uygulama arabirim kütüphanesi olup doğrudan MooToools JavaScript kütüphanesi üzerine inşa edilmiştir. Mocha grafiksel kullanıcı arabirim bileşenleri tuval etiket grafikleri ile oluşturulmuş çok gelişmiş bir kütüphane.

Kaynak: speckyboy

Bu yazı gekko 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

Kartvizit Nasıl Yapılır ?

gekko — Mon, 03 Mar 2008 07:09:00 GMT

kartvizitler genelde beyaz bir fon üzerine yazılmış isim adres ve telefon bilgilerinden ibarettir ama kendi kartvizitinizin daha özel ve daha ilgi çekici hazırlanması için bir iki saatlik bir zaman ayırabilirsiniz.

Kartvizitleriniz neden böyle dinamik gözükmesin ?

Tabi ki kartvizit hazırlamak için photoshop bilginisine ihtiyacınız olacak.
Önce kartvizitleri tasarlamadan önce bu tasarımın yapılacağı ve standartlara uyan boş bir zemin hazırlamanız ve basım sırasında bu zeminin kenarlarından kayıplar olabileceği için güvenli bölge olarak bilinen bir alanı bu boş zemin üzerinde işaretlemeniz gerekecek.
Standartları ve güvenli bölgenin ne olduğunu bilmiyorsanız daha önce hazırlanan psd dosyalarından yararlanabilirsiniz.

2" x 3.5" Standard Kartvizit

3.5" x 2" Dikey Kartvizit

4" x 3.5" Kartvizit

4" x 6" Posta kartı

mavi çizgiler güvenli bölgeleri gösteriyor. Kartvizitler buna göre tasarlanmalı

Yukarıdaki standart şablonları photoshop da açtıktan sonra yapmanız gerekenler aslında sizin nasıl bir kart vizit istediğinize ve hayal gücünüze kalıyor. Ancak esinlenmek için internette küçük bir araştırma yapmaktan zarar gelmez.
Luxa.org bir kart vizitin photoshop da yapım aşamalarını göstermiş ve ilginç bir kart vizit yapmış.
Kartvizit yaparken dikkat edilmesi gereken bazı püf noktalar var .

Kartvizitteki güvenlikli bölgeler işaretlenmeli ve tüm tasarım bu sınırlar dahilinde kalacak şekilde yapılmalı
Kartvizit en boy oranları standart olmalı
Tasarımlar en az 300dpi çözünürlükte yapılmalı.
Kart tiff formatında kaydedilmeli.
Basım sırasındaki renk farklılıkları göz önünde bulundurulmalı. Gerekiyorsa renk düzeltmeleri yapılmalı.

Yine bütün aşamaların yer aldığı bir örneği daha incelemekte fayda var. Örnek greatfxbusinesscards.com da yer alıyor.

Bu yazı gekko 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

önce gözü doyuran siteler

gekko — Sun, 21 Dec 2008 15:58:00 GMT

görselliğin üst seviyeye çıktığı bir tasarımla ilk kez webdesignerwall'da karşılaşmıştım.

sanırım tasarımcısı renkli bir arkaplan oluşturup, iki sütun ile içerik yerleştirme konusunda bir trend yaratmış olacak ki benzerlerini, hatta daha güzellerini çok sık görmeye başladık. işte bunun gibi kuvvetli imajlarla donatılmış siteleri incelemek istiyorsanız şurada 100 sitelik güzel bir liste var.

Bu yazı gekko 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

27 koyu web sitesi tasarımı

gekko — Fri, 13 Jun 2008 10:28:00 GMT

Bu adreste ilham verici 27 web sitesi tasarımı örneklenmiş. Fakat bir arada sergilenmelerinin bir nedeni var, koyu renk tonlarından oluşmaları. newconcept.hu ve cokezero.pl tasarımları kişisel favorilerim. koyu renklerle iç açıcı tasarımlar yapmak mümkünmüş dedirten cinsten tasarımlar. işte bir kaç örnek:

GoodBytes

newconcept

bildirgec'te web tasarımı:

Bu yazı gekko 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