Adobe Photoshop ile TEMPLATE yapımı..

uyus · #1 06.03.07, 00:57

Merhaba Arkadaşlar;
Sizlere elimden geldiğince template yapımını anlatıcam.Eksiklerim yada gözümden kaçan şekler olabilir eğer böyle bir şey fark ederseniz lütfen bana iletin düzeltmeye çalışırım…

1. Photoshop’u açtıktan sonra öncelikle 700 pixel’e 600 pixellik resulation=72 olan boş sayfa oluşturuyoruz.(Bu boyut ortalama bir template boyutudur.Yani gözkararı diyebilirizsiz istediğiniz boyutta yapabilirsiniz tabiî ki ama çalışmanın birlikte yapılabilmesi açısından sizde bu boyutta açarsanız daha iyi olur)

2. Sonra yeni bir layer açıp

3. ardından yeni açyığımız laerın ismini arkaplan olarak değiştiriyoruz(layer1 yazen yere tıklayarak değiştirebilirsiniz) ve yine layerımıza sağ tıklayarak blending optionsa giriyoruz

Drop shadow ayarlarını resimdeki şekilde ayarlıyoruz ardından gredient overlay’ı seçiyoruz
Foregrant to transparent seçeneğini seçiyoruz ve gredient yazan yere tıklayıp color bölümüne tıklayıp color değerimizi d3d3d3 değerini veriyoruz(bunları yaptıktan sonraki hali aşağıdaki gibidir)

Sonra hepsine ok diyerek blending options bölümüzden çıkıyoruz…
Böylece arkaplan resmimize köşeleri oval, gredient sayesinde biraz metal görünümlü ,drop shadow sayesinde de gölgeli bir hal alarak boyut kazandırmış olduk.

4.Şimdide banner oluşturalım yeni bir layer açalım ve ismini banner yapalım ardından alttaki resimdekileri oluşturalım.

Bannerımıza birazda görsellik katalım istedim şimdide renklerimizi hiç değiştirmeden brush (fıça) seçip çalışma alanımıza sağ tıkladım karşımıza çıkan brush menüsünden çimen 112 pix fırçamızı seçtim(fırça ayarlarımızın default halindeki fırçalardan) ardından yine arka plan layerımıza ctrl’a basık tutarak tek klikle seçili hale getirdim ve bannerın istediğm bir yerine bir parça brush kullandım böylece fırça ile boyadığımız yeri seçim alanı dışına taşırmamış olduk (alttaki resim).sağ tıklayıp deselecti seçerek seçimimizi yok ettik.Birde yazı yazalım istiyoruz örneğin ben bu sitenin bir t-shirt sitesi olmasını istiyorudum buna uygun bir şey yazıdım siz istediğiniz bir şey yazabilirsiniz.

5.şimdide tamplateimizin en önemli noktalarından birine yerleşim planına geldi sıra. arkadaşlar yani nerede ne olmalı nerede ne görüntülenmeli bunları önceden iyice düşünmemiz gerekiyor. Yine sitemizin bütünlügünü ve görsel uyumluluğunu bozmamak şartıyla çerçeveler ve butonlarımızıhazırlayalım

Şimdi kendi işimizi kolaylaştırmak açısından layer pencermizin alt kısmındaki klasör simgesine tıklayıp bir group oluşturalım ve grubumuzun adını taslak olarak verelim.butonlarımız ve background hariç tüm layerları seçip grubumuzun içine atalım ardından bir grup daha oluşturup bu sefer ismini butonlar olarak koyalım ve tüm buton layerlarımızıda seçip içine sürükleyelim. Böylece hepsi düzenli ve toplu halde olsun ki aradığımızı kolayca bulabilelim.

Templatemizin büyük bir kısmını tamamlamış olduk arkadaşlar.Birkaç ufak işimiz kaldı
Bu arada sayfa yerleşimini şu şekilde yaptım.

Şimdi 2 tane daha çerçeve hazırlayalım.
Nasıl hazırlandığını artık sizde biliyorsunuz. Butonlar ve önceden yaptığımız çerçevelerin altındaki boşluğa sığacak şekilde smooth değeri2 olan(kenar owalliği) bir çerçeve daha yapıyoruz

Ardından tüm bunların altına sığacak şekilde kocaman bir tane seçim yapıyoruz ve içini griye boyuyoruz böylece ilk yaptığımız arka plana verdiğimiz efect sayesinde şimdi yaptığımız zemin farklı bir görünüm kazanacaktır(alttaki resim)

Ve son olarakta altına son yaptığımız layerın biraz daha incesini yaparak templatemizi bitirmiş oluyoruz artık içini doldurmak sizlere kalmış ben bişeyler doldurdum umarım ders işinizi görmüştür ve daha nice templatelere esin kaynağı olur herkese iyi çalışmalar

İşte buyurun…

Photoshop'la Cilt Düzeltme
Photoshop ile gif yapın..
Su nasıl yapılır
Kendi Saçınızı Kendiniz Kesin Photoshop ile Knock Out Eklentisi.
Photoshopla Yaratık Efekti
Adobe Photoshop ile TEMPLATE yapımı
Photoshopla Diş Temizleme..
3 Boyutlu Daire
Göz yapımı
PHOTOSHOP ta Automate & Batch Ornegi
Ateş efektli yazılar
Televizyon ekran çizgileri
yazı efecti
Photoshop İle Cilt temizleme

uyus · #2 06.03.07, 01:04

Evet güzel bir örnek ile nasıl template yapılır öğrenmiş oldunuz az çok.. yukarıdaki anlatımı ne kadar geliştirip hayal gücünüz ile birleştirerek devam ettirirseniz o kadar güzel ve çekici olur...

Şimdi sırada bu templateyi parçalara ayırarak nasıl html ye aktarıcağımızı öğrenelim..

Söyle anlatıyım...

Photoshop un toolbar ın dan “Slice Tool” dediğimiz aracımızı şeçelim kısa yolu ( K ).

Daha sonra istediğimiz yeri belirleyerek secili alan haline getirelim. Aşağıdaki resimde örneği mevcut. Üç tane renk yaptım siyah mavi ve kırmızı bu renkleri slice tool ile link vermek istediğimiz yerine kadar secili alan yaptığımızda resimdeki gibi mavi çizgiler resimin üstünde belirlecek numaratör ler eklenmiş olucak. (örnk : resim) :

Yukardaki resimde gösterdiğim numaratörlerin üstüne fırçanız “slice tool” iken ctrl ile iki kere tıkladığınızda bir menü açılacaktır. (örn : resim)

Açılan menüye yukardaki resimdeki gösterdiğim şekilde tıklanıldığında gidilcek olan adresi yazıp “ ok “ a basın.

En son yapılcak olan işlem ve resimlerinizin sizin sectiğiniz alanları otomatik olarak kesmek için File dan Save For Web e tıklayın örnek resimde mevcuttur. (Kısayol tuşu : Alt + Ctrl + Shift + S )

Ve bundan sonra yapıcağınız işlem sadece save diyerek html olarak kayıt etmektir . Örnek resim aşağıda mevcut. Save dedikden sonra bir klasörün içine kayıt ediniz. Ve klasörde otomatik bir klasör acıcak photoshop resimlerinizin kesilmiş hali orada mevcut ve index sayfanız da orada mevcut olucaktır...

resminde görmüş olduğumuz diğer seçenekleri açıklıyorum....

Slice Type : İmage seciliyken resim olarak kayıt eder.
Name : Sectiğiniz bölümün kesildikden sonra isminin ne olarak bilgisayarınıza kayıt etmesini istediğiniz seçenek.
Url : Bilindiği gibi tıklanıldığında gitmesini istediğiniz yeri buraya belirtiyorsunuz.
Target : Sayfanın açılış şeklini belirler örnek : _blank yazarsak link e tıklanıldığında yeni sayfada açar.
Message Text : Tarayıcınızın en alt kısmındaki bölümde gözükmesini istediğiniz yazıyı belirler.
Alt Tag : Mouse ile link in üstüne gelindiğinde tarayıcınızın en alt kısmındaki bölümde gözükmesini istediğiniz yazıyı belirler.

OnR · #3 06.03.07, 01:23

Teşekkürler anlatım için.

uyus · #4 06.03.07, 01:25

ne demek efendim yeterki sizler dinleyin biz hep anlatırız

.)

OnR · #5 06.03.07, 01:30

Siz anlattıkça biz dinleriz efendim.

Heleki böyle faydalı bilgiler olunca insan doyamıyor valla ;D

uyus · #6 06.03.07, 10:44

: > devamı gelicek...

world · #7 07.03.07, 08:56

emeğine sağlık devamını bekliğeceğim arkadaş... :O0

CiwCiw · #8 07.03.07, 11:04

sağol uyus devam bekliyoruz...

uyus · #9 09.03.07, 12:47

Sayın Yardımcı Adminim devamı gelebilir tabiki amma bu konunun devamını siz ler geliştirseniz daha iyi anladığınızı görebiliriz ;p

CiwCiw · #10 09.03.07, 13:31

sayın uyus sizlerin katkısıyla tabiki geliştircez ama devamınıda en kısa zamanda bizlerle paylaşmanızı bekliyoruz unutmayın lütfen....

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Bunlara Baktınız mı?