Mockup Hazırlama #Uygulamalarla Photoshop Dersleri

Mockup Hazırlama #Uygulamalarla Photoshop Dersleri


Photoshop'u başlangıç seviyesinde bilenler için uygulamalarla Photoshop dersleri anlatmaya çalışacağım, umarım faydalı bir çalışma olur.

Bu dersimizde Mockup hazırlamaktan bahsedeceğim. Dersin sonunda elde edeceğimiz çalışma aşağıdaki resimde verilmiştir.

190903265-09b79c3608bd905977d21f91228d5a7c2d6216e7011a9a0ce052049cf4f20ea4.jpeg

Photoshop dosyamızda ayarladığımız bir katman sayesinde bu katmana yerleştireceğimiz herhangi bir boyuttaki resim Xiaomi Red Mi Note 5 ekranına otomatik olarak yerleşecektir.

Temel Photoshop bilgisi olanlar bu sıkıcı anlatımı pas geçip makalenin sonunda yer alan videodan olayı hızlıca izleyebilirler.

Program : Photoshop CC 2014 version

Kaynaklar

190903265-e05726cc35ee6fee0c15a1848a0dfabea5a99e7058fa3ff2f598ec2e2f138698.jpeg

İlk olarak Photoshop'ta File menüsünden New diyerek aşağıdaki özelliklerde bir çalışma ekranı açıyoruz.

190903265-b840066e7df0a2105204cb54ea8b5e11f01a4f20020c87b09613361f5be3e66c.jpeg

Sonra “Dikdörtgen ” oluşturma tool unu kullanarak çalışma ekranımızın tamamını kaplayacak bir dikdörtgen çiziyoruz ve rengini #f2e8e1 şeklinde değiştiriyoruz.

190903265-4a54b25cdab87355a09f6483176702b483658042280796ce1b2858d47d7c4b23.jpeg

 

Not : Renk değiştirmeyi bilmeyenler dikdörtgeni çizdikten sonra Layers katmanında Dikdörtgen layerının üzerine çift tıklayarak yapabilirler.

190903265-a7d8cf57d7f3fb357a2294929d4b41bd05d9855fdd7045e169c9939e5927e36b.jpeg

 

Photoshop ekranımızın son hali aşağıdaki gibi olacaktır.

190903265-e8001ed8beb5fecf57fde5bf901d8d374e252384fc0993285eb969f486152bc1.jpeg

 

Sonra bu katman üzerine “Gradient” özelliğini kullanarak arka plana bir renk geçişi vereceğiz. Bunun için Layers katmanının hemen altında bulunan daire ikonuna tıklayıp açılan ekranda “Gradient” seçeneğini seçelim.

190903265-9f3ac693175c9c5a63a2f1ad9d0daa9b896aba3d0d6f454c2dff85749220e49c.jpeg

190903265-931a245f661981d195194f17685e0f8854c91559b8ed6e1ea1bc764157d2b37c.jpeg

 

Sonrasında karşımıza Gradient özellik penceresi gelecektir. Aşağıdaki ayarları uygulayınız.

190903265-dd38bda4ed50fb768735532f57edeae0656328e819ee6430571801aa87736a59.png

Gradient kısmında açılır pencereye tıklayıp “Gradient Editör”den şeffaf olup adı “Neutral Density” olanı seçip OK e basıyoruz.

190903265-c7d855bc24aa61e026f7ae8542d916e5793c801057b98059858b6de55f05d11e.png

Diğer ayarlar da
Style : Radial
Angle : 0
Scale : 300
Reverse, Dither ve Align with layer : İşaretli
olacak şekilde yapıp OK e basıyoruz.

190903265-1257d3fb196dcdd6b8447e70f491631477f525ec82ee864ecfc7aec42359af71.png

Sonrasında kaynak kısmında belirttiğim linkteki Xiaomi Red Mi Note 5 telefonunu çalışma ekranına almaya geldi. Bunun için File menüsünden > Place Embedded ı seçip aşağıdaki resimdeki gibi yerleştiriyoruz. Şimdi gelelim gölge kısmına ben genelde gölgeleri fırça kullanarak yapıyorum. Fırçayı şeffaf haliyle farklı bir layer oluşturarak oraya bir kere dokunduruyorum. Sonrasında Ctrl+T diyerek yuvarlağı aşağı doğru çekiştiriyorum. Eğer seçtiğiniz renk koyu geldiyse Opacity kısmından opasitesini azaltabilirsiniz. Çalışmanın son hali aşağıdaki gibidir.

190903265-656ed54e0dec789c640bf078d969eb59cd6cdf097b577e56003be40ff4da0c58.png

 

Şimdi de asıl mockup olacak kısmı ayarlamaya geldi. Sol taraftaki Tools lardan “Rounded Rectangle Tool” u seçerek renkli ekranı komple kapatacak şekilde çiziyoruz. Sonra da bu çizdiğimiz layer Layer kısmında seçip sağa tıkladıktan sonra “Convert To Smart Object” diyerek smart objeye dönüştürüyoruz.

190903265-d8ba523582b2d969892f3e7b8551899d16fc31b7ae2926a14c3856ed7c209925.png

190903265-19e8c3716d9fd9adb79a37627574ef2f9e2a44cf61ba92341f93679d0cb07bf3.png

190903265-79ec24ec561ad434437804ea8bcb68f405f100fce761db60e4a64d4317025d45.png

 

Bakalım bu haliyle mockup ımız çalışacak mı kontrol edelim.

“Rounded Rectangle 1” e çift tıklıyoruz ve bizi ayrı bir sayfaya yönlendiriyor. Ve bu kısma File > Place Embedded diyerek kaynak kısmında linkini verdiğim “Phone Wallpaper” ı yerleştiriyoruz ve Ctrl+S diyip bu ekranı kapatıyoruz. Kendi çalışma ekranımıza geldiğimizde resmin telefona geçtiğini göreceğiz.

190903265-4666db67f79024b000f058d97a99b6f3928e881d80db7b9c37f613e28f9cc9c1.png

190903265-68bccf3219f9ffc936b75cadd5c36a28344b02d0d230e135bf131e1552eaf6fb.png

 

Şimdi kompozisyonumuzu tamamlayalım.

İlk olarak yan tarafa bir dikdörtgen çizip üzerine Text tool unu kullanarak “Mockup Hazırlama” yazalım. Sonrasında File > Place Embedded diyerek kaynak kısmında linkini verdiğim Xiaomi logosunu yerleştirelim. Logoyu yerleştirdikten sonra rengini ayarlayacağız.

190903265-4504c39dbfd1f7e96c38967058f3cf051b45fc7554bafa23e82672802632d60f.png

 

Ama önce bu layerı Layers kısmında seçip sağa tıklayın ve “Rasterize Layer” seçeneğini seçin.

190903265-f42b2fa4dfade7f3defe214297009a9598b5e5e208b6128ed7d960f9edfac219.png

190903265-a7de6bf570ba95774b2dbc8076ec1ac0747b32aa604e98ca2ac5ddaee268de3e.png

 

Şimdi de logonun rengini değiştirmeye geldi. Bunun için klavyede elimiz Ctrl e basılı iken “logo” layer’ına mouse ile tıklayın. Kenarlarının seçili olduğunu göreceksiniz.

190903265-a47ef9626823a636bea6c88a506d362f7b22c5260eda0df5c69b6571245122fa.png

 

Fırçayı seçiniz ve rengini sol alttan “f57921” olacak şekilde değiştirin. Bunun için aşağıdaki resimde turuncu kare ile gözüken yere tıklayıp renk kodunu “#” kısmına elle yazmanız yeterli olacaktır.

190903265-7e7053960a2363ca0e8ba2e327221f61f382d015e9f7cb38253fa64b86884eca.png

190903265-23a542b35277de8c50f5d00e3ac392f325c9cab42308f8772ae619a8ee57ae07.png

 

Bu arada hala logomuz seçili iken fırça ile üzerini boyuyoruz. Logoyu küçültmek için Ctrl+T ye bastıktan sonra Shift(Üst Karakter) tuşuna basarak mouse ile küçültüyoruz. Sonuç aşağıdaki gibidir.

190903265-4058cb738b9d3b0cd346ccee04f7b1efdb6d9ec0f0d418028f71bf45e22a2e54.png

Son resmi elde etmek için “Mockup Hazırlama” dikdörtgeninin hemen altına ince bir dikdörtgen daha çiziyoruz. Çizdiğim dikdörtgenin rengi ise “201f25” dur.

190903265-7d2fa2eaf3968829ac8f3954f70a9af8b8b5877bf3626e12081c0cfb603baccb.png

 

Son olarak yansıma yapmamız gerekiyor. Bunun için “logo, pembe dikdörtgen ve Mockup Hazırlama” layerlarını Layers kısmından seçiyoruz ve klavyeden alt-shift tuşlarına basarak mouse ile aşağıya sürüklüyoruz. Böylelikle katmanların birer kopyası oluşturuldu. Ctrl +T ye bastıktan sonra mouse ile sağa tıklayıp “Flip Vertical” diyoruz. Seçtiğimiz elemanların ayna görüntüsü alınmış oldu. Ve bu layer ların opasite değerlerini %21 yapıyoruz.

190903265-207ef0a56151e10fa1ad8ae4bf9e99d65415fe42b828be0ee305d9c9eb868c12.png

 

Çalışmamızın son hali aşağıdaki gibidir.

190903265-74e7dad950b79a03c2594dad53284eee9842bcb11c602c8eed90f9b6f4a3b08d.png

190903265-c31cd2d1207b3164bb6706ccea93dfc63418c463dab84b4e9adb8d2a2e5774ff.png

 

Uygulamada sorun yaşayanlar için video hali hazırlanmıştır.

Not : Bu yazı daha önce Steemit Blogumda yayınlanmıştır:

https://steemit.com/tr/@etasarim/mockup-hazirlama-uygulamalarla-photoshop-dersleri

------------------------------------------------------------------------------------------------

This article was originally published on Steemit

How do you rate this article?

0


etasarim
etasarim

I am a designer. (Adobe Photoshop, Adobe Illustrator) and photographer | I fan : Coding, Electronic, Technology and Science


Adobe Photoshop CC Tutorials
Adobe Photoshop CC Tutorials

In this blog, you can find tutorials about Adobe Photoshop CC

Publish0x

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.