Basit ve canlı bir web sitesi yapalım

Bir web sitesi tasarımı nasıl yapılır, öğrenmek istiyor musunuz? Bu derste basit ve canlı bir tasarım yapacağız birlikte. Bilgilerimizi birbirinden ayırmak için de kutucuklar kullanacağız.

Bir web sitesi tasarımı nasıl yapılır, öğrenmek istiyor musunuz? Bu derste basit ve canlı bir tasarım yapacağız birlikte. Bilgilerimizi birbirinden ayırmak için de kutucuklar kullanacağız.

Adım 1

Adobe Photoshop'ta 650x500 px boyutunda yeni bir döküman açın. Arka planı beyaz olsun. Rounded Rectangular aracı ile bir dikdörtgen çizin. Sonra Layer > Layer Style > Gradient Overlay menüsüne gidin. Aşağıdaki gibi ayarlayın ve "reverse" kutucuğunun işaretli olduğundan emin olun.



Şimdi biraz çiçek ve çimen yapın. Lasso aracını alın ve çiçek, yaprak şekilleri çizmeye başlayın. Bu şekilde çizim benim bulduğum bir şey. Elbette çok mükemmel bir çizim yapamayacaksınız ama aşağıdaki gibi olursa fena olmaz. (Yazar kısa geçmiş ama çizim şu şekilde oluyor sanırım: Lasso aracı ile çizdikten sonra, çoklu çizim için SHIFT tuşunu basılı tutmalısınız, Select > Modify > Border veriyorsunuz, içine dolgu yapıyorsunuz. Daha basit bir yöntemi varsa siz de belirtebilirsiniz. Çev.)



Header (sayfa başı grafik) kısmında kullanmak üzere ben bu resmi seçiyorum, siz de herangi beğendiğiniz bir başka resmi kullanabilirsiniz.



Menü için kenarları oval olan küçük bir dikdörtgen çizin ve header'daki aynı koyu yeşil renkle dolgu yapın. Sonra aşağıdaki gibi görünecek şekilde yerleştirin . Buton layer'ını Header'ın bulunduğu layer'ın altına taşıyın ki alt kısımları onun altında kalsın. Bize 3 buton lazım, nedenle ilk yaptığınızı 3 kere çoğaltın.



Header kısmı tamam. Öyleyse her layer üzerinde CTRL+ sol tıklayarak seçin ve Merge Layers yapın.

Adım 2

Logo yazısı için aşağıdaki rengi kullanın. (#708348). Bu başlık büyük olmalı, "bold" ya da "strong" olmalı. Ancak altındaki yazı, biraz daha küçük olacak, "strong" olmasın.



Adım 3

Biçimimiz şimdi hazır. Firmanın amacına göre alt kısım içeriği oluşturmak kaldı geriye. Benimki çocuklara yardım amaçlı kâr gütmeyen bir hayır kurumu. Aşağıdaki gibi kutu içinde bilgiler ekleyin ve renklerini de birbirinden ayırın.

Adım 4

Şimdi de yazı ekleyin. Artık arayüzünüz hazır. Benim yaptığım aşağıdaki gibi görünüyor.



NOT: Design Tutorials.info sitesinden çevirdim.

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

süper ve cok profesyonel duruyor,ellerinize sağlık
bayıldımmm...bende yapıcam hemen sımdı:gul::gul:
teşekkürler
teşekkürler
Gerçekten güzel olmuş, ellerine sağlık... yalnız ben burdaki butonlara nasıl mouse üzerine geldiğinde renk değişecek şekilde link vericem onu anlatabilirseniz çok sevinirim. photoshopta yapımı varmış. birkaç derste gördüm tam olarak olmuyor eksik birşeyler anlatıyorlar sanıyorum. tam olarak istediğim css ten yaptığımız gibi mouse üzerine gelince renk değişimidir. ama bunu photoshoptan yapmak... bilgilendirebilirseniz çok sevinirim.. şimdiden çok çok teşekkürler...
teşekkürler, Allah razı olsun. sizden güzel şeyler öğreniyoruz
nice work..basit ama canlı olmuş..

Yukarı Git