Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Affinity Designer

6 Cara membuat latar belakang bergulir di Affinity Designer

by
Difficulty:IntermediateLength:MediumLanguages:

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

Final product image
What You'll Be Creating

Dalam tutorial ini kita akan melalui proses pembuatan latar belakang horizontal dan dapat diberi ubin yang sangat cocok untuk permainan 2D bergulir samping (action, adventure, hack & slash) untuk PC, mobile dan browser. Kita akan menggunakan alat vektor dasar dari Affinity Designer, dan anda akan melihat bagaimana kita dapat membuat gambar itu mulus dengan cara yang menyenangkan dan mudah. Mari kita mulai!

Dalam kasus khusus ini, kita akan merancang hutan bergaya dengan skema warna misterius, memberikan suasana suram yang tepat yang cocok untuk permainan petualangan mistis atau pencarian. Namun, anda bisa menerapkan teknik ini untuk latar belakang lain, entah itu padang rumput yang cerah atau pantai untuk permainan santai, atau mungkin beberapa gua gelap dan dalam atau bahkan pesawat alien untuk penembak bergulir atau ide lainnya. Terserah keputusan anda! 

Jangan ragu untuk mengumpulkan inspirasi sebanyak mungkin, dan untuk tujuan ini, cek bagian game backgrounds dari Envato Market, yang akan membantu anda menemukan beberapa solusi menarik dan ide orisinil.

1. Bangun Komposisi

Langkah 1

Mari kita mulai dengan membuat sebuah New Document.  Pilih Web Type dan temukan Preset 800 x 600 px.

create a New Document

Langkah 2

Di sini kita memiliki kanvas horizontal kita, dan mari kita mulai mengisinya dari pojok kiri atas. Kita akan mulai dengan pepohonan, yang akan menutupi semua bagian atas gambar dengan puncak lebat mereka.

Pakai Ellipse Tool (M) dan buat sebuah lingkaran 170 x 170 px, tekan Shift.

start making the trees with the ellipse tool

Langkah 3

Terus tahan Shift dan buat lebih banyak lingkaran, variasikan ukurannya dari besar ke kecil, membuat mereka terlihat seperti gelembung busa.

Pilih semua lingkaran dan pergi ke toolbar konteks bagian atas. Gunakan Add Operation untuk menggabungkan semua lingkaran menjadi satu bentuk.

merge the circles with the add operation

Langkah 4

Isi bentuknya dengan warna ungu gelap, gunakan roda warna di panel Colour.

apply color to the tree crowns

Langkah 5

Pakai lagi Ellipse Tool (M) dan mari kita membuat layer lain dari lingkaran, gunakan teknik yang sama dan ukuran yang bervariasi. Gabungkan lingkaran bersama dengan bantuan Add Operation.

add another layer of circles

Langkah 6

Isi bentuk yang tercipta dengan warna ungu lebih terang dan   Move it Back (Shift-command-[), di bawah lapisan gelap.

color the shapes and move to back

Langkah 7

Sekarang mari kita pindah ke bagian bawah latar belakang kita.  Gunakan Rectangle Tool (M) untuk membentuk bentuk ungu gelap untuk tanah.  Convert to Curves dari toolbar konteks atas. Sekarang kita bisa mengedit bentuknya, mengubah bentuknya.

add ground with the rectangle tool

Langkah 8

Pakai Node Tool (A), pilih sudut kiri atas dan tarik sedikit, membuat lekukan. Klik dua kali pada tepi atas bentuk untuk menambahkan simpul baru. Pindahkan simpul kanan ke bawah untuk membentuk garis melengkung yang terang, yang menggambarkan sebuah bukit yang mulus. Tambahkan simpul lain di sisi berlawanan tanah, buat bukit lain.

edit the ground with node tool

Langkah 9

Tambahkan bentuk lain di bawahnya, bentuk bentuk tanah lain di kejauhan. Jadikan bentuk ini sedikit lebih ringan. Dengan cara ini kita menunjukkan perspektif udara gambar kita, membuatnya terlihat lebih tiga dimensi.

edit the ground with node tool 2

2. Membuat Pepohonan

Langkah 1

Sekarang kita akan mulai membuat pepohonan, membuat hutan yang dalam. Gunakan Rectangle Tool (M) untuk membuat garis vertikal sempit untuk batang pohon. Convert to Curves, pakai Node Tool (A) dan pindahkan simpul atas lebih dekat satu sama lain, membuat bagian atas bagasi lebih sempit.

make a tree trunk with rectangle tool

Langkah 2

Mari tambahkan beberapa cabang kecil di bagian atas batang. Gunakan Pen Tool (N) untuk membuat garis melengkung. Atur Widht menjadi 10 pt dalam panel Stroke, membuat cabang agak lebih tebal.

make branches with strokes

Langkah 3

Buat beberapa cabang lagi dan tambahkan sekelompok lingkaran ungu gelap yang lebih kecil untuk menutupi ujung cabang yang kosong, membentuk daun bergaya.

edit details to the trees

Langkah 4

Terus tambahkan batang, variasikan lebar dan susun kembali rantingnya untuk membuat lebih banyak pohon. Ingatlah untuk Group (Command-G) objek serupa untuk membuat mereka lebih mudah untuk bekerjasama.

add more trees

Langkah 5

Buat pohon lain dan isi dengan warna ungu muda yang sama seperti lapisan tanah yang jauh terpisah. Move to Back  (Shift-command [) pohon mudanya, membuat unsur-unsurnya tercampur.  Dengan cara ini pohon itu tampak lebih jauh dari pohon yang gelap di latar depan.

add trees in the background

Langkah 6

Daerah yang jauh dari latar belakang kita masih terlihat kosong. Mari kita isi dengan beberapa elemen tambahan. Mulailah dengan membuat lingkaran genap 150 x 150 px  dengan Ellipse Tool (M). Buatlah bentuk ini lebih ringan untuk menciptakan udara dan jarak yang lebih jauh antara obyek. Kontras ini akan terlihat saat kita menempatkan elemen baru di belakang beberapa langkah kemudian.

form the bushes from ellipses

Langkah 7

Buat beberapa lingkaran kecil, buat semak, dan gunakan Add Operation untuk menggabungkan bentuk.

form the bushes from ellipses 2

Langkah 8

Sekarang kita bisa memilih semak kita dan Move to Back (Shift-Command- [), menyembunyikannya di balik pepohonan. Tambahkan lebih banyak semak, membentuknya dari lingkaran, isi tempat kosong di latar belakang.

add more bushes in the background

Langkah 9

Mari tambahkan beberapa pohon lagi untuk membuat hutan lebih tebal dan, karenanya, keseluruhan gambar lebih rinci.  Buat mereka bahkan lebih ringan dan taruh beberapa di antaranya di depan semak-semak dan beberapa di antaranya di balik semak-semak, membuat komposisi lebih seimbang dan serbaguna.

add more trees

Langkah 10

Area putih di latar belakang bisa sangat mengganggu, jadi mari kita redupkan sedikit. Buat sebuah persegi panjang 800 x 600 px dan Move to Back (Shift-command [), di bagian paling bawah. Isi bentuknya dengan warna biru keabu-abuan, tambahkan suasana berkabut ke hutan fantasi kita.

add a rectangle background

Langkah 11

Mari tambahkan beberapa unsur kecil yang akan sedikit lebih meramaikan hutan kita. Gunakan Ellipse Tool (M) untuk membuat gumpalan kecil rumput atau daun, terdiri dari tiga elips untuk masing-masingnya.

add more details to the ground

Langkah 12

Apa yang bisa kita lakukan di sini untuk memicu minat pemirsa adalah menambahkan lebih banyak lagi detailnya. Semakin rinci latar belakangnya, semakin menarik bagi pemirsa. Coba tambahkan bentuk lain di bagian bawah gambar, buat lapisan tanah yang lebih gelap. Percikkan elips kecil di atasnya, menggambarkan batu dan menciptakan ilusi tanah yang diiris seperti kue pai.

Tambahkan lebih banyak cabang atau daun atau semak, apapun yang diperlukan untuk membuat komposisi lebih terisi dan serba guna.

add ellipse stones to the ground

3. Membuat Latar Belakang Mulus

Langkah 1

Sekarang mari kita lihat bagaimana kita bisa membuat latar belakang kita tanpa tepi dan berulang.

Pertama-tama, pilih semuanya (Command-A) dan Cut (Command-X. Buatlah persegi panjang 800 x 600 px (warna apapun). Biarkan itu dipilih, pergi ke Edit > Paste Inside. Sekarang kita memiliki hutan yang dibingkai di dalam kotak, seperti di dalam topeng kliping, yang memungkinkan kita untuk memindahkannya dengan mudah.

hide the scene inside the rectangle mask

Langkah 2

Mari kita pindahkan gambar kita 400 px ke kiri.  Untuk melakukan ini, pergi ke panel Transform dan terapkan nilai px -400 ke sumbu X. Sumbu Y harus diatur menjadi 0 px.

move the image to the left

Langkah 3

Gandakan gambarnya (Command-C > Command-V) dan sekarang kita perlu memindahkan salinannya ke kanan.  Atur nilai menjadi 400 px di panel transform.

Sekarang jika anda melihat gambar anda, anda akan melihat bahwa tepi kirinya cocok dengan sisi kanannya.  Akibatnya, jika kita menempelkan beberapa gambar bersama-sama, mereka akan menciptakan gambar panorama panjang yang mulus yang bisa diulang tanpa henti. Ini agar kita bisa membentuk latar belakang video game yang bergulir horisontal.

Satu-satunya hal yang perlu kita lakukan di sini adalah memperbaiki bagian tengah gambar, membuat keduanya saling cocok.

copy the image and move to the right

Langkah 4

Sekarang kita bisa menyeret kedua kelompok hutan keluar dari persegi panjang topeng mereka di panel Layer. Dan mari kita mulai menggabungkan lapisan bawah paling gelap dari tanah. 

Pilih kedua bentuk dan gabungkan mereka dengan Add Operation. Pakai Node Tool (A) dan pilih lesung pipi yang muncul di tepi atas tanah.  Delete (Backspace), membuat bentuknya halus.

merge the shapes with the add operation

Langkah 5

Jika titik tanah di sisi kiri gambar ternyata berada di tempat di bawah, temukan di panel Layer dan seret ke atas.

rearrange the objects

Langkah 6

Ulangi hal yang sama untuk lapisan berikutnya dari tanah, pilih dua bagian dan gunakan Add Operation untuk menggabungkan mereka. Delete simpul yang tidak dibutuhkan menggunakan Node Tool (A).

merge the shapes with the add operation 2

Terus gunakan teknik yang sama untuk layer ketiga, buat satu bentuk dengan Add Operation.

merge the shapes with the add operation 3

Langkah 7

Pilih salah satu semak yang muncul di latar depan dan Move to Back (Shift-Command- [). Kemudian pindahkan satu posisi ke atas, letakkan tepat di atas latar belakang biru keabu-abuan (Command-]).

rearrange the objects

Langkah 8

Sekarang setelah kita jahit semua bagian dan menyusun ulang elemen, gambar kita akan terlihat seperti ini.  Kita tidak bisa benar-benar melihat tepi di antara gambar-gambar itu, yang membuatnya mulus.

Seperti yang mungkin anda perhatikan, saya telah menambahkan beberapa lingkaran kecil di atas semak-semak di latar belakang agar komposisi lebih rame dan seimbang.  Anda bisa menambahkan lebih banyak batu di bagian bawah atau lebih banyak rumput jika anda merasa perlu menutupi setiap titik kosong pada gambar.

add more details to the image

4. Menggunakan Gradien untuk Membuat Latar Belakang Hidup

Latar belakang kita sudah lengkap pada tahap ini, dan anda bisa meninggalkannya seperti itu dan lanjutkan untuk mengekspor. Namun, kita bisa men-tweaknya lagi, menyesuaikan warna dan memeriahkan keseluruhan scene. Mari kita lanjutkan dan mencoba Fill Tool (G)!

Langkah 1

Pertama-tama, pilih lapisan atas ungu gelap dari puncak pohon dan pakai Fill Tool (G). Klik dan seret objek, tempatkan gradien dalam posisi vertikal. 

Sekarang anda dapat memilih penanda atas slider isi gradien (ujung lingkaran) dan mengatur warna yang anda inginkan dengan menggunakan roda warna di panel Colour. Buat bagian atas bentuk lebih terang dan jelas, gunakan warna ungu agak merah muda.

apply gradients with the fill tool

Langkah 2

Metode ini bekerja hanya untuk bentuk, tapi tidak untuk goresan dan garis. Jadi jika kita ingin menerapkan fill gradien halus ke pohon, pertama-tama kita perlu mengubah cabang mereka menjadi bentuk. Mari kita pilih pohon-pohon di latar belakang dan pergi ke Layer > Expand Stroke.

Mantap!  Sekarang jika anda memilih cabang yang diperluas dan cek panel Colour, anda akan melihat warna fill yang diaplikasikan. Namun, jika anda menghadapi masalah bahwa cabang anda masih berupa goresan, anda mungkin perlu memilih cabang dalam masing-masing kelompok pohon, gunakan panel Layer. Dan kemudian perluas mereka.  Cobalah kedua pilihan dan lihat apa yang sesuai untuk anda.

apply gradients with the fill tool 2

Langkah 3

Gunakan Fill Tool (G) untuk menerapkan gradien linier vertikal ke pohon. Anda tidak perlu menerapkannya ke setiap pohon satu per satu, cukup pilih keseluruhan kelompok di latar depan dan seret slider dari Fill Tool (G). Sesuaikan warna, buat bagian atas pohon sedikit lebih gelap dari bagian bawah.

apply gradients with the fill tool 3

Langkah 4

Terapkan gradien ke semak-semak yang jauh juga, membuat bagian atas sedikit lebih ringan.

apply gradients with the fill tool 4

Langkah 5

Sedangkan untuk tanah, saya memilih untuk menerapkan gradien hanya pada lapisan pertama yang lebih gelap agar tidak membuat gambar kelebihan beban dengan gradien. Buat perbedaan antara warna gradien tanah nyaris tak terlihat, cukup tambahkan sedikit lebih kedalaman pada gambar.

apply gradients with the fill tool 5

Langkah 6

Mari tambahkan beberapa detail lagi untuk menyelesaikan latar belakang. Gunakan Ellipse Tool (M) untuk menambahkan sekelompok lingkaran di bagian atas gambar, isi bagian atas puncak pohon. Biarkan beberapa ruang di antara kelompok lingkaran dan jauhkan dari tepi, agar gambar tetap mulus.

Terapkan gradien vertikal ungu merah muda ke lingkaran, sedikit lebih gelap dari puncak pohon. Ini akan membuat pepohonan sedikit lebih tiga dimensi, tanpa membuat gambar kelebihan beban dengan detailnya.

add more details to the trees

Inilah yang seharusnya anda dapatkan.

seamless game horizontal background

Langkah 7

Anda bisa File > Export gambar dalam format yang diinginkan dan menggabungkan beberapa salinan bersama-sama untuk mendapatkan hasil yang mulus Atau anda bisa memperpanjang lebar dokumen di Affinity Designer, dengan menggunakan Document Setup di toolbar kontrol atas.

expand the width of the document

Salin gambar dan pindahkan ke kiri 800 px dan ke kanan, pastikan itu mulus sempurna.

copy the background and make it long and seamless

Mengagumkan!  Latar Belakang Permainan Mulus Kita Selesai!

Kita telah selesai merancang latar belakang dan melakukan pekerjaan yang hebat, menggunakan bentuk dasar, gradien dan beberapa operasi sederhana untuk membuat komposisi hutan yang seimbang untuk latar belakang permainan yang bagus dan mulus.

Jangan ragu menggunakan teknik ini untuk menciptakan berbagai latar belakang, seperti hutan hijau, pegunungan berbatu, padang pasir, atau apapun yang bisa anda bayangkan.

Jika anda ingin mendapatkan latar belakang khusus ini dalam format vektor lainnya, seperti EPS, yang siap diimpor dalam permainan dan juga menyertakan skema warna alternatif, maka jangan ragu untuk melihat ini seamless game backgrounds pack, yang mungkin berguna!

Bersenang-senanglah dengan Affinity Designer, dan jangan lupa bagikan hasil anda!

horizontal seamless scrolling background for video games
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.