text

Metallic Text Generator at TextSpace.net

Minggu, 24 Juni 2012

Panduan Mudah Desain Web dengan 960gs –Bag 2


Di bagian kedua panduan desain web dengan 960gs ini, kita akan melihat penggunaan beberapa class untuk memperbaiki tampilan elemen. Walaupun pendek, dengan berbekal artikel ini dan pengetahuan dasar CSS dan HTML Anda akan mampu membuat projek desain web sederhana.

Menggeser Elemen Untuk Perbaikan Tampilan

Di bagian pertama, kita telah melihat keberadaan class dengan nama push_X dan pull_X. Dalam prakteknya, kedua class ini berguna dalam mengubah tampilan elemen tanpa mengubah posisi markup.
Lihat contoh di atas. Misalnya Anda ingin menyimpan logo situs di tengah dan sebelumnya menambahkan beberapa paragraf. Dalam markup html, mungkin alurnya adalah menempatkan paragraf baru kemudian logo. Cara ini tidak tepat bagi search engine atau pengunjung dengan browser terbatas karena dengan begitu paragraf ditempatkan lebih penting daripada logo. Dengan class push_X dan pull_X, kita bisa mengubah posisi elemen tanpa perlu menggeser alur markup.

Penggunaan Class clear

960gs membuat kolom-kolom dengan cara mengubah element menjadi float (melayang). Dalam kondisi float, kita menarik elemen itu dari alur dokumen dan menarik semua elemen lain ke atas.
Perhatikan layout di atas. Artikel 4 otomatis berada di sebelah artikel 1 karena menyesuaikan dengan sisa area kosong yang diperolehnya. Bagaimana jika Anda ingin menyimpannya di baris baru, tepat di bawah artikel 1?
Anda dapat menambahkan div kosong dengan class clear untuk mengosongkan div yang sebelumnya dalam kondisi float.

1. Judul Artikel

Lorem ipsum dolor sit amet.

2. Judul Artikel

Quisque accumsan tristique tristique.

3. Judul Artikel

Maecenas consequat pellentesque sem.

4. Judul Artikel

Donec at orci nisi.

5. Judul Artikel

Donec at orci nisi.

6. Judul Artikel

Donec at orci nisi.
/pre>

Kesimpulan

Sistem grid 960.gs memberi kita cara mudah dalam mendesain web secara terstruktur dan rapi. Cukup saja dengan teori. Di artikel berikutnya, saya akan memperlihatkan cara mendesain sebuah situs portfolio menggunakan sistem grid 960.

Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)


Sebelumnya, saya pernah mereview Photoshop CS6 Beta. Selain itu, saya juga menulis beberapa tutorial desain dengan Photoshop CS6 Beta. Secara umum, saya terkesan dengan fitur pixel snapping-nya yang sangat berguna untuk desain interface. Tapi, saya belum memiliki rencana untuk mengupgrade Photoshop.
Untungnya, melalui lobi editor Psdtuts+ saya memperoleh Photoshop CS6 baru langsung dari Adobe. :)Adobe memberi saya seri Adobe CS6 Design Web Premium secara gratis yang terdiri dari Photoshop CS6 Extended, Illustrator CS6, InDesign CS6, Dreamweaver CS6, Flash® Professional CS6, Fireworks® CS6, Acrobat® X Pro, Bridge CS6, dan Media Encoder CS6.

Proses Installasi

Seperti versi sebelumnya, proses installasi software ini sangat mudah. File mentahnya bisa didownload langsung dari internet melalui program Adobe Download Assistant. File Installasi Adobe CS6 Design and Web Premium sebesar 4,08 GB. Agar proses download tidak terputus, komputer sebaiknya tidak dimatikan dan cukup dengan sleep atau hibernate. Dengan cara ini proses download bisa terus berlanjut setiap kali komputer digunakan. Saya menyelesaikan proses download dalam 4 hari dengan kecepatan internet rendah (Speedy).
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Adobe Download Assistant
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Jika diinstall semua, Adobe CS6 Design & Web Premium membutuhkan space sebesar 7,5 GB. Saya menghemat space dengan tidak menginstal Flash, Adobe Photoshop CS6 32 bit, dan Adobe Illustrator CS6 32 bit. Seingat saya, di CS5 tidak ada perbedaan berarti –baik kecepatan maupun fitur– antara Photoshop versi 32 bit dan 64 bit. Photoshop CS5 64 bit tidak mendukung filter Render Lighting Effects.
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Installasi tanpa Flash dan versi 32 bit Ps dan Ai menghabiskan space 6,9 GB.
Lama proses installasi tidak berbeda dengan Design Premium CS5, membutuhkan sekitar 40 menit.
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)

Bug

Bug yang saya temukan dalam Character Styles di Photoshop CS6 Beta ketika menulis tutorial untuk Psdtuts+masih ditemukan. Besar font dalam Character Styles kadang berbeda dengan ukuran di Baris Pilihan.
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Bug di Character Styles
Perintah Liquify di Photoshop CS6 Beta sebelumnya tidak bekerja di komputer ini. Hal yang sama terjadi di Photoshop CS6. Mungkin masalah ada di komputer saya dan bukan pada Photoshop.
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Liquify masih tidak mau jalan

Easter Egg Photoshop

Sebagai fan Photoshop, dalam setiap versi baru saya selalu mencari Easter Egg, yaitu hal aneh atau lucu yang disembunyikan para programmer software.
Jika Anda tahan Ctrl lalu klik Help > About Photoshop, Anda akan menemukan kotak dialog bergambar kucing. Superstition adalah nama kode untuk Photoshop CS6.
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Superstition
Jika Anda klik kotak warna interface di Edit > Preferences > Interface sambil menahan Ctrl + Alt + Shift, kotak akan berubah menjadi cangkir kopi dan roti bakar.
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Cangkir kopi dan roti bakar
Di versi betanya lebih aneh lagi. Kotak itu berubah menjadi Darth Vader versi Lego.
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Darth Vader dan Karakter Star Wars
Karakter Merlin yang bisa dimunculkan dengan Alt-klik menu Panel Layers > Panel Options kini hilang. Oh, bummer!
Mulai Menggunakan Adobe CS6 Design and Web Premium (+Easter Egg)
Merlin, Sang Penyihir
Jika Anda tertarik dengan Easter Egg Photoshop, silakan baca artikel lama saya tentang Easter Egg di berbagai versi Photoshop (File PDF).