Photoshopta Scanlines (Tv Görüntüsü) efekti yapımı

Bazı arkadaşlarımız gerek sitelerdeki imzalarında gerekse kendi fantezileri dogrultularında scanlines yanii sanki tv ekranındaki görüntüymüş gibi görünen resimler yapmak istiyolar. Her ne kadar tv ekranından fırlamış etkisi vermesede bence imzalarda yada tv görüntüsüne benzer şeyler yapımından yardımcı olabilecek photoshop un yapımı en kolay derslerinden biridir.. Nasılmı yapılıyor? Devamını okuyalım..

Öncelikle photoshop umuzu açıyoruz ve ayarlarını yukarıdaki gibi arka fonu Transparan olmak zorunllulugu ile 1×2 px boyutlarında yeni bir sayfa açıyoruz…

Tools paletinden Pencil Tool’u seçiyoruz ve Brush Size’i 1px yapıyoruz..

Sayfanın sonuna kadar yaklaşıyoruz (Zoom yapıyoruz) -Kısa yolu CTRL + tuşlarına aynı anda basılmalıdır- ve  alt tarafına siyah bir kare konduruyoruz..

Sırası ile;

• select > all
• edit > define pattern > isim olarak “scanlines” yazıp “ok” a tıklıyoruz

Üzerinde scanlines efektini uygulayacağımız resmimizi açıyoruz..  Ben yukarıdaki resmi kullanıcam..

Layers paletinde “Create new layer” dugmesine tiklıyoruz ve yarattığımız yeni layer in adını scanlines olarak atıyoruz..

Yukarıdaki menüden Edit > Fill.. e tıklıyoruz yada Shift + F5 tuşlarına aynı anda basıyoruz..

Açılan pencereden Use: Pattern seçiyoruz ve altındaki küçük kutucupa tıklayıp bizim yaratmış olduğumuz pattern e tıklıyoruz. OK diyerek yolumuza devam ediyoruz..

Resmimiz şekildeki gibi olucak ama pek etkili ve güzel bir çalışma olmadığı kanaatindeyim birazdaha oynuyalım..

Layer menüsünden scanlines laye’i seçiliyken layer modunu Overlay olarak ayarlayın..

Yine scanlines seçili iken opacity değerini 50% olarak ayarlayın.. ve bitiyor..

Sizin fantezileriniz ve ugraşılarınız sonucunda bambaşka şekiller verebilirsiniz. Ben biraz oynadım ve yukarıdaki şekli verdim.. Daha güzellerini yapmak sizin elinizde..

Kolay gelsin

Photoshop ta Parçalayıcı Aracı kullanarak Web Sitesi Hazırlama

Web sitesi ile ilgilenenler yada sürekli internette gezenler muhakkak görmüşerdir böyle mükemmel şekillerde siteler vardır görüntü mükemmeldir, bazıları merak ederler araştırırlar nasıl olduğunu ne olduğu, Araştırmaya başlanıldığı zaman pekçok çeşit web tasarım yöntemi vardır. Kodlama, flash, swish, frontpage, css gibi ama bunlardan en önemlisi vede kullanışlısı şüphesiz photoshop tur. Herşey photoshop ta resim olarak yapılır ve sonra dremweaver yada herhangi bir html editörü ile düzenlenir ve kullanılır. Çoğu tasarımcı vede template (hazır web sitesi şablonu) hazırlıyanlar photoshop yöntemi kullanarak güzel şeyler hazırlarlar. Bu dersimizde de photoshop ile nasıl web sitesi hazırlanır, parçalayıcı araç nasıl kullanılır onları anlatmaya çalışıcam…

Öncelikle photoshopta, web sayfamızın olmasını istediğimiz boyutlarda bir çalışma dosyası açıyoruz ve web sitemizi tasarlıyoruz..
Çok hızlı geçtin diyeceksiniz ama burası sizin yaratıçılığınıza kalmış ben örnek olsun diye amatör şekilde bir çalışma yaptım.

Soldaki menüden “Slice Tool” (Resim Parçalama) aracımızı alıyoruz..

Mause ile seçerek parçalara ayırıyoruz. Mümkün olduğunca kullanışlu bölmeliyizki kaydettiğimiz zaman resimler ne fazla büyük nede fazla küçük olarak kaydedilsin.

Ben örnek olarak Logo bölümünü ayr kaydettim. Menü ve linkleri ayırdım birde sürekli değişmesini istediğim orta bölümü seçtim..

Ayırma işlemimiz bittikten sonra File > Save for Web & Devices.. ‘e yada “Alt + Shift + Ctrl + S” kombinasyonu ile Save for Web & Devices sekmesini açıyoruz..

Açılan pencerede resimde görülen butona tıklayıp ayırmak istediklerimize vede link vermek istediğimiz parçaların üzerine çift tıklıyoruz..

Örnek olması amacı ile ben anasayfa linkini yapıyorum.
Name: kısmına butonun ve resmin adını, URL: kısmına ise tıklandığı zaman açılıcak olan sayfanın urlsini yazıyoruz.. ve “Ok” diyerek kaydediyoruz..

Diğer resimler içinde aynı şekilde uyguluyoruz. Linklemek istemediğimiz resimlerin URL bölümünü boş bırakıyoruz..

Tekrar eski pencereye dönüyoruz. Burda pekfazla ayar yapmaya gerek yok “Save” diyip kaydediyoruz..

Dosya adı: index
Kayıt türü: HTML and Images (*.html)
kaydetmek istediğimiz yeri seçiyoruz ve “Kaydet” butonuna tıklıyoruz..

Diğer sayfaları kaydetmek için index yerini sitenizdeki menülere vede verdiiniz linkler ile uyumlu şekilde değiştirip tekrar kaydedin..

Web sitemiz artık hazır. index.html i tıklıyarak web sayfamızı görebiliriz. Üzerinde değişiklik yapmak için çeşitli proğramlar ile (Dreamweaver vb.) tasarımımızı düzenliyebiliriz…

Ben örnek teskil etmesi bakımından yaptığım siteyi tutorialci.net_ps_site_yapimi_ornek.zip adresinden bakabilirsiniz…

Web sayfasını parçalayıp kaydetmek bu kadar kolay tasasrım işlemide sizin ps bilginize vede yaratıcılığınza kalmış..

Kolay gelsin..