Photoshop'la Basit Bir Mockup Oluşturmak

Photoshop'la Basit Bir Mockup Oluşturmak

Mockup, sunum için kullandığımız işlerimizi kolaylaştıran çalışmalar diyebiliriz. En basitinden nasıl yapıldığına bir göz atalım.

Yaptığımız işleri sergilemek için sunum yapma ihtiyacı hissettiğimizde mockup denilen çalışmalardan yararlanıyoruz. Bunları internette pek çok sitede hazır olarak temin etmek mümkün. Ancak bu dersin konusu nasıl temin edeceğimiz değil, en basit haliyle bunun mantığı ve nasıl yapacağımız.

Benim yapmak istediğim şey şu: Aşağıdaki resmi Google'da mockup diye arattırdım ve karşıma çıktı. Bu gördüğünüz laptop ekranına Sanalkurs sitesinin resmini ekleyeceğim. Ama bunu yaptıktan sonra kalıcı olmasını da istiyorum. Yani daha sonra başka bir sitenin resmini eklemek istediğimde hiç zorlanmadan da eklemeliyim. Yani tek tıkla, kopyala yapıştır bu ekrana site eklemek hızlı ve kolay olmalı.

Bu resmi Photoshop'ta açalım. Rectangle aracını kullanarak bir dikdörtgen çizelim.

Oluşturduğumuz dikdörtgenin ekran ile aşağı yukarı orantılı olması iyi olur. Yani ekrana bakıp göz kararı oluşturabilir, ya da gerçek ölçülerini biliyorsanız ona göre yapabilirsiniz. Ne kadar oran yakın olursa sonuç o nispette iyi olur.

Bu oluşturduğunu şekli Layer panelinde sağ tıklayıp Smart Object'e çevirin.

Şimdi bu şekilde seçili iken Ctrl+T'ye basın ve Ctrl tuşuna basılı tutun, köşelerinden çekip uzatarak ekrana yerleştirin.

Şimdi ekran izlenimi vermek için küçük bir efekt ekleyelim. Layers panelinden bu şekile sağ tıklayın ve Blending Options seçin. Göz kararı ile abartmadan Inner Shadow ayarı yapın.

Ekran içine doğru hafif bir gölge vermiş olduk.

Şimdi web sitemizin ekranını yerleştirebiliriz. Layers paneline geçin. Rectangle dosyamızın Smart Object olduğunu gösteren disket işaretini göreceksiniz. Bunun üzerine çift tıklayın.

Yeni bir pencerede bu az önce oluşturduğumuz dikdörtgen açılacaktır. Buraya sitemizin ekran görüntüsünü ekranda nasıl görünmesini istiyorsak yerleştirelim.

Kaydedelim (Ctrl+S) ve bu açılan pencereyi kapatabiliriz. Kapattığımız zaman ekranımızın bilgisayarın ekranına yerleşmiş olduğunu göreceğiz:

Gördüğünüz gibi çok basit bir teknikle halletmiş olduk. Bundan sonra aynı resmi başka site sunumları için kullanmak isterseniz yapmanız gereken tek şey, Layers panelinden dikdörtgen objesine çift tıklayıp açılan pencerede sitenizin ekran görüntüsünü yerleştirmek ve kaydedip kapatmak.

Sorularınız olursa yanıtlarız. Kolay gelsin.

 

 

Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Çok güzel bilgi. Emeğinize sağlık...
güzel bilgi eğitici olmuş emeğinize sağlık
teşekkür ederim güzel bir paylaşım olmuş.

Yukarı Git