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  😀 )

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

Bir Cevap Yazın