Photoshop ile Blog Tasarımı Yapma

Photoshop ile Blog tasarımı yapmak isteyen tasarımcılar için adım adım nasıl bir yol izleyeceğimizi bu yazımızda görüntülü olarak anlatacağız. Blog yazan tasarımcılar için, kendi blogunu photoshop ile tasarlama şansı büyük oranda doğacaktır. Photoshop ile site çizme sizlerin çok işinize yarayacak ve eliniz hazır temalara mahkum olmaktan kurtulacak.  

Eğitime aşama aşama devam etmek istedim. Bu yüzden basit ve sade görünüşlü bir blog tasarımı için işe öncelikle karakter ve paragraf sitillerinden başlayalım. 

Öncelikle sizlere daha fazla ilham vermesi için aşağıda anlatacağımız photoshop ile blog tasarımı yapma konusundaki çalışmanın son şeklini paylaşıyorum:

Blog tasarımı için alıntı yaptığımız kaynak malzemelerin listesi şöyle:

• Free Font Sansation gelen Bernd Montag.
• 26 Piksel Desen Tekrarlanabilir gelen PSDfreemium.
• Ücretsiz Sosyal Medya Simgeleri gelen Daniele Selvitella.
• El İmleci Simgesi gelen PSDfreemium.
• Stok fotoğraf: Hasat 1 gelen mordoc.
• Stok fotoğraf: New York Sokakları 3 gelen lonniehb.
• Stok fotoğraf: Papatya Yaş gelen SteveFE.
• Stok fotoğraf: ufukta Bir ağaç gelen Ydiot.
• Stok fotoğraf: Satış rakamları gelen wagg66.
• Stok fotoğraf: vakit nakittir! gelen knox_x.

TUVAL NASIL YAPILIR?

Adım 1

Bu tasarımda, biz kullanacağız 960 gs olarak kendi çerçevesi. Ana sayfa şablonu ve zip dosyası içinde, photoshop dosyası arayın. Açın ’12 Sütun Kılavuz’ dosyasını Photoshop.

Göz simgesini tıklatın için 12 Col Izgara katmanı gizlemek için; ihtiyacımız olacak değiliz şimdi bu.

Adım 2

Geçerli tuval boyutu çok küçük. Tıklayın Image > Canvas Size (ya Ctrl + Alt + C). Ekleme daha büyük bir boyut ayarlamak için emin olun ve onun çapa noktası için merkezi.

Adım 3

Hit Ctrl + R ortaya çıkarmak için cetvel. Tıklayın Görünüm > Yeni Kılavuzu yapmak için bize yardımcı olacak yeni kılavuz doğru tasarım. Seçin Dikey ve at Position: 185 px yapmak için dikey bir kılavuz 185 px tuval sol üst köşede.

Adım 4

Başka çizmek rehberi / dikey pozisyon 150 px, 1095 px ve 1130 px.

Aşağıda bizim nihai içinde kılavuzunda tuval.

RENK TEMASI NASIL HAZIRLANIR?

Adım 5

Bu tasarım için, biz kullanacağız, güzel bir renk kombinasyonu Colorlouver. Tıklayın Önizleme linki renk kombinasyonunu açmak için bir jpeg dosyası.

Kombinasyon ve renk kaydetmek Photoshop dosyası içine yerleştirin. Yerleştirerek görüntü içinde doğrudan tuval örnek verebiliriz rengini daha hızlı ve daha kolay.

Arka Plan Hazırlanıyor

Adım 6

Seçin Arka plan tabaka ve üstüne kilidi tıklayın Katmanlar paneli kilidi açın. Çift rengini değiştirmek için küçük resme tıklayın.

Tıklayın ikinci rengi, #948371, seçin.

Adım 7

Dikdörtgen bir şekil çizmek tuval üstünde. Bu ikinci olacak arka plan.

Adım 8

En küçük birimidir seçilir. İçinde Seçenek Bar, açık Dolgu Renk kutusunu işaretleyin ve sonra tıklatın renk tekerleği simge. Zaman Renk Seçici iletişim kutusu açıldığında, ilk renk tıklatın seçin. Onun İnme renk seçin Yok.

Adım 9

Yeni bir layer oluşturun ve ardından üst tuval rectangular marquee tool kullanarak. Aktive gradient aracı ile doldurun radyal degrade beyazdan siyaha. Emin olun degrade ortalanır tuval üstünde.

Onun değişim Karışım modu için Ekran azaltmak Opaklık için 37%.

Adım 10

Yeni bir layer oluşturun ve adını ‘gölge’.

Beraberlik alt kısmında dikdörtgen bir seçim ikincil arka plan gibi gösterilir. Tıklayın Edit: Dolgu. SetKullanımı için Siyah. Tıklayın TAMAM için seçili alanı beyaz ile doldurun.

Adım 11

Bunu yumuşatmak kullanarak Gaussian Blur. Tıklayın Filter > Blur > Gaussian Blur.

Adım 12

Tutun Alt ve sonra imleci arasında gölge ve üst arka plan katman. Bırakmadan Alt anahtarı için tıklayın convert tool, Kırpma Maskesi. Dönüştürerek Kırpma Maskesi, gölge şimdi içeri giriyor üst arka plan.

Adım 13

Gölge düşürmek Opaklık için 50% bunu yapmak için ince. Aşağıda, içinde sonucu görebilirsiniz% 100 büyütme.

Adım 14

Her zaman iyi bir fikir koymak için bu katmanlar bir grup. Bunu yapmak için, tüm katmanları seçinve sonra tıklatın Ctrl + G.

Başlık

Adım 15

Bir dikdörtgen çizin üst tuval gibi gösterilir.

Adım 16

İçinde Seçenek Bar ayarlayın İnme renk #af9f8e.

Adım 17

Onun Dolgu renk seçin doğrusal degrade gelen #d0c4b9 için #a89c91.

Aşağıda neden% 100 görünüm.

Sitenin Adı

Adım 18

Site ekle kişinin adının sol tarafında tasarım. Gözlemlemek yerleşimi olarak aşağıda gösterilmiştir. Çift tıklatın ve metin ekleyin Gölge. Onun için yazı tipi kullanın Sansation.

Menü

Adım 19

Çizmek diğer tarafta menüler, menü çubuğunun. Kullanım font Sansation 14 pt. Yine dikkat edin yerleşimler.

20. Adım

Aktif için menü belirledi kalın yazı tipi.

Adım 21

Etkinleştir Çokgen aracı ve set Taraf için 3. Üçgen şekil çizin ile Dolgu: #3d3123 ve İnme: Yok. Ekle Katman Stili > Drop Shadow.

Adım 22

Vurgulayalım, etkin menü altında bir satır ekleyerek. Aktive Satırı aracı ve ağırlık set 5 px. Seçin#f76b6a onun için Dolgu olmadan, İnme.

Koyun sağ çizgi etkin menü altında ekleyin ve 1 px alanı için alt menü çubuğu.

Kullanma Karakter Stilleri

Adım 23

Kurtaralım karakter ayarı gibi bir Karakter Stili. Bu özellik basitleştirilmiş bir sürümüdür Karakter Stilleri Indesign'da. Onu kurtarmak için etkinleştirin ve ardından metin ‘Yeni Karakter Stili’ simgesi.

Çift yeni Karakter Stili tıklatın ve aşağıdaki ayarları kullanın.

Adım 24

Diğer menü seçin ve sonra tıklatın Karakter Stili uygulayabilirsiniz. Bulursanız bir yanındaki artı işaretini Karakter Stili demektir ki, karakterin farklı bir ayar. Ayarlarını geçersiz kılmak için tıklatın dairesel ok simgesine tıklayın.

Adım 25

Önceki adımı tekrarlayın yapmak için yeni bir Karakter Stili, etkin menü.

Adım 26

Bu yüzden, ne Karakter Stilleri kullanarak nokta? Karakter Stilleri bize yardım merkezileştirmek karakter ayarı. Biz sadece edit Karakter Stilini düzenlemek için her kullanarak metin o tarz. Bakın aşağıda bir örnek. Eğer biz yazıtipini düzenle içinde Karakter Stili Üst Menü - Normal için Corbel, tüm normal menü otomatik olarak değiştirildi Sehpası.

Adım 27

Yeni bir layer oluşturun ve menü çubuğu altına yerleştirin. Ctrl-menü çubuğunu tıklatın yeni seçim yapmak dayalı olarak kullandılar. İle doldurun siyah.

Adım 28

Seçimi kaldır kullanma Ctrl + D. Bunu yumuşatmak ekleyerek Gaussian Blur, Filter > Blur > Gaussian Blur.

Kaymak

Adım 29

Dikdörtgen bir şekil çizin 10 sütun genişliği ile (aşağıya bakınız).

Onun Dolgu rengi seçin #dfd1c2. Onun İnme seçin #c8baac boyutu 10 pt. Tıklayın, açılan küçük ok yanındaki satır ve emin olun önizleme Align İçinde seçilir.

Adım 30

Resmi yapıştırmak kareyi üst üste. Dönüştürmek Kırpma Maskesi vurarak Ctrl + Alt + G. Fotoğraf otomatik olarak içeri giriyor kaydırıcıyı çerçeve. Gerekirse, taşıyabilir ve yeniden boyutlandırabilirsiniz, resim etkilemeden çerçevesini.

Adım 31

Başka çizmek arkasında dikdörtgen şeklinde kaydırıcı ile aynı renk. Emin olun yapıştırmak için dışarıdaki rehberi. Ekle Katman Stili > Desen Kaplama kullanarak piksel desen gelenPSDfreemium. Aşağı sesi onun Opaklık yapmak onun ince.

Adım 32

Dikdörtgen bir şekil çizmek yukarıdaki şekli ile Dolgu: #b3aca5 ve kontursuz. Hit Ctrl + T ve sonra döndürün 45°. Convert katman şekli Kırpma Maskesi.

Adım 33

Yinelenen şekli ve yeniden boyutlandırabilir. Onun değişim Dolgu daha koyu bir renk. Convert katman şekli Kırpma Maskesi.

Adım 34

Elliptical marquee başka çizmek için ok diğer tarafta.

Adım 35

Ctrl-slayt'ı tıklatın yeni seçim yapmak için çerçeve. Yeni bir layer oluşturun ve dönüştürünKırpma Maskesi. İle seçim doldurun siyah.

Adım 36

Deselect (Ctrl + D) sonra yumuşatmak bunu kullanarak Gaussian Blur.

Azaltabilirsiniz gölge saydamlık gerekirse.

Adım 37

Yuvarlak köşeli dikdörtgen çizmek köşesinde slider ile Dolgu #c8baac.

Adım 38

Bir daire çizin şeklin içine. Ayarlayın İnme için siyah Boyutu 1 puan ve Dolguyu kaldırmak.

Adım 39

Seçin daire kullanma yolu Yol Seçimi aracı. Shift + Alt-sürükle yolu bunu çoğaltmak için.

Tekrar çizmek için bu çevrelerin daha fazla.

Adım 40

Birini seçin daire yolları. Hit Ctrl + Shift + J bunu kesmek için yeni bir layer olarak çoğaltın.

Adım 41

İçinde Seçenek Bar, onun kaldır İnme ve onun değişim Dolgu bir radyal eğim #e38989 için #bb5c5c. Ekle Layer Style > Outer Glow ve Gölge.

Adım 42

Beraberlik slider altında bir oval seçim. Yeni bir layer oluşturun ve ile doldurun siyah.

Adım 43

Deselect (Ctrl + D). Bunu yumuşatmak kullanarak Gaussian Blur.

Alt Arka Plan

Adım 44

Başka çizmek için dikdörtgen şeklinde alt arka plan. Aynı Dolgu ve İnme renk olarak kaydırıcıyı şekli.

Her zaman olduğu gibi, çok dikkatli olmak onun yerleştirme ile. Biz bunu istiyoruz kapsayacak şekilde her kılavuzu tuvalde.

Ekle Katman Stili > Desen Kaplama.

Aşağıda neden% 100 büyütme.

Adım 45

Seçin uper alan rectangular Marquee tool kullanarak.

Adım 46

Yeni bir katman oluşturun ve o yerde şekil arkasında. İle seçim doldurun siyah. Hit Ctrl + T, sağ tıklayın ve seçin Perspektif.

Sürükle üst köşeleri dışarı doğru çekiniz.

Sağ tıklayın ve tekrar seçin Ölçek. Sürükle üst kolu aşağı.

Sağ tıklatın ve seçin Çözgü. Sürükle sol ve sağ segment içe.

Bunu yumuşatmak kullanarak Gaussian Blur.

Aşağı sesi Opaklık için 20%.

Adım 47

Beyaz bir rectangule içinde arka plan. Bu arka plan olacak sitenin ana içeriğinin.

Ekleme alanı 10 px, sağ, sol ve üst tarafı arka plan. Aralık kolay olmalı çünkü biz yaptık rehberi adımlar erken. Ekle Layer Style > Outer Glow.

Adım 48

Add yeni bir kılavuz, 25 px üst kısmından şekli.

Bölüm Başlığı

Adım 49

Yeni bir Karakter eklemek için Stil sayfası bölüm başlığı ve açıklaması.

Ekleme bölümünde başlık ve açıklama aracı (Type tool kullanarak. Uygula biz daha önce yapmış. Eklediğinizden emin olun 25 px alanı üst kısmından, arka plan kılavuzu yardımıyla daha önce yapılmış.

Adım 50

Beraberlik bir satır altında 5 px sitenin sahip açıklama Dolgu: #938270 ve İnme: Yok.

Blog Post

Adım 51

Yapmak için başka bir Karakter Stilini gönderi başlığı.

Adım 52

Ekleme yazı başlığı ve uygulamak önceki Karakter Stili.

Adım 53

Bir dikdörtgen çizin şekli başlığı altında 4 sütunlu width. Set beyaz onun Dolgu ve #bebebe onunİnme. Ekle Layer Style > Stroke.

Adım 54

Resim yapıştırma şekil üstünde. Dönüştürülebilmesi için Kırpma Maskesi (Ctrl + Alt + G).

Adım 55

Yuvarlak köşeli dikdörtgen çizin ile Dolgu: #8e8380 ve İnme: Yok. Dönüştürmek Kırpma Maskesi.

Adım 56

Yapmak için yeni Karakter Stilleri blog meta.

Adım 57

Meta veriler ekleyin metin ve şekil üstünde Karakter Stili uygulayın biz daha önce yapmış.

Adım 58

Etkinleştir Türü aracını tıklatın ve sürükleyin yapmak için bir metin kutusu. Set 4 sütun genişliğini. Tıklayın Type > Yapıştır Lorem Ipsum ile doldurmak için otomatik oluşturulan Lorem Ipsum Photoshop.

Adım 59

Yeni bir Paragraf yapmak için Stil karakter içeriği. Yeni simgeyi tıklayın Paragraf Stilleri paneli.

Çift tıklatın ve kullanmak Paragraf Stili bu aşağıdaki ayarı.

Adım 60

Bu stili uygulamak post içerik. Ayrıca deneme ile Girinti ve Aralıklar ayarlar.

Web tasarımı için, devre dışı bırakmak Heceleme.

Adım 61

Yuvarlak köşeli dikdörtgen çizin ile Dolgu: #8e8380 ve İnme: Yok. Ekle Katman Stili > Desen Kaplama. Tutarlılık için, aynı desen kullanımı, kayar kapaklı.

Adım 62

Bir düğme ekleyin etiket. Öneririm karakter stili olarak kaydedin. Bu sayede sadece diğer düğmeler için kolayca kullanabilirsiniz.

Adım 63

Önceki düğmesi için normal bir durumdur. Diyelim bir kopyasını oluşturun ve rengini değiştirmek için #f76b6a. Ayrıca, kendi türü etiket kalın.

Adım 64

Yerleştirin sonrası içinde bir hit grup ve ardından Ctrl + J bunu çoğaltmak için. Alt-sürükle grup çoğaltmak için.

Elliptical marquee yapmak için daha fazla mesaj. Değiştirmeyi unutmayın resim ve her yazının başlığı.

Adım 65

Yinelenen Daha Fazla Bilgi Edinin düğme ve değişim onun için etiket sayısı. Biz sayfa gezinti için kullanmak olacak. Ayarlamayı unutmayın biri hover düğmesi durum.