Mohon tunggu...
Andreansyah Setiawan
Andreansyah Setiawan Mohon Tunggu... -

UI/UX Designer di salah satu startup surabaya

Selanjutnya

Tutup

Nature

Tutorial Device Mockup dengan Photoshop CS6

3 Oktober 2014   03:13 Diperbarui: 17 Juni 2015   22:35 698
+
Laporkan Konten
Laporkan Akun
Kompasiana adalah platform blog. Konten ini menjadi tanggung jawab bloger dan tidak mewakili pandangan redaksi Kompas.
Lihat foto
Bagikan ide kreativitasmu dalam bentuk konten di Kompasiana | Sumber gambar: Freepik

Halo teman-teman, pada hari yang cerah ini saya akan mencoba untuk berbagi dengan kalian semua caranya untuk menggunakan device mockup melalui Adobe Photoshop CS6.  Seperti yang kita ketahui device mockup sangat lah berguna bagi teman-teman UI/UX Desainer untuk mempresentasikan hasil desain mereka kepada klien atau kepada atasan. Selain itu device mockup juga berguna untuk mempamerkan dan memasang desain kita itu di portofolio.

Baiklah tutorial ini akan saya mulai dengan memberikan beberapa sumber bahan desain untuk dipakai sama teman-teman semua

1.Device mockup (www.freebiesbug.com)

2.Mobile UI Kit (www.freebiesbug.com / www.dribbble.com )

3.Berdoa kepada Tuhan YME :)

Baiklah yang pertama adalah, siapkan resource desain kalian, linknya ada diatas yah ^^.  Lalu setelah itu buka Photoshop milik teman-teman, jangan lupa saat mendownload bahan desain lihat keterangan requirement Photoshop yang dibutuhkan. Biasanya sih dibawah CS3 tidak bisa :)

Nah seperti ini tampilannya :)

Setelah itu, klik dua kali *double Click pada tulisan “Your App Here” atau yang biasanya ada tanda Smart Objectnya.

14122552862094315997
14122552862094315997

Setelah diklik dua kali akan keluar tampilan seperti ini [jeng jeng jeng]

1412255352824627042
1412255352824627042

Nah bagi teman teman desainer yang sudah pro [yaelah bro -_-] setelah keluar kanvasnya pasti udah tau dong bakal ngapain setelah ini? :D Yap waktunya berkreasi ria. Tapi saya juga nggak mau rasis ya teman-teman [benerin kerah baju]. Nah buat temen-temen yang masih awam nih, kalian bisa pakai UI Kit yang sudah banyak beredar di internet secara free dari desainer-desainer professional, jadi bisa buat belajar juga itu UI Kit :)

14122554411467496725
14122554411467496725

Baiklah itu tadi tutorial dasar untuk penggunaan Device Mockup dari saya, semoga bermanfaat apabila ada kesalahan saya mohon dimaafkan. Barangkali temen-temen pro ada yang mau nambahin silahkan diskusi di komentar yap. Terimakasih dan sampai jumpa :)


Baca konten-konten menarik Kompasiana langsung dari smartphone kamu. Follow channel WhatsApp Kompasiana sekarang di sini: https://whatsapp.com/channel/0029VaYjYaL4Spk7WflFYJ2H

Mohon tunggu...

Lihat Konten Nature Selengkapnya
Lihat Nature Selengkapnya
Beri Komentar
Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator seperti diatur dalam UU ITE

Belum ada komentar. Jadilah yang pertama untuk memberikan komentar!
LAPORKAN KONTEN
Alasan
Laporkan Konten
Laporkan Akun