Sabtu, 27 Februari 2010

seputar animasi

Seputar Animasi

Sejarah Animasi

Animasi merupakan suatu seni untuk membuat dan mengerakkan sebuah obyek, baik berbentuk 2 dimensi maupun 3 dimensi dan dibuat menggunakan berbagai cara, misalnya menggunakan kertas, komputer dan lain sebagainya. Animasi saat ini telah menjadi industri besar yang memberikan dampak ekonomi dan sosial yang begitu besar bahkan cukup signifikasi terhadap pendapat sebuah negara.

Animasi berawal dari kontribusi hasil karya seorang yang bernama walt disney yang lahir dengan nama walter alias disney, Walt lahir di Chicago, Illinois dengan orang tua bernama Elias Disney dan Flora Call. Pada 1906, mereka semua pindah ke sebuah peternakan dekat Marceline, Missouri,amerika serikat.

Walt sejak kecil sudah memiliki hobi menggambar, khususnya gambar kartun, mulai dari sketsa hingga kartun yang berwarna. Suatu saat berawal ketika walt remaja pergi kerumah pamannya untuk berkunjung, dan berjalan-jalan untuk mencari sesuatu di ladang pamannya, disana ditemukan banyak sekali tikus-tikus ladang yang berkeliaran disekitarnya. Melihat banyaknya tikus-tikus tersebut, suatu saat terinspirasi oleh tikus-tikus tersebut dan muncul keinginan untuk menuangkan imajinasinya tersebut kedalam bentuk kartun, maka dicobalah membuat sketsa kartun yang berasal dari objek tikus yang dilihatnya. Banyaknya imajinasi yang muncul membuatnya untuk melakukan proses pencarian bentuk, bagaimana menggambarkan komponen-komponen anggota tubuh tikus tersebut agar terlihat lucu, menarik dan tidak menjiijikan.

walt.jpg

Dari proses tersebut maka lahirlah Mickey Mouse yang merupakan cikal bakal dari kartun animasi pertama yang pernah dibuat. Awal mula bentuk mickey masih sederhana seperti gambar disamping ini. Dengan beberapa ciri tikus yang dimanipulasi seperti bentuk telinga dibuat bulat, bentuk mata yang dibuat besar hampir sebesar wajahnya, dan bentuk tubuh yang kurus ditambah atribut celana pendek yang dibuat sederhana sehingga memudahkan untuk proses produksinya. Bentuk tersebut lama-kelamaan berevolusi menjadi bentuk yang lebih detail dan bervariasi pada pakaian yang dikenakan. Pada awalnya kartun yang di buat animasinya ini tanpa suara, hanya mengandalkan gerakan objeknya saja, namun teknologi semakin berkembang dan pada akhir era 60 an akhirnya film kartun dapat diisi dengan suara.

12.jpg

22.jpg

Teori Animasi

Animasi berasal dari bahasa latin, anima, yang artinya jiwa, hidup, nyawa dan semangat. Animasi adalah gambar dua dimensi yang seolah-olah bergerak. Animasi ialah suatu seni untuk memanipulasi gambar menjadi seolah-olah hidup dan bergerak, yang terdiri dari animasi 2 dimensi maupun 3 dimensi. Animasi 2D membuat benda seolah hidup dengan mengunakan kertas atau komputer. Animasi 3D merupakan animasi yang dibuat dengan menggunakan model seperti yang berasal dari lilin, clay, boneka/marionette dan menggunakan kamera animasi yang dapat merekam frame demi frame. Ketika gambar-gambar tersebut diproyeksikan secara berurutan dan cepat, lilin atau clay boneka atau marionette tersebut akan teihat seperti hidup dan bergerak. Animasi 3D dapat juga dibuat dengan menggunakan komputer. Proses awalnya adalah membentuk model, pemberian tekstur, warna, hingga cahaya. Kemudian model tersebut diberi kerangka, warna, hingga cahaya. Kemudian model tersebut diberi kerangka dan gerakanya dirancang satu persatu. Seluruh proses pembuatannya dari awal hingga akhir dikerjakan di komputer. Contohnya film Shrek atau Final Fantasy.

a. Penggunaan animasi film

Penggunaan animasi film tidak terbatas hanya untuk film-film bagi anak-anak atau film hiburan, tetapi juga dipergunakan diberbagai bidang, karena disisi lain animasi dapat menerangkan dengan rinci sesuatu hal atau informasi yang ingin disampaikan kepada masyarakat. Berikut ini adalah contoh penggunaan animasi film :

1. Animasi ForensikAnimasi dibua untuk menerangkan terjadinya kecelakaan, berdasarkan saksi mata, data-dat hasil testing kendaraan

2. Animasi SimulasiAnimasi ini digunakakn ntuk membantu menggambarkan proses terjadinya sesuatu kejadian atau apa yang akan dihadapi, atau bagaiman sesuatu hal akan terjadi.

3. Animasi untuk arsitekturPenggunaan animasi untuk bidang arsitektur akan membantu, misalnya untuk menggambarkan struktur suatu gedung baik gedung bertingkat sejak awal perencanaan, proses pembangunan hingga selesai, dan tidak hanya pada gedung bertingkat saja, tetapi juga untuk memperlihatkan interior dengan berbagai kemungkinan perubahan warna dinding serta tata perlengkapannya, juga dapat memperlihatkan bentuk irisan dan potongan melintang yang diperlukan.

4. Animasi untuk pendidikanBerguna untuk memperjelaskan tentang koordinasi gerak, dimana dalam satu gerakan badan diperlihatkan gerakan tulang-tulang serta sendi tertentu serta hubungannya dengan gerak otot, yang mana otot yang meregang serta otot mana yang melakukan gerakan menarik.

5. Animasi untuk hiburan dan komersialSaat ini begitu banyak film animasi yang dibuat tidak hanya untuk anak-anak saja, tetapi juga untuk masyarakat luas dimana dapat diciptakan karakter-karaker menarik, yang masing-masing memiliki watak sendiri-sendiri seolah-olah demikianlah hidup ini, juga untuk menciptakan khayalan-khayalan untuk memperkuat visualisasi suatu adegan, dan seringkali digunakan juga untuk keperluan iklan di televisis (Tv Commercial) ( Kuswara, 2003:3).

b. Teknik Menciptakan Animasi

Dalam perkembangan hingga kini, terdapat beberapa teknik untuk membuat animasi, yaitu:

1. Teknik animasi Hand Drawn

Ini adalah teknik animasi klasik yang mengandalkan kemampuan tangan untuk membuat gambar frame per frame secara manual, baik itu gambar tokoh karakter, maupun gambar background digambar dengan menggunakan tangan. Setelah itu ,gambar foreground dan background ditumpuk secara layering untuk kemudian dipotret satu persatu, hingga menghasilkan animasi yang utuh. Teknik ini dipergunakan oleh Walt Disney dan Warner Bros hingga sekarang, seperti yang terlihat dalam film animasi Lion King, Alladin, Beauty and the beast, dan lain-lain, mereka memiliki goresan yang tidak dilakukan dengan komputer.

2. Teknik animasi Stop Motion / Clay animation

Clay adalah ebutan lain untuk tanah liat. Animasi dibuat dengan menggerakkan objek atau model dari boneka ataupun bahan elastis yang terbuat dari clay / tanah liat atau tanah liat sintetis. Obyek digerakkan sedikit demi sedikit dan kemudian diambil gamabrnya satu per satu. Setelah diedit dan disusun, Apabila rol film dijalankan, akan memberikan efek seolah-olah boneka atau model tersebut bergerak . Contoh animasi yang menggunakan teknik ini adalah Nightmare Before Christmas, serta tayangan MTV: Celebrity Death Match.

3. Teknik animasi Hand Drawn dan Computer.

Pada teknik ini, gambar sketsa kasar dibuat dengan tangan, lalu di-scan untuk kemudian diberi warna dan finshing menggunakan komputer.

Jenis – Jenis Animasi

Diawal tahun 20-an, popularitas kartun animasi berangsur menurun dan para sineas mulai cenderung mencari alternatif lain sebagai media hiburan. Masyarakat mulai jenuh dengan konsep animasi yang pada saat itu tidak memikirkan story line dan pengembangan si-tokoh karakter. Perubahan besar dimulai pada pertengahan tahun 20-an setelah beberapa perusahaan animasi mengembangkan konsep komersialisasi dimana studio-studio besar mengambil alih studio lokal dan menentukan standard untuk animasi Sampai saat ini animasi dibagi dalam kategori besar, yaitu:
1.
Animasi Stop-motion (Stop Motion Animation)
2. AnimasiTradisional (Traditional animation)
3. Animasi Komputer (Computer Graphics Animation)

1. Stop-motion animation
Stop-motion animation sering pula disebut claymation karena dalam perkembangannya, jenis animasi ini sering menggunakan clay (tanah liat) sebagai objek yang digerakkan . Tehnik stop-motion animasi pertama kali ditemukan oleh Stuart Blakton pada tahun 1906; yaitu dengan menggambar ekspresi wajah sebuah tokoh kartun pada papan tulis, diambil gambarnya dengan still camera, kemudian dihapus untuk menggambar ekspresi wajah selanjutnya. Tehnik stop-motion animasi ini sering digunakan dalam visual effect untuk film-film di era tahun 50-60-an bahkan sampai saat ini.

Wallace and Gromit dan Chicken Run , karya Nick Parks, yang sempat hadir di Jakarta beberapa saat yang lalu adalah salah satu contoh karya stop motion animation. Contoh lainnya adalah celebrity Deadmatch di MTV yang menyajikan adegan perkelahian antara berbagai selebriti dunia. Jangan lupakan pula Nightmare Before Christmast karya yang Tim Burton yang terkenal dengan film Batman dan Edward Scissorhands

Sejauh ini perkembangan stop motion animation di Indonesia belum terlalu besar, sehingga sulit menjadi animator yang mau berkarya pada bidang ini. Salah satu penyebabnya bisa jadi adalah tingkat kesulitan dan kesabaran yang cukup tinggi, yang tentu saja tidak dipunyai oleh setiap orang.

2.Animasi Tradisional (Traditional animation)
Tradisional animasi adalah tehnik animasi yang paling umum dikenal sampai saat ini. Dinamakan tradisional karena tehnik animasi inilah yang digunakan pada saat animasi pertama kali dikembangkan. Tradisional animasi juga sering disebut cel animation karena tehnik pengerjaannya dilakukan pada celluloid tranparent yang sekilas mirip sekali dengan transparansi OHP yang sering kita gunakan. Dengan berkembangnya teknologi komputer, lahir tehnik animasi baru yang seluruh pengerjaannya mengunakan komputer yang kemudian disebut computer animation (animasi komputer ) atau lebih dikenal 3D(imention) animation yang nanti akan kita bahas lebih jauh pada chapter selanjutnya. Untuk membedakan 3D animation yang seluruhnya dikerjakan dengan komputer, cel animation kemudian juga disebut 2D animation.

MENGINTIP PROSES PEMBUATAN CELL ANIMATION PRAPRODUKSI ANIMASI
Sebelum proses cels animation sendiri dimulai, dibutuhkan konsep cerita yang harus dibuat dalam bentuk narasi yang disebut script. Untuk menyamakan konsep dasar secara jelas antara script writer, director dan animator maka script itu harus diterjemaahkan kedalam sekuen gambar yang disebut storyboard. Pada dasarnya, script dan storyboard adalah fondasi dasar dari keseluruhan proses animasi. Metoda sinkronisasi dialog dengan gerakan, bahasa tubuh sang tokoh karakter, musik dan posisi kamera kemudian dicatat dalam sebuah kolom graphic yang menyatukan elemen-elemen tersebut menjadi sebuah guidance dalam setiap adegan animasi. Kolom graphic itu kemudian kita kenal sebagai Exposure Sheet. Kadang karena kebutuhan yang lebih spesific membuat data-data musik harus dibuat dalam satu graphic terpisah yang disebut Bar Sheet.

PRODUCTION
Setelah melalui proses praproduksi, maka animator mulai bekerja menggambar gambar-gambar ekstrim yang menjadi penentu arah gerakan/antisipasi yang lebih dikenal keyframe; sang animator yang bertanggung-jawab untuk membuat gambar-gambar keyframe ini disebut keyframer. Seorang keyframer harus memperhatikan kaidah-kaidah animasi dalam membuat gerakan-gerakan animasi seperti; anticipation, timing, delayed secondary action, squash-stretch, balance, staging,overlapping action,gesture dan masih banyak lagi. Selesai keyframe dibuat, maka proses berlanjut pada pengisian gambar-gambar yang mengisi gerakan diantara gambar-gambar keyframe yang disebut inbetween. Banyak sedikitnya jumlah gambar inbetween tergantung pada durasi yang dibutuhkan dalam melakukan gerakan dari keyframe yang satu ke keyframe berikutnya.

animator yang bertugas membuat gambar inbetween adalah inbetweener. Sampai pada proses ini, animasi gerakan sudah bisa dilihat.Proses produksi biasanya tidak dilanjutkan sebelum director dan animator berdiskusi untuk mengevaluasi seluruh gerakan animasi.
Proses ini disebut line test atau disebut juga pencil test karena media yang digunakan pada proses ini adalah pensil.
Kadang dalam sebuah film animasi, banyak adegan yang harus dikerjakan oleh lebih dari satu animator. Hal ini menyebabkan banyaknya gaya / style penggambaran keyframe atau inbetween yang berbeda-beda antara satu animator dengan yang lain. Untuk mengatasi hal ini, maka dibutuhkan tenaga cleaned-up artist yang bertugas menyamakan gambar-gambar animasi yang sudah dibuat. Cleaned-up animasi yang sudah jadi ditrace ke transparent cel ( celluloid ) dengan pena tinta. Kemudian proses pewarnaan dilakukan dibelakang kertas celluloid dengan opaque acrylic paint. Proses ini dinamakan proses inking atau pen-tintaan. Proses ini adalah proses production terakhir sebelum kertas cel siap diletakkan pada gambar latarbelakang ( background ) yang kemudian diphotograph dengan kamera animasi.
Dengan berkembangnya teknologi, proses konvesional ini sudah mulai ditinggalkan oleh banyak studio studio. Setelah proses keyframing, biasanya proses inbetweening dilakukan dengan komputer software khusus yang bsa langsung membuat inbetween secara digital. Jika anda pernah menyaksikan flash atau shockwave animation di internet, anda akan melihat bahwa proses yang dikerjakan mirip sekali dengan animasi web tersebut. Jika pada awalnya semua garis discan menjadi gambar raster. Maka pada software animasi ini gambar dikonversi menjadi vektor. Vektor-vektor inilah yang akan bertransformasi menjadi inbetween sesuai dengan calculasi yang dilakukan komputer. Untuk proses inking juga sudah banyak yang dikerjakan dengan tenaga komputer sehingga biaya proses produksi bisa jauh lebih murah dan cepat ketimbang proses konvensional.

Tentu saja hal tersebut menjadi ancaman besar bagi para animator dan inbetweener. Mau tidak mau, mereka harus belajar untuk mengendalikan komputer berikut software animasinya kalau tetap ingin bertahan di bidang animasi.

ISTILAH YANG SERING DIGUNAKAN DALAM CELL ANIMATION
Metoda animasi yang sering digunakan:
Straight Ahead Animation: animasi yang hanya menggunakan metode gambar dari gerakan satu ke gerakan lain dalam sebuah sekuen yang berkembang.
Pose Planning Animation: aniamsi yang menggunakan metode key atau extreme pose.
Planned Animation: sebuah sistem yang mengunakan gambar animasi yang sama pada adegan yang berbeda. Sistem ini sering digunakan dalam pembuatan kartun seri untuk acara TV karena deathline yang harus dikerjakan dalam pembuatan TV series.
Cycle Animation : sistem penggunaan celluloid panjang ( 12 inches ) untuk menggambarkan gerakan yang berulang-ulang. Sistem ini biasa digunakan untuk paning camera movement.
Limited Animation : sistem animasi yang membagi-bagi gambar sebuah karakter sesuai dengan kebutuhan dalam sebuah adegan. Tujuannya adalah untuk me-minimalisasikan waktu pengerjaan karena sistem ini hanya mengganti anggota tubuh karakter tertentu ( misalnya gerakan bibir untuk dalog ) tanpa merubah posisi anggota tubuh lainnya dalam adegan yang berbeda.
3. Animasi Komputer
Sesuai dengan namanya, animasi ini secara keseluruhan dikerjakan dikomputer. Melalui camera movement, keseluruhan object bisa diperlihatkan secara 3 dimensi; sehingga banyak yang menyebut animasi ini sebagai animasi 3 dimensi ( 3D animation ), Awal perkembangan 3D animation sesungguhnya sudah dimulai sejak tahun 1964, ketika Ivan Sutherland dari Massachussetts Institute of Technology berhasil mengembangkan sebuah program bernama Sketchpad yang mampu menggambar sinar-sinar garis langsung pada cathoda ray tube ( crt ). Hasilnya adalah sebuah object yang sederhana dan primitif ; sebuah kubus dengan garis-garis, kelompok gambar geometris yang sangat sederhana namun membuka pandangan manusia tentang bagaimana computer graphic bisa digunakan.
Sejak New York Institute of Technology ( NYIT ) memulai rencananya untuk menciptakan computer-animated feature film (1970), gelombang pertama dari commercial computer graphic studio mulai terlihat. Film visionary George Lucas merekrut Catmul dari NYIT pada tahun 1978 untuk membuka Lucas Film Computer Development Division. Pada saat Lucas Film sedang mengadakan riset tentang bagaimana pengaplikasian digital teknologi terhadap feature film, studio-studio lain mulai menciptakan flying logo dan broadcast graphic untuk beberapa perusahaan seperti National Football League, dan televisi program seperti The NBC dan ABC World news Tonight.
Sampai saat ini banyak sekali software-software 3D yang digunakan di pasaran. Sedangkan untuk effect house yang berskala besar, mereka lebih cenderung menggunakan software yang mereka kembangkan sendiri yang disebut prophiety software. Untuk software-software yang bersifat komersil banyak nama-nama yang kita kenal seperti Alias Power Animator, Softimage, 3D Max,dll.
Proses 3D Animasi

3D animasi membutuhkan proses yang relatif lebih sederhana dibandingkan 2D animasi ( cel animation ) karena semua proses bisa langsung dikerjakan dalam satu computer software. Secara garis besar proses 3D animasi bisa dibagi 4 tahap yaitu:
Modeling
Animating
Texturing
Rendering

Tahap texturing sebenarnya bisa dikerjakan overlap dengan modeling; tergantung dari tingkat kebutuhan, yang nanti akan kita bahas lebih lanjut

1. Modelling
Tahap ini adalah pembuatan object-object yang dibutuhkan pada tahap animasi. Object ini bisa berbentuk primitif object seperti sphere (bola), cube ( kubus ) sampai complicated object seperti sebuah karakter dan sebagainya. Ada beberapa jenis materi object yang disesuaikan dengan kebutuhannya yaitu: polygon, spline, dan metaclay.
Polygon adalah segitiga dan segiempat yang menentukan area dari permukaan sebuah karakter. Setiap polygon menentukan sebuah bidang datar dengan meletakkan sebuah jajaran polygon sehingga kita bisa menciptakan bentuk-bentuk permukaan. Untuk mendapatkan permukaan yang halus, kita membutuhkan banyak bidang polygon. Bila kita hanya menggunakan sedikit polygon, maka object yang kita dapatkan akan terbagi menjadi pecahan-pecahan polygon.
Spline adalah beberapa kumpulan spline yang membentuk sebuah lapisan curva yang halus yang dinamakan patch. Sebuah patch menentukan area yang jauh lebih luas dan halus dari sebuah polygon.
Metaclay Dalam bentuk dasarnya, metaball berbentuk bola (sphere) yang bisa digabungkan satu sama lain sehingga membentuk bentuk organik object.

2. Animating
Proses animasi dalam animasi komputer tidak membutuhkan sang animator untuk membuat inbetween seperti yang dilakukan dalam tradisional animasi. Sang animator hanya menentukan/membuat keyframe-keyframe pada object yang akan digerakkan. Setelah proses keyframing dibuat, komputer akan menghitung dan membuat sendiri inbetween secara otomatis.

3.Texturing
Proses ini menentukan karakterisik sebuah materi object dari segi texture. Untuk materi sebuah object itu sendiri, kita bisa mengaplikasikan properti tertentu seperti reflectivity, transparency, dan refraction. Texture kemudian bisa digunakan untuk mencreate berbagai variasi warna pattern, tingkat kehalusan/kekasaran sebuah lapisan object secara lebih detail.

4. Rendering
Rendering adalah proses akhir dari keseluruhan proses animasi komputer. Dalam rendering, semua data-data yang sudah dimasukkan dalam proses modelling, animasi, texturing, pencahayaan dengan parameter tertentu akan diterjemaahkan dalam sebuah bentuk output.
Dalam standard PAL system, resolusi sebuah render adalah 720×576 pixels.
Istilah-istilah rendering yang sering digunakan:

Field Rendering
Field rendering sering digunakan untuk mengurangi strobing effect yang disebabkan gerakan cepat dari sebuah object dalam rendering video.
Shader
Shader adalah sebuah program yang digunakan dalam 3D software tertentu ( softimage ) dalam proses special rendering. Biasanya shader diperlukan untuk memenuhi kebutuhan special effect tertentu seperti lighting effects, atmosphere,fog dan sebagainya.
Antialiasing
Antiliasing dilakukan ketika pixel sangat terbatas. Antialiasing adalah metoda menghaluskan dan mempertajam permukaan kasar atau jagged edges dari sebuah object. Metoda ini menggunakan mathematical proses yang menambah pixel area.
Dengan melihat jenis animasi di atas dapat disadari bahwa dunia animasi sangatlah luas dan kesempatan kita sangat terbuka lebar. Bagi calon animator muda jangan ragu untuk melihat kesempatan dan meraihnya. Bagi yang telah berkecimpung hendaknya tidak terjebak di dalam pengkotak-kotakan karya animasi ke dalam bentuk medianya saja. Karena dasar animasi adalah sama, menciptakan ilusi kehidupan, dari yang tidak ada menjadi ada.sumber :

The nExt level…gOing up

wah.. setelah masuk fave, g mank lum da proyek apa2, masih masa komitmen beberapa bulan gtu, oyah… ini hasil render g sewaktu mendaftar ke fave, BNCC.

bruce the Hiu

ini namanya Bruce the Hiu, ide awalnya ditantang untuk animasi karakter, dan berhubung nama g hiu “shark”, g emang rada dikerjain dikit sama ketuanya waktu itu, dan nantang g untuk buat salah satu karakter disney untuk film animasi “Finding Nemo”, yang karakternya bernama Bruce, si ikan hiu. dan itu lah hasilnya, emang kurang mirip yah, cuma g dah do the best lah wat ngerjainnya. waktu itu juga belum terlalu ngerti editable poly/mesh, jadi ini juga high poly, jadi satu object geometry di modifier dikit. dan alhasilnya … filenya berat –” , ngerjainnya juga pake hidden2 object, biar kompi g yang memorynya cuma 256 mb + VGA on board, nga nangis-nangis tersiksa. imagine, setiap giginya bruce itu ada berapa egde…>.<, nga kebayang deh.. untung masih bisa dirender

homesweethome

tantangan ke-2 adalah membuat sebuah rumah mewah… duh semewah apa nga tau g, jadinya g nyari referensi gambar dari internet <–yang ngerasa rumahnya sorry yah…

hasilnya sebuah rumah 2 lantai, yang bergaya modren minimalis, jadinya gtu, nga terlalu berat lagi filenya karena emang lebih banyak pake plane sama edit-edit box, rumah lebih simple karena curve nya mudah, dan bentuknya juga ga pake mesh smooth, jadi kotak-kotak.. paling yang lebih penting disini bukan modeling housenya itu sendiri, tapi mapping jg, kalo diperhatikan mapping g masih pemula, kebanyakan pakai gambar tempel. ga terlalu real sama kaya rumah 3D di dalam game, kalo ada yang suka maen game 3d, itu karna menghemat kinerja visual processing dalam komputer. untuk gambar pohon misalnya malah ada yang cuma plane aja, dari samping boleh, tapi dari top cuma garis silang doank…. (+)…. yang ngerti 3D, pasti know what i am talking about.

inthehouse1.jpgswimmingpool.jpgupstairs.jpgwatercloset.jpgfront.jpglivingroom.jpg

Kamis, 25 Februari 2010

BELAJAR MEMBUAT BLOGGER TEMPLATE 3

Di tutorial ini akan diperlihatkan struktur dari CSS Styling Section, yang merupakan bagian ke 2 dalam struktur blogger template code. Sekali lagi, tidak semua template memiliki struktur yang sama. Itu tergantung style pribadi dari desainernya. Tapi saya menemukan struktur yang memperlihatkan struktur yang sangat logis dan banyak memudahkan ketika coding, debugging, dan customizing template. Sekali lagi, Jika kita bisa mengerti tutorial ini, nanti kita bisa mengubah desain dan struktur dengan cara yang kita mau. Tapi pertama-tama kita harus mengerti ini dan di bawah ini ada struktur yang sangat sederhana untuk dimengerti dan digunakan.

Kita bagi CSS Styling Section menjadi 9 bagian yang lebih kecil. Untuk saat ini kita akan mempelajari bagian-bagian ini secara umum. Kita akan mempelajarinya lebih detail mengenai coding di dalam sub-bagian2 ini nanti di rangkaian tutorial ini. Selalulah mengacu pada struktur blogger template code untuk membantu kita memahami sub-bagian yang dijelaskan di sini.


Subsection 1 - Variable:
Sub-bagian ini mengandung deklarasi (pengenalan) dari font dan warna variable yang muncul di bagian Font and Color tab dalam page Layout. Contohnya Text color atau text font variable yang bisa kita pilih dan ubah menggunakan font and colors tab. Di dalam template-template yang dibuat ourbloggertemplate.com, ditambahkan banyak variable (mendekati 40+) disesuaikan dengan beberapa standard blogger template untuk memudahkan kita mengatur banyak hal dalam template.

Subsection 2 - Global:
Bagian ini berisikan kode untuk mengontrol Layout dan tampilan umum. Jika kita melihat kotak hijau d atas, kita akan melihat "body {.....}". ini berarti setiap kode berada di dalam "{.....}" akan mengontrol property umum (size, layout, dan tampilan) dari badan template (body/semua yang terlihat di layer komputer). Sebagai contoh, bagian ini mengontrol lebar dari template dan warna latar belakang atau gambar. Tapi ini tidak mengatur property detail dalam body container, jika ini mendeklarasikan text font kemudian dalam sub-bagian memasang kembali property yang sama, property yang diatur dalam body container akan tidak diperlihatkan atau dibatalkan.

Dalam sub-bagian, kita juga menemukan bagian besar yang penting lainnya-Outer-wrapper dan content-wrapper- sehingga sub-bagian ini tempat untuk mengatur bagian-bagian ini.

Subsection 3 - Header:
bagian ini mengatur property di dalam bagian header wrapper. Yang paling umum adalah Blog Title dan Blog Description. Pada kebanyakan template di ourblogspottemplate, sudah ditambahkan extra objek pada Header wrapper-yakni Linkbar (Menubar Horisontal). Biasanya, kita tidak bisa menambah objek pada header karena tidak bisa menggunakan tab Add Page Element. Untuk menambahkan linkbar, kita bisa mengubah bagian ke 3 dari template code struktur ( bagian data). Selain itu Ada juga yang menambahkan Google Search Bar. Idealnya, kita bisa menambahkan apapun yang kita inginkan jika tahu bagaimana caranya menggunakan bagian ketiga ini. Ini akan kita lakukan nanti.



Subsection 4 - Main:
Bagian ini mengatur segala property (ukuran, Layout, dan tampilan) dalam Main –Wrapper, antara lain- Date Header, Posting, Comment, feed link, dan beberapa widget yang kita tarik ke bagian Main menggunakan tab add page element.

Subsection 5 - Sidebar:

Bagian ini mengatur property dari segala sesuatu dalam Sidebar-wrapper, contohnya label, Blog Archieve, adsense, links, dll. Tapi ini tidak mengatur berapa banyak sidebar yang kita punya atau lokasinya di blog (contoh: template Sidebar-main-sidebar atau main-sidebar-sidebar). Bagian yang mengatur hal itu adalah bagian tiga dari struktur blogger template code - yaitu Data Section.

Subsection 6 - Miscellaneous:

Bagian ini mengatur property dari elemen-elemen tambahan yang tidak diatur oleh bagian-bagian di atas. Elemen tersenut antara lain Profile (about me), Blockquote, dan kode. Ini berarti jika ingin mengubah warna quoted text atau font dari nama panggilan di profile, bagian inilah yang perlu diubah.



Subsection 7 - Post-Footer:
Dalam template umum, bagian ini mengatur 3 hal:
1. Post-Footer – text di bawah post body. Ini bagian yang berisikan Informasi tentang posting, atau text yang berkata "Posted by YourNickname, Labels: ....., 5 Comments, dll.
2. Blog-Pager – Link di bawah posting yang berkata "Newer Posts, Home, atau Older Posts".
3. Feed-Link – link yang bilang "Subscribe to: Posts (Atom)".

Subsection 8 - Comment:
Bagian ini mengatur property dari bagian Comment di dalam blog.

Subsection 9 - Footer:
Bagian ini mengatur property dalam bagian footer. Pada umumnya, bagian footer berisikan beberapa text yang menjelaskan kepemilikan atau copyright dari blog. Dalam beberapa blog, mereka juga meletakkan bagian extra seperti : Recent Posts atau Popular Posts dalam 2 kolom atau lebih. Pada dasarnya, kita bisa meletakkan apapun dalam footer seperti dalam sidebar. Tapi jika kita ingin menambahkan lebih dari 1 kolom di bagian footer, kita harus merombak bagian ketiga dari


CARA MEMBUAT BACKGROUND GAMBAR PADA BLOGGER TEMPLATE

BELAJAR MEMBUAT BLOGGER TEMPLATE 11

Jika kita melihat template beberapa template - Kita akan melihat bahwa banyak template menggunakan latar belakang bukan dari warna polos, melainkan dibuat dari pola yang berulang dari suatu gambar. Gambar ini disebut gambar latar belakang (background image). Bisa saja satu gambar besar mengisi atas layar atau gambar kecil (sebut saja 50 x 50 piksel) yang berulang secara horizontal dan / atau vertikal. Hal yang rapi tentang penggunaan, atau embedding gambar latar belakang adalah bahwa kita dapat membuat gambar apapun yang kita inginkan dan menggunakannya di blog kita untuk membuatnya unik dan berbeda dari blog lainnya.

Gambar latar belakang dapat ditempatkan dalam container - baik di dalam kontainer Body (yang mengisi seluruh atas layar), di dalam Post, Sidebar, Comment,, atau bahkan di sebuah header container (sebut saja, Comment Header). Misalnya, jika Kita melihat template ini, Kita akan melihat bahwa Comment Header di bawah posting adalah tombol hijau bulat - foto yang tertanam di dalam Comment Header.

Kita juga dapat menggunakan sebuah gambar untuk membuat bingkai berbayang (sekarang cukup umum di blog). Untuk melakukannya, Kita membuat gambar latar belakang singkat dengan panjang span yang memenuhi seluruh lebar template. Di ujung kanan dan kiri dari gambar latar belakang, Kita dapat membuat pola muram (atau pola yang akan dijadikan frame), dan menambahkan ini di dalam outer-wrapper, lalu diulangi secara vertikal.

Tapi, bagaimana cara untuk menambahkan dan mengulang gambar secara vertikal, horizontal, atau di kedua arah?

MENAMBAHKAN BACKGROUND GAMBAR :

katakan saja kalau kita akan menggunakan gambar berukuran 100 x 100 pixels sebagai background gambar di dalam container image Sidebar1. apa yang perlu dilakukan adalah menemukan kode sidebar1 {...} di dalam CSS Styling dan menambahkan kode yang berwarna merah di bawah ini (kode lainnya hanya contoh saja).

#sidebar1 {
margin: 0px 10px 15px 10px;
padding: 0 0 0 0;
width: 150px;
background: URL(http://the-url-of-your-image) repeat left top;
text-align: left;
}

kode "background:..." akan menampilkan gambar dari URL yang kita letakkan dan repeat (mengulanginya) di kedua sisi, vertical dan horizontal. Lokasi gambar pertama adalah di paling atas dan paling kiri. Kode umum untuk memasukkan background gambar adalah :

background: URL(http://...) repeat-command x-position y-position;


SEMUA PERINTAH PENGULANGAN (REPEAT COMMAND) :

no-repeat (gambar tudak akan diulangi)
repeat (diulangi secara vertical dan horizontal)
repeat-x (hanya diulangi secara horizontal)
repeat-y (hanya diulangi secara vertikal)

SEMUA PERINTAH POSISI HORIZONTAL (X) :

left (meletakkan gambar pertama di sisi paling kiri)
center (meletakkan gambar di tengah-tengah)
right (meletakkan gambar pertama di sisi paling kanan)

SEMUA PERINTAH POSISI VERTIKAL (Y) :

top (meletakkan gambar pertama di posisi paling atas)
center (meletakkan gambar pertama di tengah-tengah)
bottom (meletakkan gambar pertama di posisi paling bawah)