Pada bagian ke 2 ini kita akan menyelesaikan 3 elemen dari BlogFolio tersebut, yaitu “posting terbaru” , “shelf portfolio” dan “footer”.

Bagi yang baru mengikuti tutorial ini, silakan lihat bagian 1 terlebih dulu. Ok, mari kita lanjut!

Langkah 9

Kita masuk ke “posting terbaru”. Buat area konten dengan menggunakan Rounded Rectangular Tool, atur roundness nya menjadi 2 pixel.

Langkah 10

Selanjutnya kita membuat icon tipe posting, untuk stock icon nya silakan gunakan Free Tool Bar icons dari Gentleface (gratis untuk kepentingan personal). Buat lingkaran dengan menggunakan Ellipse Tool, tetapi rubah settingnya menjadi “Paths” sehingga tidak langsung terisi warna. Setelah itu Klik Kanan dan pilih Stroke Path.

* sebelum memilih Stroke Path, ubah dulu jenis Brush yang akan kita gunakan untuk lingkaran ini.

Langkah 11

Tempatkan icon pencil yang sudah di unduh tadi ke dalam lingkaran. Dan setelah itu samakan warnanya antara lingkaran dan icon pencil dengan menggunakan Layer Styles > Color Overlay.

Atur besar icon dengan menggunakan Transform Tool (Ctrl + T) dan tempatkan di kiri atas area konten.

Berikan efek grunge pada icon dengan menggunakan Layer Masking. Caranya persis sama saat kita membuat garis grunge di navigasi utama.

Langkah 12

Ketik juduli posting, info dan paragraf deskripsi. Gunakan Bebas Neue untuk judul post, Arial untuk info dan Georgia untuk paragraf. Atur layoutnya hingga menjadi seperti gambar di bawah ini,

Langkah 13

Buat frame foto (post image frame) dengan menggunakan Rounded Rectangular Tool dan letakkan di sebelah kiri paragraf.

Buat lagi persegi dengan menggunakan Rectangular Tool, kali ini untuk tempat menaruh foto (post image). Saya merubah warna frame foto menjadi agak kekuningan dan memberikan sedikit efek Drop Shadow.

Langkah 14

Kita akan membuat kesan foto yang berkilap dengan menggunakan Pen Tool. Gambar segitiga berwarna putih di atas area foto.

Selagi shape segitiga yang baru kita buat itu terseleksi, tekan icon masking pada window layers (sama dengan metode masking). Setelah itu gunakan Gradient Tool berwarna hitam putih, dan drag dari atas ke bawah sehingga ada bagian yang hilang secara halus.

Hasilnya akan terlihat seperti gambar di bawah ini. Saya sudah menambahkan foto juga.

Langkah 15

Gunakan Pencil Tool (B) berwarna biru sebesar 1 pixel untuk membuat garis. Duplikasi dan posisikan sehingga berada di antara baris paragraf.

Hide dulu sementara foto beserta frame yang telah kita buat tadi. Dan lanjutkan dengan garis merah vertikal.

Langkah 16

Buat efek ujung pita pada konten area dengan menggunakan Polygon Tool 3 sisi. Caranya sama saat kita membuat status aktif pada navigasi utama.

Hasilnya akan terlihat seperti gambar di bawah ini,

Langkah 17

Kita akan membuat link “Read More” dengan garis seperti efek coretan tangan. Ketik “Read More”, letakkan di kanan bawah. Gunakan Splatter Brush berukuran kecil (4-6 point) dan coret brushnya (cara ini memang agak sedikit manual ).

Langkah 18

Supaya tidak polos, kita akan menambahkan tekstur pada area konten. Unduh gambar kertas dari Flickr dan masukkan kedalam dokumen. Atur Brightness/Contrast dan Hue/Saturation kertas tersebut.

Setelah itu Clipping Mask tekstur kertas ke dalam area konten dan berikan efek Noise.

Supaya grafik ini bisa di coding, maka kita hanya akan menggunakan bagian atas saja dari tekstur. Dengan begitu tidak akan ada masalah nanti jika kontennya (area text) menjadi panjang ke bawah. Gunakan Layer Masking dan Gradient Tool.

Hasil sementara akan terlihat seperti di bawah ini, saya merubah warna judul posting menjadi merah pastel agar terlihat lebih menonjol di banding elemen lain.

Langkah 19

Selanjutnya kita membuat shelf/rak untuk portfolio terbaru. Gunakan Rounded Rectangle Tool dengan roundness 2 pixel.

Berikan Layer Styles Inner Shadow dan Gradient Overlay dengan setting seperti gambar di bawah,

Hasilnya akan seperti di bawah ini,

Langkah 20

Gunakan Pen Tool untuk membuat efek 3d (dudukan rak). Nyalakan guide supaya ujungnya pas dan gunakan warna yang lebih gelap dari shelf yang pertama.

Berikan Layer Styles Gradient Overlay pada dudukan rak tersebut.

Hasilnya akan seperti gambar di bawah ini,

Langkah 21

Supaya lebih realistis, kita akan memberikan bayangan dan sedikit cahaya pada shelf ini. Caranya sangat mudah, hanya dengan Soft Brush dan Transform Tool untuk mengatur posisi dan besarnya. Atur juga Opacity layer brush tersebut supaya tidak terlalu ‘keras’.

Langkah 22

Untuk area thumbnail portfolio kita menggunakan Rectangle Tool.

Supaya thumbnail ini tidak terlalu polos nantinya, kita akan menggunakan efek Inner Shadow sebesar 1 pixel dan Gradient Overlay.

Langkah 23

Berikan efek bayangan thumbnail dengan menggunakan Soft Brush. Saya tidak menggunakan Layer Styles Drop Shadow karena kebutuhannya tidak cocok, kalau di paksakan maka bayangannya tidak akan terlihat natural.

Hasilnya akan terlihat seperti di bawah ini,

Untuk menyelesaikan bagian ini, gabungkan dulu semua layer thumbnail (thumb dan bayangan thumb) kedalam 1 folder dan duplikasi sebanyak 2 kali. Lalu atur posisinya hingga terlihat rapih.

Langkah 24

Tambahkan heading “Latest Works” dan gunakan garis yang sama pada main menu (copy paste). Namun kamu boleh saja membuat garis baru lagi untuk bagian ini.

Langkah 25

Gunakan logo yang sama pada bagian footer, tambahkan sedikit tulisan “All Rights Reserved” (opsional). Untuk thumbnail portfolio saya menggunakan 3 karya dari pool Jurus Grafis di Flickr (ini hanya untuk mensimulasikan saja). Ketiga karya yang saya pakai adalah karya Nur Cholis, Ilham Sul Putra dan Pramono Streetatmoshphere (ijin ya teman ).

Untuk mempermanis dan tetap 1 gaya secara keseluruhan, maka saya memutuskan untuk menambahkan efek kilapan di thumbnail. Dan kita sudah selesai!

Hasil Akhir

Untuk melihat versi yang lebih besar (ukuran sebenarnya), silakan klik tautan ini atau klik gambar di atas.

Kesimpulan

Hal terpenting dalam mendesain web adalah perencanaan (Sitemap dan Wireframe), setelah itu kita baru masuk ke hal yang bersifat visual. Desain website pada dasarnya adalah pengaturan informasi (Information Architecture), visual hanyalah elemen pendukung agar user lebih mudah, nyaman dan betah mengkonsumsi website kita.

Untuk mempelajari tutorial ini lebih dalam, kamu bisa mengunduh dokumen Photoshop BlogFolio (2,7 Mb) melalui tombol di bawah ini. Sekarang, ayo giliran kamu yang mulai mendesain Selamat mencoba!

Setiap desainer tentu harus mempunyai portfolio. Namun selain mempunyai portfolio, kita juga harus mempunyai tempat untuk memamerkannya. Dan untuk saat ini jalan yang paling efektif adalah mempunyai blog yang sekaligus berfungsi sebagai portfolio.

Kenapa Blog-Portfolio (BlogFolio) ?

Alasan yang paling umum adalah karena membuat blog sangat mudah. Kamu bisa mendaftar di Blogspot atau WordPress, lalu langsung menggunakan template yang ada. Selain karena kemudahannya, ada beberapa faktor yang saya anggap penting yaitu,

• Tempat mencurahkan ide & pemikiran. Dengan cara ini kita bisa lebih memposisikan personal brand kita dan tidak hanya berperan hanya sebagai desainer grafis saja.
• Memperlihatkan hasil karya. Ini salah satu syarat yang sangat dasar, klien akan menggunakan jasa desain kita berdasarkan apa yang telah mereka lihat dari portfolio kita sebelumnya.
• Mendapatkan koneksi baru. Website tipe BlogFolio adalah cara yang tepat karena biasanya mempunyai sistem komentar agar kita bisa berinteraksi dengan pengunjung.

Template Gratis Tidak Akan Cukup

Inilah yang menjadi permasalahan. Kalau kita mau tampil unik maka kita harus mengubah template yang ada, bisa dari warna, layout, tipografi dan lainnya. Tetapi sebaiknya kita mendesain website BlogFolio kita dari nol. Dengan begitu kita akan memegang kontrol penuh atas semua elemen desainnya. Sudah siap? mari mulai!

Semua Berawal dari Sitemap

Setiap website, se-simple apapun tetap membutuhkan sitemap. Ini di perlukan untuk mengetahui halaman yang kita perlukan dan tidak kita perlukan. Biasanya fitur-fitur website (seperti latest comment, popular posts, dll) juga akan kita pikirkan disini. Sebagai contoh, saya membuat sitemap BlogFolio seperti di bawah ini,

Perancangan Wireframe

Tahap selanjutnya adalah wireframe. Wireframe bisa di bilang sketsa/gambaran kasar dari website yang akan kita desain. Biasanya saya hanya menggunakan kertas dan bolpen untuk menggambar cepat letak-letak elemen website. Setelah kita dapat sketsa kasarnya, selanjutnya kita mencoba di Photoshop. Wireframe yang saya rancang terlihat seperti di bawah ini,

Dengan membuat wireframe, maka pemikiran kita akan di fokuskan kepada fungsi terlebih dulu. Lupakan sejenak gaya visual, karena di tahap inilah kita bisa memikirkan elemen mana yang paling penting, dimana kita akan meletakkan elemen itu dan bagaimana mempresentasikan konten.

Saatnya Mendesain!

Ok, kita sudah merencanakan semuanya. Sekaranglah saatnya bergulat dengan photoshop. Kita bisa mulai memikirkan elemen yang benar-benar visual. Mulai dari warna, font, finishing, gaya desain dan lainnya.

Seperti biasa kita akan menggunakan 960 Grid System, silakan diunduh. Sedangkan font Bebas Neue akan menjadi pilihan yang tepat untuk Logo dan Headline.

Langkah 1

Buka template 960 Grid 12 kolom yang sudah di unduh tadi di Photoshop.

Untuk menyesuaikan dengan resolusi monitor mayoritas saat ini (widescreen) maka sebaiknya kita juga mendesain dalam bentuk widescreen.

Langkah 2

Kita mulai dengan membuat background terlebih dulu dengan menggunakan Rectangle Tool.

Gunakan warna coklat (agak pucat) untuk background BlogFolio ini. Setelah itu tambahkan tekstur dengan menggunakan efek filter Noise.

Supaya efek noisenya tidak terlalu berlebihan, gunakan maksimum 2 % saja. Sekarang ini saya menggunakan 1.2 %.

Langkah 3

Gunakan font Bebas Neue untuk logo. Font ini sangat cocok untuk headline dan memberikan kesan bold yang elegan. Atur posisinya sehingga berada di tengah-tengah dokumen. Gunakan guide ( Ctrl + ; ) supaya pas dengan grid yang kita gunakan.

Langkah 4

Berikan efek Letterpress pada logo ini. Tutorial Letterpress pernah di tulis Jurus Grafis sebelumnya. Atau beri layer style dengan mengikuti setting seperti gambar di bawah ini,

Selanjutnya tambahkan tagline di bawah logo. Langkah ini opsional, tetapi biasanya setiap website mempunyai tagline . Saya menggunakan font Georgia Italic untuk tagline ini.

Langkah 5

Kita akan membuat navigasi utama yang terdiri dari Home, Blog, Portfolio dan Contact. Gunakan font Bebas Neue untuk navigasi agar tetap satu irama dengan keseluruhan website nantinya.

Buat garis yang agak tebal dengan menggunakan Rectangle Tool dan letakkan di atas dan di bawah navigasi utama.

Langkah 6

Supaya tidak terlalu polos, maka kita akan memberikan sedikit efek grunge pada garis tersebut. Pilih salah satu layer garis, lalu tekan icon masking yang ada di bawah window layer.

Setelah itu pilih splatter brush (ada di default brush) dan mulailah “menghapus” garis tersebut. Maka akan tercipta efek “rusak” atau “grunge” tanpa merubah bentuk asli layer garis tersebut. Lebih jelas tentang teknik masking dasar.

Hasilnya akan terlihat seperti di bawah ini,

Langkah 7

Supaya lebih jelas user sedang berada di halaman tertentu, kita akan membuat status halaman yang aktif pada navigasi utama. Gunakan Rectangle Tool lagi, dan posisikan di bawah Home.

Buat kesan seperti pita dengan menggunakan bentuk segitiga yang di atur secara berderet.

Hasil sementara bentuk pita terlihat seperti gambar di bawah ini,

Langkah 8

Selanjutnya kita akan menambahkan beberapa efek layer styles pada pita tersebut agar tidak terlalu “datar”.

Khusus untuk efek Pattern Overlay, saya sudah mempunyai bentuk pattern seperti gambar di bawah ini. Kamu juga bisa bereksperimen dengan pattern yang lain.

Inilah hasil efek pada pita setelah semua efek layer styles di gunakan.

Bersambung

Supaya tidak terlalu panjang, tutorial ini saya bagi menjadi 2. Lihat kelanjutannya.

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!

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 (1003)

Icon merupakan topik yang menarik. Biasanya icon digunakan untuk menjelaskan suatu fungsi/fitur pada sebuah website/produk tanpa kata-kata, atau untuk mendukung kata-kata yang di pakai pada fungsi/fitur tersebut.

Misalnya, untuk menjelaskan “Halaman Utama/Homepage” maka di gambarkan dengan bentuk “Rumah”. Waktu dulu bentuk icon memang sangat sederhana, dan mungkin memang itulah wujud icon yang sebenarnya. Namun karena perkembangan teknologi yang semakin canggih, ternyata tidak cukup bentuk yang simpel untuk menjelaskan suatu fungsi pada website/produk.

Faktor estetika juga mempengaruhi bentuk-bentuk icon masa kini. Dengan icon yang menarik, maka secara tidak langsung akan menambah nilai estetika pada keseluruhan website/produk.

Nah, kali ini kita akan belajar membuat icon dengan Photoshop. Saya memilih keyBCA karena ini merupakan produk buatan lokal dan saya juga sering memakainya, dibanding jika saya harus membuat icon website lainnya yang sepertinya sudah banyak beredar di internet. Ok, tanpa banyak basa-basi lagi, here we go!

Langkah 1

Buat dokumen baru berukuran 512 x 512 Pixel (ini merupakan ukuran standard icon yang terbesar). Jadi, kita akan mudah membuat versi ukuran kecil nya nanti bila di perlukan.

Setelah itu pindahkan hasil scan keyBCA ke dokumen baru tersebut. Hasil scan tersebut akan kita gunakan sebagai panduan dalam membuat icon ini.

Langkah 2

Kita mulai dengan men-tracing bentuk dasar keyBCA ini. Gunakan Pen Tool dan ganti settingnya menjadi Shape Layer. Supaya hasil tracing kita langsung berwarna dan berupa vektor.

Trace setengah bagian saja, karena kita akan menduplikasi sisi lainnya agar hasil nya simetris.

Tidak usah takut kalau hasilnya tidak terlalu sempurna, kita bisa menutup kekurangan itu dengan mudah

Gabung 3 layer shape yang kita buat tadi menjadi 1 layer. Caranya, pilih ke 3 layer shape tersebut, lalu tekan Ctrl + E (Merge Layer). Dan namakan layer gabungan tersebut sebagai “Bentuk Dasar”.

Lalu berikan efek “Gradient Overlay” pada layer “Bentuk Dasar” dengan pengaturan seperti gambar di bawah ini.

Langkah 3

Kita akan membuat layar keyBCA dengan menggunakan Rounded Rectangle Tool.

Untuk memberikan dimensi, gunakan efek (layer Effects, dengan cara dobel klik pada layer yang kita ingin beri efek) Inner Shadow, Gradient Overlay dan Stroke. Atur juga warnanya agar tampak seperti layar yang sesungguhnya.

Langkah 4

Kita akan membuat efek lekukan yang ada di sekitar layar. Tetap gunakan Rounded Rectangle Tool.

Dan kita berikan efek Stroke pada shape tersebut.

Langkah 5

Selanjutnya kita akan membuat bayangan nya. Sehingga seolah-olah layar keyBCA tersebut masuk kedalam (seperti aslinya). Gunakan Pen Tool untuk menggambar bentuk bayangannya, lalu Masking (Create Clipping Mask) ke dalam layer shape yang kedua.

Duplikasi bentuk bayangan yg di bawah dan tempatkan di atas. Lalu gunakan Burn Tool dan Dodge Tool untuk memberikan efek bayangan dan cahaya.

Langkah 6

Buat garis tipis sebesar 1 point dan berikan efek Motion Blur (Filter > Blur > Motion Blur). Lalu tempatkan pada posisi datangnya cahaya (dalam kasus ini, cahaya datang dari atas kiri). Selain memberikan kesan cahaya, garis ini juga akan mempertajam bentuk.

Langkah 7

Selanjutnya kita membuat tombol keyBCA dengan menggunakan Ellipse Tool.

Untuk memberikan kesan seperti tombol asli, kita menggunakan efek Bevel and Emboss, Drop Shadow dan Outer Glow. Ikuti pengaturan masing-masing efek sesuai gambar berikut.

Hasil ketiga efek tadi akan terlihat seperti di bawah ini.

Lanjutkan dengan menduplikasi dan memberikan nomor pada masing-masing tombol.

Langkah 8

Kita akan membuat detil yang ada pada tombol merah. Gunakan Ellipse Tool lalu hapus bagian yang tidak perlu sehingga bentuknya menyerupai bulan sabit yang tipis.

Berikan efek Bevel and Emboss dan Drop Shadow. Atur juga opacity layer bentuk detil tersebut agar terlihat natural.

Langkah 9

Bentuk keyBCA tidak flat, pada bagian samping ada bagian yang menurun/miring. Kita akan membuat efek itu dengan menggunakan Pen Tool. Gambar bagian tersebut dengan mengikuti hasil scan keyBCA yang asli.

Langkah 10

Tambahkan juga bintik-bintik (lubang kecil) yang ada di bagian samping bawah keyBCA. Gunakan Ellipse Tool dan efek Gradient Overlay (agar menghasilkan efek berlubang), lalu atur posisinya.

Langkah 11

Tambahkan sedikit tekstur pada “Bentuk Dasar” supaya lebih realistis. Berikan efek Noise, Filter > Noise > Add Noise.

Langkah 12

Final Touch! tambahkan logo keyBCA di atas. Dan kita sudah selesai!

Hasil Akhir

Saya menambahkan efek bayangan dengan menggunakan Soft Brush. Icon keyBCA ini sudah siap di pakai, tinggal di resize/di perkecil sesuai dengan kebutuhan kamu. Untuk ukuran icon yang kecil (misal: 32 x 32) akan ada beberapa detil yang di hilangkan, seperti nomor pada tombol dan logo keyBCA. Dokumen icon ini berupa PSD dan PNG, bisa kamu unduh melalui tombol di akhir posting (930Kb).

Yang terpenting dalam membuat icon seperti ini adalah kesabaran dan detil, semakin detil icon yang kamu buat, akan semakin “wow” terlihatnya. Kalau kamu mempunyai icon buatan kamu sendiri, ayo di tunjukkan kepada teman-teman yang lain dengan bergabung di Grup Flickr Jurus Grafis

Jangan sampai ketinggalan tutorial berikutnya, ayo berlangganan dengan RSS dan Email. Temui juga Jurus Grafis di Facebook dan ikuti Twitter Jurus Grafis.

Membuat_Icon_keyBCA (988)

Dengan teknik yang simpel dan mudah ini kita akan mengolah foto biasa menjadi sebuah karya yang memukau. Masking sangat berguna karena tidak bersifat merusak/merubah foto asli.

Dibandingkan dengan Eraser Tool, akan lebih bijak kalau kamu menggunakan teknik Masking. Foto asli tidak akan terganggu dan kita dapat menghapus efek masking dengan mudah (jika suatu saat akan ada perubahan/revisi).

Untuk memulai tutorial ini kamu bisa mengunduh tekstur kertas dan watercolor brush serta watercolor brush 2 yang akan kita pakai. Stok foto akan saya siapkan di dokumen yang bisa kamu unduh di akhir posting.

Jika sudah siap semua, mari kita mulai!

Langkah 1

Buka foto di Photoshop.

Lalu rubah layer “Background” yang terkunci menjadi “layer 0″ dengan cara Dobel Klik pada layer “Background” tersebut.

Langkah 2

Ini merupakan inti dari tutorial ini. Ubah nama “layer 0″ menjadi “foto”.

Buat layer baru (layer 1) di bawah layer “foto” lalu Klik Kanan pada layer “foto” dan pilih Create Clipping Mask.

Foto akan hilang. Tetap tenang karena memang begitu. Ikuti terus langkah selanjutnya.

Langkah 3

Saatnya bereksperimen! Klik layer 1, dan mulailah menggunakan brush yang sudah kamu unduh tadi. Dengan mengaplikasikan brush pada layer 1 maka foto akan mulai kelihatan (ini bisa dinamakan UnMask).

Jangan lupa untuk mengganti nama “layer 1″ menjadi “brush”.

Langkah 4

Gunakan tekstur kertas yang sudah kamu unduh sebagai background pada karya. Ini merupakan pilihan personal, kamu bisa menggunakan tekstur dan background yang lain sesuai selera kamu sendiri.

Ya, sampai disini kita sudah selesai! Cepat dan mudah bukan?

Hasil Akhir

Saya memainkan sedikit Brightness/Contrast pada tekstur kertas dan foto. Dan juga mengurangi Saturation pada foto, hasilnya terlihat seperti di bawah ini.

Sekarang kamu sudah mengerti dan bisa mengaplikasikan teknik masking dasar yang pasti akan sering di pakai. Jadi, jangan ragu lagi untuk bergabung dengan Grup Flickr Jurus Grafis, di sana kamu bisa memamerkan karya kamu!

Silakan unduh dokumen grafis ini (3,5Mb) melalui tombol di akhir posting supaya kamu lebih jelas melihat cara kerja teknik ini.

Ikuti Twitter Jurus Grafis dan temui Jurus Grafis di Facebook, kalau tidak ingin ketinggalan tutorial selanjutnya silakan berlangganan gratis dengan RSS dan Email.

Teknik_Masking_Dasar_Photoshop (3471)

Tipografi tidak hanya sekedar elemen yang memberikan informasi saja. Jika kita bisa mengolahnya dengan baik, maka tipografi dapat berdiri sendiri sebagai informasi dan sebagai karya desain grafis.

Dalam video tutorial kali ini, kita akan belajar bagaimana membuat tipografi gaya bebas di Adobe Illustrator dan melakukan tahap penyelesaian di Adobe Photoshop. Karena terlalu panjang jika di gabung kedalam satu video, maka saya membaginya menjadi 2 bagian, yaitu tahap Illustrator dan tahap Photoshop.

Hasil akhir yang kita rancang akan terlihat seperti gambar di bawah ini.

Perancangan Bentuk Tipografi Dasar di Illustrator

Tahap Penyelesain Karya di Photoshop

Kamu bisa memakai teknik ini untuk di aplikasikan tidak hanya pada tipografi saja, tetapi bisa di gunakan pada ilustrasi, desain karakter, pembuatan logo dan lainnya.

Dokumen grafis tutorial ini (1,7Mb) dapat di unduh melalui tombol di akhir posting. Jangan lupa untuk bergabung dan memamerkan karya desain kamu di Grup Flickr Jurus Grafis.

Ikuti Twitter Jurus Grafis dan temui Jurus Grafis di Facebook. Kalau tidak ingin ketinggalan tutorial menarik lainnya, kamu bisa berlangganan dengan Email atau RSS.

Untuk mendesain kartunama sebenarnya tidak ada aturan khusus karena menyangkut kepribadian masing-masing individu dan citra apa yang ingin di tampilkan di kartunama.

Tetapi ada beberapa aturan dasar yang tidak boleh di langgar, seperti besar font (jangan terlalu besar/kecil) dan lainnya, kamu bisa melihat artikel 6 Tips Mendesain Kartunama Unik & Menarik untuk lebih jelasnya.

Pada tutorial kali ini, kita akan mendesain kartunama dengan ide yang simpel, yaitu seperti sedang di rancang di Photoshop. Dan pada kesempatan ini juga saya membuat video tutorial, karena akan lebih mudah bagi kamu yang baru belajar desain dan menggunakan Photoshop. Jadi, silakan menikmati video tutorial ini

Bagaimana? cukup mudah bukan? Karena ini video tutorial perdana, saya butuh masukan kalau ada yang kurang untuk di perbaiki selanjutnya. Atau mungkin lebih cepat dan mudah dengan tutorial seperti biasanya? (gambar diam dan text), silakan berkomentar.

Dokumen Photoshop desain kartunama ini bisa kamu unduh melalui tombol di akhir posting (476Kb) dan bisa kamu gunakan gratis untuk kepentingan kamu sendiri, atau untuk pembelajaran.

Kalau kamu ingin mencetak kartunama, saya merekomendasikan Kartunama.net. Hasil cetakan nya bagus, bisa 1 box saja, dan yang paling penting kita bisa memesan nya melalui internet tanpa harus pergi ke tempat percetakannya (hemat waktu). So, tunggu apalagi? mulailah mendesain dan cetak di Kartunama.net

Tautan Terkait :
Lihat Video Tutorial Mendesain Kartunama di Vimeo (HD Video)
6 Tips Mendesain Kartunama Unik dan Menarik

Jangan lupa bergabung dengan teman-teman yang lain di Facebook Page Jurus Grafis, dan ikuti Twitter Jurus Grafis.

Mendesain Kartunama Desainer Grafis (3642)

Efek cahaya saat ini sedang sering di gunakan di karya manipulasi foto dan seni digital, efek ini terinspirasi dari film dan game tahun 1980-an. Dengan penggunaan yang tepat , maka efek yang simpel ini dapat memberi nilai lebih pada karya fotografi, terutama untuk mempercantik foto standar dengan model yang sedang berpose. Pada tutorial kali ini kita akan belajar membuat efek cahaya dasar di Photoshop.

Materi yang di perlukan

Stok Fotografi, dapat di unduh di sini. Silakan pilih salah satu dari foto-foto yang sudah kamu unduh.

Brush Photoshop, kita akan menggunakan brush berbentuk bintang dan galaksi, ini untuk memberikan kesan luar angkasa. Silakan unduh di sini dan di sini. (sekedar info, brush yang saya gunakan di tutorial ini agak berbeda sedikit, tetapi secara efek sama. Saya tidak bisa menemukan sumber asli brush yang saya pakai)

Jika kamu sudah menyiapkan materi-materi dasar tersebut, mari kita mulai!

Langkah 1

Buka salah satu dokumen foto yang telah kamu unduh tadi di Photoshop.

Langkah 2

Kopi foto tersebut (sehingga menghasilkan layer baru) dan berikan efek Gaussian Blur. Filter > Blur > Gaussian Blur, ikuti pengaturannya seperti gambar di bawah ini.

Lalu ubah “Blending Mode” layer foto blur tersebut menjadi “Screen”

Hasilnya akan menjadi seperti di bawah ini.

Langkah 3

Kita akan membuat bidang cahaya yang pertama dengan menggunakan Rectangle Tool.

Langkah 4

Gunakan teknik Masking untuk membuat bidang persegi tersebut menjadi bidang cahaya.

Selanjutnya, gunakan Gradient Tool (G) untuk mulai me-masking bidang tersebut, drag mouse kamu dari kanan ke kiri (atau sebaliknya, silakan di sesuaikan) sehingga bagian sebelah persegi menjadi perlahan menghilang.

Untuk memperhalus efek cahaya gunakan Soft Brush (ini masih dalam tahap Masking) dan ikuti instruksi gambar di bawah.

Langkah 5

Setelah bidang efek cahaya pertama kita buat, selanjutnya adalah pengaturan tata letak efek cahaya tersebut. Perhatikan juga pose model dalam foto tersebut, sebaiknya di sesuaikan supaya hasil akhirnya akan tampak lebih dinamis.

Jalani langkah ini dengan sabar karena akan mempengaruhi hasil akhir karya kita. Duplikasi layer efek cahaya dengan cara mudah, pilih layer efek cahaya lalu Drag sambil menekan Alt.

Untuk mengubah bentuk (besar, kecil dan rotasi), bisa menggunakan Free Transform Tool (Ctrl + T).

Langkah 6

Karena kita akan mewarnai foto pada tahap akhir nanti, maka kita harus mengurangi warna asli foto tersebut.

Langkah 7

Saatnya mengaplikaskan Stars dan Galaxy Brush yang sudah kamu unduh sebelumnya. Selalu buat layer baru untuk satu komposisi brush, untuk memudahkan kita bila nanti perlu di atur lebih lanjut. Gunakan warna putih sebagai warna brush stars dan galaksi ini.

Saya menggunakan teknik Masking (seperti langkah 4 di atas) untuk menghilangkan bagian brush (stars & galaxy) yang tidak penting, atur juga supaya efek ini tidak terlalu terlihat berlebihan.

Langkah 8

Kita sudah hampir selesai! warnai foto tersebut dengan menggunakan Soft Brush, silakan atur warna dan besar Brush nya seperti yang kamu mau. Jangan lupa atur Blending Mode Layer warna menjadi Overlay dan selalu buat layer baru untuk setiap warna.

Langkah 9

Sentuhan akhir, tambahkan bidang hitam dengan menggunakan Soft Brush. Ini di perlukan supaya efek cahaya nya lebih “keluar” dan untuk memberikan dimensi dari gelap ke terang. Bila foto yang kamu gunakan sudah cukup gelap, bisa bermain di Brightness saja.

Hasil Akhir

Saya sedikit mempertajam foto asli dengan menggunakan Image > Adjustments > Brightness/Contrast, sehingga hasil akhirnya foto terlihat lebih tajam.

Ya, sekarang kamu sudah mengetahui trik membuat efek cahaya dasar. Dengan menggunakan teknik yang sama kamu juga bisa membuat karya yang lebih rumit.

Unduh dokumen grafis tutorial ini (4,1 Mb) lengkap dengan foto asli yang saya gunakan. Jangan lupa tunjukkan karya kamu dengan bergabung di Grup Flickr Jurus Grafis.

Tidak mau ketinggalan tutorial berikutnya? Silakan berlangganan melalui RSS atau Email, dan ikuti Twitter Jurus Grafis, serta Facebook Page Jurus Grafis.

Tautan Terkait :
- Chuck Anderson adalah desainer grafis yang membuat populer kembali efek cahaya ini pada tahun 2005.

Efek Letterpress merupakan efek yang sangat populer sekali di dunia desain website, kita sering melihat nya di gunakan sebagai pemanis text pada tombol, sampai kepada headline dengan font besar menggunakan efek ini juga. Pada tutorial kali ini kita akan belajar menghasilkan efek letterpress dengan sangat mudah di Photoshop.

Efek ini terinspirasi dari teknik cetak yang bernama sama, yaitu Letterpress. Efek ini merupakan kebalikan dari emboss, kalau emboss itu huruf menjadi timbul, sebaliknya efek Letterpress akan memberikan efek seperti ‘masuk’ ke dalam, ya sesuai namanya seperti di “press”.

Kita bisa dengan sangat mudah membuatnya di Photoshop, bagi kalian yang sering mendesain website pasti sering menggunakan teknik ini (termasuk saya juga) untuk memberikan detil yang tidak terlalu menonjol tetapi kalau tidak ada rasanya akan berbeda (terlalu plain). Ok, langsung saja, bagi yang belum pernah mencoba, pasti ketagihan akan efek ini

Langkah 1

Buka dokumen baru di Photoshop berukuran 640 x 480 pixel seperti gambar di bawah ini.

Langkah 2

Beri warna merah maroon pada background dengan menggunakan Paint Bucket Tool (G). Setelah itu berikan efek cahaya dengan menggunakan Filter > Render > Lightning Effects , dan atur setting Lightning Effects nya sesuai yang kamu mau. Untuk kali ini, saya membuat seolah-olah ada cahaya dari atas.

Langkah 3

Ketiklah kata/text yang kamu inginkan, yang perlu di perhatikan adalah efek Letterpress ini akan terlihat bagus bila hurufnya tebal dan besar, namun tidak menutup kemungkinan huruf yang tipis juga akan menghasilkan efek yang bagus pula.

Langkah 4

Ini kuncinya, kita akan memberikan efek Letterpress pada text yang sudah kita ketik. Untuk menghasilkan efek ini, di perlukan 3 jenis layer Style, yaitu, Drop Shadow, Inner Shadow, dan Gradient Overlay. Dobel klik layer text kamu dan mulailah memberikan Layer Style dengan setting seperti 3 gambar berikut.

Setelah semua Layer Style kamu berikan, maka kamu akan mendapatkan hasil akhir text kamu seperti berikut ini.

Kita sudah selesai! Mudah bukan? kamu bisa mencobanya dengan elemen selain huruf, tentu di sesuaikan dengan kebutuhan desain kamu sendiri. Selain untuk desain website, kita juga bisa menggunakan teknik ini misalnya pada desain kartunama, dan kebutuhan desain cetak yang lain nya.

Hasil Akhir

Silakan unduh dokumen hasil akhir di atas (475 Kb) supaya kamu bisa lebih jelas membedah teknik tersebut.

Catatan :
- Warna Background harus lebih terang daripada warna text.
- Jangan terlalu jelas memberikan efek Drop Shadow (perhatikan Opacity) , karena akan memberikan kesan tidak riil.

Tautan Terkait :
Contoh Penerapan Efek Letterpress di Desain Website

Bagi yang belum bergabung di Grup Flickr Jurus Grafis, mari bergabung! atau temui Jurus Grafis di Facebook Page.