Create a Blackberry Torch Using Photoshop and Illustrator

Final Result

Create a Blackberry Torch Using Photoshop and Illustrator

Full of Details

Every steps is explained in details. No pixel is missing.

Create a Blackberry Torch Using Photoshop and Illustrator
Create a Blackberry Torch Using Photoshop and Illustrator

Plus Drawing Icon in Illustrator

All icons on Blackberry’s screen is made in Illustrator. This assure the best quality of the icons. Drawing icon in Illustrator is also easier in Illustrator, compared to Photoshop.

Create a Blackberry Torch Using Photoshop and Illustrator
Create a Blackberry Torch Using Photoshop and Illustrator

Drawing Tips

In this tutorial, you will also learn tips on manual drawing of a photo realistic object.

Create a Blackberry Torch Using Photoshop and Illustrator

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Menggambar Blackberry Torch dengan Photoshop dan Illustrator

Hasil Akhir

Menggambar Blackberry Torch dengan Photoshop dan Illustrator

Penuh dengan Detail

Tutorial ini memperlihatkan proses pembuatan dengan sangat detail. Setiap goresan brush diperlihatkan secara lengkap.

Menggambar Blackberry Torch dengan Photoshop dan Illustrator
Menggambar Blackberry Torch dengan Photoshop dan Illustrator

Plus Pembuatan Ikon di Illustrator

Semua ikon di layar Blackberry dibuat di Illustrator. Ini memastikan kualitas ikon tetap tajam. Selain hasilnya lebih bagus, proses pembuatan ikon di Illustrator lebih mudah daripada di Photoshop.

Menggambar Blackberry Torch dengan Photoshop dan Illustrator
Menggambar Blackberry Torch dengan Photoshop dan Illustrator

Disertai Tips Menggambar

Dalam tutorial ini, Anda akan belajar banyak tips menggambar objek secara realistis.

Menggambar Blackberry Torch dengan Photoshop dan Illustrator

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Link Minggu Ini 120910

1. Tutorial

Create an Incredible Avatar Inspired Matte Painting of Pandora

Tutorial matte painting ini memperlihatkan cara pembuatan gambar pemandangan terinspirasi dari Pandora di film Avatar. Walaupun penjelasan tekniknya tidak terlalu detail tapi Anda bisa mempelajari metode yang digunakan dalam proses matte painting.

Link Minggu Ini 120910

2. Inspirasi

20 Spectacular Photo Manipulations via @satryaWp

Kumpulan beberapa gambar manipulasi foto bertema surreal.

Link Minggu Ini 120910

3. Artikel

The Difference Between Good Design and Great Design

Seperti apakah sebetulnya desain yang baik? Desain tidak seperti ilmu science yang bersifat pasti dan memiliki parameter yang bisa diukur secara tepat. Desain bersifat subjektif. Semua orang bisa memiliki definisi sendiri tentang desain yang baik. Di sini, dibahas desain dipandang dari tiga sudut pandang, desainer, klien, dan pengguna. Bagi desainer, sebuah desain dikatakan baik jika terlihat bagus dan menawan. Bagi klien, desain yang baik haruslah bisa menyampaikan pesan yang ingin disampaikannya. Bagi pengguna (misalnya pengunjung situs), desain yang baik harus bisa mempermudah dirinya memperoleh informasi yang dibutuhkan. Dalam proses mendesain, ketiga sudut pandang ini harus dikompromikan.

Satu hal yang cukup menarik, artikel ini juga menganalisa desain beberapa situs yang sepertinya telah melalui proses kompromi. Dibahas juga contoh desain hasil kompromi yang bagus dan bisa memuaskan ketiga sudut pandang.

Link Minggu Ini 120910

How to Write an Effective About Me Page

Halaman About Me harus dirancang sebagus dan seinformatif mungkin, karena dari sanalah para klien potensial akan mengenali Anda. Artikel ini membahas beberapa hal yang perlu Anda tampilkan di halaman About Me. Ditunjukkan juga beberapa halaman About Me yang bagus dan patut dijadikan referensi.

Link Minggu Ini 120910

4. Gratisan

Iconshock Social Icons

Kumpulan lengkap lebih dari 100 ikon jaringan sosial. Saya bahkan tidak tahu dua per tiga dari jaringan-jaringan ini. Senang rasanya memiliki satu set ikon lengkap termasuk behance dan deviant art yang biasany cukup sulit diperoleh.

Link Minggu Ini 120910

5. Info Kerja

Perluasan topik di PhotoshopTutorials.ws.

PhotoshopTutorials.ws sekarang memperluas topik situsnya. Jika sebelumnya hanya menerima tutorial bertema manipulasi foto dan illustrasi, kini bahasannya lebih luas dengan menerima tutorial ikon dan brushes. Setiap tutorial dibayar 150-300$ dan setiap set brushes dihargai 20-60$.

Tunggu, masih ada berita bagus lain! Mungkin Anda masih ingat bagaimana saya mengeluhkan biografi penulis yang sangat minim di PhotoshopTutorials.ws dalam artikel Faktor yang Harus Anda Pertimbangkan Sebelum Menerima Tawaran Blog Tamu. Sekarang, disediakan juga ruang untuk biografi dan link penulis. Penambahan ini walaupun terlihat minim sebetulnya berefek besar karena membuat profil penulis lebih menonjol.

6. Hal Menarik

Screen Technology in 2014

Video ini memperlihatkan prediksi teknologi layar monitor di tahun 2014. Walaupun terlihat sangat wah, ini sangat mungkin terjadi. Perhatikan saja teknologi iPad, ini benar-benar melebihi bayangan para kreator Star Trek.

Saya harap Anda menemukan link-link di atas berguna. Jika ada informasi baru, terutama info lowongan kerja, silakan beritahu saya. Saya akan memuatnya minggu depan.

Menggabungkan Sketsa Ke Dalam Foto

Preview

Sebelum memulai tutorial ini. Lihat terlebih dahulu gambar yang akan kita buat.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Source File

Untuk mengikuti tutorial ini, silakan ambil gambar-gambar dari link berikut:

Langkah 1

Mulai dengan membuka gambar jembatan di Photoshop. Saya memilih gambar ini karena ada banyak detail di dalamnya sehingga lebih menarik ketika dijadikan sketsa.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 2

Ambil gambar tangan dan potong bagian yang tidak diperlukan.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 3

Warna tangan tidak cocok dengan gambar latar. Kita perlu sedikit memperbaikinya. Tambahkan Adjustment Layer Hue/Saturation dengan setting seperti berikut.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 4

Ambil gambar kertas dan simpan di atas tangan.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 5

Beri Adjustment Layer Hue/Saturation dengan setting berikut untuk mengubah kertas timah menjadi kertas biasa.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto
Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 6

Gandakan gambar jembatan. Simpan di atas kertas. Ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G. Hilangkan warna dengan perintah Desaturate (Shift + U).

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 7

Gandakan gambar jembatan lalu balikkan warna dengan menekan Ctrl + I. Masukkan kembali gambar ke dalam kertas dengan menekan Ctrl + Alt + G.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 8

Ubah blend mode layer menjadi Color Dodge. Ini akan mengubah gambar menjadi putih.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 9

Aktifkan Gaussian Blur untuk memunculkan sketsa.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 10

Anda bisa memperkuat sketsa dengan menggabungkan kedua layer, Ctrl + E, lalu menggandakan gambar teratas (Ctrl + J). Ubah blend mode layer ke Multiply. Jika dirasa sketsa yang diperoleh terlalu kotor, turunkan opacity layer teratas.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 11

Seleksi jempol yang harusnya berada di atas gambar. Tekan Ctrl + J lalu simpan layer di atas kertas.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 12

Buat layer baru di atas tangan lalu lukis bayangan lembut kertas pada tangan.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 13

Turunkan opacity layer sketsa yang bermode Normal hingga 15%. Ini akan memunculkan kembali bayangan dan highlight pada kertas.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 14

Saya merasa sketsa ini terlalu rapi. Jadi, perlu sedikit dirusak. Aktifkan layer sketsa kedua, yang bermode Multiply, dan beri filter Angled Strokes.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 15

Klik ikon New Filter untuk menambah filter baru dan pilih Filter Grain.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 16

Sekarang lukis bayangan jempol pada kertas.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 17

Bagian bawah kertas terlalu rapi, sangat tidak natural. Lukis hitam bagian itu menggunakan brush lembut.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 18

Saya juga merasa bahwa kertas menjadi terlalu polos, terlihat terlalu datar. Saya perlu memberinya lebih banyak highlight. Di sini, saya menggunakan teknik yang dijelaskan di tutorial Quick Tip Psdtuts+, silakan baca tutorialnya untuk referensi lebih lengkap.

Aktifkan tool gradient, pilih gradasi hitam ke putih dengan tipe reflected dan blend mode Difference. Buat beberapa gradient di atas layer baru.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Langkah 19

Ubah blend mode highlight dan shadow yang dihasilkan gradient menjadi Overlay dengan Opacity 34%.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Hasil Akhir

Saya harap Anda menyukai hasil akhirnya. Jika ada pertanyaan, jangan sungkan untuk bertanya di kolom komentar.

Tutorial Photoshop Menggabungkan Sketsa Ke Dalam Foto

Link Minggu Ini 050910

1. Tutorial

HOW TO – Take great photos of your projects (via @snaph_de)

Tutorial ini memperlihatkan cara pembuatan set sederhana untuk pemotretan. Menggunakan alat-alat sederhana seperti pipa PVC, kertas karton putih, lampu, dan dibantu tripod. Set seperti ini berguna ketika memotret objek-objek berukuran kecil.

Link Minggu Ini 050910

2. Inspirasi

Inspiration From The Past – Vintage Airline Timetables

Kumpulan iklan lama beberapa maskapai penerbangan. Ini patut dijadikan inspirasi karena desain retro sedang trend saat ini.

Link Minggu Ini 050910

3. Artikel

Gmail Priority Inbox

Fitur baru Gmail yang sedang ramai dibahas saat ini, Priority Inbox. Fitur ini memungkinkan Gmail untuk secara otomatis memisahkan email penting dan tidak penting. Dengan fitur ini, email penting akan disimpan di posisi terdepan sehingga tidak akan terlewatkan. Algoritma yang digunakan cukup bagus. Email penting dikenali dari kata kunci di dalamnya, seberapa cepat kita membaca dan menjawabnya, dan kebiasaan kita memberi tanda bintang pada email. Sayangnya, fitur ini hanya bekerja dengan baik jika menggunakan tampilan web. Fitur ini tidak (atau belum) berguna jika Anda menggunakan email client.

Why You Should Use Dropbox

Dropbox adalah salah satu aplikasi backup terbaik yang pernah saya gunakan. Tidak sekadar untuk backup, Dropbox juga berguna untuk berbagi file dengan klien. Saya menggunakannya dalam semua projek kerja, jauh lebih mudah daripada mengupload file via FTP ke server lalu memberi link-nya. Artikel ini membahas beberapa argumen mengapa Anda sebaiknya menggunakan Dropbox.

Jika Anda belum menggunakan Dropbox, saya sarankan untuk menginstallnya melalui link afiliasi ini. Anda akan memperoleh space gratis 2GB + 250MB.

Link Minggu Ini 050910

4. Info Kerja

Dibutuhkan penulis di PV.Mgarage.

Pemilik PV.Mgarage baru saja menghubungi saya. Dia membutuhkan penulis tutorial. Rencananya situs ini akan mempublish 4-5 artikel per minggu, jadi dibutuhkan banyak penulis di sana. Bayarannya bisa dinegosiasikan, tergantung pada kerumitan dan kedalaman artikel. Untuk penulis pemula, sebaiknya mulai dengan menawar 50$, ini bayaran standar di banyak situs.

Link Minggu Ini 0509810

Marketplace Tutsplus

Envato minggu ini membuat pasar baru yang unik, menjual tutorial premium. Di sini Anda bisa menjual tutorial dalam bentuk ebook, video, atau tertulis biasa. Setiap tutorial dijual dengan harga 3-5$ dengan penulis memperoleh pembagian minimal 50%. Saya lihat penjualannya cukup bagus, hanya dalam satu minggu sudah ada beberapa tutorial yang terjual.

Link Minggu Ini 0509810

Saya harap Anda menemukan link-link di atas berguna. Jika ada informasi baru, terutama info lowongan kerja, silakan beritahu saya. Saya akan memuatnya minggu depan.

Wawancara dengan Richard Fang dari Jurus Grafis

Kali ini, saya berkesempatan untuk melakukan wawancara dengan Richard Fang. Saya yakin sebagian dari Anda sudah mengenalnya dari situs Jurus Grafis. Di sini, saya bertanya beberapa hal terkait keahlian Richard, desain web.
[hr]

Wawancara

Hai Richard, sebelum mulai silakan perkenalkan diri Anda pada pembaca DesainDigital.

Halo, nama saya Richard Fang. Saat ini saya menggeluti bidang web desain, terutama web interface. Sedang menjalani hidup sebagai freelancer dan menggunakan waktu luang saya untuk menulis di blog personal, richardfang.com dan Jurus Grafis.

Bisa berbagi dengan kami bagaimana Anda memulai karir freelance sebagai seorang desainer web?

Saya mempunyai ketertarikan terhadap dunia web (multimedia) pada saat kuliah dulu, tetapi karena kurangnya “asupan” yang diberikan oleh universitas, saya sempat mengganggap web itu tidak terlalu penting, belum lagi pada saat itu juga internet belum se-mainstream seperti sekarang. Akhirnya saya berkarir sebagai graphic designer (khusus print) selama 2,5 tahun di Thinking Room.

Hingga suatu hari saya ditawari projek web desain, yaitu mendesain sebuah website komunitas musik (mungkin bisa di bilang start-up), sayangnya start-up tersebut gagal bertahan. Tapi saya sudah terlanjur menyukai dan mendalami web desain. Saya merasa menemukan bidang yang paling pas dalam karir saya.

Sejak itu saya mencoba kemampuan di 99designs. Akhirnya mulai mendapatkan klien tetap dari sana, jadi saya tidak perlu mengikuti kompetisi lagi. Di situlah titik saya merasa menjadi freelancer sampai sekarang.

Wawancara dengan Richard Fang

Setahu saya, Anda tidak bergulat di coding tapi lebih fokus pada desain mockup di Photoshop. Sebaliknya, masih ada desainer web yang mengabaikan Photoshop sama sekali. Bagaimana menurut Anda?

Menurut saya keduanya sangat penting. Saya mempunyai analogi seperti ini, website = pesulap.

Pertama, tentu teknik pesulap tersebut harus bagus dan tidak terpikirkan oleh penonton. Bagian ini bisa di bilang back end, coding dan hal lainnya yang tidak terlihat oleh user. Dan saya yakin 90% user tidak peduli dengan seberapa rumit kode yang di buat. Yang penting kalau mereka klik suatu tombol maka harus keluar apa yang dijanjikan oleh tombol tersebut.

Kedua, penampilan pesulap itu sendiri. Mulai dari gaya bicara, gaya berpakaian, attitude, atau bahkan sang asisten yang seksi. Nah, itu adalah sisi desain dari website (layout, tipografi, interface, arsitektur informasi dll). Bagian inilah yang memberikan experience kepada user.

Jadi kedua bagian itu harus saling mendukung, kita tidak bisa menitik beratkan pada salah satunya saja.

Sebagai tambahan, sekarang ini copywriting dan konten juga menjadi hal yang krusial. Karena ini adalah jiwa dari website tersebut. Percuma desain dan teknik kode yang bagus tetapi konten dan “cara berbicara” nya tidak bagus. Pada akhirnya kontenlah yang di cari oleh user.

Untuk menghasilkan desain mockup yang bisa diubah ke format HTML, aspek apa saja yang diperlukan?

Yang pasti pembagian layer harus jelas. Layer mana yg bisa di satukan dan mana yang tidak. Sebagai contoh, saya biasa memisahkan tombol dalam 2 folder. 1 folder normal, 1 folder hover. Ini akan memudahkan proses slicing nantinya, dan tentu saja hasilnya akan sama seperti yang kita desain dan rencanakan.

Lalu yang tidak kalah penting adalah penamaan layer. Selain untuk dokumentasi pribadi, ini akan memudahkan kalau ada bagian yang ingin di ganti san memudahkan sang coder yang akan meng-kode desain kita tersebut.

Ketika mendesain mockup di Photoshop, kita bebas melakukan apa pun. Masalahnya, belum tentu desain itu bisa dieksekusi oleh programmer dengan baik. Bagaimana mencegah ini terjadi?

Sebelum mendesain kita harus memikirkan kira-kira teknik / fungsi apa yang akan ada di website kita. Dari sana biasanya kita bisa mendiskusikan dulu dengan coder. Kalau perlu kita mencari referensi dari website lain. Teknik kode sekarang sudah sangat maju, menurut saya hampir semua yang kita bayangkan itu memungkinkan untuk dikode.

Faktor lain adalah platform yang akan kita gunakan nanti, wordpress, joomla atau expression engine? Karena terkadang platform bisa memberikan batasan juga, jadi sebaiknya kita melakukan riset dulu.

Berusahalah memahami cara pikir programmer/coder, percayalah itu tidak akan membatasi kreatifitas, malah membuat kita menjadi semakin kreatif.

Wawancara dengan Richard Fang

Kira-kira tipe desain web seperti apa yang akan trend tahun ini? Silakan beri juga contohnya jika ada.

Kalau tahun ini, minimalist dan agak sedikit grunge masih akan menjadi trend. Tapi kalau saya perhatikan, desain-desain yang bergaya seperti print (tidak menggunakan layout yang standar) juga mulai mendapat perhatian.

Selain itu, detail-detail kecil mulai menjadi perhatian, seperti tekstur yang sangat soft, garis 1 pixel, status hover dan lainnya. Untuk contohnya mungkin bisa berkunjung ke dribbble.

Menurut Anda, apa saja wow factor yang bisa membuat desain sebuah terlihat unik dan khas?

  1. Visual. Siapa yang tidak suka dengan visual yang bagus?🙂 Semua pasti suka dan kalau hasilnya unik pasti menjadi faktor wow tersendiri.
  2. Konten yang tidak bisa / jarang di temukan di website lain. Faktor wow yang ini memang tidak seheboh wow secara visual, tetapi akan lebih membekas di otak kita.
  3. Tipografi. Kenyamanan membaca adalah hal yang kita cari kalau sedang melihat website.

Sebutkan beberapa situs favorit Anda!

  1. Unmatchedstyle
  2. FWA
  3. HootSuite (favorit saya sejak mereka pertama kali release :D)
  4. UX Booth
  5. UsabilityPost

Terakhir, ada saran bagi para desainer web atau yang ingin memulai karir sebagai desainer web?

Selalu perhatikan trend (desain dan code), pelajari dan buat sesuatu yang lain dari trend itu. Atau buat sesuatu yang mengikuti trend namun lebih bagus 100 kali. Dan jangan lupa untuk melakukan personal branding di dunia maya.
[hr]

Portfolio

Anda bisa menemukan Richard Fang di situs berikut:

[hr]
Terima kasih pada Richard Fang yang telah meluangkan waktunya untuk berbagi di sini. Semoga wawancara ini bermanfaat bagi kita semua.

Mendesain Blog Minimalis dengan Grid 960

Tutorial kali ini berdasarkan pada projek redesain situs DesainDigital. Kita akan menggunakan Photoshop untuk membuat desain situs minimalis dengan berbasiskan pada grid 960.gs. Kita akan memberikan cukup perhatian pada detail-detail kecil. Kita juga akan menjaga kesinambungan desain dengan mempertahankan gaya setiap elemen agar tampilannya tetap terasa menyatu.

[hr]

Preview

Sebelum memulai tutorial ini, lihat desain situs yang akan kita peroleh di bawah.

Mendesain Blog Minimalis dengan Grid 960

[hr]

Step 1

Untuk layout situs ini, kita menggunakan grid 960. Jadi, mulai dengan mengambil file layout yang tersedia di 960.gs. Di dalam file zip, buka file PSD di Photoshop. Dalam file telah tersedia beberapa guide dan group layer 12 Col Guide yang semuanya membentuk kolom-kolom. Inti dalam penggunaan guide adalah semua elemen harus berada dalam guide. Anda bisa membandingkannya dengan hasil desain yang kita peroleh di bawah. Semua elemen seperti kotak posting, logo, atau tweet semuanya berada dalam kolom.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 2

Isi Background dengan warna latar. Caranya dengan klik Edit > Fill dan pilih Color. Saya menggunakan #e9e6e1 di sini.

Mendesain Blog Minimalis dengan Grid 960

Step 3

Untuk bagian atas kita akan memberi ornamen unik. Mulai dengan membuat shape persegi di bagian paling atas. Gunakan warna #e9e4db. Di bawahnya, tambahkan path berbentuk lingkaran. Seleksi path lingkaran, tekan Ctrl + Alt + T untuk menduplikasinya. Geser beberapa pixel ke kanan dengan menekan tombol panah kanan. Ulangi proses transformasi dengan menekan Ctrl + Shift + Alt + T.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 4

Tambahkan layer style Drop Shadow.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 5

Sekarang kita akan menambahkan sedikit tekstur ke dalam shape. Buat layer baru di atas layer shape. Isi dengan putih. Klik Edit > Add Noise. Jangan gunakan terlalu banyak noise, cukup hingga terlihat ada titik-titik saja. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask. Ubah blend mode ke Multiply dan turunkan oapcity layer ke 70%.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 6

Tambahkan logo. Agar terlihat menonjol dibandingkan latarnya, kita tambahkan layer style Stroke pada logo.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 7

Buat seleksi ellipse di bawah logo. Isi dengan hitam dan haluskan dengan Gaussian Blur untuk memberi kesan bayangan pada logo.

Mendesain Blog Minimalis dengan Grid 960

Step 8

Di sisi kanan, buat sebuah shape rounded rectangle putih. Gambar juga path menggunakan tool pen untuk memberi tampilan bubble speech. Pastikan Anda memilih Add to Shape untuk menggabungkan kedua path.

Mendesain Blog Minimalis dengan Grid 960

Step 9

Tambahkan Inner Shadow, Inner Glow, dan Outer Glow. Ketiga styles ini memberi kesan emboss, seolah-olah latar menjorok ke dalam. Beri tulisan tweet terakhir.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 10

Masuk ke iconfinder dan cari ikon Twitter. Simpan ikon di bawah kotak tweet.

Mendesain Blog Minimalis dengan Grid 960

Step 11

Di bawah ikon Twitter, tambahkan navigasi halaman. Perhatikan bahwa penempatan elemen-elemen ini, teks tweet dan navigasi halaman, harus tetap mengikuti kolom.

Mendesain Blog Minimalis dengan Grid 960

Step 12

Sekarang kita akan membuat inset line. Cara membuatnya mudah saja, buat dua garis 1px berwarna hitam dan putih menggunakan tool pencil. Setiap garis berada di layer terpisah. Ubah opacity layer garis hitam menjadi 10% dan garis putih menjadi 50%.

Mendesain Blog Minimalis dengan Grid 960

Step 13

Dengan tool eraser lembut hapus kedua sisi garis hingga keduanya tepat berada di dalam kolom. Ini memberikan efek fading yang menarik di kedua sisi garis.

Mendesain Blog Minimalis dengan Grid 960

Step 14

Gandakan inset line dan simpan di bawah garis pertama.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 15

Tuliskan nama-nama kategori artikel untuk navigasi.

Mendesain Blog Minimalis dengan Grid 960

Step 16

Buat lagi garis-garis inset tipis memisahkan setiap kategori.

Mendesain Blog Minimalis dengan Grid 960

Step 17

Di sisi kanan, buat sebuah rounded rectangle putih. Di atasnya tambahkan tulisan Search… dengan warna abu-abu terang. Kita memilih warna ini agar tidak terlalu kontras karena bisa mengganggu fokus pada teks lainnya.

Mendesain Blog Minimalis dengan Grid 960

Step 18

Buat shape persegi dengan ukuran tepat 8 kolom. Isi artikel akan berada di kotak ini.

Mendesain Blog Minimalis dengan Grid 960

Step 19

Tambahkan layer style Drop Shadow.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 20

Kita tidak akan menggunakan drop shadow biasa, karena itu terlihat sangat jelek. Jika kita gunakan gunakan di sini, hasilnya akan sangat tidak unik. Kita akan memodifikasi bayangan ini.

Klik kanan daftar layer style di panel Layers dan pilih Create Layer. Langkah ini akan memisahkan bayangan ke dalam layernya sendiri. Tekan Ctrl + T lalu perkecil bayangan, klik kanan dan pilih Warp. Geser kotak di kanan bawah hingga kita peroleh sedikit bayangan yang keluar. Turunkan opacity bayangan ke 15%.

Bayangan seperti ini memberi efek seolah kotak mengelupas keluar dari latar. Unik dan tentunya jauh lebih baik dari Drop Shadow standard.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 20

Tambahkan layer style stroke 1px. Walaupun kecil, hanya 1px, ini cukup membantu untuk meningkatkan kontras antara kotak dengan latar.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 22

Tambahkan thumbnail artikel dengan ukuran 200×200 px ke dalam kotak. Pastikan Anda memberikan cukup banyak jarak ke sisi kiri dan kanan kotak. Jarak ini mempermudah mata ketika menscan gambar. Tambahkan juga efek Stroke 1px. Gunakan setting yang sama dengan stroke pada kotak artikel. Dengan efek yang sama, kita mempertahankan kesinambungan desain. Jika berbeda, misal warnanya beda atau ukurannya beda, ini berpotensi membingungkan pembaca.

Mendesain Blog Minimalis dengan Grid 960

Step 23

Sekarang kita tambahkan juga teks, seperti judul, isi artikel, data penulis, tanggal, dst. Saya tekankan lagi bahwa kita perlu mempertahankan kesinambungan desain. Usahakan agar semua link menggunakan warna yang sama.

Bersama dengan border 1 px pada kotak dan thumbnail, ini menghasilkan kesinambungan desain.

Mendesain Blog Minimalis dengan Grid 960

Step 24

Kumpulkan semua layer isi artikel ke dalam sebuah group layer. Ini akan mempermudah ketika kita ingin membuat post lain. Kita tinggal menggandakan group layer tersebut dan mengganti isinya.

Mendesain Blog Minimalis dengan Grid 960

Step 25

Buat juga kotak navigasi halaman di bagian akhir artikel. Untuk menjaga kesinambungan desain, gunakan style Stroke 1px yang sama.

Mendesain Blog Minimalis dengan Grid 960

Step 26: Sidebar

Buat kotak sidebar dengan ukuran tepat 4 kolom. Jaga kesinambungan desain dengan tetap menggunakan Stroke 1px. Warna teks biasa dan link harus disamakan juga dengan warna-warna yang sudah ada. Seperti saya katakan, ini akan menjaga kesinambungan desain.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 27: Footer

Untuk footer, kita tinggal menggandakan shape yang telah dibuat di Step 3. Putar 180 derajat dan perbesar shape rectangle hingga memenuhi seluruh area footer.

Mendesain Blog Minimalis dengan Grid 960

Step 28: Box Footer

Buat kotak footer dengan ukuran 4 kolom. Isi dengan judul kotak dan tulisan. Pastikan menggunakan warna teks yang sama.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

Step 29: About Us

Saya ingin menonjolkan kotak About Us dengan menambahkan gambar profil saya. Tambahkan foto dan di sebelahnya tambahkan teks This is me dengan font Jellyka Hand Writing. Tulisan ini dipilih untuk memberi kesan personal.

Mendesain Blog Minimalis dengan Grid 960

Step 30

Aktifkan warp teks dan pilih Style Arc. Ini akan membuat teks sedikit melengkung dan memberi kesan alami.

Mendesain Blog Minimalis dengan Grid 960

Step 31

Tambahkan style Drop Shadow pada gambar profil. Seperti tadi, kita tidak ingin menggunakan drop shadow standar karena sangar buruk. Klik kanan style dan pilih Create Layer. Lakukan proses transformasi warp hingga sebagian bayangan mencuat ke bawah.

Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960
Mendesain Blog Minimalis dengan Grid 960

[hr]

Hasil Akhir

Sampai sini, proses desain situs di Photoshop telah selesai. Langkah berikutnya adalah mengubah desain ke format yang ingin diinginkan, bisa berupa HTML dan CSS, atau dalam bentuk theme wordpress. Jika proses coding dilakukan pihak lain, pastikan untuk merapikan setiap layer terlebih dahulu. Namai setiap layer, kelompokkan ke dalam group layer, dan tambahkan data-data lain yang diperlukan.

Mendesain Blog Minimalis dengan Grid 960

Saya harap Anda belajar banyak dari tutorial ini. Jika ada pertanyaan silakan tuliskan dalam komentar di bawah.