Web 2.0 site tasarımı
NOT: PSD indirebilirsiniz Bu eğitimde sayfanın alt kısmında kullanılan dosyaları.
Photoshop yeni bir belge oluşturarak şeyler başlamak olacaktır: 1000px tarafından 980px yüksek, şeffaf bir arka plan üzerine geniş. Sonra üç ayrı dikdörtgen blok tuval genişliği boyunca, kendi katman her uzanan oluşturur. İlk kısım (# FFFFFF), 72 px yüksek beyaz ve tuvalin üstündeki yerleştirilir. Biz bar 158px yüksek bir portakal (# FF7200) yaratacağız beyaz çubuğu Doğrudan altında. Son olarak, koyu gri (# 2E2926) ile 750px yüksek blok kalan tuval doldururuz.
Adım 1
Organizasyon aklı tutmak ilgi olarak,'s zaman yeni katmanlar etiket bırakın. Katman biz ", turuncu dikdörtgen" Üstbilgi "ve kahverengi dikdörtgen" Body "adlı olacaktır Logo Yerleştirme isim olacak beyaz dikdörtgen içeren. Şimdi "Logo Yerleştirme" katmanına dikkatimizi çevirmek gerekir. Bu katmanı seçerek başlayın ve Layer> Layer Style menüsünü (veya çift Katmanlar panelinde katman başlığının alanının sağ tıklayarak) ve Drop Shadow ve aşağıdaki Gradient Overlay ayarları uygulamak:
Adım 2
Hala "Logo Yerleştirme" katman üzerinde çalışan, şimdi VoiceTrader metin ekleyeceğiz ve bir logo tedavi verin. 's An all-caps Helvetica Neue LTD Yoğunlaştırılmış yazı ile başlayan ile gidelim. Şimdi, ekstra ve # 2E2926 bir renk siyah bir font ağırlık vermek sadece "Ses" metni seçin. "Ile aynı mı BORSA", hafif ağırlık ve # 877A70 bir renk kullanarak.
Biz Layer Style penceresine gidin "VOICETRADER" metin ve tekrar katmanı seçersiniz logo türü için, aşağıdaki ayarları uygulayarak ince bir gölge eklemek için:
Adım 3
Stok görüntü siteleri tasarımları kadar spicing için büyük bir kaynaktır. Süre sanat ve hisse senedi alım arıyor bu yazının kapsamı dışındadır, ki mükemmel sadece VoiceTrader metin solunda oturan çalışacak basit bir vektör simge bulmayı başardılar. 's 12pt # 4A443E bu "Ana okur bir renk Düzenli Arial | | İletişim" ( "|" veya "boru" sadece "" tuşuna klavyenizdeki girin üzerindedir metin ayarlamak başka bir satırı ekleyin) gidelim. "Ana" ve "Karakter panelinde seçenek altını vurma seçerek, bu geçerli sayfa Ana sayfa gösterir gerekir.
Adım 4
Şimdi ben başlığı aydınlatmak için bulundu stok görüntü ile çalışacağız. Stock.XCHNG (http://www.sxc.hu ücretsiz) stok imagry için büyük bir kaynak ve ben http://www.sxc.hu/photo/964319 bu görüntü bulundu. Sizin tuval üzerine resim yerleştirin ve turuncu başlığının yüksekliğine ile küçültün. "Etkisi, sizin Silgi aracını çıkarırsanız, o karışık" tüy onu vermek için 150-10 bir sertlik ile uç boyutunu belirlemek ve aşağıdaki ok yön boyunca silmek:
Iyi arıyorsunuz! Şimdi bazı Çağrı metni başlığı baharat sağlar. 's 36pt adresindeki Helvetica Neue LTD kullanımı ve metin eklemek "gurur MÜŞTERİLERİMİZ" tüm kapaklar içinde olsun. Seçin "Pride" ve ekledi etkisi daha ağır bir yazı ağırlık verin:
Sonra, biz Layer Style penceresine gidip bizim "gurur MÜŞTERİLERİMİZ" metin bir gölge ekleyin:
"Gurur müşteri" metnini hemen altında, 12pt okuma "ve değer payları FİRMAMIZDA" metin ikinci bir çizgi aynı yazı tipi kullanılarak ekleyeceğiz. Aynı Drop Shadow ile birlikte bir Gradient Overlay uygulayın önceki adımda için FİRMAMIZ "VE DEĞER payları" kullanılmıştır:
Adım 5
Biz harekete sitesinin önemli alanlarına seyirci yönlendiren "düğmeleri iki" arama yaratacak başlığı bitirmek için. Bizim düğmesi temel şekli oluşturarak başlayalım. Biz 12px bir köşesinde yarıçaplı (aşağıda gösterilmiştir) butonuna istediğiniz şekli oluşturmak için Yuvarlak Dikdörtgen aracını kullanırız:
, Sizin Layer Style penceresini açın ve Drop Shadow, Gradient Overlay ve ayarları aşağıda gösterilen Strok stilleri ekleyin:
Sonra, "Helevetica Neue LTD boyutu 12pt içinde header background (# FF7200) olarak aynı turuncu, düğme metin" daha fazla bilgi ekleyin ve katmanı tarzı bir gölge ekleyin:
Bundan sonra, sadece düğmesine (ve metin) kopyalayın ve orijinal düğmesini sağa taşıyın. Yeni buton için Layer Styles penceresinde, gri için degrade bindirmenin rengini değiştirebilirsiniz. Gri koyu gölgeye yeni düğmenin metni açın. Şimdi bir şey aşağıdaki ekrana benzer olmalıdır:
Adım 6
Biz Alınlıklı şimdi biz Navigasyon üzerine konum bitirdim! Yeni bir katman oluşturmak ve "bu adlandırma başlayın Gezinme". , Sizin Rectangular Marque Aracı Kullanma doğrudan başlık tuvalin tamamını kapsayan genişliği altında 20px yüksek alanı seçin. Senin arka plan rengi (# 2E2926) ile seçim doldurun. , Sizin Burn aracı atın 30-0 bir sertlik ile uç boyutunu belirlemek ve yeni dikdörtgenin alt kısmındaki o fırça aşağıdaki ekrana göre:
Şimdi kullan metni ekleyebilirsiniz. All-kapaklar Arial Bold 12pt yazın "ANA", "HAKKINDA VOICE BORSA", "HİZMETLERİMİZ", "PAZAR", bir satır "FORUMLAR" ve "DESTEK" Her arasında boşluk standart bir miktarı ile üzerinde:
Yeni bir katmanda, bizim Rectangular Marque aracını alarak 20px ve yeterli "ANA" metnini kapsayan geniş uzun boylu küçük bir dikdörtgen oluşturarak bir örnek rollover devlet ekleyelim. Daha hafif bir gri (# 48403C) ile doldurun ve tekrar navigasyon arka planda kullanılan benzer bir degrade etkisi oluşturmak için Burn aracını kullanabilirsiniz:
Adım 7
Ile kullan tamamlamak, bu sayfanın Vücut zamanı. Let's kez daha yeni bir katman oluşturun ve sayfanın altına, tüm tuval üzerinde kapsayan NAV alt bir alanı seçmek için Dikdörtgen Marquee aracını kullanın. Arka plan (# 2E2926) olarak aynı renk ve sonra Dodge aracını kullanarak bu seçimi doldurun (ile ucu 150px ve 0 bir sertliği) aşağıdaki okları göre alan koyulaştırmak için ayarlayın:
Şimdi görsel iki ayrı Navigasyon ve Vücut bölümler arasında küçük beyaz dikey çizgi ekleyeceğiz. Yeni bir katmanda, 1px bir boyutu ve ön planda beyaz ayarlı Kalem aracını getirmek. "Shift" tuşuna basın ve tuval bir tarafı diğerine düz bir çizgi sürükleyin. Eğer tam olarak Nagivation bölümün alt ile uyumlu değil Drop% 45 bu tabakanın şeffaflığını ve yukarı veya aşağı dürtmek:
Adım 8Başlayalım içeriğindeki sözlerine ekledi. Ben ve başka bir site değerli hisse senedi simgesini buldum yerleştirir biraz görsel yumruk bazı edilir metin yanında için. In 14pt Arial ve # 9D9A99 bir renk, Ses ticaret, Kişisel Danışman Telekom hisselerinde için metin "Welcome to add" Normal:
Şimdi "içerik paragraf için bir alan yaratacağız yapılacak. Bir 12pt yarıçapı bir alan 373px geniş ve yüksek 144px seçmek için ayar ile, senin Yuvarlak Dikdörtgen aracını kullanın ve açık gri (# 3F3935 doldurun):
Senin Layer Style penceresini gidin ve Drop Shadow ve Stroke ayarları altında geçerlidir:
Şimdi bir başlık beyaz 12pt Arial Kalın ayarlanmış ve vücut kopyası ile bazı dolgu içerik ekleyeceğiz 12pt turuncu bir ipucu (# CAB38A) düzenli Arial:
Tüm başlık ve gövde kopya ve orijinal sağında yeni grup taşımak ile birlikte bizim yeni oluşturulan paragraf Yinelenen. Tutucu başlık ve gövde metni kopyalayıp değiştirin farklı bir konuyu belirtmek için:
Adım 9
Biz zaten özel öğretmen, o yüzden çok fazla detay adımları açıklayan girmeyeceğim kurulan olduğunuz teknikleri çok kullanacağınız Bu adımda. Bizim büyük içerik bölgesi için arka plan oluşturarak başlayalım ... Bildirimde aşağıdaki ekranda olduğu içerik alan iki ayrı renkten oluşan bir yuvarlak dikdörtgendir. Bu yuvarlak dikdörtgen alan beyaz renkli oluşturarak, ve sonra çoğaltma yapılabilir ve gri (# 38322E için ikinci dikdörtgen renk değiştirme). Rasterize hem şekilleri ve uygun uçları kesmeye Dikdörtgen Marquee kullanın:
Yeni gri katman için aşağıdaki Layer Style ayarlarını uygula:
Gri alan ile devam eden basit bir giriş olduğu "Çözümlerimiz" okur ve sağ aşağıdaki simgesini eklemek başlığı ekleyelim bazı eyecandy için başlığı:
Artık beyaz şekli ile katmanı seçin ve Katman Stil penceresinde aşağıdaki ayarları uygulayın:
Bazı dolgu içeriği ile bu bölgeyi bitirelim. Ve gövde metni 12pt Arial ayarlanmış # A5826B bir renk ile bir başlık 18pt Arial içinde # FF7200, bir alt başlık 12pt Arial içinde # A38D71 bir renk kümesinin bir renk kümesi ekleyin. Başlık ve alt başlık solundaki aşağıdaki stok görüntü yerleştirin. Şimdi herşey aşağıdaki ekran gibi görünmelidir:
Adım 10
10 adım olarak, vücudumuzun paragrafın koyu yarısında içerik koyarak bitirmek. Geri katman nerede "Çözümlerimiz" ekledim gidin ve yuvarlak dikdörtgen 226px genişliğinde ve ve # 231E1B bir renk uzun 36px oluşturun:
Şimdi yeni oluşturulan şekli için aşağıdaki Layer Style ayarları uygulamak:
Kadar tam bir listesi var sekmeleri yinelenen ve sonra bir simge ve bazı etiket metin ekleyin:
Son Adım
En son adım olarak, altbilgi Daha önce yaptım aynı hileler kullanarak oluşturur. Rectangular Marque aracını kullanın ve küçük bir dikdörtgen 55px yüksek, tuval genişliği yayılma çekmek. Standart arka plan gri (# 2E2926) ile seçim doldurun ve yeni şeklin üstündeki Burn aracını kullanabilirsiniz:
Bazı altbilgi metin ekleme ve bitirdiniz konum:
Final öncesi:
İşte, size muhteşem bir web sitesi şablonu oluşturduk! Sadece öğrendiğim teknikleri kullanarak, artık web sitesi tasarımları sonsuz bir sayı oluşturmak için bilgi sahibi.
