Banyak yang memandang website kompetisi desain online sebagai permasalahan besar dan aib bagi para pekerja kreatif. Tetapi kita harus melihat dari sudut pandang yang berbeda.

Era Internet

Ya, ini jaman nya internet dimana segala sesuatu bisa terkoneksi dengan mudah. Perubahan akan terus terjadi (tidak terkecuali di industri desain grafis). Dan kita sebagai desainer harus tetap bisa mengantisipasi perubahan jaman, atau kita bisa tergilas persaingan yang semakin ketat.

Perlu di garis bawahi kalau kita mengikuti kompetisi desain secara online, kita harus sadar kalau kita sedang melakukan spec work (kerja yang tidak jelas bayarannya). Hal inilah yang menyebabkan ada beberapa desainer (mayoritas senior) yang tidak menyukai platform baru ini. Desainer tidak boleh melakukan kerja yang tidak jelas bayaran nya, well, itu kalau kamu sudah di tahap expert (tingkat tinggi).

Kesempatan Tak Terbatas

Tapi bagi desainer pemula (dalam hal pengalaman dan network), kompetisi desain adalah kesempatan yang sedang membuka tangan nya lebar-lebar, selanjutnya tergantung diri kita sendiri. Raih atau tidak sama sekali.

Saya sendiri memulai karir dari 99designs, karena itu saya akan memberikan beberapa alasan kenapa desainer setidaknya harus mencoba kemampuannya di website kompetisi desain.

1. Tempat Belajar

Alasan pertama ini sudah pasti menjadi dasar kenapa kita mengikuti kompetisi desain. Sudah cukup kita belajar membuat mock up / code sendiri secara offline. Paling maksimal hanya di pamerkan di galeri seperti deviantart, blog pribadi atau facebook album. Sekaranglah saatnya mencoba di medan yang sebenarnya, meresapi brief, berkomunikasi dengan klien, revisi sampai dengan hasil akhir.

Jangan lupa, ini kompetisi. Jadi kalau kamu memainkannya dengan benar, maka hadiah dollar akan menunggu Yang ini anggap saja sebagai bonus kerja keras kita.

2. Mencari & Mengumpulkan Portfolio Nyata

Memulai karir sendiri harus dimulai dengan tindakan yang nyata. Manifestonya adalah portfolio. Calon klien akan menilai kita dari portfolio yang sudah kita kerjakan sebelumnya. Dan ini adalah kunci utama untuk membuka pintu karir yang kamu dambakan.

Kalau kamu sudah mengikuti beberapa kompetisi walaupun tidak selalu menang, kamu tetap bisa memasukkan hasil karya terbaik kamu kedalam portfolio. Dalam web desain, kamu tetap bisa memakai desain yang tidak menang tersebut untuk di jual kepada klien yang berminat, atau di modifikasi lagi untuk projek mendatang. Tidak ada ruginya kan?

3. Batu Loncatan

Setelah mempunyai portfolio yang cukup, langkah selanjutnya ada pada diri kamu sendiri. Tetap mengikuti kompetisi atau mulai mencari klien. Saya sendiri lebih memilih langkah yang kedua. Alasannya, kompetisi memang menyenangkan, tetapi saya sudah harus memikirkan perbandingan waktu kerja dengan hasil yang di dapat. Dan tentu saja kompetisi tidak bisa menjamin kita akan selalu menang.

Saya lebih memilih klien yang mengontak saya secara langsung setelah melihat portfolio saya di 99designs atau di website portfolio showcase. Karena klien tipe ini setidaknya sudah 80% pasti akan memakai jasa saya, biasanya hanya masalah harga yang menjadi bahan pertimbangan mereka.

4. Bisa Menjadi Pekerjaan Tetap

Lebih suka berkompetisi? Tidak masalah , dengan portfolio yang sudah terkumpul dan jumlah kemenangan yang sudah bisa di banggakan, saya yakin kamu akan lebih mudah menang (biasanya klien sudah menfavoritkan desainer yang sudah sering menang).

Sekarang kamu sudah bisa menjadikan ajang kompetisi sebagai pekerjaan tetap, bukan sebagai media belajar dan coba-coba. Untuk beberapa tips nya sudah pernah saya bahas di Ruang Freelance.

Nah, sudah tahu kan alasan-alasan utama kenapa kita patut mencoba kemampuan kita di website kompetisi desain? Ayo mulai latihan dan berkompetisi! Salam Zuperr!

Melanjutkan posting sebelumnya tentang bedah desain blog, kali ini kita akan menikmati beberapa tren dan contoh desain blog yang sedang populer di tahun 2010.

Tampaknya penggunaan layout yang minimalis, whitespace yang lumayan luas, dan pengaturan tipografi menjadi beberapa poin penting dalam mendesain blog saat ini. Kata orang, melihat secara langsung akan lebih baik daripada hanya berkata-kata, jadi silakan menikmati

Alonso

Yang menarik dari desain blog ini adalah elemen kecil yang “menabrak” layout. Seperti pada tag “by” dan kotak search di sebelah kanan yang melewati area konten.

The Design Cubicle

Bagi yang pernah melihat blog Brian Hoff ini pasti tidak lupa dengan styling archives nya di sidebar kanan. Selain itu area konten yang sengaja di buat lebih kecil dari blog lain juga menjadi satu ciri khas.

Christoph Zillgens

Penempatan icon di sebelah kiri yang melambangkan tipe setiap posting terbilang unik. Tipe seperti ini biasanya menggunakan platform Tumblr (yang memang sudah dari sananya seperti itu). Detil garis pembatas di setiap akhir posting juga memberikan detil yang kecil namun berdampak besar.

Fresh 01

Wow! Itu kata yang saya ucapkan sendiri pada waktu pertama kali melihat blog ini. Di lihat dari layout nya sih biasa saja, tapi kalau kamu sudah mulai scrolling, disitulah trik yang membuat blog ini menjadi favorit saya pribadi.

Jay Hollywood

Penggunaan gambar yang besar pada header membuat blog ini mudah di kenali, walaupun dampak negatif nya adalah mengganggu navigasi utama di atas. Ini merupakan salah satu contoh layout dasar biasa saja bisa terlihat bagus jika di padukan dengan gambar yang menarik.

Morphix Blog

Desain blog ini membuktikan kalau grid dan ilustrasi bisa juga berkolaborasi menghasilkan desain yang bersahabat (fun) namun tetap terlihat bersih dan modern.

Particle Lab

Saya tidak tahan melihat tipografi pada heading nya, sangat besar sekali! tapi itulah yang menjadi ciri khas blog ini. Perpaduan warna yang kalem dan warna-warni menghasilkan satu desain yang sedap di pandang. Mereka juga punya selera humor tersendiri dengan membuat lingkaran di header bisa bergerak (bukan dengan flash).

Thomas Maier

Simplisitas maksimum. Itu kesan pertama yang saya dapat. Elemen grafis yang menonjol hanya ada pada pita merah di kanan atas. Selebih nya semua visual lebih di utamakan kepada fungsi. Yang saya agak bingung, apa tujuan panah di samping menu links? Mungkin ada yang bisa berspekulasi? silakan berkomentar

Trent Walton

Sekali lagi contoh perkawinan layout sederhana dan visualisasi yang kuat akan menghasilkan desain yang powerful. Header yang digunakan adalah gambar utama posting, sehingga setiap kali ada posting baru, maka header akan ikut berganti. Ide yang bagus!

Veerle Duoh

Saya suka detil tekstur pada background blog ini, hampir tidak terlihat tapi kita bisa merasakannya. Kombinasi warna blog ini juga unik, feminin tapi juga tidak terlalu feminin, pas! Cara pengaturan layout juga tidak seperti blog kebanyakan, banyak yang bisa di pelajari dari blog Veerle ini.

Ardian Trimurti

Sejak pertama kali melihat langsung suka. Memang dari segi visual tidak ada yang menonjol di blog Ardian ini. Tetapi pegaturan tipografi yang sangat baik dan penggunaan whitespace yang maksimal membuat blog sederhana itu tidak terlihat sederhana. Yang menjadi nilai tambah adalah status visited link di kanan atas (akan ada icon checklist). Saya baru pertama kali melihat yang seperti itu.

Working Library

Bagi sebagian orang tampilan blog yang satu ini akan di anggap membosankan. Mungkin karena terlalu sederhana?. Namun yang pasti dari sisi fungsionalitas desain tipe ini sangat baik, heading yang besar, di bantu dengan sedikit deskripsi tentang posting. Saya merasa seperti membaca sebuah buku.

Information Architects

Hampir sama dengan blog Trent Walton di atas, tipe ini sangat sederhana. Mengedepankan konten daripada visual. Pengaturan font pada heading dan body text sangat baik, sehingga membuat blog iA ini nyaman di baca dalam waktu yang lama.

Bagaimana menurut kamu inspirasi blog di atas? Ada blog favorit yang ingin kamu tambahkan? silakan berkomentar.

Tinjauan Desain by Request

Atas saran Ardian saya membuka kesempatan bagi teman-teman yang ingin desain blog/website nya di review di jurusgrafis. Kamu bisa mengirimkan link dan deskripsi singkat tentang website kamu ke jurusgrafis@gmail.com

Selain memperoleh exposure, secara tidak langsung kamu akan mendapatkan feedback (dari komunitas jurus grafis juga melalui komentar), yang mudah-mudahan bisa di gunakan untuk mengembangkan website kamu. So, jangan ragu-ragu!

Fungsi sebuah blog sudah bergeser dari yang tadinya hanya sebatas tempat curhatan sang penulis, sekarang menjadi media publikasi bagi orang banyak (istilah keren nya, Citizen Journalism). Pada posting ini kita akan membahas beberapa elemen visual yang menjadikan desain sebuah blog menjadi efektif.

Sinergi Desain & Konten

Inti dari blog memang ada pada konten blog itu sendiri, tetapi seperti diskusi kita terdahulu, konten yang bagus jika tidak didukung dengan desain yang efektif maka tidak akan berhasil. Sebagian mungkin bisa bertahan karena faktor senioritas atau konten yang tidak dapat di temukan di blog lain. Tapi bagaimana dengan blogger junior yang walaupun mempunyai konten yang bagus tetapi kurang/belum memperhatikan desain blognya sendiri?

Lagipula, apa salahnya memanjakan pembaca dengan presentasi desain yang nikmat di mata? Selain membuat pembaca lebih betah berlama-lama di blog kita, manfaat lain tentu membuat pesan yang ingin kita sampaikan lebih mudah di tangkap.

Berikut adalah beberapa poin/tips yang bisa di gunakan untuk membuat desain blog menjadi lebih efektif.

Tata Letak Kolom Konten

Dari hasil pengamatan saya, ada 5 macam jenis tata letak kolom yang sering digunakan pada desain blog. Masing-masing tata letak mempunyai kelebihan dan kekurangan, namun kita bisa menentukan yang terbaik bagi keperluan blog yang akan kita desain.

1. Menurun Single (1 kolom)

Jenis ini merupakan tata letak yang standard dan hampir semua blog menggunakan metode ini. Dikarenakan sistem dokumentasi dan penanggalan blog yang berdasarkan hari, maka posting terbaru akan di letakkan di paling atas.

Kelebihan :

• Pembaca sudah familiar dengan tata letak ini
• Mudah menemukan posting terbaru
• Ruang untuk konten lumayan luas

Kekurangan :

• Dari segi visual terlihat biasa saja
• Pembaca akan mengalami sedikit kesulitan bila ingin melihat posting terdahulu

2. Menurun Paralel (2 kolom)

Sama dengan tipe menurun yang pertama, perbedaannya hanya pada kolom konten yang di bagi menjadi 2, sehingga dapat memuat lebih banyak konten di dalam satu halaman.

Kelebihan :

• Pembaca dapat dengan mudah melihat beberapa posting terbaru
• Memberikan pilihan kepada pembaca
• Blog terasa lebih kaya akan konten

Kekurangan :

• Layout secara keseluruhan akan terlihat penuh
• Kalau pengaturan masing-masing kolom tidak di perhatikan (tinggi kolom), akan terlihat berantakan
• Beberapa pembaca akan bingung mana yang mau di baca terlebih dulu

3. Grid (4-6 kolom)

Sesuai dengan namanya, tata letak ini menggunakan sistem grid untuk mengatur tata letak kolom kontennya. Desainer bebas menentukan akan menggunakan berapa kolom, tergantung dengan kebutuhan dan jenis konten (lebih banyak gambar atau tulisan).

Kelebihan :

• Secara visual terlihat menarik
• Semua posting dapat tampil dalam satu halaman

Kekurangan :

• Akan membingungkan pembaca
• Dari sisi layout ada kemungkinan akan terlihat berantakan

4. Full Width

Tipe yang satu ini tidak menggunakan kolom, tetapi menggunakan seluruh lebar halaman yang ada. Bahkan bagian sidebar kanan atau kiri tidak di gunakan, namun ada juga beberapa yang tetap menggunakan sidebar tetapi dengan porsi yang sangat minim.

Kelebihan :

• Konten menjadi sorotan utama
• Terlihat unik karena belum banyak yang menggunakan
• Lebih nyaman di baca
• Pembaca akan fokus kepada posting tanpa ada gangguan banner atau widget lain

Kekurangan :

• Terlihat “sepi”
• Agak sulit menampilkan posting-posting sebelumnya
• Butuh strategi khusus untuk menempatkan banner iklan atau widget lain

5. Custom Posting

Kalau kamu mempunyai keahlian di bidang coding, pilihan ini mungkin bisa kamu pertimbangkan. Tipe ini merupakan tipe “break the rules” karena sama sekali tidak menggunakan template yang sama pada setiap posting. Melainkan menyesuaikan desain dengan konten dalam arti yang sebenarnya. Konsep nya sama seperti majalah yang melayout setiap artikel nya secara personal.

Kelebihan :

• Sudah pasti terlihat unik
• Sinergi konten dan desain sangat dapat dirasakan
• Pembaca akan melihat seluruh posting karena penasaran akan tampilan visualnya

Kekurangan :

• Butuh waktu yang lumayan lama untuk membuat 1 posting saja
• Tidak semua orang menguasai coding

Pengaturan Font

Konten adalah jiwa dari sebuah blog karenanya kita harus memperhatikan cara kita menggunakan dan menampilkan text dengan baik. Tujuannya tak lain adalah agar nyaman di baca. Berikut ini beberapa hal yang harus di perhatikan,

1. Jenis Font

Di dalam blog pasti ada 2 jenis font yang harus di gunakan, yang satu sebagai heading, dan yang lain sebagai body text. Untuk bagian heading kita bisa menggunakan font yang jarang di pakai oleh desainer lain atau disesuaikan dengan kebutuhan dasar headline itu sendiri, yaitu untuk menjadi pusat perhatian.

Pada bagian heading kamu bisa menggunakan font yang tebal atau mencari font dengan bentuk yang unik (namun tetap terbaca). Penggunaan font yang tidak biasa pada heading juga bisa menjadi pembetukan karakter desain sebuah blog.

Yang kedua adalah font untuk body text. Di bagian ini sebaiknya kita menggunakan font standard yang memang di fungsikan untuk body text, alasan utamanya adalah agar text dapat di tampilkan dengan baik di semua monitor pembaca.

2. Ukuran Font

Yang akan lebih di bahas di sini adalah ukuran font pada body text. Karena perkembangan resolusi monitor saat ini, ukuran 12 point adalah ukuran standard. Tapi kalau kamu mau lebih meningkatkan kenyamanan dalam membaca bisa menggunakan 14 – 16 point, ukuran ini tergantung kepada jenis font yang kamu gunakan.

3. Line Spacing

Bagian ini sangat kecil, namun penting untuk menjaga kenyamanan saat kita membaca artikel. Rumus yang biasa di gunakan adalah besar font yang di gunakan, di tambah 4 point. Misalnya, kamu menggunakan font 14 point, maka line spacing yang ideal adalah 18 point.

Namun pengaturan line spacing harus di coba secara langsung, terkadang bisa juga line spacing 20 point (dengan besar font 14 point) lebih nyaman di baca karena bentuk dan jenis font juga mempengaruhi.

Desain Header & Logo

Sesimpel apapun desain header dan logo yang kamu buat haruslah menarik. Ibaratnya, header dan logo adalah wajah seseorang. Karena ini desain untuk blog, maka logo mungkin tidak menjadi keharusan, tetapi akan lebih baik jika kamu mempunyai logo walaupun hanya berbentuk tipografi (logotype). Desain logo yang unik akan menjadi identitas blog.

Desain header dapat disesuaikan dengan “feel” keseluruhan blog yang ingin kamu dapatkan. Kamu bisa bereksplorasi dengan ilustrasi, texture, atau bahkan bermain dengan white space.

Inspirasi Desain Header Blog

Styling Image

Sebenarnya trik ini sangat simpel, hanya menambahkan border di sekitar image/photo yang kita gunakan pada posting. Dengan cara ini image akan tampil lebih menarik walaupun efek nya tidak terlalu terlihat. Akan terasa perbedaanya antara yang menggunakan dan tidak menggunakan styling image.

Contoh Penerapan Border Pada Gambar

Optimasi Sidebar

Mayoritas blog mempunyai sidebar, tapi terkadang kita suka bingung ingin menaruh fitur/widget apa di bagian ini. Sebelum kamu menambahkan widget dengan membabi buta, lebih baik pikirkan dulu hal selain konten yang ingin kamu sampaikan kepada pembaca.

Untuk optimasi sidebar ini tidak ada tips yang baku, semuanya kembali lagi kepada kamu. Dari hasil pengamatan saya, sidebar pada blog biasanya di gunakan untuk,

• Komentar Terkini
• Posting Pilihan (Featured)
• Posting Terpopuler
• Banner Iklan
• Twitter / Facebook Page stream
• Icon Social Media
• Flickr Gallery
• Kategori Posting
• Archives
• Voting Widget (menampilkan voting atau hasil voting)
• Peringkat Komentator
• ( Kemungkinan lain, silakan beritahu saya melalui kolom komentar )

Inspirasi Sidebar

Kolom Komentar

Bagian yang ini memang sudah menjadi default dari semua blog engine yang ada dan tujuan nya semua sama, yaitu untuk menciptakan komunikasi 2 arah antara penulis dan pembaca.

Banyak cara untuk menjadikan kolom komentar menjadi menarik, selain dari segi visual, penggunaan kata-kata yang unik juga menjadi faktor tambahan supaya pembaca mau menulis komentarnya. Agar pembaca nyaman menulis komentar, sebaiknya bagian field komentar di buat lebih lebar dan agak tinggi, ini akan berguna bagi pembaca yang ingin menulis komentar yang lumayan panjang.

Inspirasi Kolom Komentar

Optimasi Footer

Trend Big Footer sepertinya masih akan berlangsung lama karena fungsinya sebagai area pemberhentian kedua setelah area konten yang berada di paling atas.

Ada 2 tujuan dasar mendesain big footer pada blog,

1. Untuk meletakan fitur tambahan yang tidak cocok (tidak muat) di letakan di sidebar atas.
2. Membuat pembaca lebih mendalami konten blog (misalnya, dengan menaruh widget “Most Discussed Articles”)

Yang pasti footer bukan lagi ruang yang di anak-tiri kan lagi, malah bisa mendukung keseluruhan konten blog.

Inspirasi Footer Efektif

Kesimpulan

Blog dengan konten yang bagus akan menjadi lebih bagus lagi jika menggunakan desain yang efektif dan cantik. Konten dan desain tidak lagi menjadi hal yang terpisah, melainkan bersinergi menghasilkan suatu blog yang memukau dan berguna bagi banyak orang.

Sudah siap mendesain (atau me-redesain) kamu? Atau ada elemen yang tertinggal? Mari berkomentar!

Efek embun sangat mudah di buat di Photoshop, hanya perlu menggunakan satu teknik (yaitu teknik masking) dan kesabaran untuk mendapatkan hasil yang mendekati realistis.

Sebelum memulai saya mau meminta maaf karena tidak sempat menulis artikel baru selama bulan April kemarin di karenakan kesibukan pekerjaan (cliche but true! ). Tapi mulai sekarang saya berkomitmen untuk menjadikan Jurus Grafis sebagai projek juga sehingga frekuensi posting tetap dapat terpenuhi.

Ok, cukup basa basi nya, kita akan mulai membuat efek embun di Photoshop. Materi yang di perlukan adalah gambar kaleng minuman bersoda (atau gambar apa saja yang kamu mau), bisa di unduh di tautan ini.

Langkah 1

Buka gambar kaleng yang sudah di unduh tadi di Photoshop.

Langkah 2

Gunakan Pen Tool (P) berwarna putih untuk menggambar embun. Bentuk embun tidak beraturan tetapi tetap ada unsur lingkaran, jadi kamu bisa bebas menentukan bentuk embun yang kamu inginkan.

Langkah 3

Di tahap inilah efek embun akan di hasilkan. Gunakan teknik masking pada bentuk embun yang baru kita buat tadi.

Langkah 4

Gunakan Soft Brush pada bagian tengah bentuk embun, sehingga akan di hasilkan efek transparan, jangan lupa juga untuk menurunkan Opacity Brush nya supaya efek transparan yang di hasilkan lebih lembut.

Kunci langkah ini adalah eksperimen, sekaligus melatih feeling kita untuk menghasilkan efek yang sesuai seperti embun asli.

hasil sementara akan seperti gambar di bawah ini,

Hasil Akhir

Ulangi langkah 2 sampai langkah 4 untuk membuat embun yang lain. Atau kamu bisa menduplikasi embun yang sudah ada dan merubah bentuk nya dengan Transform Tool (Ctrl + T).

Kesimpulan

Membuat efek embun sangat mudah sekali bukan? dengan cara ini kamu bisa membuat efek lain selain embun, seperti bola kristal atau bola transparan, dan lainnya. File photoshop tutorial ini bisa kamu unduh di akhir posting (507 Kb). Selamat mencoba dan jangan pernah berhenti bereksperimen!

Bulan April sudah tiba dan kebetulan minggu ini adalah long weekend! So, selamat berjalan-jalan dan menikmati waktu luang!. Dan tentu saja jangan lupa, cek kompilasi tautan inspiratif edisi terbaru

Personal Branding For Web Designers

Tips ini sebenarnya tidak berlaku hanya untuk desainer web saja, tapi menurut saya berlaku untuk semua orang yang melakukan bisnis dengan menggunakan media internet. Temukan cara melakukan personal branding yang efektif.

A Lazy Freelancer is a Sexy Freelancer

Ah, malas lagi, malas lagi . Ini sudah menjadi penyakit semua orang, tak terkecuali freelancer. Artikel ini bisa membuat kita yang malas menjadi tidak malas lagi. Baca trik jitu mengubah kemalasan menjadi motivasi yang produktif.

The Principle of Contrast in Web Design

Kontras adalah salah satu prinsip yang ada di desain grafis. Dan mungkin yang paling sering kita gunakan secara sadar atau tidak sadar. Di artikel ini kita belajar lebih dalam lagi tentang kontras dan bagaimana cara memanfaatkannya dengan baik. Lihat Selengkapnya.

Innovate: Sketch out your ideas

Ide besar datang dari satu hal yang kecil yaitu sketsa. Satu hal yang menarik di artikel ini adalah cerita di balik pembuatan logo Citibank yang di dapat dari sketsa pada saat meeting. Lihat Selengkapnya.

Beautiful Typographic Business Cards

Sedang mendesain kartunama? Kumpulan referensi ini bisa membuat kamu lebih kreatif lagi Lihat Selengkapnya.

How to Fix Troubled Projects

Terkadang masalah bisa datang menghampiri. Mungkin saja kesalahan datang bukan dari kamu sendiri, melainkan dari sisi klien. Dengan langkah yang tepat kita bisa mengatasi projek ini yang pada akhirnya akan berlanjut atau kita hentikan demi kebaikan kedua belah pihak. Baca Selengkapnya.

Tautan Terkait
Tautan Inspiratif No.1
Tautan Inspiratif No.2
Tautan Inspiratif No.3
Tautan Inspiratif No.4
Tautan Inspiratif No.5
Tautan Inspiratif No.6
Tautan Inspiratif No.7

Ikuti juga Twitter Jurus Grafis dan Facebook Page Jurus Grafis untuk mendapatkan berita desain seperti di atas. Jangan lupa berlangganan Jurus Grafis melalui Email dan RSS.

Walaupun usia grup Flickr Jurus Grafis masih tergolong muda (6 bulan), namun karya-karya yang di tambahkan ke grup ini banyak yang bagus dan menarik. Untuk terus mendukung desainer lokal, maka posting ini akan mengumpulkan karya terbaik yang ada di sana.

1. Ilham Sul Putra

2. Semimage

3. Anjik Andrianto

4. Artz31

5. Ilution Suicidelive

6. Resatio

7. MigoMagi Brand

8. Syinaction

9. Muloyoung

10. Adhietology

11. Ayib

12. Thedoart

13. TecknoGrafik

14. Arthezoo

15. Fajar Faqih

16. Dancing Doll

Yang mana favorit kamu? Bagi yang belum gabung ke Grup Flickr Jurus Grafis, ayo gabung sekarang! Di tunggu ya karya terbaik kamu disana!

Ikuti juga Twitter Jurus Grafis dan Facebook Page Jurus Grafis untuk mendapatkan inspirasi desain seperti di atas. Jangan lupa berlangganan Jurus Grafis melalui Email dan RSS.

Tak terasa bulan Maret akan segera berakhir dan kita sudah menjalankan 1/4 dari tahun 2010 ini. Waktu memang bisa terasa cepat kalau kita sedang bermain atau sedang bekerja. Atau bahkan ketika sedang membaca topik menarik yang sudah terpilih berikut ini. So, selamat membaca!

The “WOW” Factor in Web Design

Bagaimana membuat website kita diingat oleh orang lain? Ada 3 cara, konten nya harus berguna, desain nya harus efektif dan yang terakhir adalah harus mempunyai faktor “WOW”. Biasanya tersembunyi dan kalau kita bisa ‘mengalami’ nya maka kita akan merasa kagum, sehingga pada akhirnya kita mengingat website tersebut.

Creating an Ecological Fairy Tale Wallpaper

Di tutorial ini kita di ajarkan cara dasar memanipulasi foto untuk menghasilkan karya desain atau seni yang benar-benar baru. Patut di lihat dan di coba!

70 Creative and Practical Uses of the Ampersand

Kalau menurut saya lambang tanda baca “dan” / “&” / Ampersand itu seksi. Kalau menurut kamu bagaimana? Silakan langsung di lihat.

Web Design? Screw Aesthetics

Topik ini sangat klasik! Kenapa desain yang buruk (tetapi terkadang efektif) selalu menang?. Yah, itu kalau kita berada di jaman dulu. Kalau di jaman modern seperti sekarang ini rasanya desain yang baik itu harus terlihat bagus dan sekaligus efektif. Coba baca artikel ini lebih lengkap.

12 Useful & Free Downloadable Web Design Books

Semua ebook yang ada pada posting ini tidak akan kamu temukan di bangku kuliah. Ini merupakan pengalaman dari masing-masing sang penulis tentang cara mendesain website atau  menjadi desainer web yang sukses. Ayo unduh dan baca semuanya.

45 Creative Resumes to Seize Attention

Kalau kamu sedang melamar kerja, pasti membutuhkan cv/resume. Dan sudah jadi tuntutan bagi desainer (dan bidang kreatif lainnya) untuk membuat resume yang unik. Dengan resume yang unik maka kamu akan lebih mudah dapat pekerjaan . Lihat contoh selengkapnya.

Tautan Terkait
Tautan Inspiratif No.1
Tautan Inspiratif No.2
Tautan Inspiratif No.3
Tautan Inspiratif No.4
Tautan Inspiratif No.5
Tautan Inspiratif No.6

Ikuti juga Twitter Jurus Grafis dan Facebook Page Jurus Grafis untuk mendapatkan berita desain seperti di atas. Jangan lupa berlangganan Jurus Grafis melalui Email dan RSS.

Rasanya kita sebagai desainer tidak akan pernah bosan untuk belajar dari Apple. Selalu ada saja ide baru yang di keluarkan, di tambah lagi dengan didukung visual yang menarik. Dan kali ini kita akan belajar membuat tampilan aplikasi iBooks yang ada di iPad.

Sedikit Tentang iBooks

iBooks adalah sebuah aplikasi E-Reader keluaran Apple, yang otomatis terdapat pada iPad. Selain fungsi nya untuk membaca, tampilan aplikasi ini sangat unik, yaitu menyerupai rak buku. Jadi kita tinggal meng-klik cover buku yang ada dan kita bisa langsung membaca isinya, bahkan bisa membalik halaman seperti buku asli!

Ok, cukup pengenalan mengenai iBooks, sekarang kita akan belajar membuat desain interface ala iBooks! Mari kita mulai!

File Yang di Perlukan

Sebelum mulai, sebaiknya kamu mengunduh tekstur kayu di tautan ini. Atau kamu bisa mencari gambar tekstur kayu yang sesuai dengan selera kamu.

Langkah 1

Buka dokumen baru di Photoshop seperti gambar di bawah ini.

Langkah 2 (Background)

Kita akan membuat bagian backgroundnya terlebih dulu. Gunakan Rectangle Tool (U) untuk membuat persegi yang menutupi semua dokumen tersebut. Pilih warna coklat sebagai warna dasar.

Langkah 3

Buka file tekstur kayu yang sudah kamu unduh tadi di Photoshop. Lalu ubah ukurannya menjadi 200 x 200 pixel.

Setelah itu Edit > Define Pattern lalu namakan tekstur tersebut. Sekarang kita sudah mempunyai pattern bergambar kayu yang bisa di ulang (repeated pattern) tanpa putus.

Selanjutnya, buat layer baru dan Fill (isi) dengan pattern kayu tersebut. Caranya, Edit > Fill > Custom Pattern.

Langkah 4

Setelah layer 1 terisi dengan pattern kayu, maka kita akan mengubah Layer Blending Mode nya menjadi Multiply dengan Opacity 85%.

Langkah 5 (Manajemen Layer)

Ok, kita sekarang sudah selesai membuat background nya. Supaya dokumen Photoshop kita rapih dan mudah untuk di edit di kemudian hari. Kita akan membuat Folder “Background”. Cara ini sama seperti mengelompokkan beberapa layer yang berhubungan dekat.

Cara ini harus di lakukan karena kita akan bekerja dengan lumayan banyak layer nantinya. Jadi lebih baik stay organized daripada nanti kita kebingungan sendiri

Sebelum kita lanjut, buat Folder baru dan namakan “Rak”.

Langkah 6 (Pembuatan Rak)

Kita akan membuat Rak nya terlebih dulu. Gunakan Rectangle Tool (U) untuk membuat persegi panjang.

Sedikit info tentang kenapa saya memilih menggunakan Smart Object (vektor) daripada Rasterized Layer (pixel) adalah, untuk memudahkan kita mengubah bentuk (tanpa pecah) dan merubah warna (dengan patokan nilai yang sama dengan yang lain). Karena terkadang pada saat tahap sentuhan akhir kita ingin mengubah warna atau merubah ukuran, hal ini akan sedikit sulit di lakukan apabila semua bentuk yang kita buat bersifat Rasterized Layer.

Langkah 7

Berikan Layer Style dengan cara dobel klik layer persegi tersebut. Atau kamu bisa ke main menu > Layer > Layer Style. Gunakan efek Drop Shadow dan Gradient Overlay pada bentuk persegi ini.

Langkah 8

Selanjutnya, kita akan membuat efek 3 dimensi atau perspektif pada rak. Cara nya sangat mudah, kita hanya perlu memberikan shape tambahan di bawah layer rak ini.

Setelah posisi sudah tepat, sekarang kita akan memberikan efek bayangan pada bagian perspektif ini. Caranya masih sama dengan yang tadi, yaitu gunakan Layer Style Drop Shadow dan Gradient Overlay (ikuti setting seperti gambar di bawah).

Langkah 9

Untuk menambah kesan realistis, kita akan membuat penyangga rak buku. Gunakan Rounded Rectangle Tool (U) dan ubah setting roundness / radius nya menjadi 8 pixel.

Berikan efek Drop Shadow dan Gradient Overlay dengan menggunakan Layer Style.

Jangan lupa pada detil yang penting. Pada kasus ini kita akan menambakan mur/skrup pada penyangga. Gunakan Ellipse Tool (U) dan sesuaikan warnanya dengan penyangga tersebut.

Duplikasi mur/skrup ini untuk mengisi sisi sebelah dari rak. Ada banyak cara menduplikasi layer, cara paling mudah adalah seperti gambar di bawah ini.

Langkah 10 (Detil Rak)

Karena rak yang kita buat ini adalah rak kayu, maka kita harus memberikan tekstur kayu juga pada sisi luar rak. Untuk tahap ini kita akan menggunakan teknik Layer Masking, kalau kamu belum familiar dengan teknik ini silakan pelajari tutorial nya di posting terdahulu.

Langkah 11 (Detil Rak – Lagi)

Seperti yang kita tahu, garis sebesar 1 pixel bisa memberikan perbedaan yang signifikan pada suatu desain. Untuk itu kita akan memberikan juga detil “halus” pada desain kita kali ini.

Gunakan Pencil Tool (B) dengan besar 1 pixel berwarna putih, dan ubah Layer Blending Mode nya menjadi Overlay.

Berikan efek cahaya pada sisi luar rak dengan menggunakan Brush berwarna putih dan teknik Layer Masking.

Langkah 12

Buat folder baru dan namakan “Sisi Dalam Lemari”. Ya, kita sudah setengah jalan

Langkah 13 (Sisi Dalam Lemari)

Selanjutnya kita membuat sisi samping bagian dalam dari rak buku ini. Sangat mudah sekali, karena hanya menggunakan Rectangle Tool (U) dan Layer Blending mode seperti gambar di bawah.

Untuk menyelesaikan bagian ini, kamu tinggal meng-copy paste sisi kiri yang sudah di buat. Lalu tinggal di balik dan di tempatkan di sisi sebelah kanan.

Langkah 14

Buat folder baru dan namakan “Buku”. Kita akan mulai menata rak buku ini!

Langkah 15 (Template Tampilan Cover Buku)

Di tahap ini kita akan membuat semacam template untuk cover buku yang akan kita tampilkan. Gunakan Rectangle Tool (U) untuk menmbuat bentuk standar buku. Dan berikan Layer Style Drop Shadow.

Langkah 16

Supaya cover buku kita tidak terkesan “flat”/datar, maka kita akan memberikan efek ketebalan yang halus. Caranya adalah dengan menggunakan Brush – soft (B) berwarna hitam lalu di masking ke dalam template cover buku tersebut.

Gunakan teknik yang sama untuk memberikan efek cahaya pada buku. Saya sedikit menggelapkan warna dasar buku agar terlihat efek yang diinginkan.

Langkah 17

Masukkan cover buku yang kamu inginkan ke dalam template tersebut. Cara memasukkan cover ini masih menggunakan teknik Layer Masking. Untuk lebih jelasnya kamu bisa mengunduh file photoshop yang di buat khusus untuk tutorial ini di akhir posting.

Duplikasi dan lanjutkan menata rak buku kamu . Desain cover buku yang keren-keren ini bisa kamu dapatkan di CoverBookArchive.

Yeah! kita sudah selesai!. Selanjutnya kamu tinggal terus menduplikasi dan mengganti masing-masing cover bukunya.

Hasil Akhir

File Photoshop seperti di atas ini bisa kamu unduh di akhir posting (4Mb – Zip), dengan begitu kamu akan lebih jelas melihat bagaimana cara menyusun layer dan teknik yang di gunakan untuk mendesain tampilan seperti aplikasi iBooks.

Kesimpulan

Untuk membuat desain seperti ini tidak di butuhkan teknik dan trik yang rumit. Sejauh ini saya hanya menggunakan teknik masking dan layer blending. Yang terpenting adalah kesabaran dan perhatian terhadap detil-detil yang kecil. Selamat mencoba!

Sekedar Informasi

Ternyata Apple di duga ‘mengikuti’ desain aplikasi E-Reader bernama Classics (yang sedikit banyak mempengaruhi saya dalam mendesain interface tutorial iBooks ini). Classics sudah lebih dulu beredar di iPhone jauh sebelum iPad di umumkan. Saya pribadi lebih menyukai desain interface milik Classics. Namun sayangnya saya belum bisa mencoba menggunakannya langsung!

Jangan sampai kamu ketinggalan tutorial seperti ini! Ayo berlangganan melalui Email atau RSS. Dan ikuti Jurus Grafis di Twitter dan Facebook.

Interface Ala iBook (237)

Selamat akhir minggu! selamat menikmati asupan vitamin mingguan (kata seorang komentator di blog Jurus Grafis ini ). Informasi yang inspiratif akan membuat pikiran kita menjadi lebih terbuka dan lebih kreatif, so enjoy!

55 Colorful Web Designs to Inspire You

Perpaduan warna yang pas akan membuat karya desain ‘berbicara’ banyak dan bahkan mendukung tujuan/goal dari suatu desain. Dalam kasus ini yang di tampilkan adalah desain website. Lihat Selengkapnya.

How to Build a Footer That Doesn’t Stink

Footer pada website tidak lagi hanya berperan sebagai pelengkap, malah bisa memberikan nilai tambah (dalam hal informasi atau desain). Temukan cara efektif untuk mendesain footer website kamu!

To Sketch or Not To Sketch?

Pertanyaan di atas sangat menarik. Walaupun sepertinya jawabannya sudah pasti harus sketsa. Tetapi dalam beberapa kasus mungkin sketsa tidak mutlak di perlukan. Misalnya, klien yang butuh cepat selesai, desain sudah sering kita buat sehingga sudah hafal layout nya, dan alasan lain. Tapi setidaknya sketsa singkat sangat perlu kita lakukan. Baca Selengkapnya.

How to Get Motivated for Self-Promotion

Promosi diri tidak hanya di perlukan bagi para freelancer. Bagi kamu yang baru lulus dan mau mencari kerja tentu promosi diri yang benar harus di lakukan. Masalahnya kita sering tidak tahu bagaimana cara yang efektif untuk memulai.

Artikel ini menjelaskan hal paling mendasar yang harus kita ketahui sebelum kita mulai mempromosikan diri sendiri sebagai desainer grafis. Baca Selengkapnya.

40 Free Minimalist And High Quality Fonts

Font bagus dan gratis! siapa yang menolak? Ayo langsung unduh semua di tautan ini, siapa tahu nanti kamu memerlukannya.

30 Fancy Calligraphy Fonts

Font dengan gaya kaligrafi atau tulisan tangan menimbulkan kesan luwes dan eksklusif. Cocok untuk projek desain yang memerlukan penanganan tipografi yang berbeda. Langsung Unduh di tautan ini.

Tautan Terkait
Tautan Inspiratif No.1
Tautan Inspiratif No.2
Tautan Inspiratif No.3
Tautan Inspiratif No.4
Tautan Inspiratif No.5

Ikuti juga Twitter Jurus Grafis dan Facebook Page Jurus Grafis untuk mendapatkan berita desain seperti di atas. Jangan lupa berlangganan Jurus Grafis melalui Email dan RSS.

Ah.. akhir minggu yang semakin panas (dan hujan tiba-tiba), tapi tenang saja kawan, kompilasi tautan berikut ini akan membuat otak kamu terasa segar kembali! Sudah siap? Here we go!

Tipografi Layar Kaca: Bagian 1

Sebuah artikel yang membahas tentang sejarah tipografi pada layar kaca (monitor komputer khususnya). Mulai dari pemakaian image sebagai pengganti text (untuk headline/heading) sampai dengan teknologi terkini menggunakan Cufon dan @font-face. Lebih lengkap lagi tentang artikel ini.

A Guide to Creating Professional Quality Logo Designs

Mau tahu bagaimana proses seorang desainer merancang logo? Yang pasti tidak langsung di buat di Illustrator Silakan baca selengkapnya.

Daily 365

Konsep blog ini adalah membuat 1 posting per hari selama 365 hari (1 tahun). Tidak semudah yang di bayangkan memang dan ini salah satu blog yang gagal mewujudkan konsep itu. Tapi semua posting yang ada di sana sampai dengan hari ke 31 sangat inspiratif! Cek langsung di tautan ini.

11 Essential Tips Every Designer Should Be Aware Of

11 tips yang sangat mengingatkan kita sebagai desainer untuk tetap termotivasi, tetap kreatif dan sukses sebagai desainer maupun sebagai pribadi. Temukan semua tipsnya.

Register Without Registration Form

Bingung membaca judulnya? well, tidak usah bingung karena memang cara seperti ini yang harus di gunakan bagi para start-ups atau bagi kita yang sedang mendesain sebuah projek website toko online, komunitas, aplikasi web atau jejaring sosial.

Intinya adalah membuat pengguna tidak perlu (atau semudah mungkin) mendaftarkan diri di website kita. Temukan beberapa caranya di sini.

Drawing a 3D Character From a Plain Logo

Studi kasus yang sangat menarik. Sekali lagi artikel ini menunjukkan proses desain, mulai dari sketsa sampai tahap finishing di komputer. Ayo lihat sekarang!

Tautan Terkait
Tautan Inspiratif No.1
Tautan Inspiratif No.2
Tautan Inspiratif No.3
Tautan Inspiratif No.4

Ikuti juga Twitter Jurus Grafis dan Facebook Page Jurus Grafis untuk mendapatkan berita desain seperti di atas. Jangan lupa berlangganan Jurus Grafis melalui Email dan RSS.