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