Membuat desain web profesional di Photoshop
Hello Sobat Grafisnesia kali ini saya akan membagikan artikel Cara membuat desain web profesional di Photoshop, Merancang desain web yang menarik, bersih, dan fungsional adalah bagian penting dari kehidupan seorang desainer web.
Dalam tutorial ini kita akan membuat desain web yang bersih dan profesional di Photoshop dari awal. Sepanjang jalan, Anda dapat mempelajari metode yang berguna untuk membuat desain. Jadi mari kita mulai
Berikut langkah langkahnya :
Mockup
Sebelum kita mulai mendesain, kita perlu merencanakan persyaratan, tampilan dan nuansa, dan fungsionalitas. Kami kemudian perlu menanamkan ide-ide ini ke dalam desain untuk mengeksekusinya secara visual.
Mockup dan wireframe sangat berguna untuk membuat desain dengan banyak fleksibilitas. Ini adalah praktik yang baik dan sangat direkomendasikan di industri.
Saya mengumpulkan yang di bawah hanya menggunakan nada abu-abu. Dengan cara itu kami menghapus warna dari pemandangan pada saat ini. Sehingga kita bisa berkonsentrasi pada desain secara keseluruhan dan menghindari kesalahan warna.
Itu memberi banyak kebebasan untuk mengubah dan mengatur ulang hal-hal dengan cepat. Mockup bisa sedetail yang Anda suka. Untuk tujuan ini saya pergi dengan yang di bawah ini. Secara singkat mendefinisikan tata letak dan apa yang terjadi di mana.
Konfigurasikan kanvas
Jadi kami memiliki cetak biru untuk desain kami. Mari kumpulkan desainnya!
Kita akan membuat tata letak dengan lebar 960 piksel. Buat dokumen baru dengan ukuran 1200 x 1500.
Ini adalah tata letak lebar 960px, jadi kita perlu menentukan area kerja dengan menambahkan panduan. Tekan Ctrl+A untuk memilih seluruh dokumen.
Pergi ke Select > Transform Selection. Kurangi seleksi hingga lebar 960 piksel. Itu adalah area kerja desainer.
Tambahkan garis panduan ke seleksi.
Kita perlu membuat padding antara border dan konten yang akan kita tambahkan nanti! Dengan seleksi aktif kembali, pilih Transform Selection.
Ubah ukuran seleksi menjadi lebar 920 piksel. Itu berarti 20 piksel padding di setiap sisi dengan total 40 piksel padding.
Tambahkan panduan ke pilihan.
Buat Header
Mari buat Header desain! Tentukan pilihan setinggi 465 piksel.
Isi seleksi dengan nilai abu-abu terlebih dahulu dan kemudian gunakan Layer Styles untuk menambahkan warna dan gradien.
Ikuti ini di seluruh tata letak untuk mempertahankan hierarki visual.
Tambahkan gradien ke tajuk. Klik dua kali thumbnail layer. Pilih Hamparan Gradien. Buat gradien 2 warna di bawah ini. Gunakan pengaturan.
Akan terlihat seperti ini
Selanjutnya, Anda perlu menambahkan sorotan ke tajuk. Buat layer baru dengan menekan Ctrl+Alt+Shift+N.
Pilih sikat lembut dengan diameter 600px. Pilih #19535a untuk warna kuas. Cukup klik sekali di tengah tajuk.
Tentukan pilihan dari atas yang tingginya 110px.
Tekan tombol Hapus untuk menghapus bagian yang dipilih. Itu terlihat di bawah ini.
Perkecil secara vertikal dengan menekan Ctrl+T.
Kita perlu memastikan bahwa titik sorotan berada tepat di tengah header. Pilih layer, tajuk dan sorot dan tekan “V” untuk beralih ke Move Tool.
Pada Panel Opsi, pilih tombol Align Horizontal Centers.
Buat layer baru, gambar garis sorotan satu piksel dengan Alat Pensil dengan warna #01bfd2.
Sembunyikan tepi dengan halus menggunakan topeng gradien. Pilih Gradient Tool, buat gradien di bawah di Panel Opsi.
Terapkan gradien sebelumnya.
Membuat pola tekstur
Sekarang buat pola kotak-kotak sederhana dan terapkan ke header. Pilih Alat Pensil, atur ukuran kuas menjadi 2 piksel, dan tambahkan dua titik sentuh di sudut.
Matikan latar belakang dan pilih titik. Pilih Edit > Tentukan Pola.
Buat layer baru dan letakkan di bawah layer yang disorot. Pilih area yang ingin kita terapkan polanya.
Tekan Shift+F5 untuk memuat dialog Isi. Pilih pola yang baru saja dibuat. Dan tidak apa-apa.
Seleksi diisi dengan pola. Lihat lebih dekat.
Padukan pola dengan mulus ke dalam header. Tambahkan layer mask ke layer pola. Pilih kuas lembut dan cat dengan kuas lembut besar. Pilih #ffffff untuk warna kuas.
Kurangi Opacity kuas menjadi 60% dan cat. Jika Anda merasa terlalu kuat, sesuaikan opasitas layer satu per satu.
tercampur dengan baik.
Tambahkan logo
Latar belakangnya cukup lengkap. Sekarang tambahkan jenis logo. Sebelum menambahkan jenisnya, tambahkan sorotan di belakang logo.
Pilih sikat lembut dengan #19535a. tambahkan poin
Tambahkan Jenis. Font yang saya gunakan adalah “Bebas”. Unduh secara gratis.
Terapkan efek halus ke logo.
Navigasi
Tambahkan tautan navigasi.
Klik dua kali pada thumbnail layer, pilih Gradient Overlay. Gunakan pengaturan ini.
Penggeser konten
Tentukan pilihan 580 x 295 piksel.
Isi seleksi dengan warna abu-abu.
Bawa gambar yang ingin Anda gunakan. Klip ke lapisan dasar yang kita buat di atas.
Sekarang tambahkan efek bayangan ke penggeser. Buat lapisan baru. Pilih alat Kuas, atur diameter menjadi 400 piksel. Cara membuat desain web profesional di Photoshop
Baca juga : Cara Membuat Logo Pemerintah Desa
Buka palet Brushes, kurangi kebulatannya. Gunakan pengaturan di bawah ini.
Atur warna kuas ke #000000 dan tambahkan titik.
Terapkan beberapa Gaussian Blur untuk melembutkan tepinya.
Pilih bagian bawah bayangan dan hapus.
Ubah posisi bayangan tepat di atas penggeser.
Saya mengecilkannya secara vertikal. Kemudian sejajarkan di tengah dengan penggeser. Pilih kedua layer, dan di Panel Opsi, klik tombol Align Horizontal Centers.
Gandakan bayangan dan putar secara vertikal. Letakkan di tepi bawah penggeser.
Buat tombol slider dengan Rectangular Marquee Tool. Isi #000000.
Turunkan tombol Opacity menjadi 50%
Buka Bentuk Otomatis dari Panel Opsi dan pilih panah ini. Tambahkan ke tombol.
Tambahkan strip. Isi dengan #000000.
Turunkan Opacity menjadi 50%.
Di sini kita dapat menambahkan deskripsi tentang proyek.
Tambahkan beberapa baris sambutan
Berikut adalah sambutan dan deskripsi situs web.
Penyelesaian Header
Kami hampir menyelesaikan Header. Mari tambahkan efek bayangan halus untuk menyelesaikannya!
Buat bayangan seperti yang kita buat sebelumnya menggunakan alat kuas.
Tinggalkan celah 1px antara header dan bayangan.
Terapkan gradien ke latar belakang
Buat gradien abu-abu muda ke putih.
Buat layer baru di bawah header dan terapkan gradien.
Tambahkan kontrol rotasi slider
Buat kontrol rotasi.
Terapkan Inner Shadow ke kontrol untuk menunjukkan elemen aktif saat ini di slider.
Buat pembagi konten
Pilih Alat Pensil dan gambar garis 1 piksel. Pilih abu-abu muda (#aaaaaa).
Sembunyikan tepi dengan halus menggunakan topeng gradien.
Tambahkan konten utama
Waktu untuk masuk ke bagian konten yang sebenarnya. Ini adalah tata letak 3 kolom. Kita perlu membuat 3 kolom yang sama dengan beberapa bantalan di antaranya.
Saya melakukan perhitungan sederhana dan membagi ruang yang tersedia menjadi 3 kotak dengan lebar yang sama dengan padding 25px di antaranya.
Tambahkan garis panduan ke kotak. Kemudian hapus kotak. Dan ini kolomnya.
Tambahkan beberapa layanan unggulan. Masukkan ikon dari kumpulan ikon fungsi. Jaga jarak antar objek secara merata.
Mari buat tombol “Read More” sederhana. Pilih Rounded Rectangle Tool untuk menggambar bentuk. Pastikan itu adalah layer bentuk.
Terapkan hamparan gradien dan sapukan ke tombol.
Gandakan tombolnya.
Kami akan menambahkan beberapa item pekerjaan terbaru. Saya telah menggambar tiga kotak pendukung gambar dan menerapkan goresan 3px.
Potong gambar di dalam kotak.
Saya membuat bayangan seperti yang kita lakukan sebelumnya dan meletakkannya di bawah kotak.
Tambahkan beberapa deskripsi proyek.
Mari kita buat Umpan Twitter. Jatuhkan ikon burung Twitter.
Menambahkan pengumuman Twitter.
Buat tombol untuk Tweet Lainnya.
Terapkan gaya-gaya ini.
Pembuatan dan penyelesaian footer
Tentukan pilihan untuk footer dan isi dengan nilai abu-abu.
Terapkan overlay warna.
Terakhir, tambahkan navigasi footer dan informasi hak cipta. Dan itu mengakhiri sesi. Lihatlah gambar akhir.
Hasil Akhir
Terima kasih telah membaca artikel! Kami harap Anda menemukan tutorial ini bermanfaat dan kami ingin mendengar tanggapan Anda di bagian Komentar di bawah