Jumat, 20 Desember 2013

Desain sebuah Newsletter Email di Photoshop

Newsletter Email menjadi lebih dan lebih populer dengan bisnis, itu hampir menjadi semacam tren. Hal ini, sejauh ini, salah satu cara yang paling efektif untuk menyebarkan berita tentang dan datang proyek, berita perusahaan, dan hal-hal yang terkait dengan bisnis lain untuk khalayak yang berpotensi besar. Jelas Anda harus memiliki orang-orang di daftar penerima pertama, tetapi bahkan jika Anda hanya memiliki sejumlah kecil penerima, itu tidak masalah.Seorang penonton adalah penonton.

Membuat newsletter Email adalah seperti membuat sebuah website. Kami merancang produk akhir di Photoshop dan kemudian dikirimkan ke pembaca melalui HTML. Bagian pertama ini akan mencakup proses desain membuat email newsletter.
Kesulitan: Pemula - Menengah

Hasil Akhir

Berikut gambar dari apa Newsletter kami akan merancang tampak seperti.

1. Memulai

Mayoritas newsletter yang dikirim melalui email hari ini memiliki lebar tetap daripada tata letak cairan / liquid. Hal ini karena klien email tidak menggunakan lebar penuh layar untuk menampilkan pesan email dan hal terakhir yang Anda inginkan dalam email newsletter adalah scroll bar horisontal. Maka dengan ini dalam pikiran itu umumnya ide yang baik untuk merancang newsletter sekitar lebar 550-600px. Tinggi tidak peduli sebanyak tapi pembaca dapat membaca email pada jendela pratinjau sebelum membuka pesan email yang sebenarnya (saya lakukan) dan jadi itu adalah hal yang baik untuk diingat bahwa rata-rata jendela pratinjau sekitar 30 0-500px tinggi jadi pastikan setiap bit penting dari email berada di daerah ini.

2. Menyiapkan Photoshop

Buka Photoshop dan buat dokumen baru dengan lebar 800px dan h delapan dari 1000px dan resolusi 72pi(pastikan mode warna RGB adalah, juga.)
Isi latar belakang abu-abu terang dengan bagus, saya menggunakan # ebebeb dan menciptakan sebuah wadah dengan lebar 600px diisi dengan putih dan posisi ini di tengah dokumen.

3. Memungkinkan pengguna untuk melihat email di browser pilihan mereka

Itu selalu baik untuk menjaga aksesibilitas dalam pikiran jadi pastikan Anda memberikan pembaca pilihan untuk melihat newsletter di browser web mereka. Hal ini karena tidak semua klien akan men-download gambar dari email secara default, karenanya setiap grafis penting bahwa Anda perlu ditampilkan dalam email berpotensi tidak akan ditampilkan langsung. Jika pengguna ingin ke tampilan pesan penuh (dengan gambar) di klien mereka maka mereka akan harus men-download gambar ke komputer mereka. Ini adalah alasan lain yang baik untuk memberikan pembaca pilihan untuk melihat email di browser web mereka.

4. Membuat header email

Ambil alat Rounded Rectangle (U) dan buat seleksi 560px lebar, 85px tinggi dan radius sudut 10px dan mengisinya dengan abu-abu gelap yang bagus. Kemudian dengan pilihan Made menambahkan judul untuk Newsletter Anda bersama dengan bulan dan beberapa rincian kontak jika Anda inginkan. Ini adalah ide yang baik untuk menggunakan huruf tebal bagus sehingga pembaca dapat dengan jelas melihat apa email yang mereka terima sebenarnya. Untuk alasan ini saya menggunakan Myriad Pro Bold Publikasi untuk segala sesuatu di header.

5. Membuat bagian 'utama' dari newsletter

Bagian utama dari Newsletter kami seperti yang Anda lihat dari preview pada awal posting adalah bagian yang mengatakan pembaca mereka berhak bar gratis dari Monsterchomp. Jadi, mirip dengan apa yang kita lakukan di atas, buat seleksi menggunakan alat Rounded Rectangle (U) dengan tinggi 165px dan lebar 560px dan radius sudut 10px. Kali ini saya menggunakan abu-abu terang untuk warna latar belakang . Dengan placeholder baik, di tempat, pergi ambil gambar dari mencari rakasa awesome. Saya menggunakan rakasa hijau dari Chris Spooner yang Rakasa Gratis Vector pack yang dapat didownload di sini .
Ambil alat Rounded Rectangle (U) dan membuat pilihan yang sama seperti yang telah Anda lakukan (menjaga radius sudut di 10px). Kali ini mengisinya dengan putih sehingga menonjol terhadap abu-abu terang dan teks yang kita tempatkan di dalam akan muncul bagus dan renyah. Sekarang kita perlu membuat rounded rectangle ini menjadi gelembung pidato yang sebenarnya. Ambil Pen Tool (P) memastikan bahwa itu adalah pada 'Shape Layers' mode dan membuat bentuk dengan tiga poin menunjuk ke arah mulut rakasa itu. Bentuknya hampir seperti segitiga siku-siku, kecuali tanpa sudut yang tepat, duh.
Menggunakan Horizontal Type Tool (T), menambahkan beberapa teks di dalam gelembung pidato. Sekali lagi, saya menggunakan Myriad Pro Bold Publikasi. Teks harus mudah dibaca karena ini adalah bagian utama dari email kami.Itu yang kita ingin pengguna perhatian ditarik juga. Setelah Anda menulis pesan, menempatkan beberapa 'teks hukum' di bawah gelembung pidato menggunakan font sans-serif jelas dengan ukuran font 11px.

6. "Bagaimana saya mengklaim bebas Monsterchomp bar saya?"

Sekarang bahwa pengguna telah melihat bahwa mereka berhak mendapatkan bar gratis Monsterchomp mereka ingin tahu bagaimana mereka bisa mengklaim itu. Area konten utama akan 2-kolom. Di sebelah kiri (395px) kita akan memiliki instruksi yang memberitahu pengguna bagaimana mereka dapat mengklaim bar gratis dan di sebelah kanan(155px) kita akan hanya menempatkan beberapa Syarat dan Ketentuan Promosi (yer, moar hal-hal hukum).
Buat judul untuk konten dalam font besar, menjaganya agar tetap renyah. Saya menggunakan Arial untuk semua isi email (saya ingin menjaga wajah font minimal dalam newsletter). Kemudian tambahkan beberapa petunjuk yang jelas memberitahu pengguna bagaimana mereka dapat mengklaim bar gratis mereka.
Buat Rounded Rectangle (U) seleksi lain pada sisi kanan dan mengisinya dengan abu-abu terang. Di dalam sini Anda ingin menempatkan Syarat dan Ketentuan entri. Nah, Anda tidak perlu, aku hanya melakukan ini untuk memberikan gambaran tentang bagaimana merancang sebuah newsletter 2-kolom.

7. Mengirimkan mereka masuk

Menjaga kegunaan dalam pikiran untuk newsletter, kami ingin menjaga hal-hal sederhana. Jadi, sekali pembaca telah melakukan apa yang seharusnya mereka mereka harus mampu untuk mengirimkan entri mereka dengan mudah tanpa ribut-ribut.
Sekali lagi, dengan menggunakan Rounded Rectangle Tool (U) membuat pilihan, mengisinya dengan abu-abu terang bagus. Kami ingin membuat ini tombol untuk pengguna untuk mengklik (menjaga kegunaan dalam pikiran). Jadi, dengan menggunakan Myriad Pro Bold Publikasi (lagi ...), Ketik pesan dalam kotak untuk memberitahu pembaca bahwa ini adalah sebuah tombol dan harus diklik setelah semua instruksi selesai. Untuk membuat teks menonjol sedikit lebih lanjut, Duplicate Layer, mengubah warna teks menjadi putih, posisi itu di bawah lapisan teks utama, memindahkannya 1px 1px ke bawah dan kanan dan kemudian mengurangi opacity sampai Anda merasa nyaman dengan hasilnya.

8. Memberikan pembaca lebih

Kadang-kadang gratis tidak cukup di dunia ini dan pembaca akan menginginkan lebih. Jadi, menawarkan insentif bagi pengguna untuk memasukkan.

9. Memberikan pembaca kemampuan untuk un-berlangganan dari milis

Setiap newsletter perlu memiliki link atau tombol untuk memungkinkan pembaca untuk bebas un-berlangganan dari newsletter. Jadi, menulis pesan di bagian bawah dengan link untuk memungkinkan pengguna untuk un-Subscibe.

Kesimpulan

Inilah yang kita dirancang dalam tutorial ini:

Tidak ada komentar:

Posting Komentar