Photoshop'ta Orman Esinlenerek Tumblr Teması Tasarlayın
Tumblr , kullanıcıların bir fotoğraf veya fotoğraf seti, bir video, bir fiyat teklifi veya yalnızca bir paragraf gibi web'e ait bilgi parçacıklarını kolayca yayınlamalarını sağlayan bir mikro-blog platformudur.
Genellikle WordPress gibi diğer bloglama platformlarına kıyasla kullanım kolaylığı nedeniyle çevrimiçi bir günlük olarak kullanılır.
Hem ücretsiz hem de prim olan bir sürü Tumblr teması var, ama hiç kendi tasarımınızı nasıl yapacağınızı merak ettiniz mi?
Bu derste, ormandan esinlenen bir Tumblr temasının nasıl oluşturulacağını, ahşap dokulardan, ince desenlerden ve modern tekniklerden (doğal ve modern unsurların hoş bir karışımından) yararlanmayı öğreneceksiniz.
Ne tasarlayacağız?
Photoshop'ta tasarlayacağımız tema dört alandan oluşuyor: ahşap kenar çubuğu, ana içerik alanı, sağ kenar çubuğu ve başlık.
Aşama 1
İlk adım, tasarladığınız her şeyle olması gerektiği gibi eskiz aşamasıdır. Wacom Bambu grafik tabletimi ve Photoshop'ta boş bir tuvali kullanarak, aşağıdaki tasarımı, bazı büyük öğelerle birlikte, fikirlerimi (dijital) kağıda dökmek için çizdim.
Adım 2
Fikri ortaya çıktığında, Photoshop'ta yeni bir belge oluşturun. (Aklınızda bulundurun, bu taş olarak ayarlanmamıştır. Tasarımda sıkışmış olursanız, geri dönüş yapabileceğiniz bir şeydir. Şahsen, başlangıçta planladığım birçok şeyi denemeye ve değiştirmeye eğilimliyim.) Aşağıdakileri kullandım. Photoshop'taki ayarlar:
Aşama 3
Bir sonraki aşama, bazı kılavuzları tuval üzerine koymaktır. Bu, tasarladığınız gibi temanın yapısını temiz tutmanıza yardımcı olacaktır. Sol kenar çubuğunun 200 piksel olmasını, ana içerik alanının 600 piksel olmasını ve sağ kenar çubuğunun 160 piksel olmasını ve bize 960 piksel genişliğinde olmasını istiyorum.
Aynı ayarları kullandıysanız, kılavuzlarınızı yatay olarak 200, 800 ve 960 piksellere yerleştirebilirsiniz. Bu tasarım sola hizalı olacak, böylece ahşap kenar çubuğu her zaman kullanıcının görüntü alanının sol tarafına oturur.
Ayrıca, tuvalin üst kısmından 200 piksel ve tuvalin alt kısmından 200 pikselden fazla kılavuz yerleştirdim. Belgem şu şekilde görünüyor:
4. Adım
Şimdi arka planımıza biraz desen ekleyelim. Dosya → Yeni'ye gidin ve 8 × 8 piksel olan yeni bir belge oluşturun. 2 piksel genişliğinde dikey çizgiler çizin. Tuvaliniz şimdi 2 piksel siyah, 2 piksel beyaz, 2 piksel siyah, 2 piksel beyaz olmalıdır. Düzenle → Deseni Tanımla'ya gidin. Deseninizi “Vertical Lines 2px.” Olarak kaydedin.
Orijinal belgenizde, Katman → Yeni Dolgu Katmanı → Desen'e gidin. Yeni oluşturduğunuz kalıbı seçin ve Tamam'a tıklayın. Böyle bir şey görene kadar katman opaklığını bırakın:
Deseni, arka plan katmanınızla birleştirin ve otomatik olarak işlemde rasterleştirin. Filtre → Gürültü → Gürültü ekle'ye gidin. Değeri% 5 olarak değiştirin ve Tamam'a tıklayın. Bu arka plana ince bir doku katacak:
Yeni bir katman oluşturun ve beyazla doldurun. Orijinal arkaplan katmanının altına yerleştirin. Dokulu katman deseninizin opaklığını yaklaşık% 40'a indirin ve ardından Katman → Katmanları Birleştir'e giderek arka plan katmanı ile birleştirin.
Adım 5
Dikdörtgen aracını seçin ve 200 piksel genişliğinde bir şekil çizin.
Poligonal Kement aracını kullanarak şeklimizin altından dilimleyip bir şerit gibi görünmesini sağlayacağız. Şeklin üzerine bir seçim oluşturun, şekil katmanını rasterleştirin ve ardından seçilen alanı kaldırmak için Sil tuşuna basın.
Şekli, kılavuzlarımızı kullanarak işaretlediğimiz sol kenar çubuğuna yerleştirin.
Şeklin üst kısmının bir seçimini oluşturun ve Düzenle → Serbest Dönüştürme'ye gidin. Şekli, tuvalin üst çizgisiyle örtüşecek şekilde uzatın.
6. Adım
Elips Şekil aracını seçin ve bunu devam ettirmek için Shift tuşunu basılı tutarken, beyazla dolu bir daire çizin. Kenar çubuğunun üst kısmına yerleştirin ve katmanı “Portre” olarak yeniden adlandırın.
Yeni şekil katmanını sağ tıklayın ve akıllı bir nesneden piksellere dönüştürmek için “Rasterize layer” seçeneğini seçin. Komut tuşunu basılı tutun ve katmanın önizleme görüntüsünü Katmanlar panelinde tıklayın. Bu, çemberinizin bir seçimini yapacaktır.
Kendinizin resmini bulun (veya web siteniz ne hakkında olursa olsun) ve kopyalayın. Photoshop'a geri dönün ve hala daire seçimi ile birlikte, Düzenle → Yapıştır'a gidin. Bu, nesneyi daire seçiminize yapıştırır.
Bunu yaptıktan sonra, görüntü üzerinde otomatik olarak bir katman maskesi oluşturdunuz (yani, mevcut daire katmanını değil, yeni bir katman üzerinde). Resmi yeniden boyutlandırmak ve / veya döndürmek için Düzenle → Serbest Dönüştür'e gidin. Bir çember kalacaktır; sadece çok küçük yapmamak için emin olun. Bu tamamlandığında, “Portre” adlı katmanı silin ve yeni katmanınızı yeniden adlandırın.
7. adım
Yazım aracını seçin ve başlık alanında bir metin kutusu oluşturun. Temama tamamen rastgele bir isim verdim: “Kabooom.” Reklame Script adlı bir font kullandım. Fontun bir demosunu indirebilir veya 30 $ karşılığında satın alabilirsiniz. MyFonts .
Yazım katmanınıza sağ tıklayın ve “Karıştırma Seçenekleri” ni seçin. Metne renk kaplaması uygulayın. # D6D6D6 altıgen koduyla arka plandan biraz daha koyu bir açık gri kullandım.
% 10'luk bir opaklık, 2 piksel'lik bir mesafe ve 1 piksellik bir boyut kullanarak, türe bir iç gölge uygulayın. Her şeyi 0'da bırakın. Bu, türün arka planda kazınmış gibi görünmesini sağlar.
Kazıma efektini tamamlamak için, normal harmanlama moduna sahip beyaz rengi kullanarak, türe bir alt gölge ekleyeceğiz. Gölgeye 2 piksel ve 1 piksel boyutunda bir mesafe verin. Bu ayarlar, gölgenin türün alt kısmında bir vurgu olarak görünmesini, türüne daha fazla derinlik eklenmesi ve iç gölgeyi takviye etmesini sağlar.
8. adım
Yazım aracını yeniden seçin ve kılavuzlarla işaretlediğimiz sağ kenar çubuğunun genişliğini dolduran bir metin kutusu oluşturun. Aşağıda gösterildiği gibi kategori başlığı altında çeşitli kategoriler koyun:
Kategori başlığını seçin ve yazı tipini seçiminize göre değiştirin. Minion Pro'yu kullandım. Alt yazı tipleriyle (kalın, italik vb.) Ve nokta boyutlarıyla denemeler yapın.
Kategoriler için yazı tipini değiştirin (“Haberler”, “Günler”, “Fotoğrafçılık”, vs.). Myriad Pro'yu kullandım. Türün nokta boyutunu azaltın ve ön çizgiyi (metin satırları arasındaki boşluk) ayarlayın, böylece üst satır varsayılan değerden daha düşük olur.
İlk başlığı ve bağlantıları kopyalayıp aynı metin kutusuna yapıştırın. Başlığı ve kategorileri değiştirin. “Projelerim” ve “Arkadaşlarım” başlıklarını kullandım. Elbette web sitenizle alakalı olanı kullanın.
9. adım
Şimdi metni sağ kenar çubuğunda biraz daha çekici hale getireceğiz. Alt kategoriler için metni seçin (örneğin, başlıklar değil) ve rengi siyahdan koyu griye dönüştürün. # 333333 kullandım. Tamam'a tıklayın.
Yazım katmanını sağ tıklayın ve “Karıştırma seçenekleri” ni seçin. Normal karıştırma modu ile beyaz renkte bir gölge uygulayın. Açıyı 120 ° ve mesafeyi ve boyutu 1 piksel olarak değiştirin. Diğer her şey 0 piksel olarak ayarlanmış bırakın. Bu, tıpkı başlıkta yaptığımız gibi metnin altına bir vurgu ekleyecektir.
10. adım
Çizgi aracını seçin ve Shift tuşunu basılı tutmak için “Kategoriler” başlığının altında bir çizgi çizin.
Çizgi katmanını sağ tıklayın ve “Karıştırma seçenekleri” ni seçin. Normal karıştırma modu ile beyaz bir gölge uygulayın. Açıyı 90 ° ve 1 piksele olan uzaklığa ayarlayın. Diğer her şeyi 0 piksele ayarlayın.
Çizgi katmanını çoğaltın ve her bir başlığın altına yerleştirin.
Adım 11
Benim gibi aynı sayıda başlığa sahipseniz, o zaman üç çizgi katmanınız olmalıdır. Hepsini seçip çoğaltın. Üç çizgi katmanı hala seçiliyken, Shift tuşunu basılı tutarak ve bir kez Aşağı tuşuna basarak onları 10 piksele bastırın. Daha yeni satır katmanlarınızın opaklığını% 25'e düşürün:
Adım 1/2
Dikdörtgen Şekil aracını alın ve aşağıdakine benzer bir dikdörtgen çizin. Dikdörtgeni tam olarak 570 piksel genişliğinde yapın. Bu, soldaki kenar çubuğuyla yeni dikdörtgenin kenarı arasında 10 piksellik bir boşluğa ve aşağıdaki açıklamalı ekran görüntüsünde görüldüğü gibi sağ kenar çubuğu ile yeni dikdörtgenin kenarı arasındaki 20 piksel aralığına izin verecektir:
13. adım
Dikdörtgen Şekil aracını yeniden seçin ve aşağıdaki gibi daha küçük bir gri dikdörtgen oluşturun. Büyük dikdörtgenin sağ üst köşesine, büyük dikdörtgenden 10 piksele kaydırın. Şekli 30 piksel dikdörtgenin üstünden uzağa yerleştirin.
14. adım
Sağ kenar çubuğundaki yazım katmanını çoğaltın ve Shift tuşunu ve İmleç tuş bileşimini kullanarak çoğaltılan yazım katmanını ana içerik alanı üzerinde gezdirin. “Kategoriler” başlığınız için iki çizgi katmanla aynı şeyi yapın.
Yazım aracını seçin ve çoğaltılmış yazı katmanınıza tıklayın. Tüm metni kutudan çıkarın ve başlığı daha uygun bir şeye değiştirin. Burada biraz kukla metin kullandım: “Bu hak buraya bir başlık denir.”
Adım 15
Dosya → Yerleştir'e gidin ve belgede yer tutucu olarak yerleştirilecek bir fotoğraf bulun. Buradaki gerçek görüntüleri kullanmak her zaman en iyisidir çünkü mock-up'ı daha gerçek ve çekici hale getirirler. Kullandım ablamın fotoğrafı .
Fotoğrafın boyutunu küçültmek ve doğru noktaya yerleştirmek için Düzenle → Serbest Dönüştürme seçeneğine gidin. Hem genişlik hem de yükseklik olarak toplamda 20 piksel daha kısa olmasını sağlayın, böylelikle siyah dikdörtgenin içine iyi bir şekilde uyacak şekilde:
Adım 16
Büyük siyah dikdörtgen için Karıştırma seçeneklerini açın. Beyaz renk kaplaması ve% 10 opaklık ve 3 piksel boyutunda bir alt gölge uygulayın.
Adım 17
Dikdörtgen Şekil aracını bir kez daha seçin ve beyaz fotoğraf arka planının altında uzun bir şekil çizin. Aynı genişliğin olduğundan emin olun. Açık gri ile doldurun.
Yeni gri dikdörtgen için Karıştırma seçeneklerini açın ve bir alt gölge uygulayın. Rengi beyaza, normal karıştırma moduna, opaklığa% 100 ve 1 piksele olan uzaklığa ayarlayın. Diğer her şey 0 piksel olarak ayarlanmış bırakın.
Ayrıca,% 10 opaklığa sahip siyah rengi kullanarak bir iç gölge uygulayın. Boyutu 13 piksel olarak değiştirin ve diğer her şeyi 0 piksel olarak ayarlayın. Bu iki katman stili, yeni şeklin arka planda olduğu gibi, tipografimiz gibi görünmesini sağlayacak:
Adım 18
Kenar çubuğuna geçmek, bazı yinelenen ahşap dokuları indirmek. Kullanıyorum GraphicRiver'dan ayarla Bu üç farklı ahşap doku içerir: hafif, orta ve karanlık.
Kalıpları Photoshop uygulamasına yükledikten sonra (her görüntüyü açıp desen olarak tanımlayarak) Photoshop belgenizdeki kenar çubuğunu seçin. Katman → Yeni Dolgu Katmanı → Desen'e gidin. Ahşap dokularınızdan birini seçin (orta sürümü seçtim) ve Tamam'a tıklayın. İlk olarak kenar çubuğunu seçerek, desen yalnızca bu alanı doldurmalıdır.
Desen katmanını sağ tıklayın ve “Karıştırma seçenekleri” ni seçin. Siyahdan saydamla siyah arasında geçiş yapan bir degrade kaplama uygulayın:
Degrade kaplamanın opaklığını% 10 olarak değiştirin ve 0 ° 'lik bir açı verin. Bu, kenar çubuğuna ince bir gölge katacak ve biraz daha gerçekçi ve daha az düz görünecek.
Ayrıca, kenar çubuğuna bir gölge uygulayın. Opaklığı% 30'a indirin ve açıyı 180 ° olarak değiştirin. Her şeyi diğerlerinden 0 piksele ayarlayarak, uzaklığı 1 piksel ve 5 piksel olarak değiştirin. Bu kenar çubuğuna küçük ve ince bir gölge katacak.
Adım 19
Bu eğiticinin başlangıcına yakın olarak oluşturduğumuz daire portresi için “Karıştırma seçenekleri” ni açın. Aşağıdaki ayarları kullanarak beyaz bir gölge uygulayın:
Ayrıca, aşağıdaki ayarları kullanarak bir iç gölge uygulayın. Bu, daire resminin, sadece üstüne oturmak yerine, ağacın içine yerleştirilmiş gibi görünmesini sağlayacaktır.
20. Adım
Ana içeriğinde başlık katmanını çoğaltın. Bunu kenar çubuğuna getirin ve metni “Hakkımda” olarak değiştirin. Ayrıca, başlığın altındaki iki satırı yeniden konumlandırın ve yeniden boyutlandırın.
Yeni yazı katmanı için “Karıştırma seçenekleri” ni açın ve açılan gölge ayarlarını şu şekilde değiştirin:
Sağ kenar çubuğu metninde kullandığımız aynı yazı tipi ve boyutunu kullanarak “Hakkımda” bölümüne bazı metinler ekleyin. Bu yeni metin için “Karıştırma seçenekleri” ni açın ve bir dış ışıltı uygulamak için “Dış kızdırma” sekmesine tıklayın; opaklığı% 30, rengi beyaza ve boyutu 18 piksele değiştirin.
Bu, metnimizi ahşap arka plana karşı daha okunabilir hale getirecektir.
Metnin daha kolay taranmasını sağlamak için yazı tipi boyutuyla oynayın.
21. adım
Bazı deneylerden sonra, tüm kenar çubuğunun yukarıda bahsedilen üç dokumanın daha karanlıkta daha iyi olduğuna karar verdim. Kenar çubuğu düzenini ve metnin renklerini değiştirdim. Bunu yapmak için önceden öğrendiğiniz teknikleri kullanın.
Tasarımım şu ana kadar şöyle görünüyor:
Adım 22
Ancak planladığınız kadarıyla, tasarım sürecinde değişiklik yapmak zorundasınız. Tasarıma bir bütün olarak bakıldığında (parça parça yerine), kenar çubukları ile ana içerik alanı arasındaki 10 pikselin neredeyse hiçbir yere yakın olmadığı sonucuna vardım.
Shift tuşunu ve İmleç tuş kombinasyonunu kullanarak içeriğinizi bir kenara itin, iki boşluk 40 yerine 10 piksel haline getirin. Bu, tasarımı daha kullanışlı ve çekici hale getirecektir.
Adım 23
Ayrıca, tema başlığının stilini değiştirmeye karar verdim.
Daire resminden seçilene kadar rengi (“Karıştırma seçenekleri” penceresinde bir renk bindirme kullanarak) değiştirin. Koyu yeşil-mavi aldım.
Ayrıca iç gölgeyi çıkardım ve alt gölge ayarlarını değiştirdim, böylece başlık, arka planın üzerinde değil, arka planın üstünde oturuyormuş gibi görünür.
Adım 24
Ana içerik banner'ına (yani, ana içeriğimizin resim alanının sağ üst köşesinde yer alan daha önce oluşturduğumuz dikdörtgene) geçiş yapmak için, Command tuşunu basılı tutarken katmanın küçük resminin üzerine tıklayarak dikdörtgeni seçin.
Katman → Yeni Dolgu Katmanı → Desen'e gidin ve kenar çubuğu için kullandığınız aynı dokuyu seçin.
Desen dolgu katmanını sağ tıklayın ve “Rasterize layer” seçeneğini seçin. Soldurma ve Yazma araçlarını kullanarak, şeklin sağında ve altındaki şekil ve gölgelerin soluna ve üstüne vurguları ekleyin.
Bu, derinlik katacak ve şekle üç boyutlu hafif bir his verecektir. Yanma aracı görüntüyü koyulaştırır, oysa Dodge aracı onu hafifletir.
Çokgen Kement aracını seçin. Aşağıdakine benzer bir şekil seçin ve dokunduğunuzdan seçilen koyu kahverengi ile doldurun.
Dikdörtgen Seçim Çerçevesi aracını kullanarak, gereksinim duymadığınız yeni şekildeki alanları seçin ve kaldırmak için Sil tuşuna basın. Buna benzer bir şeyle sonuçlanmalı:
Adım 25
Kendimiz al özel simge seti “Yansıma” olarak adlandırıldı. Bu simgelerin birkaçını tasarımımızda kullanacağız.
Dosya → Yer'e giderek belgede ihtiyaç duyduğunuz simgeleri ekleyin. Fotoğraf, fotoğraf makinesi, tema, etiket gibi ikonlar, fotoğraf, ikonlar, ikonlar gibi ikonları seçtim.
Adım 26
Kamera simgesini seçin ve yeniden boyutlandırın. Yeni oluşturduğumuz yazı tipi çubuğuna yerleştirin. Bu eğitici boyunca kullandığımıza benzer ayarları kullanarak, iç ve alt gölge uygulayın.
Yazı tipi çubuğuna bazı tipografi ekleyin. Sol kenar çubuğu başlıkları için kullandığımız başlık ve aynı karıştırma seçeneklerinde kullandığımız aynı Reklame Komut Dosyalarını kullandım.
Adım 27
Diğer dört simge katmanını seçin. Akıllı nesnelerden piksel nesnelerine dönüştürmek için sağ tıklayın ve “Katmanları Rasterleştir” i seçin.
Tüm simgenin yansımalarını seçmek için Dikdörtgen Seçim Çerçevesi aracını kullanın.
Yansımasını kaldırmak için her simge katmanı üzerindeki Sil tuşuna basın.
Adım 28
Dört simge katmanının tümünü yeniden seçin. Düzenle → Serbest Dönüştürme'ye gidin ve simgeleri orantılı tutmak için Shift tuşunu basılı tutarken, boyutlarını küçültün ve daha önce oluşturduğumuz ana içerik alanının altındaki çubukta konumlandırın.
İmleç tuşlarını kullanarak eşit aralıklarla simgeleri dışarı çıkartın.
Adım 29
Kalp simgesi katmanını sağ tıklayın ve menüden “Karıştırma seçenekleri” ni seçin. Renk kaplamasını kullanarak rengi açık griye değiştirin ve aşağıdaki ayarları kullanarak bir iç gölge uygulayın:
Şimdi bu ayarları kullanarak bir alt gölge uygulayın:
Ayarlar kalp simgesi katmanına uygulandıktan sonra sağ tıklayıp “Katman stillerini kopyala” yı seçin. Dört simgenin tümünü yeniden seçin, sağ tıklayın ve “Katman stillerini yapıştır” ı seçin. Bu çubuktaki tüm simgelerin şimdi aynı etki.
Adım 30
Yazım aracını seçin ve kalp simgesinin yanında küçük bir metin kutusu oluşturun. “Bu yayını beğen.” Yazın. Bu eğitim boyunca kullandığımıza benzer ayarları kullanarak bir iç gölge ve gölge uygulayın.
Aşağıdaki ifadeleri kullanarak, kalan simgeler için önceki adımı tekrarlayın: “Bu yazıyı yeniden yaz”, “1052 not” ve “19/03/2011 tarihinde gönderildi.” Her katmana aynı katman stilini kopyalayıp yapıştırdığınızdan emin olun.
Simgelerden bazılarını yeni metinle yeniden konumlandırmak, metin ve simgeler arasındaki boşluğun tutarlı olmasını sağlamak isteyebilirsiniz; Farklı metin uzunlukları nedeniyle, bu değişmiş olabilir.
Adım 31
Ana içerik alanındaki tüm katmanları çoğaltın ve orijinalin altına yerleştirin. Başlık, resim ve posta türü dikdörtgenini değiştirin. Belirtildiği gibi, daha gerçekçi mock-up, daha iyi.
Adım 32
Kenar çubuğundaki başlığı ve metni çoğaltın ve bazı simgeler ekleyin. Ben bilinen mükemmel sosyal medya simgeleri kullandım Buddycons , Webdesigner Deposu'na özel bir başka set.
Son ürün
Biraz daha fazla rötuştan sonra (kenar çubuğunun alt kısmındaki pürüzlü şerit benzeri kesimi çıkardım), her şey bitti! İşte son tasarımımız, kodlanmış ya da bunu yapmak için geliştiriciye gönderilmeye hazır.
Bu eğitim yalnızca Web Tasarımcısı Deposu için bir araya getirilmiştir. Callum Chapman adı altında serbest bir kullanıcı arayüzü tasarımcısı ticareti Çember Kutusu Yaratıcı . Callum da üzerinde çalışıyor ilham galerisi Vinspires denilen proje.
Bu tasarımı tamamen işleyen bir Tumblr temasına nasıl ayıracağınız ve kodlayacağınız konusunda başka bir öğretici görmek ister misiniz?