Mendesain Tata Letak Sebuah Blog Elegan di Photoshop

Pada panduan ini, saya akan menunjukkanmu cara membuat tata letak elegan yang sederhana di Photoshop. Kita akan menggunakan sebuah gambar kuat di atas lipatannya (di manapun itu) dengan beberapa pesan sederhana yang diikuti tipografi yang bersih dan elegan.

Aset-aset Panduan

Untuk mengikuti, kamu perlu aset-aset berikut (tersedia secara gratis):

• Cafe photo dari Refe
• PT Serif font dari Font Squirrel
• Bentham font fdari Font Squirrel

Mempersiapkan Dokumennya

Langkah 1

Mulai dengan membuat sebuah dokumen baru (File > New...) menggunakan pengaturan berikut. Kamu bebas menggunakan kanvas dengan dimensi yang kamu suka - situtsnya tidak memiliki ukuran tetap.

Langkah 2

Mari buat beberapa pedoman sehingga tata letak kita memiliki ruang yang cukup dan terlihat seimbang. Saya tidak selalu menggunakan grid, tapi mengatur beberapa pedoman akan memastikan kerapihan dan akan membantu untuk mendefinisikan lebar situs. Pergi ke View > New Guide... dan atur beberapa garis pedoman. Saya biasanya menggnakan 1000px sebagai lebar situs dan menambahkan beberapa garis pedoman dari pinggir sehingga ada ruang untuk bernafas.

Catatan: Garis pedoman yang digunakan pada panduan ini: Vertikal di 100 px, 285px, 445px, 600px, 605px, 765px, 925px dan 1100px.

Tips: Kamu juga bisa menggunakan plugin GuideGuide untuk membuat prosesnya jauh lebih cepat.

Langkah 3

Mengikuti Photoshop etiquette akan membantu item-item terorganisir dan mudah untuk dinavigasi atau edit. Mari buat tiga grup layer bernama Header, Content, Sharing dan Footer. Untuk membuat grup, pergi ke Layer > New > Group... dan berikan masing-masing nama sesuai yang saya sebutkan. Untuk membuatnya secara cepat cukup klik ikonnya.

Mendesain Area Header

Area header memainkan peran sangat penting dalam menarik pengguna dan memastikan pengunjung tetap di situs. Untuk blog ini saya akan menggunakan foto sebuah cafe di London yang bersahabat. Saat memilih sebuah gambar untuk proyekmu pastikan dia mengirim pesan yang tepat ke pengunjung dan memenuhi kebuthan klien.

Langkah 1

Pertama mari buat latarbelakang dari blog. Di dalam grup Header gambar persegi dengan warna apapun menggunakan Rectangle Tool (U). Pada kasus saya, saya menggunakan sebuah persegi berukuran 1200x600px dan meletakkannya di bagian atas dokumennya.

Sekarang unduh foto cafe, seret ke dokumen Photoshop dan letakkan di atas layer persegi. Ganti nama layer gambar dengan sesuatu yang bisa kamu kenali nantinya, saya menggunakan IMG. Selanjutnya tahan tombol Alt dan arahkan mouse ke layer foto hingga kamu melihat panah kecil mengarah ke bawah, lalu lepas. Kamu baru saja membuat sebuah Clipping Mask.

Sekarang tekan CMD+T dan ubah ukuran foto sesuai yang kamu inginkan.

Tips: Tahan tombol Shift untuk mengubah ukuran secara proporsional.

Langkah 2

Sekarang kita harus membuat latarbelakang blog kita lebih gelap dan natural jadi saat kita menaruh teks di atasnya, di a akan terbaca. Mari kaburkan sedikit gambar kita dengan Filter > Blur > Gaussian Blur... dan atur Radius ke 3 pixels. Menggunakan efek kabur sedikit membantu untuk menghilangkan detil tajam gambar dan mengizinkan pengunjung untuk fokus pada elemen yang lebih menonjol darlam hal ini adalah pesan blog kita.

Mari buat sebuah layer di atas gambar dan buat menjadi sebuah Clipping Mask seperti yang ditunjukkan pada tahap sebelumnya, Lalu isi dengan warna hitam dan ubah opacity-nya ke 50% sehingga gambar kita menjadi lebih gelap tapi masih terlihat.

Langkah 3

Ini waktunya untuk menambah logo untuk blog kita. Buat sebuah grup baru di dalam grup Header dan namai dia Logo. Untuk panduan inni saya akan menggunakan logo sederhana berbasis tipografi. Ambil Horizontal Type Tool (T), Bentham 30px dan tulis judul blog-mu. Perhatikan bahwa spasi hurufnya lebih lebar dari biasanya membuat kesan elegan dan mudah untuk dibaca.

Untuk memberikan penekanan mari berikan pinggiran ke sekitarnya. Ambil Rectangle Tool (U) dan gambarsebuah persegi yang sedikit lebih besar dari teks.

Klik kanan di atar layer-nya dan pilih Blending Option... terapkan opsi stroke berikut.

Terkahir atur Fill layer persegi ke 0% dan kamu memiliki garis 1 px yang bagus di sekitar logo fiksional-mu.

Langkah 4

Ini adalah saat di mana kita menambahkan pesan blog yang akan merangkum mengenai apa blog-nya. Ambil Horizontal Type (T), 60px font Bentham dan tulis pesan pendek untuk pembaca-mu. Pastikan tinggi barisnya cukup luas sehingga teks-nya memiliki ruang untuk bernafas dan terlihat seimbang.

Untuk ampersand-nya saya menggunakan Baskerville (Italic), font ini lebih berhiasan. Untuk pesan kedua saya menggunakan PT Serif (Italic) dengan ukuran 20px. Pastikan kamu meletakkan pesan secara vertikal di tengah gambar sehingga dia terlihat seimbang dan terpoles.

Mendesain Area Konten

Perkecil grup Header dengan mengklik panah kecil di sampong judul grup dan buka Gruo Content sehingga semua layer terorganisir dan mudah untuk dinavigasikan.

Langkah 1

Bari buat kiriman blog kita. Ambil Horizontal Type Tool (T) dan dengan font gelap dan agak besar tulis judul kirimanmu. Hindari memilih warna yang benar-benar hitam, tapi pilihlah yang sedikit lebih kabur seberti abu-abu hitam, sehingga dia tidak terlalu keras. Untuk pandaun ini saya menggunakan warna abu-abu gelap #444444 berukuran 42px dengan font Bentham dalam kapital. Letakkan judul ditengah dokumen dan berikan sedikit ruang di bagian atas sehingga perhatian pembaa terarah ke judul.

Langkah 2

Kurangi ukuran font ke sekitar 14px dan masukkan tanggal, penulis, kategori, penulis, tag, lokasi ataupun yang kamu inginkan ke kiriman sehingga itu memberikan pembaca tinjauan umum dari publikasi. Dalam kasus saya, saya meletakkan tanggal dan lokasi ke kiriman dalam huruf kapital agar cocok dengan judul.

Langkah 3

sebuah blog tanpa konten asli tidak bernilai apa-apa, tak peduli sebagus apapun desainnya. Dengan Horizontal Type Tool (T) tahan mouse-mu dan buat sebuah kontainer di antara garis pedoman kedua dan terakhir. Ukuran kontainer-nya seharusnya 640px dan tingginya tergantung panjang dari kirimanmu.

Atur warna latarbelakang-nya ke sesuatu yang lebih terang dan mudah bagi mata. Saya menggunakan abu-abu terang #6f6f6f 18px PT Serif dengan tinggi 34px. tinggi baris harusnya antara 1.5 - 1.9 tergantung gaya dari typeface-nya. Kamu juga bisa dengan mudah menghitung tinggi baris dengan mengalikan ukuran font-nya dengan 1.9, contohnya dalam kasus saya ukuran font-nya 18px sehingga 18*1.8 =34.2 

Langkah 4

Sebagai seorang desainer kamu harus selalu berpikir mengenai lingkungan desain dinamis jadi masukkan gaya untuk hyperlink dan keadaan tersorot dari tombol. Percayalah, pengembang akan berterima kasih untuknya. Ambil sebuah warna halus yang akan menonjol di tulisanmu, srot satu dari frasa yang akan menautkan ke suatu tempat dan ganti warnanya. Dalam kasus saya adalah merah pucat #e3514e

Mendesain Tombol Berbagi

Kita telah selesai dengan tulisan utama dari kiriman dan sekarang kita akan membuat beberapa tombol berbagi sehingga pembaca dapat membagikan konten ke sosial media mereka.

Langkah 1

Perkecil grup Content dan buka Grup Sharing di mana kita akan metelakkan tombol kita. Ambil Rectangle Tool (U) dan gambar sebuah persegi di antara garis pedoman kedua dan terakhir sebagai kopi kiriman utama. Dalam kasus saya adalah 640x54px. Lalu klik kanan, pilih Blending Options... dan terapkan pengaturan berikut.

Terakhir, kurangi Fill layer ke 0% dan kamu akan memiliki sebuah outline sebagai kontainer untuk jaringan sosial media-mu.

Langkah 2

Ambil Line Tool (U) dan atur lebarnya ke 1px, setelahnya gambar tiga garis vertikal yang akan membagi kontainer kita ke empat pecahan yang sama. Gari pedoman akan membantu meletakkannya. Pastikan garisnya memiliki warna yang sama dengan outline kontainernya.

Tips: Tahan tombol Shift untuk memastikan garisnya lurus.

Tips: Klik CMD+ untuk menunjukkan/menyembunyikan garis pedoman.

Langkah 3

Terakhir ambil Horizontal Type Tool (T) dan ketik sesuatu sehingga orang-rang tahu bahwa itu untuk berbagi. dalam kasus saya, saya menggunakan SHARE:, setelah saya menulis nama-nama media sosial yang tersedia untuk berbagi.

Letakkan namanya di tengah kontainer dan atur tengah mereka di antara blok-blok terpisah.

Langkah 4

Bagus! Pembagian di sosial media selesai, yang kit butuhkan sekarang adalah menyelesaikan keadaan tersorot dari tombol. Ambil Rectangle Tool (U) dan gunakan warna yang sama dengantautan, gambar sebuah persegi di bawah nama sosial media yang mencakup area terpisah.

Mendesain Footer

Akhirnya ini waktunya untuk membungkus blog kita dengan meletakkan footer sederhana dengan informasi hak cipta.

Langkah 1

Perkecil grup Sharing dan buka grup Footer. Lalu gambar sebuah persegi sederhana di bagian bawah yang melintasi dokumen secara horizontal dan meninggalkan ruang yang cukup di bagian atas. Saya menggunakan abu-abu #555555 dan ruang putih berukuran sekitar 110px di atasnya.

Langkah 2

Ambil Horizontal Type Tool (T) dan tulis hak cipta yang sederhana. Dalam kasus saya, saya menggunakan PT Serif 14px putih #FFFFFF Letakkan kopi-mu di tengah persegi dan ratakan secara vetikal.

Kesimpulan

Di panduan ini kita telah membahas proses kreatif pembuatan tata letak blog yang sederhana dan elegan. Dia memiliki header kuat berbasis gambar di bagian atas, dan menggunakan pendekatan typografy-first ke konten blognya.

Cek Membuat dan Memberi Tema Blog Berbasis Evernote dengan Postach.io di mana kita akan membuat tata letak blog ini untuk browser dan mengintegrasikannya dengan blogging platform!

Jika kamu memiliki pertanyaan atau ide, mohon beri tahu kamu melalui kolom komentar!