Web tasarımcı için, pattern sisteminin kullanıldığı en önemli alanlardan biri, website tasarımlarının arkaplan desenlerinin oluşturulmasıdır (En azından benim için...), ayrıca diğer görsel (katalog, broşür, poster vb.) tasarımlarda da çeşitli amaçlar için kullanılır.
Photoshop'ta varsayılan olarak yüklü patternları (desen) kullanmak yerine kendi desenlerinizi oluşturup, kaydedip daha sonra tekrar tekrar kullanabilirsiniz. Ayrıca ücretsiz olarak bulabileceğiniz başka desenlerle de (spiderman vb.) website veya diğer masaüstü tasarımlarınızı renklendirebilirsiniz.
Website açılma hızı içerikle doğrudan ilişkilidir, tekrarlanan desenlerde slice veya pattern kullanmak gerekir.
Bu yazımızda desen mantığını ve uygulamasını kısaca inceleyeceğiz.
Fig1. Spiderman deseninin kullanıldığı bir banner.
Desen (Pattern) kullanmanın temel amacı, oluşturulan bir alanın tamamının o desenle kaplanmasıdır. Deseni, bir alanı tamamen kapatacak şekilde, ya da desende transparent bölgeler bırakarak alttaki objenin de özelliklerini kullanacak şekilde uygulayabilirsiniz.
Fig2. Site arka planlarında kullanılan desen örnekleri
Tabii ki işin özü, oluşturduğunuz bu desenleri, web tasarımlarınızı yazılıma aktarırken, uygun bir şekilde slice haline getirip tekrarlatarak yerleştirmektir, fakat en azından tasarım aşamasında sahneyi tam olarak görmek için desen mantığını kullanmanız gerekir.
- Website arka planlarında, kullanabilirsiniz (Tüm arka plan veya, bir bölge için). Fig2.
- Web içeriği olarak slaytlarda, veya fotoğrafların üstüne efekt olarak uygulayabilirsiniz.
- Buton veya çeşitli website tasarım elementleri oluştururken kullanabilirsiniz.
- Özellikle tüm arkaplan fotoğraf veya slayt kullanılan websitelerde, fotoğrafların piksellenme durumunu gizlemek açısından çok kullanışlıdır.
- Burada esas olarak web tasarım uygulamasına önem verdik, fakat her tür tasarımda kullanabilirsiniz.
1-Genel Mantık
Oluşturulacak desenin tekrarlanacağı gözönünde bulundurularak tasarımı yapılmalı ve mümkün olan en küçük boyutta olmalı (4X4, 3X3, 8X8 vb.)
2-Deseni Oluşturup Kaydetme
Tüm arkaplan slaytlarda fotoğrafların üstüne koyacağımız, basit bir desen tasarlayalım.
Fig3. Desenin oluşturulmuş hali.
- 3px X 3px boyutunda, arkaplan transparent olacak şekilde yeni bir sayfa açın
- Sayfayı en yüksek boyuta kadar büyütün (3200%)
- Ön plan rengini (foreground color) siyah yapın (duruma göre beyaz veya tasarımınıza uygun başka bir renk olabilir)
- Kalem aracını (pencil tool) seçip boyutunu 1 piksel olarak ayarlayın
- Fig3. deki deseni oluşturun
- Edit > Define Pattern seçip deseninizi size hatırlatacak bir isimle kaydedin (verev, resim_efekt vb.)
3-Desenin Fotoğrafa Uygulanması
Desenimizi kaydettik, artık bu deseni istediğimiz bir alanda (Website tasarım, masaüstü tasarım, görsel medya vb.) kullanabiliriz, biz fotoğraflarımızda kullanacağız
- Deseni uygulayacağınız fotoğrafı açın.
- Layer panelinin altında "fx" (Add a layer style-tabaka stili ekle) butonuna basıp Pattern Overlay i seçinFig4.
- Pattern kısmından kaydetmiş olduğunuz deseni bulup seçin. Fig4.
- Şeffaflık (Opacity) değerini 30%'a getirin (Fotoğrafınızın durumuna göre değiştirebilirsiniz). Fig5.
Fig4. Fotoğrafa desenin uygulanması (Pattern Overlay).
Fig5. Desenin seçilmesi ve fotoğrafa uygulanması
Fotoğrafımıza deseni uygulamış olduk, fakat esas kullanım amacı için, desenimizi web sitemizdeki slaytların üst katmanına arkaplan olarak döşememiz gerekir.
Burada sadece desen mantığına ve kullanım alanlarına (Özellikle website tasarım için..) kısaca değindik.
Ücretsiz bulabileceğiniz birçok deseni (Spiderman vb. Fig1)., web, slayt, banner ve diğer görsel tasarımlarınızda rahatça kullanabilirsiniz.
Kolay gelsin...
