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

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

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.

Gradient Overlay parametrelerini şu şekilde ayarlayın:

İş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.

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

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

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.

İşte resmimizin bu hali alması gerek.

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.

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

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.

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.

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.

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

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.

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.

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.

Yazı layer’ımıza sağ tıklayalım. Blending Options –> Outer Glow ayarlarını şu şekilde yapalım.

Şimdi Gradient Overlay özelliği ekleyelim.

Gradient Ovarley Parametreleri;

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

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

Bu tuş için layer’a sağ tıklayın. Blending Options –> Gradient Overlay ayarlarını aşağıdaki gibi yapınız.

Gradient parametreleri:

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

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

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.

Gradient Overlay özelliği ekleyelim.

Gradient parametreleri:

Stroke özelliği ekleyelim.

Gradient parametreleri:

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

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

Şimdi menülerin isimlerini yazalım.

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

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.

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.

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.

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

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.

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.

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  )

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.

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

Ş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.)

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.

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

Gradient parametreleri:

“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.

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

Ş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.

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

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

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.

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.

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.

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

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

Ş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.

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

Kullanışlı linkler için bu ayarları yaparak link ekleyin.

Normal linkler için ayarlar;

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

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

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

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

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

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

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

Bu yazıyı paylaşın :)