Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Desain Tema Blog Komunitas Profesional yang Bersih di Adobe Photoshop

by
Read Time:12 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Dalam tutorial ini Anda akan belajar betapa sederhana, teknik desain mudah tema blog komunitas yang bersih di Adobe Photoshop. Beberapa teknik yang dibahas dalam tutorial ini mencakup penggunaan spasi, tipografi, warna dan hierarki visual yang tepat - beberapa alat penting dalam kotak peralatan perancang yang sukses. Mari kita mulai!


Tentang Desain

Hari ini kita akan melihat desain tema Alex Pascal "Revolution Magazine" untuk WordPress.  Versi kode penuh tersedia di ThemeForest sebagai tema blog WordPress.

Revolution Magazine adalah majalah WordPress yang premium, modern dan bersih, yang juga berfungsi ganda sebagai blog komunitas, blog pribadi, atau apapun yang Anda gunakan untuknya. Jika Anda telah mencari pemicu untuk menyalakan blog lama Anda menjadi majalah populer, Anda telah menemukannya.

Semuanya dimulai dengan desainnya, dan Alex akan mengantarkan kita melalui bagaimana dia mendekati fase desain proyek ini. Karena ini hanya tutorial desain, dia tidak akan membahas tema pengkodean, namun ingatlah bahwa Anda dapat melihat tema Revolution di ThemeForest untuk melihat contoh langsung.  Ada juga banyak coding Tema WordPress yang hebat yang di uji coba di Nettuts (seperti yang ini). Kami harap Anda menyukainya - mari menggali!


Langkah 1

Buka File > New > lalu atur ketinggiannya menjadi sekitar 2000px, lebarnya menjadi 1400px, dan resolusi ke 72dpi.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Kami juga perlu memastikan bahwa Rulers dan Guides kita di lihat. Jadi, kita akan menuju ke View > Extras / Rulers / Snap (agar objek kita sejajar dengan Guide kita).

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Kami sekarang perlu menyiapkan beberapa garis panduan cepat untuk digunakan di kemudian hari dalam desain. Buka View > New Guide ...> Centang "Vertical" dan ketik nilai berikut, tekan "OK" setelah masing-masing memasukkannya. Kita ingin garis panduan di 220px, 250px, 380px, 420px, 830px, 860px, 880px, 1155px, dan 1180px.

Sekarang mari kita isi latar belakang kita dengan warna solid. Pilih lapisan"Background," klik kanan padanya, dan pilih "Layer from background" dan beri nama. Sekarang, dengan menggunakan Rectangular Marquee Tool (M), buatlah seleksi di atas keseluruhan kanvas dan isi seleksi dengan #d0d0d0.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Langkah 2

Kita sekarang akan membuat latar belakang tajuk. Buat lapisan baru dan ber nama "header", lalu ambil Rectangular Marquee Tool (M) Anda dan buat pilihan di selection di atas kanvas Anda lebar 175px dan letakkan di atas kanvas dan isi dengan warna apapun. Klik dua kali pada lapisan yang baru saja Anda buat dan klik pada "Gradient Overlay" > existing gradient image > lalu atur warna paling kanan ke #383838. Posisikan warna kiri sekitar 60% dan ubah warna menjadi #2D2D2D.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Sekarang maju dan duplikat lapisan "header" dan pindahkan langsung di bawah tajuk pertama. Klik dua kali lapisan sekali lagi dan masuk ke "Gradient Overlay" > existing gradient image > lalu atur warna yang paling tepat ke #e0e0e0. Posisikan warna kiri sekitar 50% dan ubah warnanya menjadi #d0d0d0.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Sekarang klik "Inner Shadow" dan ubah warnanya menjadi #EEEEEE, opacity menjadi 100%, jarak ke 1px, choke hingga 100% dan ukuran hingga 0px. Ubah sudut menjadi 90 derajat dan hapus centang "Global Lighting" karena kita akan menggunakan sudut pandang yang berbeda sepanjang tema.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Sekarang kita memiliki latar belakang semua siap untuk pergi, mari kita membuat logo untuk situs kita! Buat lapisan baru, sekitar 40px dari atas dan sejajar dengan garis panduan pertama, menggunakan Horizontal Type Tool (T), ketik nama situs web Anda di font pilihan Anda (tampilan demo menunjukkan Helvetica Neue LT Std tapi Helvetica reguler atau Arial bekerja dengan baik). Lanjutkan untuk mengubah Lapisan Gaya seperti yang ditunjukkan pada contoh di bawah ini.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Ini adalah apa tajuk Anda seharusnya terlihat sejauh ini.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Langkah 3

Situs web tidak ada apa-apanya tanpa navigasi, dan bagus sekali! Mari sekarang buat bar navigasi yang menyatu dengan latar belakang tajuk yang ada.

Navigasi

Buat lapisan baru dan berikan nama "Vertical Gradient" dan ambil Rectangular Marquee Tool (M) dan buat selection 960px xp 40px 115px dari atas kanvas, tinggalkan sekitar 20px di bawah pilihan latar belakang dan isi dengan warna apapun. Anda kemudian dapat menambahkan Lapisan Gaya yang ditunjukkan pada gambar di bawah ini ke lapisan yang baru saja Anda buat.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Sekarang duplikat lapisan yang baru saja Anda buat dan ganti namanya menjadi "Horizontal Gradient". Ubah Lapisan Gaya sesuai gambar di bawah ini.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Akhirnya, buat garis 960px by 1px di lapisan baru yang disebut "darklight" tepat di atas dua lapisan sebelumnya dan isi dengan #1d1d1d. Navigasi Anda sekarang harus terlihat seperti pada gambar di bawah ini.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Sekarang mari kita coba membuat tombol tautan "home" khusus yang akan menonjol dari sisa tautan dalam navigasi. Buat lapisan baru, dan buat selection dengan Rounded Rectangle Tool (U) sekitar 50px  60px secara vertikal, diisi dengan #444444, dan isi bagian bawahnya yang membulat sehingga pilihannya hanya membulat di bagian atas.

Download ikon home ini, buka di Photoshop, dan impor ke dalam kanvas yang ada. Ubah ukurannya menjadi sekitar 18px 17px dan isi dengan #999999. Letakkan tepat di tengah lapisan sebelumnya yang telah Anda buat dan sekarang Anda memiliki tautan home bergaya!

Selanjutnya kita akan menambahkan item navigasi ke navigasi kita! Ambil Horizontal Type Tool (T) Anda, atur gaya berikut di bawah ini, dan ketik item menu. Dalam contoh kita, item pertama adalah "Documentation" dengan deskripsi "theme support & guide". Tambahkan sebanyak mungkin barang yang Anda inginkan, biarkan padding 20px di antara setiap item menu.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Ikon Media Sosial

Untuk langkah selanjutnya, kita akan membutuhkan ikon media sosial. Kita akan mulai dengan mengunduh set ikon media sosial ini, oleh KomodoMedia, dan kemudian menempatkan empat ikon dan desaturasi mereka (Shift + Ctrl + U) seperti pada gambar di bawah ini.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Selamat! Tajur dari situs web kita sekarang lengkap! Mari terus ke isi situs web.

Langkah 4

Setelah seluruh tajuk selesai, kita akan terus melanjutkan ke bagian isi situs kita.

Isi Utama

Sebagai permulaan, kita akan membagi isi menjadi dua bagian - satu untuk konten isi utama dan yang lainnya untuk sidebar. Buat lapisan baru, sebut saja "main body" dan buat selection dengan Rectangular Marquee Tool (M) lebar 640px dan setinggi yang Anda inginkan (minimal 1000px atau lebih), mulai tepat di bawah latar belakang tajuk. Isi selection ini dengan #ffffffff. Sekarang buat lapisan baru, sebut saja "sidebar" dan buat selection dengan lebar 320px di sebelah kanan lapisan "body utama" dan jadikan setinggi isi utama. Isi dengan #e6e6e6.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Selanjutnya, kita akan memberi sidebar sedikit inner shadow di sisi kiri untuk menciptakan ilusi "indentasi". Tambahkan Lapisan Gaya di bawah ini ke lapisan "sidebar" Anda.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Slider Unggulan

Buat lapisan baru dan gunakan Rectangle Marquee Tool (M), buat selection 960px dengan 360px tepat di bagian atas isi kita, tepat di bawah navigasi dan isi dengan #e6e6e6. Buat lapisan lain dan biarkan margin 25px di semua sisi, di dalam pilihan sebelumnya, buat selection 910px dengan 312px dan isi dengan #ffffff. Di Lapisan Gaya, tambahkan inner stroke 1px #dddddd pada lapisan ini.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Untuk langkah selanjutnya, kita memerlukan contoh gambar untuk digunakan sebagai placeholder. Setiap gambar apapun akan bekerja jadi temukan gambar dengan 580px-300px dan memasukkannya ke dalam lapisan baru, paskan 5px dari setiap sisi wadah yang baru saja kita buat.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Buat lapisan baru dan beri nama "tab_hover". Ambil Rectangle Marquee Tool (M) dan buat selectiob 320px-41px tepat di sebelah kanan gambar, di sudut kanan atas wadah slider putih. Isi dengan warna apapun. Menggunakan Polygonal Lasso Tool,  klik 20px kiri empat persegi panjang, tepat setengah vertikal dan tahan Ctrl sambil menyeret secara diagonal ke atas dan kanan sampai Anda memenuhi sudut kiri atas empat persegi panjang. Masih menahan Ctrl, tarik ke bawah sampai Anda memenuhi sudut kiri bawah dan akhirnya, kembali ke posisi awal. Isi selection ini dengan warna apapun.

Lanjutkan untuk menambahkan gaya yang ditunjukkan pada gambar di bawah ini ke lapisan "tab_hover".

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Sekarang buat selection 320px-92px dengan Rectangle Marquee Tool (M) langsung di bawah tab, taruh di lapisan baru yang disebut "tab_space" dan terapkan Lapisan Gaya yang diperlukan yang dijelaskan pada gambar.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Sekarang mari kita ulangi langkah-langkah untuk membuat sisa tab, mengikuti gaya yang sedikit berbeda untuk membedakan status "aktif" dari tab lainnya.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Akhirnya, kita harus menemukan sesuatu yang mirip dengan ini dan semua siap untuk berjalan!

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Langkah 5

Wah! Kita hampir sampai! Dengan bagian yang paling sulit, mari kita lanjutkan ke isi situs web kita. Pada langkah ini, kita akan membahas teknik-teknik kunci seperti spasi.

Mari kita mulai bagian "Latest Post" dengan sebuah tulisan. Mari buat border dengan membuat selection 615px-210px dengan Rectangle Marquee Tool (M), isilah dengan warna apa pun di lapisan baru yang disebut "border" dan kemudian tambahkan gradien yang dijelaskan pada gambar di bawah ini. Begitu kita selesai dengan itu, masukkan gambar 610px-200px, biarkan padding 5 piksel di dalam bingkai. Apapun gambarnya tidak penting, jadi sekali lagi, Anda bisa menggunakan apapun yang Anda inginkan sebagai placeholder!

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Spasi yang tepat sangat penting dalam desain yang sukses. Tema blog komunitas kitamendemonstrasikan kekuatannya dalam konsistensi dan spasi secara keseluruhan dengan memiliki margin kongruen di sekitar elemen tulisan untuk membantu pembaca dengan mudah mengalir ke bawah halaman. Mari kita lihat bagaimana tulisan kita akan terlihat, dengan bantuan beberapa panduan!

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Bagian selanjutnya cukup jelas. Dengan menggunakan Horizontal Type Tool (T), ketikkan tajuk, information meta, dan kutipan untuk placeholder (Anda dapat menggunakan teks yang digunakan dalam gambar demo untuk menghemat waktu) mengacu pada gambar sebelumnya untuk bantuan spasi dan alignment. Lihat gambar di bawah untuk gaya teks yang dibutuhkan. Setelah semua teks ditambahkan, ambil Rounded Rectangle Tool (U) dan buat beberapa tombol cepat (kira-kira 120px-32px), sejajarkan dengan sisi kiri tulisan dan tambahkan gaya yang ditunjukkan pada gambar di bawah ini. Anda sekarang harus memiliki tulisan yang menarik yang dapat Anda duplikat berulang-ulang sampai Anda puas!

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Langkah 6

Hampir sama vitalnya dengan topik dalam tema blog komunitas, sidebar! Untuk tujuan demonstratif, kita hanya akan merancang beberapa widget umum - tentu saja tidak mungkin untuk menutupi desain khusus untuk setiap widget di luar sana, namun sebagian besar akan memungkinkan memulai berpikir lebih kreatif dan  mengalir untuk menciptakan lebih banyak!

Untuk bagian ini, kita perlu mengunduh Paket Ikon dari Graphic River yang gratis dan mengimpor ikon RSS 48x48px dan Twitter 48x48px ke dalam proyek kita. Posisikan ikon ini 20px dari sisi kiri sidebar dan pastikan keduanya disejajarkan secara vertikal dengan tulisan pertama di sebelah kiri.

Ambil Horizontal Type Tool (T) dan ketik secara acak untuk pelanggan dan pengikut menggunakan font Georgia, dan kata-kata "subscribers" dan "followers" di Arial seperti yang dijelaskan pada gambar di bawah ini.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Bagaimana dengan widget iklan sederhana? Yakin! Ambil Rectangular Marquee Tool (M) dan buat selection 280px-410px, isi dengan putih polos, dan berikan inner stroke 1px #dddddd. Ambil beberapa contoh iklan dari Theme Forest dan jatuhkan mereka ke dalam wadah baru, sisakan padding 9-10px di antara masing-masing (tergantung pada apakah itu antara border atau di antara masing-masing iklan).

Terakhir, ketikkan Text Widget singkat dengan Horizontal Type Tool (T) dengan menggunakan gaya yang ada pada gambar di bawah ini.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Ambil Rectangular Marquee Tool (M) dan buat wadah 280px-225px. Isi dengan #eeeeee dan berikan inner stroke 1px #dbdbdb. Lapisan baru, buat tab sekitar 84px-37px di pojok kiri atas wadah, sisakan padding 4px di setiap sisinya, lalu di lapisan yang sama buat selection lain 270px-180px dan isi dengan warna putih, buat empat persegi panjang dengan empat persegi panjang kecil. mencuat di kiri atas Berikan inner stroke 1px #e0e0e0. Selesaikan 2 tab lainnya, biarkan padding 4px di setiap sisi sepanjang waktu. Isi teks dengan Arial 12px Bold. Buat bullet 3px-3px yang diisi dengan #bbbbbb dan buat item sebanyak yang Anda mau.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Itu untuk sidebar, mari kita pindah ke bagian lain dari situs ini!

Langkah 7

Sekarang kita perlahan membungkus situs web ini dengan ... Anda bisa menebaknya, footer! Mari mempersiapkan footer kita dengan menciptakan latar belakang yang cepat untuk itu. Ambil Rectangle Marquee Tool (M) dan buat selection 960px-510px di lapisan baru, tepat di bawah latar belakang isi utama. Isi selection ini dengan #2d2d2d. Ini akan menjadi footer kita dengan 4 kolom di dalamnya. Langsung di bawah blok warna ini, buat pilihan 960px-60px dan isi dengan #1d1d1d dan taruh di lapisan baru. Ini akan menjadi bagian "copyright" dari footer dan cara yang sederhana namun efektif untuk menandakan akhir halaman.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Di situs web kita, kita memiliki 4 kolom di footer, masing-masing 200px lebar dengan margin 25px di antara masing-masing. Untuk menjaga agar tetap seragam, kita juga akan menyisakan 25px di bagian atas footer kita, setelah itu kita akan memasang judul masing-masing kolom. Silakan ambil Horizontal Type Tool (T) dan mulai mengetik judul untuk setiap kolom, dengan menggunakan gaya yang dijelaskan pada gambar di bawah ini. Sisakan 20px di bawah judul, ketik paragraf pendek atau daftar item yang dipisahkan oleh "one pixel on, one pixel off" dotted divider yang sederhana.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Kesimpulan

Selamat, Anda baru saja merancang tema blog komunitas yang bersih di Adobe Photoshop. Mudah-mudahan Anda telah mempelajari beberapa tip dan trik tentang bagaimana merancang aspek-aspek tertentu dari situs web yang terorganisir dengan rapi dan dapat menggunakan keterampilan ini dalam proyek Anda sendiri di masa depan!

Karena ini hanya tutorial desain, saya belum pernah masuk ke pengkodean tema sama sekali, tapi Anda bisa melihat tema Revolution di ThemeForest untuk melihat contoh yang lebih hidup.

Semoga berhasil dan terimakasih telah membaca! :)

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.