bildirgec.org

effect hakkında tüm yazılar

Harry Potter Yazı Efekti Dersi | Photoshop

ANDER | 14 Şubat 2011 11:41

Harry Potter, İngiliz yazar J.k Rowling tarafından yazılan Harry Potter serisinin sinemaya uyarlanmış halidir. Dünyada gişe rekorları kıran filmde kitabı gibi seri halinde beyaz perdeye aktarılmaktadır.
Bu unutulmaz filmin yazı karakterini ve efektini aşağıdaki 9 adımlık kısa notlarla photoshop’da yapabilirsiniz…

Arkadaşlarınıza hediye edebileceğiniz en değerli şey nedir? Uykuları olabilir mi?

kagit kalem silgi | 18 Ekim 2010 17:20

Yeni bir teknoloji harikası daha = ) Ukuya dalmakta zorlanıyor, stresli, gergin yatağa giriyorsanız, bu sistem tam da sizin için icad edilmiş demektir.

23 yıllık bilimsel bir araştırmanın ürünü olan bu sistem ile, daha rahat, stressiz ve doğal bir uyku hedef alınmış..

Neuroacoustic Araştırma Merkezi tarafından geliştirilen bu cihazın bilimsel oluşu, sağlıklı bir uykuyu size garantiliyor.. Yapmanız gereken, 30-60 ya da 90 dakikalık otomatik kapanma seçeneklerinden birisini seçmek ve harika bir uykunun kollarına kendinizi bırakmak.. Hepsi bu!

Yazının devamında, ilgili siteyi ve ayrıntılı açıklamaları bulabilirsiniz..

HTML5 Efektleri

angelsdemos | 09 Eylül 2010 13:26

HTML5, henüz geliştirilme ve dağıtım aşamasında olsa, hatta birçok tarayıcı sürümü tarafından desteklenmemiş olsa da oldukça sevilen bir dil halini aldı. Klasik web yapısını tümüyle değiştiren bu farklı dil ile herhangi bir eklentiye gerek kalmadan tümüyle dinamik tasarımlar oluşturulabiliyor. Tamamen açık kaynak kodlu olduğu için aşağıdaki uygulamaları inceleyebilir ve siz de benzer çalışmalar yapabilirsiniz. Muhteşem HTML5 Efektleri;

Breathing Galaxies

Noise Field

Keylight

Zoom Bileşeni: Zoomooz

angelsdemos | 21 Haziran 2010 09:37

Zoomooz, websayfanızdaki herhangi bir eleman üzerinde her türlü zoom efektini yapmanızı sağlayan muhteşem bir jQuery uygulamasıdır. Zoomoz’u web sitenizdeki resimler, bloklar, metinler gibi aklınıza gelebilecek her elemana uygulayabilirsiniz.

Hiçbir eklenti gerektirmeyen bu jQuery uygulaması ile fotoğrafların büyük boylarının anında ekrana gelmesini sağlayabilir veya herhangi bir fotoğrafa yakınlaşma efekti yapabilirsiniz. Bunların haricinde üç boyutlu bir küp yapıp herhangi bir bölümüne yakınlaşma ve uzaklaşma yapabilir veya bloklarınızın bir bölümüne zoom efekti koyarak sağdan sola, yukarıdan aşağı gibi farklı açılardan bu uygulamayı kullanabilirsiniz.

jQuery İle “Gizle/Göster” Sütun ve Tablo Yapımı

Metin METE | 12 Şubat 2010 08:52

Bu yazımızda jQuery ile sitemizdeki sağ yada sol sütunu, tabloyu yada paneli nasıl gizle/göster yapabileceğimizle ilgili uygulama hazırladım. Çalışma mantığı, daha önce anlattığım (jQuery İle “Tab” Uygulaması Geliştirmek) yazısındaki uygulama ve çalışma mantığıyla neredeyse aynıdır. Tek farkı! Bu uygulamada animasyonun daha fazla olması. Çalışan örneği için BU bağlantıya bakabilirsiniz.

Şimdi öncelikle site içeriklerini Ana Tablo içine aldım;

1
2
3
<div class="ana-tablo">
...
</div>

Ana Tablo için eklediğim stil;

1
.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }

Şimdide sırayla içerikleri doldurmaya başlıyorum. Öncelikle Gizle/Göster butonlarını ekledim;

1
2
<div class="gizle">»</div>
<div class="goster">«</div></code>

Gizle/Göster butonları için eklediğim stil;

1
.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

Tabii bu bölümde de atlamamak lazım! Kullanıcılarımıza sadece “Gizle” butonu gösterileceğinden, “Göster” butonunu stille ekstra olarak gizledim;

1
.goster { display:none; }

Ardından Sağ Sütunu ekledim;

1
2
3
4
<div class="sag-sutun">
<div>...</div>
<div>...</div>
</div>

Sağ Sütun için eklediğim stil;

1
2
.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:40px; }
.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

ve son olarak da Sol Sütunu ekledim;

1
2
3
<div class="sol-sutun">
...
</div>

Sol Sütun için eklediğim stil;

1
.sol-sutun { margin-right:280px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

Sayfa için kullanacağımız XHTML kodları burada bitiyor. Buradan sonrasında jQuery ile yazacağımız fonksiyonlar çalışacak.

jQuery kodlarını vermeden önce hazırladığım fonksiyonların ne işe yaradığından bahsetmek istiyorum. Öncelikle ilk fonksiyonumuz, “Gizle” butonu tıklanınca “Sağ Sütun” ve “Gizle” buttonu kaybolacak, kaybolan sütun yerine “Sol Sütun“‘u genişletecek, genişleyecek ama bir yandan da sağdan “Göster” butonu kadar boşluk bırakacak. İkinci fonksiyonumuzda ise “Göster” butonu tıklanınca “Gizle” butonu kaybolacak, “Sol Sütun” belirttiğimiz ölçüde tekrar daraltılacak, “Sağ Sütun” ve “Gizle Butonu” gösterilecek, gösterilecek ama “Sağ Sütun“‘un sağına “Gizle” butonun sığıcağı kadar boşluk ekleyecek. Aman dikkat!!! Anlattıklarımdan kafanız karışmasın. Sadece anlattıklarımı hayal edip, “- tabi ya! böle yapınca bu olucak, şöle yapınca şu olucak.” gibisinden düşünebilirsiniz…

Neyse, yukarıda anlattıklarım hayal ürünü olmaktan çıkıp, kodsal olarak bu şekli alıyor;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
$(".gizle").click(function(){
$(".gizle").animate({opacity:0}, 250).hide("slow");
$(".goster").animate({opacity:1}, 250).show("normal");
$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
$(".sol-sutun").animate({marginRight:"40px"}, 250);
});
$(".goster").click(function(){
$(".gizle").animate({opacity:1}, 250).show("normal");
$(".goster").animate({opacity:0}, 250).hide("slow");
$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
$(".sol-sutun").animate({marginRight:"270px"}, 250);
});
});

Herşeyi bu şekilde yaptıktan sonra, aşağıdaki gibi kodlara sahip olucaktınız;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery İle "Gizle/Göster" Sütun ve Tablo Yapımı</title>
<script src="http://arsiv.pilli.com/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".gizle").click(function(){
$(".gizle").animate({opacity:0}, 250).hide("slow");
$(".goster").animate({opacity:1}, 250).show("normal");
$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
$(".sol-sutun").animate({marginRight:"40px"}, 250);
});
$(".goster").click(function(){
$(".gizle").animate({opacity:1}, 250).show("normal");
$(".goster").animate({opacity:0}, 250).hide("slow");
$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
$(".sol-sutun").animate({marginRight:"270px"}, 250);
});
});
</script>
<style type="text/css">
.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }
.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:30px; }
.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.sol-sutun { margin-right:270px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.goster { display:none; }
</style>
</head>
<body>
<div class="ana-tablo">
<div class="gizle">»</div>
<div class="goster">«</div>
<div class="sag-sutun">
<div>...</div>
<div>...</div>
</div>
<div class="sol-sutun">...</div>
</div>
</body>
</ html>

Az kod, çok iş; eşittir jQuery effects

mmacit | 04 Ocak 2010 10:31

Bu yazımda jQuery de effectleri anlatmak istiyorum… Başlıkta dediğim gibi az kod çok iş… İşte tam burda devreye jQuery yardımımıza yetişiyor… Şu an yeterli sayıda olmasada üzerimizden yük alacak ve elimize işlevsellik ve görselliği harmanlayıp verecek seviyede olduğunu düşünüyorum… Tabi ki birazda sizlerin css ve hayal gücünüz bütün bunlara olumlu yönde etki ediyor… Gevezeliği bırakıp birazda kodlara bakalım…

İlk effectimiz show() ve hide() :
Bu effectlerimiz sayfa içerisinde kullandığımız nesneleri gösterip gizlemeye yarıyor… Örneğin :
Bizim deneme adlı bir div imiz olsun… Bu divi :

1
$("#deneme").show()

ile gösterebiliriz. Ayriyeten :

2009’un en iyi ve en yaratıcı photoshop dersleri

xerre | 19 Aralık 2009 13:29

2009 yılı photoshop (*) severler için oldukça güzel ve verimli geçen bir yıl oldu sanırım; birçok yeni teknik, bir dolu taze fikir ve fazlasıyla yaratıcı yeni yeni photoshop kaynakları.

arşiv niteliğinde olacak olan bu bildiride; fotoğraf manipülasyon dersleri, çizim ve tasarım dersleri, karakter ve portre dersleri, poster ve reklam tasarım dersleri illüstrasyon gibi başlıklar altında 2009 yılının en güzel ve en yaratıcı (kime göre neye göre) ücretsiz photoshop derslerine yer vereceğiz.

foto manipülasyon dersleri

Create frozen liquid effects

Create dynamic distortion effects