Adobe Photoshop Dersleri - Sayfa 6

Eski botlar buton oldu
Ayakkabı satan bir yer için, botları buton olarak kullanabilirsiniz. Arka planda fazla görüntüler varsa onları temizledikten sonra, renk değişimi yapmak için, istediğiniz bölümü seçin, feather olarak 5-10 piksel değer verin.

Hue/Saturation kolay renk değişimleri yapılabilecek bir tablo... Özellikle Hue değeri ile oynayarak istediğiniz rengi elde elde edin. Saturation rengin şiddetini azaltıp arttırmaya, Lightness koyulaştırıp açmanıza yardımcı olacaktır.

Botun başka bölümlerinde de aynı yöntemle renk değişimleri yapın.

Yeni bir layer ekleyin. Kaç ana bölüme link verecekseniz, o sayıda dikdörtgen hazırlayın. Buradaki örnekte 3 link kullanı ldı.

Bot layer'ını n üstte olmasına dikkat edin. Alt tuşu basılıyken, iki layer'ın arasındaki çizgiye gelip, tıklayın.

Botların, sadece dikdörtgenlerin içinde görünmelerini sağladınız. ve botlara da bir şey olmadı.
Bir layer daha ekleyin birini tasarımınıza uygun bir renkle doldurun. Dikdörtgenler layer'ını çoğaltın, ctrl (mac/elma) tuşu ile layer'ın üzerine tıklayıp seçin ve içini siyah renk doldurun.Uygun bir blur efekti uygulayın. (Blur more efektini ctrl+f ile arttırarak gidebilirsiniz)
Böyle de kalabilirdi ama botlara biraz hareket katmak iyi fikir olabilir.

Hmmmm, dikdörtgenlere ait bölüm fazla yer kapladı...

Botların tabanlarına paralel bir alan seçip fazlalı ğı atın. Gölgelerin hala durması nda bir sakınca yok. İşin içinde b sürrealizm var ))

Bot ve zemin dışındaki iki layer'a, Distort / Wave ya da twirl, zigzag gibi hareket verecek bir filtre uygulayınca bu iş tamam. Ama dikkati, botlardan daha çok çekecek bir hareket vermemeye dikkat etmek gerek. İmage Map' yoluyla her bölümü ayrıca seçip, gereken yerlere link verebilirsiniz artık...

3 Boyutlu düğmeler
Buton yapmanıza yarıyacak büyüklükte yeni bir sayfa açın. İçine bir dikdörtgen çizin.
Select / Modify / Smooth ile (Örnekte 10 piksel değer girildi) köşelerine istediğiniz yuvarlıklığı verin. Save Selection ile alfa kanalı olarak kaydedin.

İçini istediğiniz renk ile doldurun. Bu layer'ı çoğaltın. Seçtikten sonra Select / Modify / Contrcat ile daraltın. Yaklaşık yarısı kadar olsun. Select / Inverse edip dı şını silin.

2. layer'ı tekrar seçin ve içini beyaz renk ile doldurun. Gaussian Blur ile beyazı n erimesini sağlayın.

Merge visible ile iki layer'ı birleştirin
Yeni bir layer daha oluşturun. Önceki Layer'ı seçili hale getirip, Select / Modify / Expand ile genişletin (Örnekte 2 piksel genişletildi)
İki Layer arasında çok keskin bir hat olmaması için. Kırmızı layer'e tekrar Blur efekti uygulayın.
Siyah alandan daha dışarıya taşmışsa, kırmızıdaki bu taşan bölümleri silin.

Kırmızı Layer'a Hard Light Filtresi uygulayıp, Merge Visible ile iki layer'ı birleştirin. (Flatten image komutu da layer'ları birleştirir ama zemin beyaz renk biçimine dönüşür. Layer'lı çalışmalarınızda transparanlığı korumak için Merge Visible komutunu kullanmanız gerekir)

Butona biraz daha parlaklık katmak için devam edelim. Layer'ı seçin ve Save Selection'la kaydedin. Seçili alanı yarısı kadar indirip altını siyah renk doldurun. 3 Piksel daha Blur filtresi uygulayın.

Blur uyguladığınız alanlardaki dağılmayı denetim altına almak için, Levels ile siyah ve beyaz üçgenleri ortaya doğru sürükleyebilirsiniz. Bu yöntem bir çok yerde işinize yarayacaktır.
Alfa 3 kanalı seçiliyken, tekrar Layer'a dönün. Üst rengi beyaz yapın. Foreground to Transparent seçeneğini seçin. Dikey olarak uygulayın.

Biraz daha 3 Boyutlu olması için Layer Effects / Bevel and Embos uygulayabilirsiniz.
Gerekiyorsa yine aynı yerden, Drop Shadow ile alta gölge verebilirsiniz. Ya da Bir zemin rengi kullanabilirsiniz.

Siyah beyaz resimden zemin oluşturma
Background olarak kullanacağınız bir resim için, önce sitenizin içeriğine uygun bir çizim bulun ya da çizin. Çizimin acemice olmasının çok da kötü olmadığını göstermek için böyle bir örnek seçtim.

Layer'ınızı çoğaltın. (New Layer) Parlama Layer'ında gölge ışık için gereken efekti
oluşturacaksınız.

Siyah-beyaz bir resmi seçmek kolay. Magic Wand'la siyah alana tıklayın. Birbirine değen bütün siyah alanlar seçili hale gelecek. Değmeyenleri de seçime katmak için, Select/similar seçeneğine gidin. Artık, benzer tüm pikseller seçildi. Select/modify/expand'a 1-2 piksel değer girin. içini beyaz renk ile doldurun. Gaussian Blur efektini resminizin özelliğine göre 3-10 değerine getirin okeyleyin. Alta bir Layer daha ekleyip içini siyah doldurun.
Blur efektinin Motion ve Radial seçeneklerini kullanarak farklı etkiler elde edebilirsiniz. .Bu sayfadaki üstte Radial Blur, altta Blur, ve daha sonra 2 tane Motion Blur efektinin sonuçları var.

Yukarıdan aşağıya uzanan parlama bölgesi oluşturmak için, tüm Layerları merge komutuyla birleştirin. Alta iki Layer daha ekleyin. Ortadakini beyaz alttakini siyah renk doldurun. Beyaz Layer'ı 1-2 piksel kaydı rın ve istediğiniz ı şığa ulaşıncaya kadar blur efekti uygulayın. Burada ise farklı bir etki için en üstte resim beyaz olarak kullanıldı. Bu resimleri background olarak kullanmak için, enini en az 640 piksel yapmanız gerekli. Resim 640 pikselden sonra kendini tekrar edecektir. Menübar olarak kullanmak için, menü için düşündüğünüz pikselde yapmanız yeterli. Yani 150 piksel civarı...

Koyunlar, Kuzular
Web sayfanızın konusuyla ilgili bir resmi zeminde kullanmak, hem anlamı güçlendirir, hem aynı birimin tekrarından oluştuğu için, sayfanızın inmesini kolaylaştırır. Ama yaşanan bir sorun vardır, resmin ek yerleri belli olur, bu da hiç hoş bir görüntü değildir.

Yanda, yukarıdaki resmin background olarak kullanılmış halini görüyorsunuz.
Bu sorunu halletmek için şu yolu izleyin. Image Size'da tekrarlanmasını istediğiniz birimin piksel cinsinden boyutlarına bakın. Örnekteki boyutlar 200 x 162 piksel.

Bunu aklınızda tutun. Filter/Other/Offset'e girin. Resmin boyutlarının yarısını buraya yazın. Wrap Around 'un seçili olmasına dikkat edin. Okeyleyin.

Yandaki gibi bir görüntüyle karşılaşacaksınız. Resim şimdiden bozuldu zaten diye üzülmeyin.
Stamp'la doku taşıyarak, ek yerlerini belirsiz hale getirin. Zemin dışında üsteki ve yandaki resim aynı.

Tekrar Filter/Other/Offset'e gidin. Son yazdığı nız rakamlar zaten karşınıza gelecek, sadece okeyleyin. Resminizin ilk görüntüsüne tekrar geri döndünüz ama biraz farkla...

Resminizin bu halini background olarak kullanırsanız, yandaki örnekteki gibi ek yerleri belli olmayan bir sonuç alacaksınız.

Tabii dikkat etmeniz gereken çok önemli birşey var. Bu kadar belirgin bir resmi tüm sayfada kullanırsanız, yazılarınız okunmaz....

Sebzelerden zemin oluşturma

Yine background olarak kullanacağınız bir örnek...

İlke olarak önceki konuda yaptıklarınızı tekrarlayacaksınız. Ama burada farklı bir durum var. Resim stampa ile tamamlanmayacak (ya da çok uğraştıracak) kadar eksik.

Bu durumda, biraz üçkağıda başvurmak gerekecek. Resminizin (dublicate) çoğaltın. Birini Filter/Other/Offset ile büyüklüğünün yarısı piksel değerleri girerek kaydırın.

Resmin aldı ğı görünüm bu... İşiniz biraz uzun...
Yedek resimdeki tam domatesi path ya da kementle seçin. Seçili haldeyken Ctrl tuşuna basarak diğer resmin üstüne sürükleyin. Ayrı bir Layer'da yerini alacaktı r. Pozisyonunu ayarlayı n. Resmin özelliklerine göre bunu çoğaltmanız gerekebilir.

Yanraki örnekte yarım görünen diğer domatesin daha tamamlandığını görüyorsunuz. Ek yeri belli olmayan bir görüntüye ulaştığı nızda, Merge Visible ile Layer'ları birleştirin. Stampa ile son düzeltmeleri yapın.

Tekrar Filter/Other/Offset...Tamam! Yandaki görüntüyü elde ettiniz.

Böyle bir resmi sayfanın tamamında kullanmak mümkün ve mantıklı olmadığına göre, biraz daha devam edelim.

Düzelttiğiniz birim resmin üzerinede Kement ile yukarıdan aşağıya bir bölgeyi seçin. Burasının arkadaki renge eriyerek geçmesini sağlayacağız. Seçiliyken, Select/Feather 15-20 gibi bir değer girin (Sayı büyüdükçe resmin erime mesafesi artacaktır) ve silin.
Bir Layer ekleyin ve alta koyun. İçini uygun bir renk doldurun. Flatten Image ile birleştirin.
Bunu Transparan Gif olarak da hazırlayabilirdiniz.

Bir dahaki sefere

Sayfanızda düğmeleri yerleştireceğiniz bölümün zemininde bunu kullanabiliriz. Hala renkler çok canlı , üzerine koyacağımız düğmelerin yeterince belli olmama olası lığı var. Imege/Adjust/Levels te Output Levels'da siyah üçgeni ortaya yaklaştırın. Preview işaretliyse etkilerini resim üzerinde göreceksiniz. Size göre uygun bir yerde durun ve okeyleyin.

Uygun renk ve istediğiniz biçimdeki düğmeleri, yeni Layer'da oluşturun.
İsterseniz bir de gölge...

İşte bu kadar

Save for web (gif - jpg)
Resimleri webde kullanmak için optimize etmek gerekir, yani olabilecek en küçük dosya boyutuna getirmek... Bunun için en pratik yol, save for web seçeneğini kullanmak... Resmin özelliğine göre neler yapmanız gerektiğini diğer derslerde anlatmaya çalıştım. Burada, farklı optimize biçimlerinin resimleri nasıl etkilendiğini bir arada görmeniz için farklı tip resimleri bir araya getirip, örnekler hazırladım.

Gif
Gif seçeneği seçerseniz, yukarıda pencere açılacaktır. Farklı seçeneklerden seçtiklerinize göre resimlerin görüntüsü aşagıdaki gibidir.

Degrade olan (bir renkten diğerine geçiş) resimlerde gif seçeneğinin iyi sonuç vermediğini görebilirsiniz. Çizgisel resimlerde ve ekran resimlerinde ise en iyi sonucu gif'le alırsınız... Aşağıdaki örnekler, sırası yla 64, 125 ,256 renk seçenekleriyle hazırlanmıştır.

Resim 1 Gif (64) 19 K

Resim 2 Gif (128) 25 K

Resim 3 Gif (256) 31 K

Jpeg
Jpeg seçeneği seçerseniz, yukarıda pencere açılacaktı r. Farklı seçeneklerden seçtiklerinize göre resimlerin görüntüsü aşagıdaki gibidir.

Sıkıştırma çoksa resmin bozulma oranı doğal olarak daha fazladır. Çizgisel resimlerde bu bozulma daha belirgin görülür.

Genel olarak 50 sıkıştırma işi görecek bir sonuç verebilir.. Hem resim çok bozulmaz hem de makul bir dosya büyüklüğü elde edersiniz...

Resim 4 Jpg (Low - 10) 11 K

Resim 5 Jpg (Medium - 30) 16 K

Resim 6 Jpg (High - 60) 28 K