Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Merancang Newsletter Email Natal di Photoshop

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial ini saya akan memandu Anda melalui proses perancangan template email bertema yang bersih dan festive. Kita akan memulai semua dari awal, menyusun tata letak dengan Adobe Photoshop. Kita akan menggunakan beberapa teknik dasar dan menengah untuk membuat desain ini dengan perubahan dalam pikiran Mari kita memulainya!

Aset Tutorial

Untuk dapat mengikuti Anda akan membutuhkan beberapa (yang tersedia secara bebas) aset:

Persiapkan Dokumen

Langkah 1

Mulailah dengan membuat dokumen Photoshop baru (File> New ...) dengan menggunakan pengaturan yang ditunjukkan di bawah ini. Sebagian besar newsletters email memiliki lebar yang ditetapkan sekitar 620 piksel total. Saya biasanya menggunakan 600px, tapi yang di bawah 620px tidak masalah. Bila ini dibangun di HTML, mungkin akan tetap responsif

Langkah 2

Mari pasang beberapa pemandu jadi kita memiliki area aman yang dirancang dengan batas 620px. Pergi ke View > New Guide ... dan tetapkan beberapa panduan di sisi serta panduan di tengah sehingga kita dapat dengan mudah menyelaraskan hal-hal nanti.

Catatan: Panduan yang digunakan untuk tutorial ini: vertikal pada 40px, 80px, 340px, 600px dan 640px.

Petunjuk: Anda juga bisa menggunakan plugin Photoshop GuideGuide untuk membuat proses ini semakin cepat.

Langkah 3

Dengan tetap menggunkan Photoshop etiquette , kita akan menjaga agar segala sesuatunya terorganisir dan karena itu mudah dinavigasi dan diedit. Mari buat tiga kelompok layer bernama "Header", "Message", "Best" dan "Quote". Untuk membuat grup masuk ke Layer > New> Group ... dan berikan masing-masing judul seperti yang disebutkan. Untuk pembuatan grup dengan cepat cukup klik ikon folder.

Mempersiapkan Latar Belakang

Anda seharusnya tidak membuat latar belakang Anda terlalu mewah atau mengganggu karena banyak pengguna email tidak akan melihatnya di layar yang lebih kecil. Juga layak disebutkan adalah bahwa latar belakang seharusnya tidak menjadi gambar karena akan diblokir secara default pada banyak email klien.

Langkah 1

Pertama mari kita atur latar belakang email Ubah warna foreground menjadi biru terang #f6f9fb dan tekan Alt + Backspace untuk mengisi layer "Background". Anda bisa menggunakan warna terang lainnya untuk email Anda, tapi lebih baik memiliki warna halus yang tidak mengalihkan perhatian penerima namun tetap menciptakan suasana hati yang berbeda.

Langkah 2

ekarang saatnya untuk mengatur latar belakang di area aman di mana semua konten email akan diletakkan. Pilih Rectangle Tool (U) dan gambar persegi putih #FFFFFF antara pedoman vertikal pertama dan terakhir yang terpisah 600px.

Merancang Header

Header email kita sangat penting dan merupakan titik penting dimana penerima email akan memutuskan apakah membaca lebih lanjut layak waktu mereka. Menurut  panduan ini oleh Nicole Merlin, pakar email sangat penting, penting untuk menjadi jelas dan transparan.

"Nyatakan pengirimnya, potong kesalahan-kesalahan itu dan langsung ke intinya."

              Untuk tutorial ini saya hanya akan memasukkan nama perusahaan dan hipertaut orang-orang untuk membuka email di situs web jika tidak dimuat dengan benar melalui email klien. Selain itu, saya akan menyertakan gambar besar dengan pesan sederhana yang mengatur suasana hati dan menunjukkan maksud email ini, yaitu tentang liburan bahagia.

Langkah 3

Buka grup "Header" dan pilih Horizontal Type Tool (T). nda mungkin merasa lebih baik menulis nama perusahaan Anda daripada menggunakan logo karena, seperti yang telah saya sebutkan sebelumnya, gambar mungkin dinonaktifkan saat email Anda dibuka sehingga bisa merusak pengalaman karena logo Anda tidak akan terlihat.

Pilihlah font yang Anda gunakan untuk merek Anda dan tuliskan judul perusahaan Anda, letakkan di sisi kiri atas dan berikan beberapa spasi di sekitar. Dalam kasus saya, saya menggunakan Open Sans (Bold) 18px ukuran abu-abu gelap #434343 untuk warna.

Langkah 4

Sangat penting untuk menyediakan hipertaut yang dapat diklik atau tap pengguna dan buka email di situs web mereka jika tidak dilakukan dengan baik di klien email. Hanya hipertaut teks sederhana yang akan melakukan pekerjaan itu, diletakkan di awal sehingga pembaca layar langsung melihatnya. Saya telah menggunakan font Open Sans (Semibold) yang sama dan mengubah warna menjadi abu-abu terang #666666 dan mengurangi ukuran font menjadi 13px. Akhirnya letakkan di sudut kanan atas email.

Langkah 5

Mengagumkan! Sekarang kita perlu menempatkan gambar untuk menarik perhatian penerimanya. Kita akan menggunakan foto bertema Natal, menambahkan beberapa efek gradien dan salinan di atas semuanya.

Ambil Rectangle Tool (U) dan gambarlah kotak berukuran 600x300px antara panduan pertama dan terakhir. Kemudian buat layer baru di atasnya dan tahan tombol Alt dan arahkan tetikus ke layer foto sampai Anda melihat panah kecil menunjuk ke bawah. Bila Anda melihatnya, klik di atasnya dan Anda akan membuat Clipping Mask.  Sekarang pilih Gradient Tool (G) dan pilih gradien default dari merah menjadi hijau.

Sekarang buat gradien dengan menarik tetikus dari kiri atas ke kanan bawah. Anda akan mendapatkan contoh seperti di bawah ini.

Langkah 6

Setelah itu unduh foto Bokeh of String Lights on Tree dari Good Stock Photos dan letakkan di atas layer gradien untuk menciptakan Clipping Mask untuk layer ini juga. Akhirnya tekan CMD+T dan ubah ukuran foto.

Petunjuk pro: tahan tombol Shift untuk menggambar / mengubah ukuran secara proporsional.

Langkah 7

Sekarang atur layer blending mode menjadi Overlay.

Langkah 8

Akhirnya mari kita tulis pesan utama kita. Saya menggunakan #FFFFFF putih dengan tampilan huruf tebal Playfair Display (Bold Italic) 52px yang berani, namun elegan untuk menggambarkan perasaan festive. Saat mendesain newsletters email pastikan agar pesan Anda tetap pendek dan jelas sehingga pengguna bisa mendapatkannya dengan segera.

Merancang Area Pesan

Hal lain yang harus diingat adalah merancang blok yang bisa digunakan kembali. Misalnya kita akan merancang blok pesan ini yang bisa diubah menjadi template sehingga pengguna bisa mengganti tombol headline, main copy dan call to action tanpa memerlukan desainer karena semuanya akan dirancang terlebih dahulu.  Juga mereka bisa menduplikat blok tersebut dan menggunakan pesan yang berbeda.

Langkah 9

Pintar untuk mendesain email Anda dalam satu kolom dan terpusat sejajar sehingga bisa dibuat menjadi tata letak yang responsif dengan mudah. Buka grup "Message" dan pilih Horizontal Type Tool (T). Saya akan menggunakan kembali jenis layer yang digunakan untuk judul perusahaan dan akan meningkatkan ukuran font menjadi 32px dan mengubah berat menjadi Extrabold

Langkah 10

Sekarang saatnya untuk mengatakan sesuatu secara lebih rinci, jangan terlalu lama dan cobalah menarik perhatian pembaca, agar pembaca bisa mengklik tombol call to action yang akan kita rancang sebentar lagi. Menggunakan Horizontal Type Tool (T) yang sama tuliskan salinan Anda, karena saya, saya telah menggunakan warna yang sama seperti pada hipertaut "Open in browser" #666666 dan Open Sans (Regular) berukuran 18px.

Langkah 11

Mengagumkan! Anda memiliki perhatian pembaca dan sekarang saatnya memasang tombol call to action agar email Anda mengarah ke suatu tempat yang berguna. Buat grup baru yang disebut "CTA" dan ambil Rectangle Tool (U), setelah itu ganti warna foreground menjadi warna merah #de1816 yang mewakili mood Natal dan gambarlah bentuk persegi panjang. Dalam kasus saya ukurannya 240x40px. Kemudian pilih Horizontal Type Tool (T) dan masukkan pesan tombolnya.  Saya telah menggunakan ukuran putih #FFFFFF Open Sans (Bold) 14px.

Akhirnya kita perlu menutup blok dengan memisahkannya dengan sebuah garis; atur warna foreground menjadi abu-abu terang #eeeeee and dan pilih Line Tool (U) dengan Weight diatur pada 1px. Setelah itu buat garis horizontal antara pedoman pertama dan terakhir. Biarkan beberapa spasi di atas garis.

Petunjuk Pro: tahan Shift untuk menggambar garis lurus sempurna.

Merancang Area "Terbaik"

Salah satu fitur yang sangat umum dalam email digest newsletters adalah mengirimkan artikel terbaru yang mungkin terlewatkan oleh pembaca atau akan diminati. Saat merancang modul semacam itu, Anda perlu mengingat bahwa itu akan menjadi elemen dinamis sehingga Anda perlu menyiapkannya adegan meninggalkan pencipta email untuk mengganti informasinya.

Langkah 12

Gandakan headline pesan utama yang digunakan sebelumnya dengan menekan CMD+J dan menyeretnya ke grup "Best". Setelah itu, ganti judul dan letakkan di bawah garis secara konsisten, sehingga Anda mempertahankan ritme vertikal.

Langkah 13

Sekarang kita akan daftar beberapa artikel terbaik tahun ini. Untuk tutorial ini saya hanya akan menggunakan gambar artikel, judul dan deskripsi dari Tuts+ Web Design.

Buat grup baru bernama "Article". Ambil Rectangle Tool (U) dan, tahan tombol Shift, gambar kotak berukuran 140x140px. Kemudian pilih gambar artikel dan seret ke jendela Photoshop Anda, setelah itu buatlah Clipping Mask seperti yang kita lakukan sebelumnya dan ubah ukuran gambar jika diperlukan.

Langkah 14

Bagus! Sekarang kita perlu memasukkan judul artikel dan deskripsi singkat sehingga pembaca bisa mendapatkan gambaran singkat sebelum mengklik atau mengetuk. Saya akan menggunakan kembali layer judul utama dengan menduplikatnya dan mengurangi ukuran font dan juga menduplikat layer deskripsi dari grup "Message".

Langkah 15

Minimalkan grup "Article" dan duplikat dua kali lagi dengan menekan CMD+J. Setelah itu pindahkan kelompok duplikat ini di bawah yang pertama dan Anda perlu mengubah judul, gambar dan deskripsi elemen duplikat ini.

Langkah 16

Akhirnya duplikat grup "CTA" dan layer garis dengan memilih mereka dan menekan CMD+J, setelah itu pindahkan layer ini ke dalam grup "Best" dan letakkan di bawah artikel yang menyisakan ruang yang cukup.

Merancang Kutipan dan Footer

Kita sudah sampai dipenghujung tutorial. Mari kita letakkan blok terakhir di newsletter kita, sebuah kutipan inspiratif dengan call to action sekunder untuk melakukan tweet. Praktik terbaik adalah mengulang call to action utama di akhir newsletter, tapi kita akan melanggar peraturan ini di sini dan menggunakan kutipan inspiratif untuk memberi energi kepada pembaca.

Langkah 17

Buka grup "Quote", pilih Horizontal Type Tool (T) dan kutipan apa pun yang Anda suka dari BrainyQuote. Salin kutipannya dan tulislah dengan menggunakan tipografi elegan yang sama seperti yang kita gunakan untuk grafik di bagian paling atas newsletter kita. Dalam kasus saya ini adalah Playfair Display (Italic) ukuran 24px dan warna abu-abu #666666 seperti yang digunakan untuk salinan sebelumnya.

Langkah 18

Pergilah ke situs web Twitter dan salin tombol tweet Ambil screenshot dengan menekan Shift+CTRL+CMD+4 dan pilih tombol tweet. Setelah itu tempelkan dan tempatkan di bawah kutapan. Setelah itu tempelkan dan tempatkan di bawah kutapan.

Langkah 19

Satu hal terakhir. Setiap email newsletter harus memiliki pilihan bagi orang untuk berhenti berlangganan. Hal ini juga baik untuk menyatakan mengapa penerima mendapatkan email. Gunakan kembali hipertaut "Open in browser" dari bagian paling atas, duplikat dan tempatkan di bawah latar belakang konten.

Selamat!

Final product
Desain kita selesai

Itu dia! kita selesai dengan desain tata letak email, sekarang tinjau layer-layer, hapus yang tidak perlu dan serahkan ke pengembang Anda, atau gunakan kode yang Anda buat sendiri yang lebih baik. Saya telah membahas beberapa teknik dasar dan menunjukkan alur kerja saya untuk merancang tata letak email, semoga Anda telah belajar sesuatu.

Saya ingin mendengar masukan Anda dan melihat hasil dari tutorial ini!

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.