Photoshop CS6'da Temiz ve Şık bir Blog Düzeni Tasarlayın
Bu derste size sürecini göstereceğim basit ve temiz bir tasarım blogu oluşturmak en son Photoshop'ı kullanarak. Yeni kullanacağız Karakter Stilleri ve Paragraf Stilleri süreci hızlandırmamıza yardımcı olmak için.
Bu öğreticiyi takip etmek için aşağıdaki kaynaklara ihtiyacınız olacak:
- Bernd Montag Ücretsiz Font Sansation.
- PSDfreemium'dan 26 Tekrarlanabilir Piksel Deseni.
- Daniele Selvitella'dan Ücretsiz Sosyal Medya Simgeleri.
- gösteri
Tuvali Hazırlamak
Aşama 1
Bu tasarımda 960 g / s kullanacağız. Şablonu ana sayfasından ve zip dosyasının içinden indirin, photoshop dosyasını arayın. Photoshop'ta '12 Sütun Izgarası 'dosyasını açın.
Gizlemek için 12 Sütun katmanının göz simgesini tıklatın; şimdilik buna ihtiyacımız olmayacak.
Adım 2
Geçerli tuval boyutu çok küçük. Click Resim> Tuval Boyutu (veya Ctrl + Alt + C). Daha büyük bir boyut ekleyin ve bağlantı noktasını merkeze ayarladığınızdan emin olun..
Aşama 3
Cetveli ortaya çıkarmak için Ctrl + R tuşlarına basın. Click Görünüm> Yeni Doğru bir şekilde tasarlamamıza yardımcı olacak yeni bir rehber hazırlamanız için rehber. seçmek Dikey ve Pozisyonda: 185 px tuvalin sol üst köşesinden dikey bir 185 px dikey kılavuz yapmak için.
4. adım
Konumuna başka bir dikey kılavuz çizin 150 px, 1095 px ve 1130 px.
Tuvalin son rehberimiz aşağıda.
Renk Teması Hazırlama
Adım 5
Bu tasarım için, Colorlouver'den hoş bir renk kombinasyonu kullanacağız. Renk kombinasyonunu bir jpeg dosyası olarak açmak için Önizleme bağlantısına tıklayın..
Renk kombinasyonunu kaydedin ve Photoshop dosyasının içine yerleştirin. Görüntüyü doğrudan tuvale yerleştirerek rengini daha hızlı ve kolay bir şekilde örnekleyebiliriz..
Arka Plan Hazırlama
6. adım
seçmek Arka fon tabaka ve açmak için Katmanlar panelinin üstündeki kilit simgesine tıklayın. Rengini değiştirmek için küçük resme çift tıklayın..
İkinci renk tıklayın, # 948371, seçmek için.
7. adım
Tuvalin üzerine dikdörtgen bir şekil çizin. Bu ikinci arka plan olacak.
8. adım
Seçili şekli koru. İçinde Seçenek çubuğu, açık doldurmak Renk kutusunu ve ardından renk tekerleği simgesi. Renk Seçici iletişim kutusu açıldığında, seçmek için ilk rengi tıklayın. Onun için inme renk seçimi Yok.
9. adım
Yeni bir katman oluşturun ve sonra dikdörtgen seçim çerçevesi aracını kullanarak üst tuvali seçin. Etkinleştir gradyan aracı ve doldur radyal eğim beyazdan siyaha. Degradenin tuvalin üstünde ortalandığından emin olun.
Değiştir Harman kip için Ekran ve azaltmak opaklık için % 37.
10. Adım
Yeni bir katman oluşturun ve 'gölge' olarak adlandırın.
Gösterildiği gibi ikincil arka planın dibine dikdörtgen bir seçim çizin. Click Doldurmayı düzelt. Set kullanım için Siyah. Click tamam seçimi siyahla doldurmak için.
11. adım
Gauss Bulanıklığı kullanarak yumuşatın. Click Filtre> Bulanıklaştır> Gauss Bulanıklığı.
Adım 1/2
Alt tuşunu basılı tutun ve imleci arasına yerleştirin. gölge ve üst arka plan katmanı. Alt tuşunu bırakmadan, tıklayın katmanı Kırpma Maskesi'ne dönüştür. Kırpma Maskesi'ne dönüştürerek, gölge şimdi üst arka plan içine gider.
13. adım
Gölge getirmek opaklık için % 50 ince yapmak için. Aşağıda sonucu% 100 büyütmede görebilirsiniz..
14. adım
Bu katmanları bir gruba koymak her zaman iyi bir fikirdir. Bunu yapmak için, tüm katmanları seç ve sonra Ctrl + G tuşlarına basın..
Başlık
15. adım
Üst tuval üzerine gösterildiği gibi bir dikdörtgen çizin.
16. adım
İçinde Seçenek çubuğu, set inme renk # af9f8e.
17. Adım
Onun için doldurmak renk, seç doğrusal gradyan itibaren # d0c4b9 ila # a89c91.
% 100 görünümdeki sonuç aşağıdadır.
Sitenin Adı
18. adım
Tasarımın sol tarafına sitenin adını ekleyin. Yerleşimi aşağıda gösterildiği gibi izleyin. Metni çift tıklayın ve ekleyin Düşen gölge. Yazı tipi için Sansation kullanın.
Menü
19. Adım
Menü çubuğunun diğer tarafına menüleri çizin. Yazı tipi Sansation 14 pt kullanın. Yerleşimleri tekrar fark et.
20. adım
Etkin menü için yazı tipini kalın olarak ayarlayın..
21. Adım
etkinleştirmek Çokgen aracı ve ayarla Yüzler için 3. Üçgen bir şekil çizin Doldur: # 3d3123 ve İnme: Yok. Eklemek Katman stili > Alt Gölge.
Adım 22
Altına bir çizgi ekleyerek aktif menüyü vurgulayalım. Etkinleştir Çizgi aracı ve ağırlığını 5 px. seçmek # f76b6a İnme olmadan Dolgusu için.
Satırı etkin menünün altına koyun ve menü çubuğunun altına 1 piksel boşluk ekleyin.
Karakter Stillerini Kullanma
23. Adım
Karakter ayarını Karakter Stili olarak kaydedelim. Bu özellik InDesign'daki Karakter Stillerinin basitleştirilmiş bir sürümüdür. Kaydetmek için metni etkinleştirin ve ardından 'Yeni Karakter Stili' simgesini tıklayın..
Yeni Karakter Stili'ne çift tıklayın ve aşağıdaki ayarı kullanın.
24. Adım
Diğer menüyü seçin ve ardından uygulamak için Karakter Stili'ni tıklayın. Karakter Stilinin yanında bir artı işareti bulursanız, karakterin farklı bir ayarı olduğu anlamına gelir. Ayarları geçersiz kılmak için dairesel ok simgesine tıklayın..
Adım 25
Aktif menü için yeni bir Karakter Stili yapmak için önceki adımı tekrarlayın.
Adım 26
Öyleyse, Karakter Stillerini kullanmanın amacı nedir? Karakter Stilleri, karakter ayarını merkezileştirmemize yardımcı olur. Bu stili kullanarak her metni düzenlemek için Karakter Stilini düzenleyebiliriz. Aşağıdaki örneğe bakınız. Karakter Stili içindeki font türünü düzenlersek Üst Menü - Normal Corbel’e normal menü otomatik olarak Corbel’e değiştirilir..
Adım 27
Yeni bir katman oluşturun ve menü çubuğunun altına yerleştirin. Şekline bağlı olarak yeni seçim yapmak için menü çubuğunu Ctrl tuşuna basıp tıklatın. Doldurun siyah.
Adım 28
Seçimi Ctrl + D ile kaldırın. Ekleyerek yumuşatın. Gauss Bulanıklığı, Filtre> Bulanıklaştır> Gauss Bulanıklığı.
kaydırıcı
Adım 29
10 sütun genişliğinde dikdörtgen bir şekil çizin (aşağıya bakın).
Onun için Renk doldurun seçmek # dfd1c2. Onun için inme seçmek # c8baac boy ile 10 puan. Satır önizlemesinin yanındaki küçük açılır oka tıklayın ve emin olun İçini Hizala seçildi.
30. adım
Bir resmi çerçevenin üstüne yapıştırın. Dönüştür Kırpma maskesi Ctrl + Alt + G tuşlarına basarak resim otomatik olarak kaydırıcı çerçevesinin içine girer. Gerekirse, çerçevesini etkilemeden resmi hareket ettirebilir ve yeniden boyutlandırabilirsiniz..
Adım 31
Aynı renkteki kaydırıcının arkasına başka bir dikdörtgen şekil çizin. En dıştaki kılavuza tutturduğunuzdan emin olun. Eklemek Katman Stili> Desen Kaplama PSDfreemium'dan piksel deseni kullanarak. Aşağı sesini opaklık ince yapmak.
32. adım
Şeklinin üzerine dikdörtgen bir şekil çizin Doldur: # b3aca5 ve İnme yok. Ctrl + T ve ardından 45 ° döndür. Katman şeklini şuna dönüştür Kırpma maskesi.
33. Aşama
Şekli çoğaltın ve yeniden boyutlandırın. Değiştir doldurmak daha koyu bir renge. Katman şeklini şuna dönüştür Kırpma maskesi.
34. adım
Diğer tarafa başka bir ok çizmek için aynı adımı tekrarlayın.
35. Aşama
Yeni seçim yapmak için slayt çerçevesini Ctrl tuşuna basarak tıklayın. Yeni bir katman oluşturun ve onu Kırpma maskesi. Seçimi ile doldur siyah.
Adım 36
(Ctrl + D) seçimini kaldırın ve ardından yumuşatmak kullanıyor Gauss Bulanıklığı.
Gerekirse gölge Opaklığını azaltabilirsiniz..
Adım 37
Kaydırıcının köşesine yuvarlatılmış bir dikdörtgen çizin # C8baac doldurun.
Adım 38
Şeklin içine bir daire çizin. Ayarla inme için siyah Boyut 1 nk ve Dolguyu kaldır.
Adım 39
Seçin daire kullanan yol Yol Seçimi aracı. ÜstKrkt + Altını kopyalamak için yolu sürükleyin.
Daha fazla daire çizmek için bunu tekrarlayın.
Adım 40
Daire yollarından birini seçin. Yeni bir katmana kesmek için Ctrl + Shift + J tuşlarına basın.
41. adım
İçinde Seçenek çubuğu, onun kaldır inme ve onun değiştirmek doldurmak bir radyal degrade # e38989 ila # bb5c5c. Eklemek Katman Stili> Dış Işıma ve Düşen gölge.
42. adım
Kaydırıcının altına eliptik bir seçim çizin. Yeni bir katman yap ve doldur siyah.
43. adım
Seçimi kaldır (Ctrl + D). Kullanarak yumuşatır Gauss Bulanıklığı.
Alt Arkaplan
Adım 44
Alt arka plan için başka bir dikdörtgen şekil çizin. Aynı kullanın doldurmak ve inme kaydırıcı şekli olarak renk.
Her zaman olduğu gibi, yerleştirme konusunda çok dikkatli olun. Tuval üzerindeki her rehberi örtbas etmek istiyoruz.
Eklemek Katman Stili> Desen Kaplama.
% 100 büyütmede sonuç aşağıdadır.
Adım 45
Dikdörtgen Seçim Çerçevesi aracını kullanarak üst alanını seçin.
46. adım
Yeni bir katman oluşturun, şeklin arkasına yerleştirin. Seçimi ile doldur siyah. Ctrl + T tuşlarına basın, sağ tıklayın ve seçin Perspektif.
Üst köşelerini dışa doğru sürükleyin.
Tekrar sağ tıklayın ve seçin ölçek. Üst tutamacı aşağı sürükleyin.
Sağ tıklayın ve seçin eğrilik. Sola ve sağa segmenti içe sürükleyin.
Kullanarak yumuşatır Gauss Bulanıklığı.
Sesi kıs opaklık için % 20.
47. adım
Arka plan içine beyaz bir dikdörtgen çizin. Bu, sitenin ana içeriği için arka plan olacak.
Arka planın soluna, sağına ve üst tarafına 10 piksellik bir boşluk ekleyin. Boşluklar kolay olmalı çünkü kılavuzu ilk adımlarda yaptık. Eklemek Katman Stili> Dış Işıma.
48. adım
Yeni bir kılavuz ekleyin, şeklin üst kısmından 25 piksel.
Bölüm başlığı
49. adım
Sayfa bölümü başlığı ve açıklaması için yeni bir Karakter Stili ekleyin.
Yazım aracını kullanarak bölüm başlığını ve açıklamasını ekleyin. Daha önce yaptığımız stilleri uygulayın. Daha önce yapılan kılavuzun yardımıyla arka planının üst tarafından 25 piksel boşluk bıraktığınızdan emin olun..
Adım 50
Sitenin açıklamasına altında 5 piksellik bir çizgi çizin. Doldurun: # 938270 ve İnme: Yok.
Blog yazısı
Adım 51
Gönderi başlığı için başka bir Karakter Stili yapın.
Adım 52
Bir yazı başlığı ekleyin ve önceki Karakter Stilini uygulayın.
53 adım
Başlığın altına 4 sütun genişliğinde bir dikdörtgen şekil çizin. Set beyaz onun için doldurmak ve #BEBEBE onun için inme. Eklemek Katman Stili> Kontur.
54. adım
Şeklin üstüne bir resim yapıştırın. Kırpma Maskesine Dönüştür (Ctrl + Alt + G).
Adım 55
Yuvarlatılmış bir dikdörtgen çizin: Doldurun: # 8e8380 ve İnme: Yok. Dönüştür Kırpma maskesi.
Adım 56
Blog meta verileri için yeni Karakter Stilleri yapın.
Adım 57
Şeklin üstüne meta veri metni ekleyin ve daha önce yaptığımız Karakter Stili'ni uygulayın.
Adım 58
etkinleştirmek tip Metin kutusu oluşturmak için aracı tıklatın ve sürükleyin. Genişliğini 4 sütun olarak ayarlayın. Click Yazım> Lorem Ipsum Yapıştır Photoshop'tan otomatik olarak üretilen Lorem Ipsum ile doldurma.
Adım 59
Karakter içeriği için yeni bir Paragraf Stili yapın. Paragraf Stilleri panelinde yeni simgeye tıklayın.
Paragraf Stili'ne çift tıklayın ve aşağıdaki ayarı kullanın.
Adım 60
Bu stili yazı içeriğine uygulayın. Girinti ve Boşluk ayarları ile de deneyebilirsiniz.
Web tasarımı için, Heceleme'yi devre dışı bırakın.
Adım 61
Yuvarlatılmış bir dikdörtgen çizin: Doldurun: # 8e8380 ve İnme: Yok. Eklemek Katman Stili> Desen Kaplama. Tutarlılık için, kaydırıcıdakiyle aynı deseni kullanın.
Adım 62
Bir düğme etiketi ekleyin. Bunu karakter stili olarak kaydetmeni öneririm. Bu şekilde, diğer düğmeler için kolayca kullanabiliriz.
Adım 63
Önceki düğme normal durum içindir. Kopyalayalım ve rengini değiştirelim. # f76b6a. Ayrıca, etiket türünü kalın olarak ayarlayın..
Adım 64
Gönderiyi bir gruba yerleştirin ve kopyalamak için Ctrl + J tuşlarına basın. Grubu çoğaltmak için Alt tuşuna basıp sürükleyin.
Daha fazla gönderi yapmak için aynı adımı tekrarlayın. Her yayının resmini ve başlığını değiştirmeyi unutmayın.
Adım 65
Çift Daha fazla oku düğmesine basın ve etiketini sayı olarak değiştirin. Sayfayı gezinmek için kullanacağız. Düğmeden birini asılı duruma getirmeyi ayarlamayı unutmayın.
Adım 66: Altbilgi
Altbilgi üzerinde çalışmaya başlayalım. Bir widget başlığı ve açıklaması ekleyin.
Adım 67
Bağlantı ekleyin ve altına 1 piksellik bir çizgi çizin. Set Doldurun: Yok ve İnme: # 8e8380.
Adım 68
Click Daha fazla seçenek düğmesine basın ve seçin kesik çizgi.
Adım 69
Widget'a daha fazla bağlantı ekleyin.
Adım 70
Widget'ı çoğalt.
71. adım
Ayrıca vurgulu koşulu da eklemeliyiz. Bağlantının birini kalın olarak ayarlayın.
Bu etkin bağlantının altına, 5 piksellik bir satır ekleyin. Rengini olarak ayarla # f76b6a. Tutarlılık için, bu bağlantının görünümü menü çubuğundaki aktif menüye benzer.
Adım 72
Alt alana başka bir dikdörtgen ekleyin. Ayarla doldurmak için # 3d3123.
Alt Bilgi
73. adım
Kullanarak altbilgi bilgisi ekle tip aracı. Karanlık ver Düşen gölge arka planına kontrast eklemek için.
Sosyal ağ
Aşama 74
Daniele Selvitella'dan bazı sosyal medya simgeleri ekleyin. Eklemek Katman Stili> Dış Işıma.
75. Aşama
Normal simge sesi kısmak % 50. Vurgulu koşulu için, sadece devam edelim opaklık en 100%.
76. adım
Serbest el imleci simgesi alın ve en küçük el imlecini etkin veya vurgulu bağlantının üstüne getirin.
Son sonuç
Bu bizim nihai sonucumuz. En yeni Photoshop sürümünün bir web düzeni tasarlamak için bazı ilginç özelliklere sahip olduğunu görebilirsiniz. Karakter Stilleri ve Paragraf Stilleri her web tasarımcısı için önemli bir gelişmedir.
- gösteri
- Kaynak İndir