Cara membuat spanduk web animasi di Photoshop

Sep 11, 2025
Bagaimana caranya

Membuat spanduk web bukanlah pekerjaan paling glamor di dunia tetapi itu adalah sesuatu yang harus dilakukan setiap desainer di beberapa titik dalam karir mereka, mungkin berkali-kali. Meskipun tidak ada aturan yang sulit dan cepat ketika datang untuk membuat spanduk web, itu tanpa mengatakan bahwa jenisnya harus besar dan pesan punchy.

Saat kami menjiwai ini juga, saya sarankan tidak lebih dari tiga slide atau elemen animasi karena orang tidak akan menontonnya. Elemen-elemen berkedip juga dapat membantu meraih perhatian pemirsa.

Make this animated banner for a website below…

Buat spanduk animasi ini untuk situs web di bawah ini ...

Selama beberapa langkah berikutnya saya akan menunjukkan cara mengatur dan membuat spanduk web animasi sederhana yang pernah dikuasai akan menjadi mudah untuk diterapkan pada pekerjaan baru di masa depan.

01. Atur dokumen Anda

Luncurkan Photoshop, navigasikan ke File & GT; Baru dan pilih Web dari menu drop-down preset. Dari ukuran drop-down, pilih Leaderboard atau jika dimensi Anda bervariasi kemudian pilih khusus dan masukkan dimensi piksel secara manual.

Dengan boncok ke Batas Dokumen yang dipilih dari menu Lihat, tarik panduan untuk mengambil ke semua batas dokumen.

02. Menambahkan elemen grafis

Sekarang untuk menempatkan elemen desain penting kami. Dalam contoh di atas saya menempelkan logo T3 persegi dan karena saya telah membuat panduan dapat mengukurnya kembali dan membuatnya cepat ke batas dokumen dengan mudah. Rekatkan dalam grafik panah yang akan kami gunakan nanti dan menggunakan Type Tool Atur pesan Anda untuk slide pertama. Rekatkan dalam gambar apa pun yang Anda butuhkan dan pastikan Anda menyebutkan semua layer Anda dengan tepat.

03. Membuat slide sekunder

Sekarang cukup duplikat layer tipe Anda, matikan jenis layer di bawah dan ketik tahap pesan selanjutnya, dalam hal ini "dijual sekarang". Setelah Anda senang bahwa Anda memiliki semua elemen di tempat, gabungkan sebanyak mungkin lapisan. Sebagai latar belakang, logo dan gambar sampul akan tetap statis, kami dapat menggabungkan ini meninggalkan kami dengan empat lapisan, latar belakang, jenis layer dan lapisan panah.

04. Buat animasi bingkai

Sekarang cukup klik pada tab Timeline di bagian bawah jendela atau navigasikan ke Window & GT; Linimasa. Klik pada panah kecil di tengah jendela dan pilih "Buat animasi bingkai" dan kemudian klik tombol. Sekarang matikan semua lapisan selain dari lapisan latar belakang dan lapisan pesan pertama. Oleskan penundaan satu detik ke bingkai dari menu drop down pada bingkai animasi kecil. Sekarang cukup klik Tekan tombol "Duplicate Pilihan bingkai" di timeline tetapi matikan pesan pertama dan nyalakan pesan kedua. Ulangi proses ini untuk semua lapisan, finishing dengan lapisan panah.

  • 10 Logo Olimpiade Terbesar sepanjang masa

05. Buat panah flash dan sesuaikan timing

Untuk membuat panah flash cukup tekan "duplikat frame yang dipilih" dari timeline dan matikan panah. Sesuaikan waktu menjadi 0,5 detik dan ulangi proses memutar panah dan matikan di panel Layers sehingga muncul seolah-olah itu berkedip. Akhirnya Anda mungkin ingin menyesuaikan beberapa timing sampai Anda benar-benar bahagia. Orang-orang memiliki jangkauan perhatian yang sangat singkat sehingga tidak ada gunanya lambat dengan frame rate, tetapi mereka masih harus dapat membacanya.

06. Simpan untuk Web dan Perangkat

Akhirnya navigasikan ke "Simpan untuk Web" dan pilih GIF dari menu drop-down. Anda juga dapat mengurangi kualitas sedikit di sini untuk mendapatkan ukuran file. Setelah Anda puas menyimpan GIF dan kemudian seret ke browser web untuk mengujinya.

Bagaimana caranya - Artikel Terpopuler

Cara menggunakan penyimpanan cloud sebagai kreatif

Bagaimana caranya Sep 11, 2025

(Kredit Gambar: Jan Vašek dari Pixabay) Mengapa Anda perlu tahu cara menggunakan penyimpanan cloud? Nah penyimpanan ..

Cara mengatur dan mengoptimalkan Smugmug Storefront Anda

Bagaimana caranya Sep 11, 2025

(Kredit Gambar: Andre Furtado di Pexels) Pembangun situs web sederhana yang juga bertindak sebagai salah satu dari ..

Cara membuat makhluk fantasi yang sangat realistis

Bagaimana caranya Sep 11, 2025

Lukisan makhluk fantasi bisa sangat menyenangkan. Menurut pendapat saya, Anda akan kesulitan menemukan subjek yang memberi Anda l..

Cara Membangun Antarmuka ChatBot

Bagaimana caranya Sep 11, 2025

Pada pertengahan 2000-an, agen virtual dan chatbots layanan pelanggan menerima banyak permasulan, meskipun mereka tidak terlalu p..

mulai dengan WebGL menggunakan three.js

Bagaimana caranya Sep 11, 2025

Webgl. , yang banyak didukung pada semua browser modern, memungkinkan Anda untuk bekerja dengan grafis 3D yang diperc..

Cara membuat rambut di bioskop 4D

Bagaimana caranya Sep 11, 2025

Terinspirasi oleh seni karakter fantastis Carlos Ortega Elizalde dan Lois Van Baarle, saya memutuskan untuk mencoba tangan saya p..

Temukan gaya dan substansi tipografi

Bagaimana caranya Sep 11, 2025

Keputusan, keputusan, keputusan ... Jika ada satu aspek kunci untuk proses bekerja dengan tipe itu adalah bahwa perancang atau ketik perlu membuat seluruh host keputusan sebelum sampai ke des..

Persiapan dengan prototyping di Adobe XD

Bagaimana caranya Sep 11, 2025

Karena permintaan para profesional desain UX terus tumbuh, desainer mencari alat yang mudah digunakan yang cukup kuat untuk menciptakan prototipe berkualitas tinggi, tetapi itu terasa akrab d..

Kategori