3 cara untuk membuat tangkapan layar GIF animasi dari desain berfungsi untuk portofolio Anda

Setelah proyek desain web terbaru Anda selesai, saatnya untuk memamerkannya dan menambahkannya ke portofolio Anda. Pengunjung situs web Anda (dan calon klien!) Akan ingin melihat karya Anda yang luar biasa beraksi. Citra yang bagus adalah kuncinya, dan di ruang digital, akan ada saatnya Anda ingin mengilustrasikan fungsionalitas proyek. Memamerkannya dengan tangkapan layar animasi mungkin merupakan solusi sempurna.

Saya yakin Anda telah melihat tangkapan layar animasi sederhana dan keren yang menunjukkan kepada kami cara kerja aplikasi atau situs web. GIF tangkapan layar memberi pengguna gagasan yang lebih baik tentang bagaimana tugas tertentu dilakukan sambil juga menunjukkan fitur apa yang tersedia. Video tentu saja merupakan pilihan dan pasti memiliki tempat penting di web. Video produk atau studi kasus yang mendalam pasti mendapat manfaat dari format video. Namun, pilihan yang lebih sederhana dan lebih sadar ukuran file seperti GIF tangkapan layar animasi mungkin adalah yang Anda cari.

Mengapa tangkapan layar animasi penting untuk portofolio Anda

Baik Anda mengucapkannya "GIF" atau "JIF", penting untuk diingat bahwa GIF bisa lebih dari sekadar kucing lucu dan klip video dengan tagline yang cerdas. GIF animasi proyek Anda harus menarik perhatian dan direncanakan dengan cermat untuk menunjukkan fungsionalitas desain. Menganimasikan elemen antarmuka adalah tujuan fungsional dan estetika, jadi file GIF menunjukkan ini. Bagaimana dengan mendemonstrasikan menu dan opsi yang disajikan pekerjaan Anda? Bagaimana kalau menunjukkan cara kerja gulir? Menampilkan fungsionalitas membantu pengguna melihat dengan jelas bagaimana aplikasi atau situs web dapat membantu mereka.

Alat untuk membuat GIF

Tidak ada cara yang lebih baik untuk menunjukkan kerja keras Anda selain dengan salah satu alat berikut untuk membuat GIF. Contoh di bawah ini akan menunjukkan tampilannya saat pengguna mengetuk opsi, melihat lebih banyak detail, lalu menggulir untuk melihat lebih banyak konten.

Catatan : Tidak akan ada instruksi desain visual dalam tutorial ini; tips ini menganggap desain situs web atau aplikasi untuk proyek portofolio Anda sudah selesai.

Cara membuat screenshot GIF animasi di Adobe Photoshop

Menurut pendapat saya, Adobe Photoshop dan Adobe After Effects adalah alat terbaik untuk pekerjaan itu. Keduanya memungkinkan banyak kontrol atas produk akhir. Saya pribadi menyukai Photoshop untuk membuat tangkapan layar GIF (dan sebagian besar desainer sangat mengenalnya), jadi begitulah contoh berikut akan dibuat. Mari kita mulai!

Menampilkan fungsi gulir

Desain ini dilakukan di Adobe XD tetapi kemudian diekspor ke Photoshop dengan nama layer yang sesuai. Contoh memiliki lapisan yang disebut "Daftar Lokasi MinTour" untuk halaman daftar, "Daftar Taman Patung" untuk halaman detail, dan bagian yang keluar dari tampilan gulir awal disebut "Sculpture Garden Listing Overflow."

Bagian satu

1. Pengaturan garis waktu dan daftar lokasi

Fitur Timeline adalah apa yang akan kita gunakan untuk membuat layar yang berbeda untuk produk akhir. Pastikan Timeline Panel terbuka dengan membuka Window > Timeline .

Berikut adalah halaman daftar; pengguna mulai di sini, mengetuk lokasi, dan akan tiba di halaman detail, tempat mereka dapat menggulir untuk melihat detail lebih lanjut.

Anda akan melihat sudah ada keyframe pertama yang dibuat. Pastikan lapisan yang benar ditampilkan sehingga tampilan yang benar ditampilkan di bingkai utama.

Opsional: Jika Anda ingin menunjukkan tempat pengguna mengetuk, terkadang ini ditampilkan dengan titik. Untuk melakukan ini, tambahkan bingkai ekstra dengan area titik.

2. Detail lokasi individu

Kemampuan untuk mengatur dengan lapisan adalah keuntungan besar dan akan membantu Anda menjaga semuanya tetap lurus saat Anda membuat GIF tangkapan layar Anda. Buka opsi di panel Timeline dan pilih "Bingkai Baru." Hal yang sama di sini– pastikan lapisan yang benar disembunyikan/ditampilkan. Untuk yang ini, saya membutuhkan daftar individu untuk ditampilkan, sehingga lapisan daftar lokasi disembunyikan.

3. Detail lokasi individu gulir konten

Halaman daftar individu untuk Taman Patung memiliki lebih banyak konten, jadi area gulir harus ditampilkan kepada pengguna. Ini berada di lapisan terpisah, jadi saya membuat bingkai baru untuk menampilkan konten luapan ini.

4. Pilih durasi

Ini mungkin memerlukan beberapa eksperimen, tetapi memilih durasi untuk setiap frame adalah penting. Anda ingin pengguna memiliki cukup waktu untuk melihat setiap frame, tetapi mereka juga tidak perlu menunggu terlalu lama sebelum melihat frame berikutnya.

Saya memasukkan nilai untuk setiap frame, dengan total lima detik untuk keseluruhan animasi.

5. Pratinjau

Ada baiknya untuk melihat apa yang terjadi sejauh ini. Ada tombol putar di baris bawah panel Timeline. Cobalah berbagai hal dan lihat apakah ada yang bisa diperbaiki.

(Opsional) kontrol tween

Hal-hal yang dipesan dengan benar, tetapi mereka tampak sedikit gelisah. Animasi tangkapan layar dapat disesuaikan untuk membuat segalanya tampak lebih halus. Dari opsi Timeline, ada opsi "Tween". Untuk secara otomatis membuat animasi yang mulus antara frame saat ini dan sebelumnya, dapat ada lebih banyak frame yang dimasukkan secara otomatis.

Dari daftar hingga daftar yang meluap, Tween ditambahkan agar terlihat lebih seperti tindakan menggulir. Bingkai baru tersebut diatur untuk memiliki durasi yang sangat singkat yaitu 0,05 detik (pengguliran dalam aplikasi terjadi relatif cepat).

Jika Anda ingin ini terus berulang di Photoshop, pastikan "Selamanya" dipilih. Jika ada sejumlah loop, nilai itu dapat dimasukkan.

6. Menyimpan GIF tangkapan layar (hanya aliran layar)

Jika Anda ingin memasukkan ini hanya sebagai alur layar animasi, menyimpan akan menjadi langkah terakhir. Pada saat ini, animasi tangkapan layar dibuat, itu hanya harus disimpan dalam format GIF yang benar. Anda mungkin terbiasa menyimpan gambar statis, tetapi menyimpan urutan gambar berbeda. Buka File > Save for Web untuk menyimpan file GIF ini.

Di sini Anda akan melihat semua pengaturan yang Anda perlukan untuk GIF Anda. Ingat, Anda terbatas pada jumlah warna, jadi kami akan membuat semuanya terlihat terbaik sebelum mengekspor. 256 kemungkinan besar adalah pilihan terbaik karena situs web dan aplikasi cenderung memiliki rentang warna yang luas, tetapi jika desain Anda memungkinkan, Anda dapat menyederhanakannya (yang membuat ukuran file tetap kecil).

Ada juga beberapa pengaturan "Animasi" di sudut kanan bawah; Anda dapat memilih Looping jika Anda ingin ini berulang tanpa batas. Anda juga dapat mengulang beberapa kali jika diinginkan. Simpan ke lokasi yang diinginkan, dan siap digunakan!

Bagian dua: Layar berlapis ditampilkan pada perangkat

Jika Anda memutuskan untuk melanjutkan, diperlukan beberapa langkah tambahan untuk melapisinya agar terlihat lebih realistis di ponsel. Dari panel Timeline pilih "Flatten Frames Into Layers." Setiap frame akan diubah menjadi layer datar yang akhirnya menjadi 26 frame (jadi ada 26 layer).

Setelah itu disimpan, gambar telepon perlu ditambahkan ke file. Untuk mengakomodasi ini, beberapa pengubahan ukuran gambar harus dilakukan.

1. Sesuaikan ukuran kanvas untuk tangkapan layar animasi Anda

Gambar latar belakang adalah 1300 X 920, jadi ukuran kanvas perlu disesuaikan agar pas dengan itu. Pergi ke Image > Canvas Size dan masukkan ke dalam dimensi yang benar.

2. Siapkan lapisan untuk ditempatkan di layar ponsel

Selanjutnya buat layer baru untuk gambar background agar animasi bisa berlapis di atasnya. Di sinilah lapisan bingkai "Pilih Semua" akan berguna.

3. Periksa ulang bingkai

Ini adalah saat yang tepat untuk memastikan bahwa bingkai masih sesuai dengan yang Anda rencanakan. Jika Anda memutar animasi dari panel Timeline, Anda akan melihat urutan animasi.

4. Miringkan layar

Penting bahwa semua lapisan layar dipilih sehingga semuanya dapat dimiringkan sekaligus agar tetap seragam. Edit > Transform > Skew adalah tempat ini dilakukan.

Ini akan membutuhkan sedikit percobaan, tetapi sesuaikan sudutnya sehingga sejajar dengan batas layar, memberikan ilusi bahwa layar diterangi dengan animasi.

5. Penyesuaian gambar dan menyimpan tangkapan layar GIF Anda

Sekarang adalah waktu untuk melakukan penyesuaian. Warna, kontras, atau sentuhan akhir lainnya harus dilakukan sebelum menyimpan. Menyimpan animasi sama seperti yang dilakukan di Bagian satu, langkah 6.

Dalam contoh ini, latar belakang didesaturasi dan kontras ditingkatkan untuk membuat animasi benar-benar menonjol. Sekarang tampaknya ada di perangkat nyata!

Giphy

Jika Photoshop bukan alat pilihan Anda, ada alat gratis dan mudah yang disebut Giphy. (Selain penggunaan profesional, Anda juga dapat membuat banyak GIF lucu!)

Jika Anda memilih "Slideshow," ini adalah pilihan yang baik untuk membuat screenshot animasi. Untuk menggunakan ini, Anda harus memiliki file individual dari layar yang disimpan. Anda kemudian akan menarik dan melepaskan gambar diam dan prosesnya akan dimulai.

Setelah file diunggah, pilih "Buat Slideshow." Setelah selesai menyatukan gambar, Anda dapat mengunduh file. Ini sesederhana itu!

Rekam ini

Aplikasi ini cukup sederhana; itu merekam tindakan yang terjadi di layar komputer Anda dan mengunggah rekaman ke situs web Recordit.io dan membuat tautan yang dapat dibagikan, dengan opsi untuk mengunduh GIF.

Ketika Recordit telah diinstal di komputer Anda, sebuah ikon muncul di bilah tugas. Saat dipilih, Anda dapat menyeret ke dan memilih area layar yang ingin Anda rekam. Ini sempurna ketika saya pergi ke mode pratinjau di Adobe XD dan dapat menggunakan prototipe untuk demonstrasi.

Setelah Anda memilih area yang akan dimasukkan, tombol rekam akan muncul. Saat Anda menekan "Rekam," Recordit kemudian merekam semua yang terjadi di layar Anda, dalam batas yang Anda buat. Ketika Anda selesai merekam, cukup pilih "Stop."

Ini akan memakan waktu beberapa detik, tetapi setelah perekaman dihentikan, akan ada pop-up dengan tautan yang membawa Anda ke rekaman, yang di-host di situs Recordit.io.

GIF animasi tangkapan layar adalah cara yang bagus untuk menunjukkan alur pengguna dan cara kerja proyek desain Anda. Video juga memiliki tempatnya, tetapi GIF dapat dibuat dengan sangat cepat dan mudah ditambahkan ke portofolio online Anda.

Lembar kerja gratis: Target audiens dan persona klien

Mencari panduan yang dapat ditindaklanjuti untuk membantu Anda menjaga konten Anda tetap relevan dan menarik? PDF interaktif tiga halaman ini akan membantu Anda menemukan audiens Anda, mengaudit konten Anda, dan membuat rencana permainan untuk mengembangkan bisnis Anda.

Jika Anda menyukai artikel ini, Anda mungkin juga menikmati ini:

• Cara membuat animasi SVG dengan CSS
• Cara membuat galeri video WordPress
• Cara menggunakan tautan lewati untuk membuat situs WordPress Anda lebih mudah diakses