header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmu grafis » PHOTOSHOP ALTERNATIF

Membuat Mockup Website Di Smartphone Dengan Photoshop

Publish: 6 April 2016 | by Muhammad Ahsin, ST | in Photoshop Alternatif

Pada kesempatan ini saya ingin berbagi tutorial desain grafis yaitu bagaimana cara membuat gambar mockup website di tampilan layar smartphone. Bagi yang belum tau, mockup adalah salah satu bentuk representasi sebuah ide produk kemudian dituangkan ke dalam sebuah gambar sehingga terkesan lebih nyata.

Sebelum mengikuti tutorial ini kita terlebih dahulu harus mendownload foto seseorang yang sedang memegang smartphone. Pada layar smartphone itulah nanti kita akan menempatkan tampilan website, seakan-akan orang yang di dalam foto tersebut sedang melihat website yang kita miliki.

Download fotonya di sini: https://www.pexels.com/photo/person-woman-hand-space-4322/
Setelah mendownload buka foto tersebut dengan aplikasi Photoshop.

Mengambil Gambar Website

Capture gambar website yang akan ditampilkan di layar smartphone, buka website yang diinginkan menggunakan browser, pada contoh ini saya menggunakan website indesain.com. Karena halaman website tersebut nanti akan ditampilkan dalam layar smartphone, tentunya bentuk tampilan web juga harus tampilan mobile. Jika anda menggunakan browser chrome anda dapat mengklik pada ikon yang terdapat pada sudut kanan atas browser untuk melihat tampilan web dalam bentuk mobile. Kemudian pilh More tools > Developer tool.

more tool

Maka akan tampil halaman developer google chrome, sebelah kiri akan muncul halaman web dalam tampilan mobile. Anda dapat mengatur tampilan web ini dalam ukuran layar sesuai dengan keinginan. Anda dapat menggunakan alat bantu aplikasi Sniping Tool yang terdapat pada windows untuk mengambil gambar halaman web, atau juga dapat menekan tombol PrintScreen pada keyboard.

bagian website

Pastekan (Ctrl+V) halaman web yang sudah di print screen ke dalam foto yang telah dibuka dengan photoshop tadi. gunakan Rectangular Marquee Tool (M) untuk menseleksi bagian gambar yang digunakan, kemudian pilih Layer Via Copy maka akan terjadi penambahan layer (Layer 2) dengan gambar hasil seleksi.

seleksi

Disable layer 1 sehingga layer hasil seleksi terlihat.

disable

Gunakan Move Tool (V) lalu tarik sudut gambar website ke sudut layar smartphone, lakukan hal ini sambil menekan tombol [Ctrl] pada keyboard.

move tool

Lakukan pada keempat sudut gambar sehingga posisi gambar website tepat di dalam layar smartphone.
lekukan

Selanjutnya kita akan menghapus area gambar yang menutupi bagian tangan, untuk memudahkan proses penghapusan silahkan turunkan Opacity Layer 2 terlebih dahulu menjadi 25%.

opacity

Gunakan Polygonal Lasso Tool (L) untuk membuat seleksi pada bagian jari yang tertutup oleh gambar website.



Tekan tombol Delete pada keyboard maka gambar website yang menutupi jari akan terhapus. Naikkan kembali Opacity Layer 2 menjadi 100%. Hapus seleksi dengan menekan Ctrl+D


Membuat Efek Glossy pada Layar

Langkah selanjutnya adalah membuat efek glossy pada layar supaya lebih terlihat realistis. Gunakan Polygonal Lasso Tool (L) kemudian buat seleksi seperti pada gambar di bawah. Buatkan layer baru dengan menekan Ctrl+Shift+N.

Pilih Paint Bucket Tool (G) lalu atur warna foreground menjadi putih. Selanjutnya klik pada bagian dalam area seleksi sehingga warna layar berubah menjadi putih.

Gunakan lagi Polygonal Lasso Tool (L) untuk membuat seleksi seperti pada gambar di bawah. Kemudian tekan tombol Delete pada keyboard untuk menghapus separuh gambar yang berwarna putih pada layar.

Turunkan nilai Opacity Layer 3 menjadi 50%.

Inilah hasil akhir dari Tutorial Membuat Mockup Website Di Smartphone dengan Photoshop

Sekian dulu tutorialnya semoga memberikan banyak manfaat bagi kita semua, terima kasih

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
 
author

Muhammad Ahsin, ST
Tentang Penulis :
Penulis berprofesi sebagai web programmer yang memiliki hobi pemrograman, web desain, desain grafis, fotografi dan main drum. Disela kesibukan dalam bekerja, penulis menyempatkan diri untuk berbagi ilmu desain melalui web indesain.com.

Motto : Mencoba berbagi apa yang bisa, walaupun hal sederhana

Penulis dapat dihubungi via:
Email : ahsin90@rocketmail.com
Facebook: https://www.facebook.com/muhammad.ahsin

Website: indesain.com

Rekomendasi ilmugrafis

PSD CE
Photoshop Complete Edition

Koleksi Lengkap Video Tutorial Photoshop dan mulai dari Efek Foto Professional hingga manipulasi foto terungkap semua disini

Photoshop Desain Grafis
Video Tutorial Photoshop CS 3 ini mengungkap penggunaan teknik-teknik photoshop yang sering digunakan para praktisi

PLG NT
Plugins Topaz dan NIK

Koleksi Plugins Photoshop yang powerfull untuk membuat Foto - Fotomu Lebih Berwarna dan Bermakna

Plugins Suite 5
Kumpulan Plugins Premium dan Plugins Suite 5 untuk meningkatkan kemampuan dan menambah fitur Photoshop anda


[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

BLENDER 3D
Blender Dasar

FOTOGRAFI
Lightroom

VECTOR
Adobe Illustrator

ANIMASI
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DESIGN
Dreamweaver
jQuery

PUBLISHING
InDesign
Ms. Paint

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain
Donasi

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker