Dinamik bir web site yapmanın yolu

Adım 1 - 960 Izgara Sistemi Şablon İndir

Ben oluşturmak tasarımları neredeyse tüm 960 Grid Sistemi dayanmaktadır. Yani, biz başlamadan önce biz ızgara sistemi Photoshop şablonları indirmek gerekir. You can
bunları bulmak 960.gs resmi web sitesi. Basitçe zip dosyasını açmak ve PSD şablonları arayın. Sen olduğunu göreceksiniz
şablonlar iki farklı türde: bir 12_col ve diğer bir 16_col olup. Adından da anlaşılacağı gibi bu ikisi arasındaki fark, biri 12 sütun ve 16 sütun ile diğeri ile yapılır edilir. Eğer 3 kutuları tasarım 12 3 tarafından divisable olduğu için, 12_col ızgara seçsin varsa, biraz daha açıklamak için, ya 12_col ya 16_col ızgara ya da tasarım 4 kutu varsa, seçtiğiniz çünkü 12 ve 16. 4 ile divisable edilir. Bu öğretici takip ederseniz, eylem bu göreceksiniz.

Adım 2 - Yapı Tanımı

Bizim PSD ızgara şablonu açıp çizim başlamadan önce, ilk olarak sitemizin yapısını tanımlamak gerekir. Biz bir düzen içinde bir düzen var, çünkü bu karmaşık yapının biraz daha fazladır. Bu yukarıdaki resimde örnek görebilirsiniz.

Adım 3

Bizim site yapısını tanımladığınız sonra biz ilerlemeye hazırsınız. Sizin 16_col.psd şablonu açın. Görüntü> Tuval boyutu gidin. 1200px genişliğinde ve 1700px yüksek tuval ayarlayın. # Ffffff için arka plan rengini ayarlayın.

Adım 4

Şimdi bir dikdörtgen tam tuval genişliğinde ve 80px yüksekliğinde Rectangle Tool seçin ve çizin. # Ddddddrenk ile doldurun.

Aşama 5

+ Overlay. Ctrl dikdörtgen ve set Katman modu üzerinde yeni bir katman oluşturun dikdörtgen katmanıtıklatın. Şimdi dikdörtgen seçilir. Bir 600px yumuşak bir fırça seçin beyaz rengini ayarlamak ve fırça seçimi üzerinde biraz kenarı ile birkaç kez tıklayın, görüntü üzerinde gösterildiği gibi. Bu şekilde, bir güzel, ince bir ışık etkisi yaratır. Ayrıca bu iki katmanı bağlayabilirsiniz.

Aşama 6

Yeni katman. Resimde gösterildiği gibi, tekrar Rectangle aracını seçin ve ince bir koyu gri dikdörtgen çizin.

Adım 7

Dikdörtgen aracı seçiliyken, üst dikdörtgenin altında 500px etrafında büyük bir kutu çizin. Bu 575px yüksek yapın ve # ffffff için # d2d2d0 bir gradient overlay, yön -90, Ölçek% 100 verir.

Adım 8

Şimdi Adım 5 açıklandığı gibi aynı ışık efekti oluşturmak için gidiyoruz. Bu tekniğin bir sürü kullanarak olacak; böylece bir dahaki sefere ben sadece etkisi için 5 Adım sevk edecektir.

Tüm güncel katmanları üzerinde yeni bir katman oluşturun. Ctrl + büyük dikdörtgen tıklatın. Resimde gösterildiği gibi, bir 600px yumuşak bir fırça seçin beyaz rengini ayarlamak ve seçimi üzerine fırça biraz kenarı ile birkaç kez tıklatın.

Adım 9

Yeni bir katman oluşturun ve 400px yüksekliğinde büyük bir dikdörtgen çizin. Bu, bir başlık bizim için kullanılır. # 2787b7 gelen # 258fcd için güzel bir mavi degrade ile doldurun.

Renk değişimi ne kadar zor olduğunu görüyor musunuz?

10. Adım

Başlık kutusunun altındaki koyu mavi 1px satırı ekleyin, gölge efekti uygulayabilirsiniz. Multiply, Opacity:% 65, Açı: -90, mesafe: 1px ve Boyut: 6px gölge kullanımı Blend modu için. Sonra, üzerinde yeni bir katman oluşturun ve koyu mavi birinin altında başka bir 1px beyaz bir çizgi çizin. Bizim içerik kutusu için keskin kenarlar oluşturabilirsiniz Bu şekilde. Temelde sadece farklı renkleri ile tasarım her kutuda bu sınır tekniği uygulayabilirsiniz.

Adım 11

Yeni bir katman oluşturun ve Rectangle Tool ile, resimde gösterildiği gibi, tuvalin üst kısmında bir 50px yüksek dikdörtgen çizin. Bu bizim navigasyon için kullanılacaktır.

Bir Damla gölge uygulayın. Resimde gösterilen değerleri kullanın.

Adım 12

Navigasyon için zamanı. Rounded Rectangle Tool kullanın ve 5px için yarıçapı ayarlayın. Bir dikdörtgen çizin # f6a836 ile doldurun ve aşağıdaki efektleri uygulamak:

İç Gölge - color: # ffffff, Blend modu: overlay, Opacity:% 60, Açı: 120 *, mesafe: 7px, Boyut: 6px.
İç kızdırma - Blend modu: Normal, color: # ffffff, Boyut: 4px. Her şey varsayılan bırakın.
İnme - Boyut: 1px, Pozisyon: inside, color: # ce7e01.

Şimdi Ctrl + tıklama ile dikdörtgeni seçin. > Modify> Contract seçin ve 1px girin gidin.

Üzerinde yeni bir katman oluşturun, bu kez daha küçük bir fırça boyutunu kullanarak 5. adımda anlatılan aynı etkiyi Yerleşimi ve oluşturmak için Blend modunu ayarlayın. Daha sonra navigasyon metin ekleyin.Ben "yok" olarak ayarlanır gezinme bağlantıları, tüm kapaklar ve Yumuşatma için Arial kullanılır.

Adım 13

Şimdi arama kutusu oluşturmasına izin. Rounded Rectangle Tool ile, yarıçapı 5px, ızgara düzeni sağ tarafında ve 4. adımdan üst gri şeritli ortasında konumlandırılmış bir arama kutusu oluşturun. Bu katman stilleri ekleyin:

İç Gölge - color: # 000000, Blend modu: Multiply, Opacity:% 9, Açı: 90 *, mesafe: 0px, Boyut: 6px.
İnme - Boyut: 1px, Pozisyon: inside, color: # dfdfdf.

Ben "arama" metin ve açık gri "GO" butonu eklendi. Bu nasıl görünmelidir olduğunu.

Şimdiye kadar katmanları bir sürü var ve biz yeni bir katman klasörü oluşturun ve "arama" adı olacaktır yani işler biraz organize etmek gerekir. Arama alanına olun tüm katmanları seçin ve sadece tıklayın + yeni bir klasör içine sürükleyin. Daha sonra biz güzel bir organize katman paletinde zorunda böylece klasörler içindeki diğer içeriği düzenlemek için gidiyoruz.

Adım 14

Şimdi yeni bir katman oluşturun ve "Sign Up" butonu arama alanına oluşturulan aynı şekilde çizmek - sadece yarım genişlikte. Navigasyon şerit ortasında arama alanı altına yerleştirin.

Yine Adım 5'ten etkisi yaratıyoruz.

Küçük yumuşak bir fırça boyutunu kullanın. Bu durumda, 45px idi.

Adım 15

Logo ve Slogan ekledikten sonra bu sitemizin şimdiki gibi görünmelidir nasıl.

Adım 16

Şimdi bizim katmanı organizasyonuna geri geliyorsun önceki birkaç adım bahsetti. Yeni bir boş katman klasörü oluşturun ve "top_bar" olarak adlandırın. Bu klasör içindeki düzeni üst (logo, slogan, arama alanına, navigasyon ve arka düğmesi kaydol) tüm grafik taşıyın.

Başka bir boş katman klasörü oluşturun ve "başlık" olarak adlandırın. Bu bizim başlık grafikler koyacağız yerdir. Bu nasıl görünmelidir olduğunu.

Adım 17

Biz sitede başka bir yerde aynı ışık efekti eklemek için gidiyoruz bu yüzden bizim başlık şu anda biraz düz görünüyor. Başlık kutusu (mavi) seçin. Üzerinde yeni bir boş katman oluşturun ve Overlay modunu ayarlayın.

Büyük bir yumuşak fırça 600px, renk # ffffff Pick ve navigasyon altındaki bölgede birkaç kez tıklatın.Ayrıca, daha fazla derinlik kazanmak için, biz siyah renk geçiş ve sadece başlığının alt kısmında aynı şeyi yapabilirsiniz. Vermek oa denemek!

Adım 18

Bu adımda ben başlık görüntülerin yansıması nasıl yarattığını size açıklayacaktır. Seçtiğiniz iki görüntü al, ben diğer iki şablonları Safari ekran kullanıldığında, bir aşağı büyütmek ve daha büyük biri arkasına yerleştirin. Iki katmanı kopyalayın ve Free Transform Aracı ile, diğeri o ilk görüntüyü çevirip. Bir kaç piksel aşağı hem görüntüleri Shift. Şimdi alt kısmı dışarıdan ilk orta bir seçim yapmak Rectangular Marquee Tool ile görüntü çevirdi. > Modify> Feather ve tipi 30px veya daha seçin gidin. Siz resimde gösterildiği benzer bir seçim olmalıdır. Delete tuşuna birkaç kez basın ve orijinal görüntü güzel bir soluk yansımasıdır yaratacaktır. İkinci görüntü için bu adımı yineleyin.

Şimdi bu iki görüntü biraz öne çıkması için, yeni bir katman oluşturun ve Overlay modunu ayarlayın. Adım 5'te açıklanan etki oluşturur.

Bu bizim başlık güzel bir slogan ve bazı düğmeleri ekledikten sonra nasıl görüneceğini olduğunu. "Başlık" katmanı içindeki tüm bu grafik koymak unutma

Burada işler ;) organize tutmak için Klasöre

Aşama 19

Eğer son görüntü önizleme bakarsanız, size içerik alanında güzel sekme olduğunu görebilirsiniz. Bu sekmeler oluşturmak için biz birkaç ekstra adımları gerçekleştirmeniz gerekir, ama kesinlikle buna değer.Birincisi, Rounded Rectangle Tool ile büyük bir dikdörtgen şekil oluşturmak. Yüksek 70px ve 10px veya isterseniz daha bir yarıçap olun. Şimdi alt yarıçapı kurtulmak ve bunun dışında mükemmel bir köşe yapmak zorunda. Doğrudan Seçim Aracı ve şekli yolda tıklayın. Dikey noktasını tıklatın ve Shift tuşunu basılı tutarak yatay eksen ile aynı seviyeye ulaşana kadar aşağıya doğru sürükleyin. Şimdiye kadar iyi ama hala deforme ediyor. Sen küçük kolu bakın. Üzerine tıklayın ve yolu noktaya yukarı doğru hareket ettirin.

Şimdi mükemmel bir köşesinde oluşturduk. Bu nasıl görünmelidir olduğunu. Sağ alt köşede için bu adımı yineleyin.

Adım 20

Çizgi aracını seçin ve 1px ayarlayın.

Adım 21

Shift tuşunu basılı tutarken gri ayırıcılar çizin.

Adım 22

Bazı simgeler, başlıklar ve her sekme için bir açıklama yerleştirin. WebAppers.com - Ben edinilebilir Ray Cheung simgeler kullanılır. Genellikle bir sekme daima aktiftir ve diğerleri inaktif vardır. Bizim bu açıklığa kavuşturmak için
tasarım, biz bunu gerçekleştirmek için bir yol bulmalıyız. Ben diğer simgeleri desatüre ve ilk aktif sekme renkli ve parlak tutarken başlık ve metin için opaklık azalır.

Adım 23

Etkin sekmeyi daha belirgin hale getirmek için, biz bir soluk beyaz bir arka plan vermek için gidiyoruz. Bunu yapmak için ilk olarak tüm nesneyi seçin ve sonra yalnızca ilk sekmesinin seçili olsun seçimden çıkarmak.

Bu seçimi gibi görünmelidir şeydir.

Küçük bir yumuşak fırça ile, beyaz bir arka plan boya.

Adım 24

Gölge ekleyin. Resimde gösterildiği gibi, tırnakların arkasına koyu gri dikdörtgen oluşturun.

Katman paletinin altındaki küçük simgesini tıklatarak bir vektör maskesi ekleyin.

Siyah renk ayarlama, büyük bir yumuşak fırça seçin ve dikdörtgen parçaları silme başlar. Sonuç olarak, bizim tırnakların arkasına güzel sahte bir gölge etkisi olsun.

Sonda detaylara dikkat. Sekmelerin altındaki bir 1px gri hat çizin. Daha önce açıklandığı gibi tekrar katman maskesi ve büyük bir yumuşak fırça ile hattın sağ ve sol uçlarındaki silin. Şimdi tırnakların arkasına bizim gölge izleyen bir güzel soluk hattı olsun.

Bu bizim sekmeleri görünmelidir nasıl.

Adım 25

Bu bizim ilk sekme için içerik tasarımı için zamanı geldi. Biz bir özellikli tasarım görüntü, güzel bir başlık ve bazı metin gerekir. Önce
özellikli görüntü yaratacaktır. Sanırım bu, bizim için güzel bir yığın fotoğraf efekti oluşturarak tasarım edginess kırmak için güzel olacağını düşündüm
tasarım görüntü özellikli. Bunu yapmak için, bir 1px açık gri çerçeveli beyaz bir dikdörtgen, ve çok ince bir gölge efekti çizin.

Şimdi bu katmanı kopyalayın ve Free Transform Aracı ile hafifçe döndürün. Bu bir kez daha yapın.

Sizin özellikli görüntü aktarma ve beyaz dikdörtgenler üzerine yerleştirin. Görüntü kutuları dışında akan Merak etmeyin, biz bu sorunu çözecektir. Üst dikdörtgen bir seçim yapın,> Değiştir> Sözleşme seçin ve5px eklemek için gidin. Bizim katman paletinin altındaki Hızlı Maske simgesini tıklatın seçilen özellikli görüntü katmanı ile. Burada resimde görüldüğü gibi güzel görüntü etkisi sınırlanır alacak.

Bu katman sırasını gibi görünmelidir nasıl.

Adım 26

Şeyler organize tutmak için unutmayın. Bu yüzden daha fazla katman klasörleri oluşturun ve palet düzenlemek. Bu ben yaptım nasıl.

Güzel bir başlık, bazı metin ve madde işaretli listeler ekleyerek, bizim web tasarım çalışmaları tamamlandı.Devam edelim.

Ve yine bazı katman organizasyonu.

Adım 27: Görüşler

Ben bu bir büyük olması gerektiğini düşündüm, bu yüzden ben şu ana bölümden sonra büyük bir kutu bu koyduk. İlk 220px yüksekliğinde büyük bir açık gri dikdörtgen çizin. Bir 1px gri kenarlık ver.

Sonra her taraftan 10px daha küçük bir başka parlak dikdörtgen çizin. Ayrıca 1px açık gri kenarlıkekleyebilirsiniz.

Sonunda bazı metin eklemek ve bitti!

Adım 28

Bu altbilgi için zamanı geldi. Büyük 400px yüksek, koyu gri dikdörtgen çizin.

Adım 29

Bazı ışık etkisi Adım 5'te tarif edildiği gibi aynı şekilde ekleyin.

Adım 30

Sonraki, altbilgi üzerinde 10px yüksek dikdörtgen çizin ve üst ve altta iki çizgi daha resimdeki gibi ekleyerek bazı ince efekti ekleyin.

Adım 31

Tekrar navigasyon alınacaktır çok alt kısmını oluşturun. Sen navigasyon üstten dikdörtgen kopyalayabilirsiniz
yerleştirilir, aşağı taşımak ve 40px yüksekliğinde yapmak. Tuvalin çok altında yerleştirin. Böylece tüm grafik sığacak bu noktada tuval genişletmek gerekebilir unutmayın. Bunu yapmak gerekiyorsa, sonra daGörüntü> Tuval boyutu gidin ve tüm düzeni uygun yüksekliğe ayarlayın.