Siapkan dokumen Photoshop Anda
1 Buat dokumen baru di Photoshop (Ctrl/Cmd + N) menggunakan pengaturan dari gambar berikut.
Mengatur pengaturan unit dan penggaris
2 Pastikan Anda bekerja dalam satuan piksel, yang merupakan satuan tetap standar untuk desain web.
Atur pengaturan berikut untuk Penggaris Anda dari jendela dialog Preferensi (Ctrl/Cmd + K); klik Unit & Penggaris , lalu pastikan Anda telah mengatur semuanya seperti yang ditunjukkan pada gambar di bawah ini.
Tambahkan panduan untuk menentukan area konten
3 Aktifkan Penggaris Photoshop dari Tampilan > Penggaris.
Alihkan visibilitas penggaris dengan menekan “Ctrl/Cmd + R”.
Buka juga panel Info dari Jendela > Info (tombol pintas: F8).
Panel Info memberikan informasi yang berguna tergantung pada alat yang dipilih.
Dengan menekan "M", pilih Rectangular Marquee Tool dan buat kotak selebar 120px dari sudut kiri kanvas. Anda dapat menyesuaikan ukuran dengan melihat panel Info saat membuat pilihan.
Sekarang klik penggaris kiri dan seret pemandu ke kanan seleksi marquee seperti yang ditunjukkan pada gambar di bawah ini.4 Pindahkan seleksi ini ke tepi kanan kanvas. Tetapkan pemandu lain ke sisi kiri seleksi.
Kanvas Anda sekarang akan terlihat seperti ini:
Membuat logo
5 Sekarang kita akan membuat logo untuk situs web kita.
Logonya akan sangat sederhana dan akan memiliki efek gradasi warna. Buat grup baru (Layer > New > Group) dan beri nama “ logo ”.
6 Pilih Horizontal Type Tool (T) dan ketik “ SMASHING ” (atau nama situs web Anda) dengan huruf kapital.
7 Kemudian pada panel Karakter, atur font menjadi Arial , gaya menjadi Bold dan ukuran menjadi 42pt . Atur juga opsi metode anti-aliasing menjadi Sharp dan gunakan warna #101112 .
Anda juga dapat mengatur opsi ini di bilah Opsi saat Type Tool adalah alat yang aktif.
8 Klik dua kali untuk membuka kotak dialog Layer Style. Pilih Gradient Overlay, klik Gradient Editor dan gunakan pengaturan seperti yang ditunjukkan di bawah ini.
9 Letakkan layer jenis "SMASHING" pada jarak 35px dari atas dan 0px dari panduan kiri. Anda dapat melakukannya secara akurat menggunakan Move Tool (V) dan tombol panah. Gandakan layer jenis ini (Layer > Duplicate Layer).
Pindahkan layer duplikat tepat di sebelah kata “SMASHING” dan edit teks menjadi “ Dzine ”. Ulangi Langkah 6, 7, 8 tetapi gunakan warna gradien yang berbeda (Pemberhentian warna kiri: #b27625, Pemberhentian warna kanan: #e5ad27 ) untuk kata “Dzine”.
10 Pilih Horizontal Type Tool (T) dan tambahkan tag line di bawah logo dengan pengaturan berikut.11 Logo akhir akan terlihat seperti gambar di bawah ini. Untuk mengaktifkan/menonaktifkan panduan, buka View > Show > Grid atau gunakan pintasan Ctrl/Cmd + ;
Membuat bilah navigasi
12 Buat grup baru dan beri nama “ navigasi ”, grup ini harus berada di atas grup “logo”.
Tarik garis panduan dari penggaris atas, 150 piksel di bawah tepi atas kanvas. Pilih Rectangle Tool (U) dan gambar garis horizontal setinggi 4 piksel dengan warna #e3ab27 , melintasi kanvas.
13 Tambahkan tautan navigasi setinggi 12px dari garis horizontal ini dan 20px di sebelah kanan panduan kiri. Pilih Rounded Rectangle Tool (U) dan gambar kotak dengan ukuran 72px x 35px .
Pindahkan layer ini ke bawah tautan teks dan beri nama layer “ hover ”.
Luruskan sudut bawah yang membulat dengan Convert Point Tool. Pindahkan sisi tepi yang tidak rata di bawah dengan margin 8px untuk membuat tepinya sama dengan tepi dalam lainnya di bagian bawah. Klik dua kali layer "hover" untuk membuka kotak dialog Layer Style dan tambahkan warna gradien (Pemberhentian warna kiri: #e5ad27 , Pemberhentian warna kanan: #b27625 ).
Pilih Horizontal Type Tool (T), pilih teks, “Home” dan ubah warna menjadi #ffffff (putih).
Membuat bagian “hubungi kami”
14 Selanjutnya kita akan membuat bagian "hubungi kami" di kanan atas desain kita (tepat di sisi yang berlawanan dengan logo). Unduh ikon telepon ini dan letakkan di dekat panduan sebelah kanan.
Beri nama layer ini “ ikon telepon “. Pilih Horizontal Type Tool (T).
Tambahkan nomor telepon di sebelah kiri ikon telepon menggunakan font Arial , dengan ukuran 20pt dan warna #292929 . Tambahkan beberapa teks terkait di bawah nomor telepon menggunakan font Arial , dengan Bold , dengan ukuran 11pt dan warna #595959 .
Membuat header
15 Sekarang kita akan membuat bagian header.
Buat grup baru dan beri nama “ header ”.
16 Pilih Rectangle Tool (U) dan buat bentuk persegi panjang dengan ukuran 1200px x 440px . Letakkan persegi panjang ini pada jarak 1px di bawah bilah navigasi dan beri nama layer ini “ header bg ”. Klik dua kali layer “header bg”, pilih gaya layer Gradient Overlay dan masukkan kedua warna ini ke dalam Gradient Editor (Pemberhentian warna kiri: #2e2226 , Pemberhentian warna kanan: #7a7556 ).
Lihat gambar di bawah ini untuk detail posisi persegi panjang dan warna.17 Buat persegi panjang lain dari Rectangle Tool (U) dengan ukuran 960px x 360px . Letakkan persegi panjang ini pada jarak 40px dari atas layer “header bg” dan 0px dari garis panduan kiri.
Beri nama layer ini “ header container ”. Pratinjau di bawah ini apa yang telah kita lakukan hingga saat ini dengan desain tersebut.
Referensi : https://www.webfx.com/blog/web-design/create-a-clean-and-professional-web-design-in-photoshop/
0 komentar:
Posting Komentar