Yazdır
Kategori: Tasarım

Taso 16 oyunumuz için forma dokularının Photoshop'da nasıl hazırlanacağı bu yazıda anlatılmaktadır.

 

Forma yapımına başlarken forma dokusu yapılacak takımın adında bir klasör açıyoruz. Klasör isimlerinde kesinlikle türkçe karakter ve boşluk kullanmıyoruz. Açtığımız klasörün içine iki klasör daha açıyoruz. Birine home diğerine away ismini veriyoruz. Home klasörünü takımın iç saha forması için away klasörünü ise dış saha forması için kullanacağız. Bulduğumuz forma resimlerini ait olduğu klasörün içerisine atıyoruz.

 

 PSD DOSYASI:  Buradaki örnekte takımın home formasını yapacağız. Bu nedenle takımın kendi sahasında oynadığı maçta çekilen fotoğrafları kullanıyoruz. Örneğimizde kullanacağımız forma fotoğraflarını aşağıdaki linkten indirebilirsiniz.

 

[forma.zip]

 

 

Aşağıdaki linkte boş bir forma psd şablonu yer almaktadır. Bu şablonu indiriyoruz. Hem buradaki örnek çalışmamızda, hem de bundan sonraki forma çalışmalarımızda bu boş şablonu kullanacağız. Şablonumuzu home klasörümüze kaydediyoruz.

 

[k190_00.psd]

 

Psdmizin “k190_00” şeklinde isimlendirilmiş olduğuna dikkat ediniz. Psdlere ve bunlardan çıktı alacağımız forma dokusu resimlerine verdiğimiz isimler bu formatta olmak zorundadır. Bu dosyalara ne şekilde isim verileceğine ilişkin detaylı bilgiyi Sistem sitemizdeki talimatname yazısından okuyunuz.

 

Home klasörüne kaydettiğimiz psd dosyasına çift tıklayarak dosyayı Photoshop programında açıyoruz.

(OKUYUCUYA NOT: Bu anlatımdaki küçük resimlere tıkladığınızda resimleri büyük olarak görebilirsiniz.)

 

PSD dosyamızın ilk açıldığında ki genel görünümü

 

 

 

 

 

 

 

 

Psdmizde boş bir formanın arka ve ön dokusu, kollar, şortun arka ve ön dokusu ile çorap dokusu yer almaktadır. Formanın üzerinde logolarımız bulunmaktadır.

 

Forma dokusunun üzerinde yeşil-beyaz UnwrapUVW çizgileri yer almaktadır. Unwrap çizgileri çalıştığımız pikselin model üzerinde hangi noktaya denk geldiğini gösteren rehber çizgilerdir. Çalışma bitip forma dokusunun resmi çıktı olarak alınırken bunlar ileride anlatacağımız üzere kapatılacaktır. Psddeki unwrap çizgileri sadece tasarım aşamasında yardımcı araç olarak kullanılmaktadır.

 

Ayrıca psd'de formanın doğal gölgelerini içeren bir gölgeler grubu bulunmaktadır. Bu grup da ileride anlatacağımız üzere png çıktı alırken kapatılacak ve çıktıya eklenmeyecektir. Bu gölgeler oyun içerisinde forma dokumuza yazılım tarafından eklenmektedir. Psdmizde yer alan gölgeler grubu formamızın gölgeler eklendikten sonra nasıl görüneceğine ilişkin görsel bir fikir edinmek amacıyla kullanılmaktadır.

 

Forma dokusunda yer alan grafikler Photoshop'un Layers listesinde gruplanmış halde bulunmaktadır. Sağ alttaki Layers listesinde yer alan gruplara göz atacak olursak;

- Çoraplar grubu: Çorabın rengini, logo rengini, desenlerini bu gruptan yapıyoruz.

- Gölgeler grubu: Yukarıda bahsettiğimiz gibi, forma yapımında bu grupla işimiz yok.

- Logolar grubu: Forma ve şortta yer alan logoların rengini bu gruptan yaparız.

- Forma grubu: Formanın rengi ve deseni gibi detaylı çalışmalar bu grupta yer alır. Grubun içerisinde forma rengi, omuz çizgisi gibi layerler vardır. Her detay için, o detaya özel hazırlanmış bu hazır layerlerı kullanacağız.

 

FORMA HAZIRLANIŞI

 

Aşağıdaki resimde gösterildiği gibi bulmuş olduğumuz forma fotoğrafını Photoshop'ta açıyoruz.

 

Resimi photoshop'da açma

 

 

 

 

 

 

 

 

Fotoğrafı inceliyoruz. Formanın detaylarını arıyoruz.

 

Fotoğraf inceleme

 

 

 

 

 

 

 

 

Bu resimdeki gibi görebildiğiniz detayları farkedip not etmelisiniz. Notlarımızı kesinlikle topladığımız fotoğrafın üzerine yazmıyoruz. Buradaki örnekte anlatım amacıyla bu şekilde yapılmıştır. Notlarımızı kendimiz ayrı bir yere kaydediyoruz.

 

Kaydettiğimiz diğer resimlere bakıyoruz. Diğer resime geçelim. Bu resimde yaka kenarlarında desenler olduğunu fark ettik. Notumuzu aldık.

 

Fotoğraf desen inceleme

 

 

 

 

 

 

 

Daha sonra aşağıdaki resimde görüleceği üzere, Eye dropper aracımızdan oyuncunun formasına tıklayarak forma rengini alıyoruz. Forma resmine yakından bakarsak açık yeşilden koyu yeşile birçok yeşil tonunun olduğunu görebiliriz. Biz yeşil rengimizi seçerken ortalama bir yeşil tonu seçmeye çalışmalıyız. Forma rengi açık renk olursa oyun içerisinde hoş gözükmemektedir. Çok aşırı koyu olursa da formanın orijinal renginden farklı gözükmektedir. Bu nedenle ortalama bir ton seçiyoruz. Eyedropper aracına tıklayıp belirlediğimiz tonu resim üzerinde seçiyoruz.

 

Forma dokusundan renk alma

 

 

 

 

 

 

 

Seçtiğimiz rengi formaya entegre etmek için forma sekmesine gelelim. Aşağıda resimde formanın vucuda denk gelen yerlerinin isimlerini yazdım.(Vücut bölge isimlerini bilgi için yazdım. Forma yapımında kullanılmaz.)

 

unwrap'ın modelde denk gelen yerleri

 

 

 

 

 

 

 

 

Forma grubu altındaki renk layerına geçiyoruz. Ve forma dokumuzun üst kısmını şortlara kadar seçili hale getiriyoruz. Renk layerının Blending Modunun Multiply olmasına dikkat ediyoruz. Bu resimde paint bucket aracımzla formadan aldığımız rengi vucut kısmını boyadık. Şortu boyamak için fotoğraf sekmesine gidip uygun yerden rengimizi alıyoruz.

 

Sort rengini alma

 

 

 

 

Şortumuzu da sortrengi layerına ctrl+solclick yaparak seçiyoruz ve seçili alanı boyuyoruz.

 

şort boyama

 

 

 

 

 

 

 

 

 

Tekrar fotoğraf sekmesine giderek çorap rengini de alıyoruz ve çorap grubu altındaki Layer103'ü boyuyoruz. Bu çorap rengi layerının da Blending Modu Multiply olmalıdır.

 

Çorap'dan renk alma

 

 

 

 

 

 

 

 

Çorap rengi boya

 

 

 

 

 

 

 

 

Bu noktada CTRL+S ile psdmizi kaydediyoruz. Genel olarak, her işlemden sonra elimiz CTRL+S de olmalı ve çalışırken sürekli kayıt almalıyız.

 

Çalışmamızı böylece psd formatında kaydetmiş olduk. Fakat oyun içerisinde png formatında doku resimleri kullanmaktayız. Bu nedenle çalışmamızı bir de png formatında kaydetmeliyiz. Png olarak kaydetmeden önce unwrap layerının göz işaretine bir kez tıklayarak layerı görünmez hale getiriyoruz. Çünkü nihai doku çıktımızda unwrap çizgilerinin olmaması gerekmektedir. Daha sonra Photoshop'un ana menüsünden Farklı Kaydet (Save as..) komutunu seçerek resmimizi png olarak da kaydediyoruz.

 

Farklı kaydet

 

 

 

 

 

 

 

 

Photoshop'ta yaptıgımız formanın model üzerindeki görünümünü model üzerinde de görmemiz gerekiyor. Bunun için aşağıda linkine verdiğim model dosyasını indirelim.

 

[forma_modeli.max]

 

Model dosyasını çift tıklayarak Autodesk programında açıyoruz. Daha sonra Material Editor'u açıp orada 01-Default Sub-Object'sine png çıktımızı atıyoruz. (Bu işlemin yapılışı ilgili 3DS MAX dersinde anlatılmaktadır.). Böylece aşağıdaki resimde görüldüğü gibi dokumuz 3 boyutlu modelimiz üzerine kaplanıyor.

 

model maxde görünme

 

 

 

 

 

 

 

Dokumuzu model üzerinde genel olarak gördükten sonra şimdi detaylara yöneliyoruz.

 

Yakayı yaka layerinde çorabı boyadığımız gibi aynı şekilde boyuyoruz.

 

Forma fotoğrafındaki yarım hilal şekli için ise, ilk önce forma grubunda bir layer açıyoruz. Rectangular marquee aracımızdan, farenin sol tuşunu basılı tutarak aşağıya doğru çekip elips şeklini çiziyoruz. Resimdeki gibi yer edinecek büyüklükte çizdiğimiz elipsin içini beyaza boyuyoruz.

 

Desen çizme

 

 

 

 

 

 

 

Ardından bir layer daha açıyoruz. Çizdiğimiz elipse orantılı bir elips daha çiziyoruz. Bunu da farklı bir renge boyuyoruz.

 

Desen çizme aşama 2

 

 

 

 

 

 

 

Üstteki resimdeki gibi bir şekil oluşacaktır. Layer 105'e ctrl+solclick yaparak alanı seçiyoruz. Layer 104'e geçiyoruz. Delete tuşuna 1 defa basıyoruz. Sonra Layer 105 layerını tamamen siliyoruz. Böylece ortaya aşağıdakine benzeyen bir hilal şekli çıkacaktır.

 

Desen çizme aşama3

 

 

 

 

 

 

 

Hilalimizi forma üzerinde en doğru konumuna taşıyoruz. Layer 104'ümüze ismini verelim ismini "govdesaghilal" yaptık. Govdesaghilal layerını duplicate edelim (aynı layerdan ikinci bir tane oluşturalım).

 

Desn kopyalama

 

 

 

 

 

 

 

Resimdeki gibi yeni bir layer oluştu ama şekilde bişey değişmedi. Layer 104'e ctrl+solclick yapıp move tool aracına tıklıyoruz. Sonra klavyedeki sol yön tuşuna basarak layerımızı sola doğru çekelim. Neden bu işlemi yön tuşları ile yapıyoruz? Çünkü paralel bir hilal daha çizeceğiz. Paralelliği düzgün olarak sağlamak için yeni layerımızı mouse ile tutup sürüklemek yerine yön tuşları ile hareket ettiriyoruz.

 

Desen haraket ettirme

  

 

 

 

 

 

 

Yeni layerı resimdeki kadar sola getiriyoruz. Bu hilali çevirmemiz lazım. Bu işlem için önce layer 104'ü seçiyoruz. Photoshop ana menüsünden Edit->Transform-Flip Horizontal seçeneğini seçiyoruz. Bu işlem layerımızı yatay olarak ters çevirecektir.

  

Desen'i horizontal ile ters çevirme

 

 

 

 

 

 

 

Layer 104'ün ismini de sol hilal yapıyoruz. Bu hilalleri de Paint Bucket Tool yardımıyla yaka ve şort rengi ile aynı renge boyuyoruz. Psdyi psd ve png olarak kaydediyoruz (unwrap layerı açık ise png olarak kaydederken kapatmayı unutmayalım). Daha sonra png olarak kayıt yapınca 3ds Max'deki forma dokusu otomatik olarak yenilenecektir. Buradan yeni çizdiğimiz şekillerin nasıl göründüğünü kontrol ediyoruz. (RENDERDAN BAKILMASI GEREKİR!)

 

Modele renderden bakma

 

 

 

 

 

 

 

Bu resimdeki gibi modelimize yansıdı modelimizin sağ gövdesinde biraz uyumsuzluk olduğu için  bazı şekillerde bozulma olabiliyor. Hilallerden sırt bölgesinde de var. Aynılarını kopyalama işlemiyle sol taraftaki sırt bölgemize taşıyalım modele göre yerlerini ayarlayalım.  Şimdi sıra yakanın kenarlarındaki desenlere geldi yeni layer açıp ismini veriyoruz ve polygonal lasso aracımızla omuzdaki deseni çizmeye başlıyoruz.  Bu aracı düzgün kullanmanız lazım çünkü şekilleri yamuk çizebilirsiniz.

 

Omuza desen çizme

 

 

 

 

 

 

 

Resimdeki gibi omuzdaki şekli çizin. İçini şort rengi ile aynı renge boyayın.  Layer'ı duplicate yapın. Edit->Transform->Flip Horizontal ile ters çevirin. Bunu da sol omuza taşıyın. Görüntüyü model üzerinde test edin.

 

Kopyala yapıstır modele hizala

 

 

 

 

 

 

 

Genel olarak resimdeki gibi bir şekle varmanız gerekiyor. Şimdi kollara da aynı deseni verelim. Kola çizmeni gereken şekil aşağıdaki resimde verilmiştir. Buna benzeyen çizimi yukarıda anlattığımız yöntemleri ve araçları kullanarak oluşturun.

 

Kola desen çizme

 

 

 

 

 

 

 

Formadaki detayı sag kolda elde ettik. Aynı şekilde sol kolada  kopyalayıp modele uyarlıyoruz.

 

Son olarak logolara da renki verelim. Böylece formanın son görünümünü elde etmiş olduk.

 

formanin son görünümü

 

 

 

 

 

 

 

Bitmiş psd yi alt taraftan indirebilirsiniz.

 

[biten_k190_00.psd]