Tutorial Membuat Themes AuraCMS

Intro
Saya akan mulai tutorial membuat themes untuk AuraCMS versi 2.2.
Tapi ini adalah tutorial dari seorang designer pemula, bila dalam petunjuk ada langkah yang aneh, diharap maklum dan bila memiliki prosedur yang lebih baik silakan gunakan prosedur anda tersebut. Walaupun sejauh ini semua themes yang saya buat works well!

Kondisi
Minimal anda sudah biasa menggunakan Photoshop karena disini tidak menjelaskan secara detail mengenai pengolahan image menggunakan Photoshop.

Sample Data
Oke langsung aja... berikut adalah proses pembuatan themes dari awal sampai siap dipublishkan, sudah tersusun step by step, saya pilih themes Blue dengan 3 kolom statis untuk dijadikan contoh.
Pada langkah2 penting telah disediakan file yang bisa didownload agar anda bisa memahami lebih jelas detail proses yang dimaksud.

1. Tools dan Software
Tidak ada yang istimewa dan semua gampang didapat,
Photoshop | Ms Frontpage | Texpad | HTMLColor | Firefox | IE | AUraCMS ver2.2 | Apache server
klik disini untuk download dan detail singkat tools ybs.

2. Utak-Atik di Photoshop
Langsung ke tutorial themes, gunakan Photoshop untuk membuat layout tampilan, kemudian potong (slice image) atur pada posisi yang sesuai dan simpan, pilih type HTML and Images (*.html).


Gambar atas adalah contoh desain awal yang siap dikirim ke Frontpage sebagai file HTML dan gambar yang telah di-slice akan otomatis tersimpan dalam folder images.
Anda dapat mencoba sendiri dan berkreasi dengan software lain yang biasa digunakan, yang penting nanti bisa menghasilkan 1 file HTML dan source gambar2nya dalam folder images yang dibutuhkan untuk membuat themes. [Download contoh PSD File]

3. Utak-Atik di Frontpage
Kemudian masuk ke MS.Frontpage, buka file HTML-nya, ini adalah hasil generated dari desain yang kita buat di photoshop, coba test di Browser (klik toolbars 'Preview in Browser') untuk memastikan semuanya sudah oke...

Biasanya pada tahap ini saya hanya perlu mengatur posisi tabel dengan 'Alignment Center' agar jarak lebar kiri kanan halaman seimbang. Setelah melihat tampilan di browser sudah yahud, kembali ke MS.Frontpage dan kita akan mulai edit tampilan, menandai space untuk posisi modul/blok dan bakal content-nya dan membuang slice image yang tidak diperlukan.

3. Edit kode HTML & Tandai posisi
Ini adalah file HTML setelah diedit, seperti terlihat disini, area untuk masing-masing posisi telah ditandai dengan teks, mulai dari Tag/Header logo, top-navigasi, tanggal, blok/modul kiri, content, blok/modul kanan, footer dll...
Yang dibutuhkan sebenarnya hanya paa sel yang saya tandai angka 1 - 4,
1. untuk Blok/Modul kiri,
2. untuk Content,
3. untuk Blok/Modul kanan dan,
4. untuk posisi Footer/Copyright.

Untuk memberi teks caranya dengan menghilangkan image yang ada di lokasi sel tersebut dan merubahnya menjadi background image atau background color dengan warna yang sesuai, kemudian ketik dan tanda dengan teks, misalnya 'Blok/Modul kiri', 'content', 'Blok/Modul kanan' dan 'Footer'...
Ukuran tinggi tabel (height) di 'netralkan' agar nantinya tingginya menyesuaikan dengan isi konten. Juga yang penting adalah memberi image background dengan style repeat-y pada tabel sisi2 kiri kanan teks (lihat sel yang diberi warna biru).
[Download contoh File HTML].

Proses selanjutnya adalah membuat folder themes baru, convert kode HTML ke script PHP dan mencoba themes baru...

to be continued:)