Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Mendesain Diary Foto Traveler Bertema Tumblr di Photoshop

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Final product image
What You'll Be Creating
Final product image
Apa yang Akan Anda Buat

Pada tutorial ini saya akan menunjukkan langkah demi langkah proses pembuatan tema diary Tumblr yang sederhana berbasis foto pada Photoshop.  Saya akan mulai benar-benar dari coretan dan akan memandu Anda dalam seluruh proses mengatur dokumen, menggunakan tools dasar, dan menyelesaikan desain dalam waktu singkat. Saya akan mulai benar-benar dari coretan dan akan memandu Anda dalam seluruh proses mengatur dokumen, menggunakan tools dasar, dan menyelesaikan desain dalam waktu singkat.

Peralatan Tutorial

Untuk mengikuti tutorial ini Anda akan membutuhkan beberapa perlengkapan (yang tersedia secara gratis):

Mempersiapkan Dokumen

Langkah 1

Mulai dengan membuat dokumen Photoshop (File > New…) menggunakan pengaturan yang terlihat di bawah ini. Anda bebas menggunakan kanvas dengan dimensi apa saja yang Anda pilih – lagipula, website bukanlah sesuatu dengan luas yang tetap.

Langkah 2

Mari mengatur beberapa panduan sehingga tata letak kita memiliki ruang yang cukup dan terlihat seimbang.  Saya tidak selalu menggunakan grid yang telah diketahui, tetapi mengatur garis bantu akan memastikan kerapian dan akan membantu Anda menentukan luas website kita. Pergilah ke View > New Guide… dan atur beberapa garis bantu.  Saya biasanya memilih 1000px sebagai luas website dan menambahkan garis bantu dari sudut sehingga ada ruang untuk bernapas.

Catatan: Garis bantu yang digunakan pada tutorial ini: vertikal pada 100px, 600px, 720px dan 1100px.

Tip: Anda juga dapat menggunakan plugin GuideGuide Photoshop untuk membuatnya lebih cepat.

Mendesain Area Header

Area header atau area “di atas lipatan” (atau apa pun sebutannya kini) memainkan peran yang amat penting dalam manarik pengguna dan memastikan pengunjung untuk tetap bertahan dengan website kita.  Untuk foto diary traveler ini saya akan menggunakan pemandangan pantai yang indah untuk mengatur suasana hati bertualang dan secara tidak sadar mengirimkan pesan untuk pengunjung mengatakan bahwa website ini tentang traveling.

Langkah 1

Mari terlebih dahulu membuat grup bernama “Header” untuk judul dengan meng-klik Layer > New > Group… atau menekan tobol ikon kecil pada layer bawah dari panel.

Langkah 1

Untuk memulai mari letakkan navigasi pada bagian paling atas dari diary sehingga orang-orang dapat dengan mudah berlayar di website kita. Pilihlah Horizontal Type Tool (T), kemudian pilih font PT Sans ukuran 13px, atur warna menjadi abu-abu gelap #323232 dan masukkan nama untuk foto diary Anda. Ini merupakan tempat yang pas untuk logo kita, sehingga masukkan itu jika Anda memilikinya.  Ini merupakan tempat yang pas untuk logo kita, sehingga masukkan itu jika Anda memilikinya. Saya menggunakan nama fiktif untuk foto diary ini “Pintu Keberangkatan”. Untuk membuatnya lebih menggoda secara visual, luaskan jaraknya/tracking (jarak antar huruf) menjadi 200.

Pastikan untuk memberikan beberapa jarak untuk judul di atas, saya telah memindahkannya ke bawah sejauh 25px.

Langkah 3

Sekarang menggunakan tool yang sama masukkan link untuk foto diary Anda. Untuk mendikasikan link yang aktif gunakan warna yang berbeda, saya menggunakan warna abu-abu muda #666666. Letakkan pada bagian atas kanan sebelum garis bantu vertikal terakhir.

Langkah 4

Di dalam grup Header gambarlah bentuk persegi (menggunakan warna lain apa saja selain putih untuk memastikan ia terlihat) menggunakan Rectangle Tool (U). Saya menggambar persegi dengan ukuran 1200x640px dan meletakkannya pada bagian atas dokumen memberikan jarak 25px di bawah navigasi atas. 

Langkah 5

Sekarang unduhlah foto pantai (atau yang lainnya yang Anda suka), seret ke dokumen Photoshop dan letakkan di atas layer persegi tadi. Ubah nama layer gambar menjadi sesuatu yang Anda dapat kenali nantinya. Saya menggunakan IMG.  Setelah itu tahan tombol Alt dan mouse ke layer foto hingga Anda melihat panah lecil mengarah ke bawah, kemudian lepaskan. Anda telah membuat Clipping Mask.  Anda telah membuat Clipping  Akhirnya kurangi kegelapan Opacity layer IMG menjadi 75% untuk membuat teks yang akan kita letakkan di atasnya menjadi terbaca.

Sekarang tekan CMD+T dan ubah ukuran foto sesuai kebutuhan Anda.

Tip: tahan tombol Shift untuk mengubah secara proporsional.

Langkah 6

Mari membuat pesan pengenalan yang memberitahukan pengguna tentang apakah website ini. Pastikan Anda menggunakan teks yang besar untuk mendapatkan perhatian pengunjung Saya menggunakan font yang sama, PT Sans, ukuran 52px.  Untuk pesan kedua saya menggunakan font yang lebih kecil, saya menggunakan PT Serif ukuran 28px.  Perhatikan jarak antar baris, selalu berikan ruang untuk salinan dapat dibaca. 

Langkah 7

Akhirnya kita akan membutuhkan tombol call to action (CTA) untuk memberitahukan orang-orang apa yang harus mereka lakukan.  Gunakan Rectangle Tool (U) dan gambar bentuk persegi berwarna putih #FFFFFF . setelah itu letakkan teks di dalam persegi putih tersebut dengan perkataan seperti “Jelajahi Foto”.  Pastikan untuk memberikan jarak di atas tombol sehingga terlihat kuat dan independen.

Mendesain Unit Post Teks

Seperti yang telah Anda ketahui Tumblr memiliki banyak tipe post yang berbeda.  Di bawah ini adalah foto layar (screenshoot) dari dashboard antarmuka Tumblr yang menunjukkan tipe post yang dapat Anda buat. 

Beberapa langkah selanjutnya saya akan memandu Anda pada proses untuk membuat beberapa tipe post berbeda, yakni:

  • Post teks
  • Post foto
  • Post Video
  • Post kutipan

Saya akan memberikan sisanya sebagai tugas.

Langkah 1

Mari mulai dengan masukan Teks lebih dahulu.  Kita akan membuat satu unit kemudian membuatnya ulang untuk tipe post yang lain.  Semua post akan berbasis pada struktur yan sama dan berbagi fitur serupa (tanggal post, tags, opsi sharing).

Buatlah grup baru yang disebut “Unit Teks”.  Setelah itu ubah warna latar belakang menjadi abu-abu muda #f8f7f6, gunakan Rectangle Tool (U) dan gambarlah persegi di antara garis bantu vertikal pertama dan terakhir.  Saya membuat dimensi persegi 1000x284px.

Gunakan Horizontal Type Tool (T) dan menggunakan PT Sans (Bold) 32px masukkan sebuah judul.  Pastikan untuk memberikan judul Anda jarak di sekitarnya untuk membuatnya terlihat seimbang dan rapi.  Saya mendorongnya menjadi 50px dari atas dan kiri.

Langkah 2

Menggunakan tool yang sama pilihlah font PT Seif, kurangi ukuran font menjadi 15px dan ubah warnanya menjadi abu-abu muda #444444.  Setelah itu masukkan isi post Anda.  Pastikan untuk menambahkan tinggi baris membuatnya lebih terbaca dan manarik secara visual. Saya mengatur ketinggian baris menjadi 26px.

Langkah 3

Akhirnya kita perlu untuk menampilkan tanggal terbit berdampingan dengan tag dan opsi berbagi. Menggunakan tipe tool yang sama masukkan beberapa tag, diawali dengan sebuah hashtag #, dan letakkan di bawah isi.  Setelah itu ubah warna menjadi abu-abu muda #666666 sehingga akan terlihat lebih muda dan memberikan kesan kurang penting, memungkinkan untuk menarik perhatian lebih kepada isi utama.  

Langkah 4

Sekarang kita akan menuju Iconfinder dan unduh ikon share/berbagiretweet dan hati.

Terakhir, buatlah grup baru bernama “Ikon” dan letakkan ikon di dalam grup ini.  Tepakan jarak pada sisi-sisinya dan kurangi kegelapan/Opacity – nya menjadi 30% sehingga ikon cocok warnanya dengan tanggal dan tag.

-

Langkah 1

Dengan selesainya hal di atas, gandakan grup “Unit Teks” dan ubah namanya menjadi “Unit Foto”.  Pindahkan sejauh 60px dari blok pertama, hilangkan layer isi, dan pindahkan judul post ke bagian bawah untuk sebaris dengan tanggal post dan tag. Ubah judul post, tanggal, dan tag. Pilih layer latar belakang unit ini, tekan CMD+T dan ubah ukuran untuk memiliki jarak 50px atas dan bawah. 

Langkah 2

Gandakan layer latar belakang unit dan ubah ukuran menggunakan CMD+T.  saya mengatur ukurannya menjadi 1000x510px.

Pindahkan ke atas judul kemudian pergilah ke Skitterphoto untuk mendapatkan foto yang ingin Anda gunakan untuk post foto, letakkan di atas persegi. Tahan tombol Alt dan mouse pada layer thumbnail hingga Anda melihat panah kecil mengarah ke bawah. Kemudian lepaskan mouse untuk membuat Clipping Mask.

Mendesain Unit Post Video

Langkah 1

Langkah ini mudah.  Gandakan CMD+J grup “Unit Foto” dan ubah namanya menjadi “Unit Video”.  Pindahkan sejauh 60px di bawah post foto dan ubah gambar, judul, tanggal, dan tag. Setlah itu kita perlu mengindikasikan bahwa ini adalah post video dengan meletakkan ikon YouTube di atasnya.

Unduh ikon YouTube dari Iconfinder dan letakkan pada bagian tengah gambar post video.

Mendesain Unit Post Kutipan

Langkah 1

Sekali lagi duplikasi grup “Unit Teks” (CDM+J) dan pindahkan di bawah post video.  Hapus lapisan judul dan konten yang meninggalkan tanggal, tag, dan ikon berbagi.

Setelah itu,  gunakan Horizontal Type Tool (T), pilih font PT Serif (Italic), atur ukuran menjadi 35px dan pastikan warnanya adalah abu-abu gelap #323232.

Terakhir, paste/temple kutipan favorit Anda dan atur latar belakangnya, terus ingat untuk menjaga konsistensi jarak 50px pada sisi-sisinya.

Sekarang gandakan grup “Unit Foto” dan letakkan di bawah post kutipan sehingga replica kita terlihat benar-benar seperti blog Tumblr sesungguhnya.

Mendesain Unit Post Lainnya

Itu dia.  Saya telah menunjukkan pada Anda bagaimaan membuat post tipe teks, foto, video, dan kutipan. Sekarang waktunya untuk Anda membuat tip epos lainnya untuk link, chat, dan audio.  Konsistensi adalah kunci utama. Coba untuk menggunakan kembali elemen yang telah kita buat dan gunakan font, warna, dan jarak yang sama sehingga desain Anda terlihat seimbang dan dapat dipahami secara keseluruhan.

Mendesain Area Footer

Kita sangat dekat dengan penyelesaian tema Tumblr sederhana.  Mari sekarang tambahkan tombol “muat lebih banyak” (sesuatu yang umum untuk tema Tumblr) dan statement hak cipta.

Langkah 1

Minimize semua grup dan buatlah yang baru bernama “Footer”.  Setelah itu bukalah grup “Header” dan temukan tombol layer “Jelajahi Foto”, bentuk persegi, dan layer teks.  Tahan tombol CMD dan pilih kedua layer ini, kemudian tekan CMD+J untuk menduplikasinya dan seret ke grup “Footer” Anda.

Jika telah selesai, klik dua kali pada layer bentuk persegi dan ubah warnanya menjadi seperti yang telah kita gunakan pada latar belakang “Foto” untuk menjaga konsistensi.

Langkah 2

Akhirnya, masukkan informasi hak cipta.  Untuk konsistensi gunakan font yang sama seperti masukan salinan foto. Saya menggunakan PT Serif 15px warna abu-abu #444444. Perhatikan jaraknya, pada keseluruhan tata letak kita menggunakan banyak ruang putih yang memberikan perasaan bersih dan terorganisir.  Saya menggunakan 60px untuk jarak antar gambar, tombol “muat lebih banyak” dan baris hak cipta.

Penajajran teks ini diatur ke tengah untuk membuat terlihat konsisten dengan pesan dan tombol call to action.

Selamat!

Selesai! Kita telah selesai dengan desain tema, sekarang ulas layer dokumen Anda, hapuslah hal-hal yang tidak diperlukan dan serahkan pada pengembang Anda, atau bahkan lebih baik jika Anda melakukan coding sendiri.  Pada tutorial selanjutnya kita akan membuat coding desain ini menjadi tema Tumblr yang fungsional, jadi pantau terus!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.