Kişisel Web Sitesi Tasarım Örneği #1

Kişisel bir web sitesine mi ihtiyacınız var? Bu örnek ile kişisel web sayfası yapımını öğreneceksiniz.

Kişisel Web Sitesi Tasarım Örneği

Kişisel Web Sitesi Tasarım Örneği

Adobe Photoshop ile 770x750px ve 72 dpi çözünürlüğünde boş bir dosya açın. Rectangle Tool (U) aracını kullanacağız.

Making your own portfolio web page in Photoshop CS3

Sayfanın tamamını bu araç ile içine alın ve layer’a tıklayarak Blending Options -> Gradient Overlay özelliğine tıklayın.

Making your own portfolio web page in Photoshop CS3

Gradient Overlay parametrelerini şu şekilde ayarlayın:

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

İşte sayfamızın tamamı #20201E kodundaki renk ile kaplanmış oldu.

Şimdi yeniden Rectangle Tool (U) aracını seçelim. Sayfanın üst tarafında kendinizin belirlediği alan büyüklüğünde bir tablo daha çizelim. Daha sonra ALT tuşuna basılı tutarak çizdiğiniz tablonun sağ tarafına yakın olacak şekilde ufak bir sütun ayıralım. İsterseniz aşağıdaki resimden örnek alarak yapabilirsiniz.

Making your own portfolio web page in Photoshop CS3

Bu layer’a sağ tıklayalım Blending Options -> Inner Glow özelliğini aktif edelim. Aşağıdaki resimlerden gerekli ayarları yapabilirsiniz.

Making your own portfolio web page in Photoshop CS3

Bu çizdiğimiz alana sitemizin yazar resmini ekleyelim. Boyutları çizdiğimiz alana uyduralım.

Making your own portfolio web page in Photoshop CS3

ALT tuşuna basılı tutarak, layer penceresinde altta kalan üst tablomuz ile resmimizin bulunduğu layer arasına mouse’unuzu getirin. Yuvarlaklı bir mouse ikon çıkacak. İşte bu ikon çıktığında bir kez tıklayınız. Tıkladıktan sonra alttaki resim gibi layerların dizilmesi gerek.

Making your own portfolio web page in Photoshop CS3

İşte resmimizin bu hali alması gerek.

Making your own portfolio web page in Photoshop CS3

Resminiz seçili olsun ve üst taraftaki araç çubuğundan Image –> Adjusments –> Photo Filter‘e tıklayın. Ayarları aşağıdaki resimde gösterilen gibi yapınız.

Making your own portfolio web page in Photoshop CS3

Buna benzer bir görüntünün ortaya çıkması gerek. Ya da siz ayarlarını nasıl isterseniz o şekilde değiştirin.

Making your own portfolio web page in Photoshop CS3

Kullanacağımız Brush setini indirelim. İndirmek için lütfen buraya tıklayınız. Sonra yeni bir layer oluşturun ve Opacity değerini 10% yapın. Daha sonra bu brushları Brush Tool (B) ile kullanın. Eklediğiniz resmin üst ve alt kısımlarını bu brushlarla biraz süsleyebilirsiniz. (Diğer adımda tekrar aynı süslemeleri kullanacağız) Brushlar, beyaz renk seçili iken eklenmesi gerekiyor, buna dikkat edelim. Brushları eklediğiniz layer, resminizin altında (resmin ve onun altındaki tablonun) olması gerekiyor.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Yeni bir layer daha oluşturun bunu Opacity değerini 20% olarak ayarlayın ve tekrar süslemeye devam edin. Brushlar, beyaz renk seçili iken eklenmesi gerekiyor, buna dikkat edelim. Brushları eklediğiniz layer, resminizin altında (resmin ve onun altındaki tablonun) olması gerekiyor.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Diğer Brush Setimizi indirelim. Buraya tıklayarak indirebilirsiniz. Yeni bir layer daha oluşturalım ve bu layerda sadece şimdi indirdiğimiz brush setini kullanalım. Brushları kullanırken farklı görüntüler elde etmek için boyutlarını ve rotalarını Free Transform aracını kullanarak değiştirebilirsiniz. Brushlar, beyaz renk seçili iken eklenmesi gerekiyor, buna dikkat edelim. Brushları eklediğiniz layer, resminizin altında (resmin ve onun altındaki tablonun) olması gerekiyor.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Şimdi yeni bir layer oluşturalım ve brush ayarlarını aşağıdaki gibi yapalım.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Yeni bir layer daha oluşturalım ve Vector Brushlarını bu layer üzerinde de kullanalım. Brushları kullanırken brush özelliğini Fill 20% olarak ayarlayalım. Brushları eklediğiniz layer, resminizin altında (resmin ve onun altındaki tablonun) olması gerekiyor.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Sıra geldi site başlığımızı eklemeye. Aşağıdaki gibi ayarlarını yapınız. (Pencereniz açık değilse Window –> Character) Eğer aşağıdaki yazı tipi sizde bulunmuyorsa, uygun bir tane sizde bulunanlardan seçebilirsiniz.
Making your own portfolio web page in Photoshop CS3

Yazınızı istediğiniz yere yazabilirsiniz. Biz resmin hemen sol üstüne yazmayı uygun gördük. personal ve page olarak iki yazı layer’ı oluşturmamız gerekmektedir. Öncelikle personal yazısı için ayarları yapıyoruz.

Making your own portfolio web page in Photoshop CS3
Yazı layer’ımıza sağ tıklayalım. Blending Options –> Outer Glow ayarlarını şu şekilde yapalım.

Making your own portfolio web page in Photoshop CS3
Şimdi Gradient Overlay özelliği ekleyelim.

Making your own portfolio web page in Photoshop CS3

Gradient Ovarley Parametreleri;

Making your own portfolio web page in Photoshop CS3

Şimdi ise page yazısı için page layer’ına sağ tıklıyoruz. Blending Options –> Outer Glow

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Şimdi sitemizin menülerini yapalım. Rectangle Tool (U) ile menümüz için bir tuş çizelim.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3
Bu tuş için layer’a sağ tıklayın. Blending Options –> Gradient Overlay ayarlarını aşağıdaki gibi yapınız.

Making your own portfolio web page in Photoshop CS3

Gradient parametreleri:

Making your own portfolio web page in Photoshop CS3

Stroke özelliğide ekleyelim. #dc8824 rengini stroke için kullanabilirsiniz.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Bu tuş’un bir kopyasını oluşturun ve aşağıdaki gibi hızalayın.

Making your own portfolio web page in Photoshop CS3

Kopya tuş’un rengini değiştirelim. Kopya layer’a sağ tıklayın Blending Options –> Inner Glow

Arka plan renginden biraz açığını bunda kullanabilirsiniz.

Making your own portfolio web page in Photoshop CS3

Gradient Overlay özelliği ekleyelim.

Making your own portfolio web page in Photoshop CS3

Gradient parametreleri:

Making your own portfolio web page in Photoshop CS3

Stroke özelliği ekleyelim.

Making your own portfolio web page in Photoshop CS3

Gradient parametreleri:

Making your own portfolio web page in Photoshop CS3

Şimdi bu tuş’un kopyalarını çıkartın ve aşağıdaki gibi düzenleyin. İsterseniz kendinize yetecek kadar tuş ekleyin.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Rectangle Tool (U) aracını kullanarak turuncu tonlardaki tuş’un üzerine bir çizgi çekelim.

Making your own portfolio web page in Photoshop CS3

Şimdi menülerin isimlerini yazalım.

Making your own portfolio web page in Photoshop CS3


Genel olarak görünüm bizde şu şekilde oldu.

Making your own portfolio web page in Photoshop CS3

Bizdeki home page isimli layer’ın özelliklerini ekleyelim, sağ tıklayalım bu layer’a. (Size göre hangisi ana sayfa ise) Blending Options –> Stroke
#bb6703 rengini seçebilirsiniz. Tuş’un arkaplanından biraz daha koyu olursa iyi olur.
Making your own portfolio web page in Photoshop CS3

Diğer menülerdeki yazılar içinde şunları uygulayın. Blending Options –> Stroke
#383634 rengini kullanabilirsiniz. Tuş’un arkaplanından biraz daha koyu olursa iyi olur.
Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Yeni bir layer oluşturun ve tuş isimlerinin sol taraflarına üç tane noktacık yapalım. Bunu yaparken Pencil Tool (B) aracını beyaz renk olarak 1px boyutunda kullanalım. Aşağıdaki resimde bulunan örnekteki gibi üç adet noktacık yapalım.

Making your own portfolio web page in Photoshop CS3

Bu noktacıkları diğer tuş’larında önlerine ekleyelim. (Bunun için Duplicate Layer yaparak layer’ı çoğaltın. Çünkü her tuş’un noktacık layerının farklı olması gerekmektedir.)
Making your own portfolio web page in Photoshop CS3
Ana sayfamız için eklenen noktacık layer’ına Blending Options –> Stroke özelliği ekleyelim. Şu değerleri verelim;

Size: 1

Position: Outside

Color: bb6703

Diğer tuş’larada Stroke özelliği ekleyelim ve değerleri şu şekilde verelim;

Size: 1

Position: Outside

Color: 383634

Bunlarıda bitirdiğimizde tuş’larımızın görüntüsü şu şekilde olmalıdır.

Making your own portfolio web page in Photoshop CS3

Sonraki adımda Rectangle Tool (U) aracını kullanacağız. Sağ tarafta ayırdığımız alan için ana sayfam yap, favorilere ekle, email gibi tuş’lar ekleyeceğiz. Aşağıdaki resme benzer bir şekil çizin ve rengi #36322D olsun.

Making your own portfolio web page in Photoshop CS3

Yeni bir layer daha oluşturalım ve 1px büyüklüğünde, #998D7B renginde Pencil Tool (B) aracını seçelim. Aşağıdaki resimde gördüğünüz resimlerden size gerekli olanlarını çiziniz. (Resimi bilgisayarınıza indirip, taslağınızın üzerinede ekleyebilirsiniz  :-D )

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Site yazarının resminin altında kalan iki bloklu resmin bir kopyasını çıkartalım. Resmi aşağı doğru biraz daha büyütelim ki tam sayfa olsun. Bu resmin rengini #2A251F olarak ayarlayalım.

Making your own portfolio web page in Photoshop CS3

Bu layer’a sağ tıklayarak Blending Options –> Inner Glow özelliği ekleyelim ve ayarları aşağıdaki gibi yapalım.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Şimdi tekrar Rectangle Tool (U) aracını seçelim. Sağ üst ve alt sağ tarafta menü oluşturalım. Alt sol blokta da içerik başlığını atalım. İlgili renkler resim üzerinde yazmaktadır. (Eğer eklediğiniz fotoğrafın arkaplan rengi farklı ise, tuş’ların arkaplan renginide kendiniz seçebilirsiniz.)
Making your own portfolio web page in Photoshop CS3

Ekleyeceğiniz her tuş’ta ki kelimeleri ayrı yazı layer’larında yapalım. (Çünkü, kelimeleri renkli yapacağız) Aşağıdan yazı ayarlarını yapın ve yazılarınızı yazın.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Şimdi ilk kelimelerin renklerini ayarlayalım. İlk kelimenin layer’ına tıklayarak Blending Options –> Gradient Overlay özelliği ekleyelim. Ayarları aşağıdadır.

Making your own portfolio web page in Photoshop CS3

Gradient parametreleri:

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

“Welcome to my page” isimli bir yazı oluşturalım. Tabi yine “welcome to” ve “my page” kelimelerini ayrı ayrı yazalım. (Sizde sitenizi ingilizce kullanmayacaksanız, “Web siteme hoşgeldiniz” diye bir yazı oluşturun. “web siteme” ve “hoşgeldiniz” kelimelerini ayrı ayrı yazın.) Yazı ayarlarını aşağıdan yapabilirsiniz.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Menüde yaptığımız layer özelliklerini aşağıdaki resim gibi tekrar kelimemize aktaralım.

Making your own portfolio web page in Photoshop CS3

Şimdi Rectangle Tool (U) aracını alın ve aşağıda resimde gördüğünüz gibi veya kendinizin seçimi doğrultusunda kutucuklar ekleyin. Bu kutucuklarda haberlerimizin resimleri olacak.

Making your own portfolio web page in Photoshop CS3

Bu kutucukların stil ayarlarını şu şekilde yapın Blending Options –> Stroke

Making your own portfolio web page in Photoshop CS3

Görünüm bu şekle benzer olmalı.

Making your own portfolio web page in Photoshop CS3
Bu kutucuklara ilgili haber resimlerini ekleyelim. Kutucukların dışına taşmaması için yazar’ın fotoğrafını eklerken yaptığımız gibi ilgili kutucuğun layer’ı ile ilgili haber resminin arasına ALT tuşu basılı iken tıklayalım. Tüm haber resimleri için bu işlemi uygulayalım.

Making your own portfolio web page in Photoshop CS3

Yeni bir psd dosyası açalım ve boyutları 1px genişliğinde, 2px yüksekliğinde olsun. Pencil Tool (B) aracını seçerek 1 px büyüklüğünde #363331 bir noktacık yapalım. Arkaplanın boş olmasına dikkat edelim. Yoksa bu pattern’i kullanırken beyaz noktacıklarda çıkacaktır.

Making your own portfolio web page in Photoshop CS3

Edit –> Define Pattern özelliğini uygulayalım. Artık bu psd dosyasını kapatabiliriz. Tasarım sayfamıza gelelim. Line Tool (U) aracını kullanarak #38322C renginde bir çizgi oluşturalım.

Making your own portfolio web page in Photoshop CS3

Bu çizgi layer’ına Blending Options –> Stroke özelliği ekleyelim. Ayarları aşağıdadır.

Making your own portfolio web page in Photoshop CS3

Ardından buna benzer bir görüntünün çıkması gerekiyor.

Making your own portfolio web page in Photoshop CS3

Şimdi bu çizgiye scroll efekti ekleyelim. (İsterseniz bu adımı atlayarak sadece çizgi ile haberleri ayırabilirsiniz) Rectangle Tool (U) aracını seçin ve resimdeki gibi #67584A renklerine sahip ufak bir dikey çizgi daha oluşturun.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Tasarımımız bitmek üzere, şimdi yazı renklerimizi ayarlayalım.

Making your own portfolio web page in Photoshop CS3

Kullanışlı linkler için bu ayarları yaparak link ekleyin.
Making your own portfolio web page in Photoshop CS3
Normal linkler için ayarlar;

Making your own portfolio web page in Photoshop CS3

Yazılarımızda ilk cümlede kullanacağımız yazı ayarlarımız;

Making your own portfolio web page in Photoshop CS3

bunlarda normal yazıda kullanacağımız renk ayarlarımız;

Making your own portfolio web page in Photoshop CS3

Sonuç olarak şöyle bir görünüm olmalıdır.

Making your own portfolio web page in Photoshop CS3

Kullanışlı linklerin layer’ına şu ayarları yapalım Blending Options –> Stroke

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Yeni bir layer oluşturun ve linklerin yanlarına yine 3-4 noktacıktan oluşan noktacıklar ekleyin.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Son olarak sitemizin Copyright kısmını yazalım ve tasarımımızı bitirelim. bunun için yazı ayarları aşağıdadır.

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Kişisel web sitemiz bitmiştir. Eğer bu yazıyı alıntı yapmak isterseniz lütfen web sitemizin adresini yazının hemen altına ekleyiniz. Saygınıza teşekkür ederim.
Tam boy olarak görmek isterseniz aşağıdaki resime tıklayınız.

Kişisel Web Sitesi Tasarım Örneği

Kişisel Web Sitesi Tasarım Örneği


104 Comment(s)

  1. abi mükemmel bi bilgi eline sağlık

    imdat | 9 Eyl 2008 | Yorum yaz

  2. Çok güzel bir paylaşım. Teşekkürler…

    Mustafa Temel | 14 Şub 2009 | Yorum yaz

  3. Abi mükemmel birşey bunu arıyordun bende tam istediğim zamanda karşıma çıktın çok teşekkürler bu tip çalışmalarının devamını diyoruz abi
    Saygılarımla

    Ahmet KAYAR | 18 Mar 2009 | Yorum yaz

  4. Zaman buldukça bunun gibi örnekler yayınlayacağım Ahmet. Kolay gelsin, yardımcı olabildiysem ne mutlu ;)

    husmen73 | 18 Mar 2009 | Yorum yaz

  5. bir photoshop programı kullanıcısı olarak böyle bir bilgiyi paylaştığınız için çok teşekkür ediyorum.

    nisa | 19 Mar 2009 | Yorum yaz

  6. ALT tuşuna basılı tutarak, layer penceresinde altta kalan üst tablomuz ile resmimizin bulunduğu layer arasına mouse’unuzu getirin. Yuvarlaklı bir mouse ikon çıkacak. İşte bu ikon çıktığında bir kez tıklayınız. Tıkladıktan sonra alttaki resim gibi layerların dizilmesi gerek.

    Ben burayı yapamadım teşekkürler

    mesut | 8 Nis 2009 | Yorum yaz

  7. Mesut,

    Ekleyeceğin resimin layerını, haber kutucuğunun layer’ının üstüne getir. (Yani layerın üzerinde kalsın) Daha sonra resimin layerını seç, ve alt tuşuna basılı tutarak mouse’u bu iki layer arasına getirirsen farklı bir işaret göreceksin mouse’ta. İşte o zaman mouse’ta ki tık’ı bırakırsan olacaktır. Yapamazsan video çekerim senin için.

    Kolay gelsin.

    husmen73 | 8 Nis 2009 | Yorum yaz

  8. Paylaşımınız için teşekkürler fakat alıntı yaptığınız yeri yazsaydınız keşke.tamam türkçeye çevirmişsiniz fakat yinede size ait bir çalışma gibi göstermeniz hoş değil.
    alıntı yapılan adres:

    adobetutorialz.com/articles/2967/1/Making-your-own-portfolio-web-page

    hipokondriyak | 2 May 2009 | Yorum yaz

  9. tamam herşey güzelde bunu yapmak için bi programa ihtiyacımıza var sanırsam ama o programın adı ne nerden indirmemiz lazım onları paylaşsanız

    Secret | 11 Haz 2009 | Yorum yaz

  10. Merhaba Secret,

    Adobe Photoshop CS3 programını indirebilirsiniz. http://www.adobe.com

    husmen73 | 12 Haz 2009 | Yorum yaz

  11. “Paylaşımınız için teşekkürler fakat alıntı yaptığınız yeri yazsaydınız keşke.tamam türkçeye çevirmişsiniz fakat yinede size ait bir çalışma gibi göstermeniz hoş değil.
    alıntı yapılan adres”

    Ben burada paylaşması bile güzel birşey..
    Teşekkürler.

    maliser | 22 Haz 2009 | Yorum yaz

  12. arkadaşım çok güzel olmuş. teşekkürler. yalnız bir ricam daha var. ben bunu aynen yaptım. lakin dreamveavera nasıl atcam. onu da anlatırmısın.

    ibrahim | 1 Ağu 2009 | Yorum yaz

  13. çok başarılı.

    Seydi ESER | 19 Eki 2009 | Yorum yaz

  14. Dreamviewer’da kullanmak için sol panelde ki Slice Aracını kullanmalısın. Bu araç ile resimleri parçalayıp uygun yerlere html olarak eklemelisin. Bununla ilgili örnek video kaydetmeyi düşünüyorum. Sizin gibi bu tür tasarımları htmle aktarmayı henüz bilmeyen arkadaşlarımız var. Sanırım bu video ile öğreneceksiniz.

    husmen73 | 20 Eki 2009 | Yorum yaz

  15. tesekkürler paylasim icin

    ibrahim | 20 Eki 2009 | Yorum yaz

  16. qAYett baŞarılı :::)

    TuqBa şaHİn | 11 Kas 2009 | Yorum yaz

  17. slm paylaşımınız için teşekkür ederim ama bişey sormak istiyorum bu site örneğini html olarak kullanabiliyomuyuz?

    MERVE | 23 Kas 2009 | Yorum yaz

  18. Merhaba,

    örneği photoshopta hazırladıktan sonra Slice Tool ile parçalara ayırıp HTML’e aktarmanız gerekmektedir. Bunu bir örnekle göstermeyi çok istiyorum ancak zaman bulamadığımdan dolayı henüz bunu anlatamadım.

    husmen73 | 25 Kas 2009 | Yorum yaz

  19. Hocam sizin sayenizde çok güzel şeyler öğreniyoruz.Teşekkürler…
    İyi bayramlar…

    Hakan | 30 Kas 2009 | Yorum yaz

  20. çok güzel bi paylaşım fakat:ben photoshop u bilmiyorum….ileri ki zamanlarınızda fireworks ile bir site tasarımı yaparsanız süper olur….bir de bu özelliklerin hepsi fireworks da var mı acaba…

    sertac | 13 Ara 2009 | Yorum yaz

  21. “ALT tuşuna basılı tutarak, layer penceresinde altta kalan üst tablomuz ile resmimizin bulunduğu layer arasına mouse’unuzu getirin. Yuvarlaklı bir mouse ikon çıkacak. İşte bu ikon çıktığında bir kez tıklayınız. Tıkladıktan sonra alttaki resim gibi layerların dizilmesi gerek. ”

    Malesef ben de yapamadım.

    Kumsal | 30 Ara 2009 | Yorum yaz

  22. Kumsal, doğru layer ile çalışıp çalışmadığınıza dikkat edin. Yanlız layer’ı sürüklüyor olabilirsin.

    husmen73 | 31 Ara 2009 | Yorum yaz

  23. Resmi, masa üstündemi sürükleyeceğim nasıl olacak.Sürükleyince yaptıklarım kayboluyor.

    Can | 6 Oca 2010 | Yorum yaz

  24. Çok Güzel olmuş kardeş eline sağlık …

    Mustafa Bilgin | 6 Oca 2010 | Yorum yaz

  25. ~Can, hangi adımı yapamadın?

    husmen73 | 12 Oca 2010 | Yorum yaz

  26. “Bu çizdiğimiz alana sitemizin yazar resmini ekleyelim. Boyutları çizdiğimiz alana uyduralım”
    Bu kısımları yapamadım.

    Can | 15 Oca 2010 | Yorum yaz

  27. ben web tasarımcıyım gercekten profesyonel bır calısma bunun sayesınde bazı bılmedıklerımı ogrendım elıne koluna saglık sıtede yayınlayanlarınında eline emeğine sağlık devamı gelırse sevınırım

    barlas | 15 Oca 2010 | Yorum yaz

  28. ~Can, çizilen dikdörtgen alana maskeleme seçeneğini uygulayacaksın orada. Layer’a sağ tıklayıp Create Mask’a da tıklayabilirsin.

    ~barlas, teşekkürler. Müsait olduğum zamanlarda eğitici birşeyler eklemeye çalışıyorum.

    husmen73 | 15 Oca 2010 | Yorum yaz

  29. tebrik ediyorum çok güzel bir çalışma olmus.

    zeynep | 20 Oca 2010 | Yorum yaz

  30. size nasıl ulaşabilirim..web sitesi hakkında yardıma ihtiyacım varda….

    beytullah | 31 Oca 2010 | Yorum yaz

  31. Paylaşım cok güzel olmuş ellerinize sağlık…

    s R c | 3 Şub 2010 | Yorum yaz

  32. kişisel web sitemde sohbet hattı açabilir miyim ? nasıl olur ?

    fatih | 5 Şub 2010 | Yorum yaz

  33. çokk güzel olmşB:)xD

    duygu büşra | 11 Şub 2010 | Yorum yaz

  34. elinize sağlık çok güzel olmuş bende su an web tasarım kursuna gidiyorum bizim kullandığımız bu photoshop prg. türkçesi ingilizce cümlelerin yanına parantezle türkçesini yazarsanız çok memnun olurum

    karamelek | 12 Şub 2010 | Yorum yaz

  35. Merhaba ~karamelek,

    Programı Türkçe kullanmanız ne kadar doğru bilmiyorum. http://www.zargan.com adresinden kelime çevirilerini yapabilirsiniz.

    husmen73 | 12 Şub 2010 | Yorum yaz

  36. tesekkurler

    sultan | 20 Mar 2010 | Yorum yaz

  37. Lorem ipsum dolor sit amet :)

    john doe | 24 Mar 2010 | Yorum yaz

  38. Ben de kişisel bir web sitesi hazırlamak istiyorum fakat adobe photoshop bende yok internetten indirmeyi denedim indiremedim bu konuyla alakalı 2srum olacak bu program ücretli ve nereden indirebilirim

    Alperen ŞAFAK | 26 Mar 2010 | Yorum yaz

  39. http://www.adobe.com sitesinden indirebilirsiniz. Ancak deneme sürümü mevcut.

    husmen73 | 26 Mar 2010 | Yorum yaz

  40. Arkadaşlar ben de resim ekleyemedim yaa:( acilen gerekli :(

    Aydanur | 26 Mar 2010 | Yorum yaz

  41. daha önce photoshop programı kullanmadım ve zorlanıyorum :/ ödevim kişisel web sitesi yapmak çok güzel acıklanmıs fakat biraz daha detay :/

    Aydanur | 26 Mar 2010 | Yorum yaz

  42. yazı yazamadım resmen ya :( herseyi denizldiği gibi yapıyorum fakat yazdıgım gözükmüyor:(

    Aydanur | 28 Mar 2010 | Yorum yaz

  43. Yazdığınız yazı, alt layerlarda kalıyor olabilir. Üstlere taşımayı deneyin.

    husmen73 | 28 Mar 2010 | Yorum yaz

  44. yazım sectiğim yerde gözükmüyor ne yazıyosam layerin adını yazıyor.video ekleyebilir misiniz ?

    Aydanur | 28 Mar 2010 | Yorum yaz

  45. Hangi adımda bu sorunu yaşıyorsunuz? Ekran görüntüsü gönderirseniz yardımcı olmaya çalışırım.

    husmen73 | 28 Mar 2010 | Yorum yaz

  46. Teşekkürler ben de yaptım çok hoş oldu.İlk ps projemi yapmış oldum diyebilirim.

    Barış | 30 Mar 2010 | Yorum yaz

  47. nasıl göndericem ?

    Aydanur | 31 Mar 2010 | Yorum yaz

  48. “PrintScreen” veya “PrtSc” yazar klavyede. Sorun yaşadığınız yerin ekran görüntüsünü almak için bu tuşa basınız. Ardından bir paint dosyası açın ve CTRL+V tuşlarına basınız. Dosyayı JPG olarak kaydedin ve imageshack.us sitesine yükleyin. Linkide buraya yazın, bakalım.

    husmen73 | 1 Nis 2010 | Yorum yaz

  49. ya bende o maskeLemeyi yapıorum ama resim gözükmüo :S yardımcı oLur musunuz ?

    ırmak | 7 Nis 2010 | Yorum yaz

  50. Irmak hanım, Layer sıralamasına dikkat ediniz.

    husmen73 | 9 Nis 2010 | Yorum yaz

  51. teşekkürler işime yaradı.

    fatih | 31 May 2010 | Yorum yaz

  52. gerçekten çok başarılı devamını bekliyoruz…teşekkürler

    elif | 5 Haz 2010 | Yorum yaz

  53. Arkadaş uğraşmış türkçeye çevirmiş yayınlamış,hala alıntı diye mızmızlanan arkadaşlar var çok biliyosan kendin hazırlada millet faydalansın..Dostum paylaşım için teşekkürler…

    SMART | 7 Tem 2010 | Yorum yaz

  54. Çok yararlı ve güzel bir paylaşım, elinize, dilinize ve emeğinize sağlık… Teşekkürler.

    Uğur Mürekkepçi | 1 Eki 2010 | Yorum yaz

  55. gerçekten çok faydalı bir çalışma olmuş,elinize sağlık,tşk ederimmmm……

    Mürsel Dedeoğlu | 3 Eki 2010 | Yorum yaz

  56. Eline sağlık kardeşim………

    Can | 6 Eki 2010 | Yorum yaz

  57. tasarım harika tebrik ederim. bunu hangi programla yapıyoruz onu anlayamadım :S

    Hüseyin | 10 Kas 2010 | Yorum yaz

  58. Hocam bu tasarımı spice ile aktarmayı boş bir zamanınızda ders şeklinde yayınlarsanız gerçekten iyi olur.

    Hakan | 18 Kas 2010 | Yorum yaz

  59. Herşey çok güzel ama bunu nasıl html’ye geçireceğim hocam?

    Arda | 21 Kas 2010 | Yorum yaz

  60. çok güzel ama bizim hoca bunu dosyayya yapın dio onu nasıl yapcezzzz

    lovestra | 23 Kas 2010 | Yorum yaz

  61. gerçekten harika birşey yapacğm ödev için çok yardımcı oldu hazırlayann eline koluna sağlık

    esra | 4 Ara 2010 | Yorum yaz

  62. Bir çok kişi tasarımı kodlara dökmeyi soruyor, sanırım kısa sürede hazırlamak zorunda kalacağız :) Müsait bir zamanda bunu hazırlamayı göstereceğiz.

    husmen73 | 8 Ara 2010 | Yorum yaz

  63. ne biçim ste anlamadım nerde müşteriye hoş grş nerde yorumlara cvp . yorum yapıyruz bı bakıyoruz yrmu slmiş

    arabeks kraliçesi | 24 Oca 2011 | Yorum yaz

  64. Burası yardım isteme sitesi değildir. Bilgiler sunulur ve alıcılar istediğini alır. Eğer herhangi bir konuda hizmet almak istiyorsanız iletişim formunu kullanınız. Bunun haricinde yapılacak herhangi bir yoruma cevap verme zorunluluğumuz bulunmamaktadır.

    husmen73 | 24 Oca 2011 | Yorum yaz

  65. Ben de bir web sitesi yapmak istiyorum.Bu bilgilerin çok yardımı olacağına inanıyorum.Ama benim bu işle ilgili hiç bilgim yok, inşallah bu bilgilerin bir faydası olur da bir web site kurarım..Bilgilerini bizimle paylaştığın için teşekkürler…

    28 Ocak 2011 Cuma 15:00

    Mehmet Karaküçük | 28 Oca 2011 | Yorum yaz

  66. bu siteynn tasarımını yaptk ii hoş da bunu nasl dreamvier ile linklerini flan nasl vercez nasl oraya aktarablrz yani !!!

    BEHCET | 17 Mar 2011 | Yorum yaz

  67. BEHCET arkadaşım bu .psd yi oluşturduktan sonra bunu xhtml e dökmen gerekiyor. yani html kodlarını bilmen gerek. Sakın bölerek yapmayın photoshopta css le çalışın.

    Khangeseka | 24 Mar 2011 | Yorum yaz

  68. Çok teşekkür ederim bilgiler için herşey 10 numara olmuş saolun.

    magazaurunkoruma | 1 Nis 2011 | Yorum yaz

  69. paylaşım için teşkkür ederim

    urunkoruma | 1 Nis 2011 | Yorum yaz

  70. Arkadaşlar sitemi çok güzel yaptım sayenizde.

    urunkoruma | 1 Nis 2011 | Yorum yaz

  71. :) bende yapcam yakında soalun.

    urunalarmi | 1 Nis 2011 | Yorum yaz

  72. Empire data bu siteyi beğendi :P

    empiredata | 1 Nis 2011 | Yorum yaz

  73. bu .psd yi oluşturduktan sonra bunu xhtml e dökmen gerekiyor

    renklikalemler | 1 Nis 2011 | Yorum yaz

  74. evet renklikalemler doğru söylüyor

    guvenlikkamerafiyatlari | 1 Nis 2011 | Yorum yaz

  75. Arkadaşlar nasıl yapıonuz? ben nie beceremiom?

    tolgatrafik | 1 Nis 2011 | Yorum yaz

  76. bu orta bloktakı asagı çekme butonunu nasıl kullanabılır yapıcaz .yanı cekınce asagı nasıl ınecek

    ferhat | 15 Nis 2011 | Yorum yaz

  77. Gerçekten çok güzel yaptınız ve anlattınız. bende deneyeceğim. saolun.

    barkodalarm | 18 Nis 2011 | Yorum yaz

  78. Paylaşım için çok teşekkür ederim. Bende Deneyeceğim.

    Prematüre Bebekler | 25 Nis 2011 | Yorum yaz

  79. ALT tuşuna basılı tutarak, layer penceresinde altta kalan üst tablomuz ile resmimizin bulunduğu layer arasına mouse’unuzu getirin. Yuvarlaklı bir mouse ikon çıkacak. İşte bu ikon çıktığında bir kez tıklayınız. Tıkladıktan sonra alttaki resim gibi layerların dizilmesi gerek.

    Burayı Yapamadım Acıl Yardımcı Olursanız Sevınırım Tesekkurler…

    Tugay | 4 May 2011 | Yorum yaz

  80. Merhaba Tugay bey,

    O kısmı şu şekilde de yapabilirsiniz. ilgili 2 layer’ın üstte olanına sağ tıklayın ve “Create Clipping Mask”a tıklarsanız ALT tuşu ile yapılan işlemin aynısını yapmış olursunuz.

    husmen73 | 4 May 2011 | Yorum yaz

  81. DEnedım Olmadı Yıne Bana baska Sekılde Yardımcı Olabılır Mısınız …

    Tugay | 4 May 2011 | Yorum yaz

  82. Eğer Bu Projeyı Sılmedıysenız Bana Yollaya Bılrı Msıınız … SAkıncası Yoksa …

    Tugay | 4 May 2011 | Yorum yaz

  83. Maalesef bu tasarım şu an da elimizde bulunmuyor. Takıldığınız adımda gösterilen resimde gördüğünüz iki layer’ın üstte olanına sağ tıklayın ve Maske (Create Clipping Mask’a tıklayın) oluşturun. Başka nasıl yardımcı olabiliriz, bilmiyoruz.

    husmen73 | 4 May 2011 | Yorum yaz

  84. Tmm Tskler …

    Tugay | 4 May 2011 | Yorum yaz

  85. husmen73 Bey…
    Sizin DEdiğinizi Yaptığımda REsım KAyboluyo Alt Takı LAyer Ortaya Cıkıyo…

    Tugay | 5 May 2011 | Yorum yaz

  86. Tugay bey,

    Eğer adımları doğru yaptıysanız şu resimde ki gibi bir görüntü elde etmeniz gerekiyor.

    http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial370/8.jpg

    İki layer arasında ok işareti var. Bunu yapabilmek için layer sıralaması bu şekilde olmalıdır. Bayanın olduğu resime sağ tıklayıp Create Clipping Mask derseniz aynen resimde ki gibi görüntüyü elde edeceksiniz.

    husmen73 | 8 May 2011 | Yorum yaz

  87. süper bir yazı oluşturmuşsunuz tşk.

    Mesut | 12 Haz 2011 | Yorum yaz

  88. çok yararlı olmuş teşekkürlerrrr

    muhterem | 23 Haz 2011 | Yorum yaz

  89. Ah Keşke kardeş photoshopla bitse.Daha bunu CSS olarak kodlaması var kodları düzenlemesi var FTP den hosta atması var varda var.Bu kadar kolay olsa webb tasarımcılar ne diye var ?

    Faruk | 15 Tem 2011 | Yorum yaz

  90. arkadaşlar bu siteyi internete nasıl atıyoruz. Google da nasıl indeksleniyoruz ?

    Tarık | 4 Ağu 2011 | Yorum yaz

  91. Bence örnek bu haliyle resimden başka birşey değil.Siteyi aynen yapsan bile Dreamweaver gibi programlara aktarmak her babayiğitin işi değil.

    Onur Yılmaz | 30 Kas 2011 | Yorum yaz

  92. Tasarımlar olmadan html düzenleyici programları herhangi bir işe yaramayacağından dolayı bir yerden başlamak gerekiyor. Müsait olmadığımız için bu tasarımın html’e aktarılmasını henüz anlatamadık.

    husmen73 | 30 Kas 2011 | Yorum yaz

  93. zafer

    zafer | 12 Ara 2011 | Yorum yaz

  94. Cok tesekkurler

    CANER | 29 Şub 2012 | Yorum yaz

  95. Fazla fazla başarılı bi çalışma olmuş, ayrıca anlatn kişinin de ellerine sağlık :)

    Hijyenik Mikroop | 22 May 2012 | Yorum yaz

  96. çok etkilendim. Teşekkürler :)

    cheonsa | 23 Eyl 2012 | Yorum yaz

  97. evet lütfen kodlamaları da anlatın:)

    asdf | 26 Eyl 2012 | Yorum yaz

  98. biz sitenizi beğendik.. bizim de bir ödewimiz war . we çalıntı yapıcağız.. ççok yardımcı oldunz teşekkürler.

    büşra and sultan | 9 Kas 2012 | Yorum yaz

  99. iyi hoş güzelde, burdan sonraki adımı niye anlatmadınız yav. linkler falan nasıl veriliyo?..

    muhammet | 3 Ara 2012 | Yorum yaz

  100. Çok başarılı olmuş tebrikler

    Ordu Web Tasarım | 22 Oca 2013 | Yorum yaz

  101. tebrik ederim…

    ercnakar | 6 Mar 2013 | Yorum yaz

  102. boyle bir site yapabilecek varmııı bana aceba

    ekrem | 22 May 2013 | Yorum yaz

  103. http://www.gulhin.com/kisisel-web-sitesi-tasarim-ornegi-1/#axzz2U17y3Fco
    b tasarımı indirip mullanma ımkanım varmıdır

    ekrem | 22 May 2013 | Yorum yaz

  104. Cok soal kardes cok ısıme yaradı benzer ve ıyı bı odev hazırladım hoca baya begendı :D

    hakan aras | 25 Ara 2013 | Yorum yaz

Yorum gnder

CAPTCHA (Şahıs Denetim Kodu) Resmi
*