DESAIN WEB

1. Tata Letak The Fundamentals

Sebelum Anda pergi tentang membuat pop situs web Anda, Anda harus terlebih dahulu memiliki dasar dasar Anda di tempat. Pada tahap ini Anda akan melakukan penelitian, ditata website Anda secara tepat dan melakukan sebagian besar pekerjaan desain dasar, tetapi Anda belum melakukan 'cat'. Dalam tutorial ini kita melihat beberapa teknik diberlakukan untuk situs Web pengiriman coklat, namun teknik ini dapat diterapkan di mana saja.

Pada catatan lain, Anda juga mungkin ingin membaca tentang proses desain logo untuk logo UKE Anda lihat di bawah.

2. Cek Keselarasan & Spacing

Keselarasan dan jarak dalam desain situs web menciptakan ketertiban, mengatur halaman dan kelompok-kelompok bagian dari situs web untuk navigasi yang mudah. Pada gambar di bawah Anda dapat melihat pedoman di tempat memastikan semuanya sejalan (grid dari www.960.gs ). Perhatikan bagaimana logo dan semua teks kiri sejajar? Juga, perhatikan bahkan jarak sekitar kotak dan teks. Gunakan panduan di Photoshop untuk memastikan semua elemen Anda sejajar yang dapat dilakukan dengan menyeret 'penguasa' dari tab penguasa Anda. Tekan Ctrl + R untuk mengubah penguasa di.

3. Terapkan Anti-Aliasing Untuk Teks

Sesuatu yang sering lebih tampak ketika merancang untuk web adalah penggunaan Anti-Aliasing dalam teks Anda. Bagi mereka yang tidak tahu, anti-aliasing adalah teknik meminimalkan distorsi artefak. Ada beberapa cara untuk meminimalkan distorsi ini dalam teks Anda tapi cara terbaik adalah dengan menggunakan 'Character' panel Anda. Anda dapat memilih antara None, Sharp, Crisp, kuat dan halus. Cara terbaik untuk melihat apa yang terbaik adalah untuk bereksperimen font yang berbeda dan ukuran akan menghasilkan hasil yang berbeda, namun, pengaturan tajam biasanya berlaku.

4. Tambahkan Stroke 1 Pixel

Sesuatu yang benar-benar membuat perbedaan dalam membuat pop situs web adalah penggunaan 1 pixel perbatasan membelai dan garis. Ini perbatasan membelai benar-benar menambahkan bahwa kerenyahan ekstra untuk desain karena memberikan kontras ekstra untuk elemen sekitarnya dan memberikan desain lebih mendalam. Perhatikan screenshot memperkecil-in di bawah ini; melihat bagian dalam garis ungu yang berjalan di samping dalam kotak? Anda dapat menambahkan 1 perbatasan tersebut pixel dengan menggunakan opsi stroke yang Anda ditemukan di panel 'Blending Options'. Teknik ini juga bekerja baik untuk teks besar.

5. Tambahkan Halus Gradient Effects

Gradien bermunculan di mana-mana dalam desain web dan karena suatu alasan - mereka menambahkan kedalaman dan estetika nyata untuk desain. Tidak seperti desain cetak di mana gradien tampak datar, pada layar mereka membuat desain menjadi hidup. Perhatikan sedikit gelap ke terang ungu gradien pada gambar di bawah? Juga mencatat transparansi sedikit. Efek ini memberikan desain dimensi baru, membuat gambar datang dari layar sehingga untuk berbicara. Gunakan 'Blending Options' di Photoshop untuk membuat ini halus bagus (penekanan pada halus) efek.