7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Animation

Membuat GIF Animasi Interface di Adobe PhotoshopApakah yang akan anda buat?

Scroll to top
Read Time: 9 mins
This post is part of a series called Animation in Adobe Photoshop.
Make an Animated Pumpkin Icon Using Pixel Art in Adobe Photoshop
Create a Run Cycle Animation From Scratch in Adobe Photoshop

Indonesian (Bahasa Indonesia) translation by Muhlis Tirowali (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Pernahkah anda ingin mengubah interface aplikasi PSD menjadi demo animasi lengkap untuk klien atau situs anda? Anda ternyata juga bisa menggunakan Photoshop untuk mengubahnya.

Dalam tutorial ini, kita akan merancang sebuah aplikasi iPhone berita sederhana, kemudian menganimasinya untuk presentasi klien dan mengekspornya sebagai file GIF. Anda akan mempelajari semua hal yang perlu anda lakukan mulai dari idenya hingga demo animasi. Semuanya ada di dalam versi Photoshop terbaru.

Aset Tutorial

Kami telah menggunakan Photoshop CC, tetapi versi CS5 atau 6 mungkin akan bekerja maksimal nuntuk tutorial ini. Anda juga memerlukan foto stok berikut untuk melengkapi tutorial ini. Silahkan mengunduhnya sebelum anda memulai atau bisa juga menggantinya dengan gambar lain yang serupa dan sesuaikan langkah-langkahnya secara benar:

1. Desain Aplikasi iPhone GUI

Langkah 1

Pertama, kita akan mulai merancang interface aplikasi. Buatlah file baru (Control-N) dengan ukuran kanvas 640 px x 1136 px, lalu klik OK.

Jika anda telah memiliki desain interface aplikasi, anda dapat membukanya di Photoshop dan kemudian beralih ke bagian Tap pada tutorial ini.

new docnew docnew doc

Langkah 2

Klik View > New Guide untuk membuat panduan baru yang akan membantu kita dalam menempatkan elemen GUI secara akurat.  Atur menjadi Vertical dengan posisi 15 px.

guideguideguide
guide in placeguide in placeguide in place

Langkah 3

Tambahkan panduan vertikal lainnya di setiap sisi kanvas dengan jarak 15 px di antara masing-masing panduan.

15px guides15px guides15px guides

Langkah 4

Gambarkan panduan lain secara horizontal pada 40 px, 128 px, dan 220 px.

horizontal guideshorizontal guideshorizontal guides
all guides in placeall guides in placeall guides in place

Langkah 5

Tambahkan status bar di bagian paling atas kanvas. Jika anda memerlukan petunjuk rinci tentang hal tersebut, lihatlah bagian status bar dari tutorial sebelumnya tentang Cara Merancang Aplikasi Email iOS 7 di Photoshop.

Buatlah layer baru lalu pilih bagian kedua dan isilah dengan warna abu-abu, #2c3137.

status barstatus barstatus bar

Langkah 6

Tambahkan teks judul aplikasi di bagian atas interface.

titletitletitle

Langkah 7

Tambahkan logo ke bagian judulnya. Saya hanya menggambar beberapa persegi panjang sederhana untuk logo. Jika anda memiliki ikon aplikasi, anda bisa mengimpornya ke layer baru.

logologologo

Langkah 8

Gambarlah ikon kaca pembesar menggunakan kombinasi dua bentuk lingkaran dan persegi panjang berujung lengkung dengan warna yang sama seperti logo aplikasi. Tempatkan di sisi kanan aplikasi.

search iconsearch iconsearch icon

Langkah 9

Di sisi lain, buatlah empat persegi panjang dengan ujung lengkung untuk ikon opsi.

optionsoptionsoptions

Langkah 10

Buatlah layer baru dengan bagian persegi panjang yang pas di bawah title bar. Isi bagian berikut dengan warna abu-abu sama seperti bagian sebelumnya.

next barnext barnext bar

Langkah 11

Tambahkan layer mask ke layer, lalu tambahkan gradien hitam ke putih sampai bagian bawahnya memudar.

gradientgradientgradient

Langkah 12

Tambahkan menu berisi kategori berita menggunakan Type Tool. Tetapkan menu pertamanya, dalam hal ini adalah All option yang dicetak tebal untuk menunjukkan bahwa kategori tersebut aktif. Duplikat menu tersebut dengan Control-J. Setelah itu, atur menu lainnya, dalam hal ini adalah Sport yang dicetak tebal untuk menunjukkan kategori mana yang dipilih.

Sekarang, atur Opacity menu Sport menjadi 0% dari panel Layers untuk menyembunyikannya karena kita ingin All kategori dicetak tebal terlebih dahulu.

menusmenusmenus

Langkah 13

Tambahkan panah tipis yang terbuat dari persegi panjang berujung lengkung untuk navigasi menu.

nav arrownav arrownav arrow

Langkah 14

Tambahkan panah lain ke sisi yang lain.

matching nav arrowmatching nav arrowmatching nav arrow

Langkah 15

Isilah sisa ruang interface dengan warna abu-abu. Pastikan anda meletakkan latar belakang ini di bawah semua elemen GUI.

backgroundbackgroundbackground

Langkah 16

Gambarlah persegi panjang berwarna abu-abu terang untuk latar belakang masing-masing bagian berita.

lighter backgroundlighter backgroundlighter background

Langkah 17

Terapkan Stroke, Inner Glow, dan Outer Glow untuk menambah kontras ke area berita. Klik dua kali pada layer dan gunakan pengaturan dari tangkapan layar berikut ini:

strokestrokestroke
inner glowinner glowinner glow
outer glowouter glowouter glow

Langkah 18

Gambarlah persegi panjang putih berujung lengkung di bagian atas bentuk sebelumnya. Kita akan memasukkan gambar beritanya di sini.

news elementnews elementnews element

Langkah 19

Atur Inner Glow ke dalam shape putih seperti berikut:

news entry glownews entry glownews entry glow

Langkah 20

Pilih foto dari Tuts+ Stock Foto set yang telah anda unduh sebelumnya ataupun foto lain yang ingin anda gunakan. Setelah itu, letakkan fotonya menutupi persegi panjang.

photo in newsphoto in newsphoto in news

Langkah 21

Tekan Control-Alt-G untuk mengubah layer foto yang dipilih menjadi Clipping Mask.  Foto secara otomatis akan masuk ke layer di belakangnya. Anda akan melihat foto yang ditempatkan secara sempurna di atas area berita individual.

photo placementphoto placementphoto placement

Langkah 22

Tambahkan teks untuk konten berita. Pastikan anda menambahkan kontras pada teks beritanya dengan mengubah jenis font, warna, dan ukuran untuk pengalaman membaca yang lebih baik.

styled textstyled textstyled text

Langkah 23

Sekarang tambahkan ikon ke desain elemen berita. Gambarlah dua bulatan putih yang kecil tanpa Fill dengan tebal 1 pt.

iconsiconsicons

Langkah 24

Klik dua kali pada layer lalu tambahkan style layer Color Overlay. Gunakan #708196 sebagai warnanya.

add color overlayadd color overlayadd color overlay

Langkah 25

Ulangi proses sebelumnya namun dengan kombinasi persegi panjang berujung lengkung dan persegi panjang.

another iconanother iconanother icon

Langkah 26

Tambahkan bentuk lingkaran kecil di dalam bentuk persegi panjang yang telah dibuat. Sekarang, kita berhasil membuat ikon tag. Manis sekali bentuknya!

tag and link iconstag and link iconstag and link icons

Inilah desain aplikasi yang telah kita buat dengan perbesaran 100%.

100 magnified app UI100 magnified app UI100 magnified app UI

Langkah 27

Tambahkan artikel berita individual lainnya ke dalam aplikasi dengan menduplikat layer elemen berita lalu sesuaikan secara tepat.

filled articlesfilled articlesfilled articles

Langkah 28

Tambahkan area berita yang lebih luas. Area ini akan ditunjukkan saat berita individual dipilih.

larger news arealarger news arealarger news area

Langkah 29

Letakkan semua elemen berita individual dan berita besar di kelompok layer yang terpisah. Pastikan setiap layer ditempatkan secara hati-hati ke dalam kelompok layer menurut elemennya.

Misalnya, anda ingin setiap layer untuk bagian berita individual pertama ditempatkan dalam satu kelompok layer lalu elemen untuk artikel berita layar penuh ditempatkan dalam kelompok lainnya. Hal ini akan memudahkan kerja anda saat melakukan animasi.

layer groupslayer groupslayer groups

Untuk saat ini, kita tidak akan menggunakan bagian berita besar ini. Jadi, atur Opacity menjadi 0%.

2. Indikator Tap

Langkah 1

Sekarang, kita perlu merancang indikator tap. Buatlah sebuah grup layer baru dan beri nama tap. Selanjutnya, gambarlah lingkaran putih lalu  atur Opacity menjadi 50%.

tap sectortap sectortap sector

Langkah 2

Duplikat bentuk lingkaran putih itu dengan menekan Control-J. Buatlah lingkaran itu lebih besar dan atur stroke hingga 3 pt lalu hilangkan warna Fill.

tap bordertap bordertap border

Langkah 3

Tambahkan bentuk lingkaran lainnya yang lebih tipis. Atur ukuran goresannya menjadi 2 pt.

thinner circlethinner circlethinner circle

Sembunyikan semua layer di dalam kelompok layer tap yang baru saja kita buat karena anda tidak ingin tap muncul saat UI pertama kali dimuat dan hanya akan menampilkannya saat animasi menyesuaikan transisi ke elemen yang dipilih.

3. Aplikasi Scroll

Langkah 1

Sekarang kita siap untuk membangun animasi UI. Bukalah panel Timeline lalu buatlah frame baru.

timelinetimelinetimeline

Langkah 2

Buatlah frame baru lagi.

another new frameanother new frameanother new frame

Langkah 3

Sekarang saatnya untuk menampilkan kelompok layer tap. Saat menampilkan aktivitas scrolling layar, sembunyikan dua lingkaran dan kita akan menggunakan kondisi ini untuk menunjukkan gestur scroll. Tampilannya akan muncul lebih sebagai stroke kontinyu, sedangkan lingkaran terluar memberikan tampilan yang lebih konsisten dengan satu kali sentuhan untuk memilih item.

scrolling circlescrolling circlescrolling circle

Langkah 4

Ubah durasi menjadi 1 detik untuk frame pertama dan 0,2 detik untuk frame kedua.

durationdurationduration

Langkah 5

Tambahkan frame lain.

another new frameanother new frameanother new frame

Langkah 6

Aktifkan grup layer Tap dan semua layer grid berita. Gunakan Move Tool untuk memindahkannya ke

move layer groupsmove layer groupsmove layer groups

Langkah 7

Klik Tween dari menu panel Timeline untuk membuat animasi yang mulus antara frame saat ini dan frame sebelumnya secara otomatis.

tweentweentween

Langkah 8

Atur tween menjadi 5 untuk frame tambahan.

tween of 5tween of 5tween of 5

Sekarang, kita memiliki animasi grid berita bergerak ke atas pada setiap framenya.

auto-generated news grid animationauto-generated news grid animationauto-generated news grid animation
news grid animation 2news grid animation 2news grid animation 2

Langkah 9

Jika anda berpikir bahwa animasinya terlalu cepat, anda bisa membuatnya lebih lambat dengan memilih semua frame dan mengatur durasinya menjadi 0,2 detik.

slower animationslower animationslower animation

Uji animasi dengan mengklik ikon putar di panel Timeline. Jangan lupa mengatur animasi menjadi Forever untuk membuat animasinya berputar.

playplayplay

Langkah 10

Animasi kita saat ini berisi jaringan berita yang bergerak ke atas. Pada frame berikutnya, kita perlu mengembalikannya ke kondisi semula sehingga akan berlanjut mulus dengan frame pertama. Untuk melakukan hal ini, salin frame kedua dan tempelkan di posisi terakhir dengan memilih Paste After Selection di kotak dialog.

copy framecopy framecopy frame
paste framepaste framepaste frame
paste after selectionpaste after selectionpaste after selection

Langkah 11

Terapkan perintah Tween kembali untuk membuat animasi baru antara frame terakhir dan frame berikutnya setelah frame terakhir.

tween againtween againtween again
5 frame tween5 frame tween5 frame tween

Tambahkan frame baru dan sembunyikan indikator tap.

hidden taphidden taphidden tap

Inilah tampilan animasi yang kita dapatkan. Animasi ini memberikan kita UI scrolling dasar.

animated UI scroll

4. Link Tap

Langkah 1

Sekarang saatnya untuk menganimasi pilihan link pada menu. Pertama, buatlah frame baru. Dalam frame ini, atur Opacity menu teks dengan varian All yang dicetak tebal dari menu yang diatur menjadi 0% dan varian Sport diatur menjadi 100%.

bold sportbold sportbold sport

Langkah 2

Aktifkan grup layer Tap dan tampilkan semua layernya. Ubah durasi frame menjadi 0,2 detik.

add a tapadd a tapadd a tap

Langkah 3

Buat frame baru dengan durasi 0,1 detik. Sembunyikan lingkaran yang paling tipis.

hide outer circlehide outer circlehide outer circle

Langkah 4

Tambahkan frame lainnya dan sembunyikan lingkaran berikutnya.

hide next circlehide next circlehide next circle

Langkah 5

Tambahkan frame baru dan sembunyikan grup layer tap.

hide taphide taphide tap

Langkah 6

Buat frame baru dan kemudian atur Opacity setiap berita pada grid tanpa tag sport menjadi 0%.

hide non-sport storieshide non-sport storieshide non-sport stories

Langkah 7

Masih dalam frame ini, seret berita-berita olahraga individu ke bagian atas grid mengisi ruang kosong di atrasnya.

filled sport story sectionsfilled sport story sectionsfilled sport story sections

Langkah 8

Pasang tween antara frame saat ini dan frame sebelumnya. Untuk animasi yang lebih cepat, atur frame yang ditambahkan menjadi 3.

animate changeanimate changeanimate change

Langkah 9

Atur durasi dalam frame terakhir menjadi 2 detik.

2 second last frame2 second last frame2 second last frame

Inilah animasi yang kita miliki.

sport animation

6. Tap Berita

Langkah 1

Selanjutnya, kita akan memilih salah satu artikel berita dan menampilkannya di layar penuh. Pertama, buatlah frame baru dengan durasi 0,2 detik lalu tampilkan semua layer di dalam kelompok layer Tap.

tap news starttap news starttap news start

Langkah 2

Tambahkan frame baru dan kemudian atur durasinya menjadi 0,1 detik. Sembunyikan lingkaran yang paling tipis.

hide thin circle againhide thin circle againhide thin circle again

Langkah 3

Tambahkan frame lainnya dan sembunyikan lingkaran berikutnya.

hide second circle againhide second circle againhide second circle again

Langkah 4

Tambahkan frame lainnya dengan durasi 0,1 detik. Sembunyikan grup layer Tap dan buatlah frame baru. Tampilkan berita besar yang telah kita buat sebelumnya di Bagian 1 Langkah 28 dengan mengatur Opacity menjadi 100%. Sembunyikan grid berita kecil dengan mengatur Opacity menjadi 0%.

show large storyshow large storyshow large story

Langkah 5

Tambahkan animasi tween antara frame saat ini dan frame sebelumnya.

tween news storytween news storytween news story
finished full news storyfinished full news storyfinished full news story

Inilah tampilan yang kita miliki sampai saat ini.

finished news animation

7. Konversi Animasi Layer Menjadi Frame

Langkah 1

Dari panel Timeline, klik Flatten Frames Into Layers.

flatten layers into framesflatten layers into framesflatten layers into frames

Setiap frame akan diubah menjadi layer datar. Jika anda memiliki 33 frame, maka anda juga akan mendapatkan 33 layer datar. Layer Frame 1 diambil dari isi frame 1, layer Frame 2 diambil dari frame 2, dan seterusnya.

new framesnew framesnew frames

Langkah 2

Pilih semua layer frame di panel Layer.

select allselect allselect all

Langkah 3

Seret layer ke foto iPhone yang telah anda unduh sebelumnya.

iphone piciphone piciphone pic

Langkah 4

Pada panel Timeline, pilih Create Frame Animation lalu klik tombol New Frame.

create frame animationcreate frame animationcreate frame animation

Langkah 5

Pastikan semua layer masih dipilih. Tekan Control-T untuk melakukan transformasi. Tahan tombol Control lalu seret setiap sudut dan tempatkan di sudut layar.

place news animation into iPhone screenplace news animation into iPhone screenplace news animation into iPhone screen
fit edgesfit edgesfit edges
againagainagain
and againand againand again
and yet againand yet againand yet again
and now its goodand now its goodand now its good

Langkah 6

Buat bingkai baru untuk setiap layer. Letakkan layer Frame 1 di frame pertama, layer Frame 2 di frame kedua, layer Frame 3 di frame ketiga, dan seterusnya. Anda juga akan mencocokkan durasi untuk masing-masing frame. Pastikan anda mengatur loopnya menjadi Forever sehingga animasi akan terus berputar.

animate everythinganimate everythinganimate everything

Lihatlah gambar di bawah ini sebagai contoh. Layer Frame 23 muncul pada frame 23. Layer Frame 25 muncul pada frame 25, dan seterusnya. Lanjutkan tahap ini untuk setiap framenya.

keep animatingkeep animatingkeep animating

Langkah 7

Saatnya untuk mengubah hasilnya sebagai file animasi GIF. Pilih Save for Web pada menu File dan pilih GIF sebagai jenis file. Cobalah berbagai pengaturan yang tersedia untuk mendapatkan ukuran file yang optimal. Uji pula hasil animasi dengan mengklik tombol putar. Pastikan anda mengatur Looping Options menjadi Forever.

save as gifsave as gifsave as gif

Anda telah merancang UI aplikasi demo, menganimasinya, dan meletakkan animasi di dalam gambar iPhone agar animasi terlihat seperti bekerja pada perangkat nyata.

Kesimpulan

Semoga tutorial ini bermanfaat. Anda dapat mengambil langkah-langkah di atas untuk semua jenis aplikasi demo yang ingin anda buat. Anda bisa menggunakan gambar perangkat yang berbeda untuk menampilkan animasi demo tersebut, seperti tablet atau situs web. Anda juga dapat mencoba jenis interaksi multi-touch lainnya dalam presentasi akhir, seperti tilt-scrolling atau pinch-to-zoom apabila anda memodifikasi animasinya.

Jika anda membuat animasi demo aplikasi sendiri menggunakan tutorial ini, kami ingin melihatnya melalui komentar di bawah ini!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.