Desain Layout Blog yang Bersih dan Elegan Di Photoshop CS6

Dalam tutorial ini saya akan menunjukkan kepada Anda proses membuat blog desain yang sederhana dan bersih menggunakan Photoshop terbaru. Kami akan menggunakan yang baru Gaya Karakter dan Gaya Paragraf untuk membantu kami merampingkan proses.

Untuk mengikuti tutorial ini, Anda akan membutuhkan sumber daya berikut:

Gratis Font Sansation dari Bernd Montag.
26 Pola Pixel Berulang dari PSDfreemium.
Ikon Media Sosial Gratis dari Daniele Selvitella.

Demo

Mempersiapkan Kanvas

Langkah 1

Dalam desain ini, kita akan menggunakan 960 gs sebagai kerangka kerjanya. Unduh template dari halaman utamanya dan di dalam file zip, cari file photoshop. Buka file '12 Column Grid 'di Photoshop.

Klik ikon mata untuk lapisan Kotak 12 Col untuk menyembunyikannya; kita tidak akan membutuhkannya untuk saat ini.

Langkah 2

Ukuran kanvas saat ini terlalu kecil. Klik Gambar> Ukuran Kanvas (atau Ctrl + Alt + C). Tambahkan ukuran yang lebih besar dan pastikan untuk mengatur titik jangkar ke tengah.

Langkah 3

Tekan Ctrl + R untuk mengungkapkan penggaris. Klik Lihat> Baru Panduan untuk membuat panduan baru yang akan membantu kami mendesain secara akurat. Memilih Vertikal dan pada Posisi: 185 px untuk membuat panduan vertikal 185 px dari sudut kiri atas kanvas.

Langkah 4

Gambarlah panduan vertikal lain di posisi 150 px, 1095 px dan 1130 px.

Di bawah ini adalah panduan terakhir kami di dalam kanvas.

Mempersiapkan Tema Warna

Langkah 5

Untuk desain ini, kita akan menggunakan kombinasi warna yang bagus dari Colorlouver. Klik tautan Pratinjau untuk membuka kombinasi warna sebagai file jpeg.

Simpan kombinasi warna dan letakkan di dalam file Photoshop. Dengan menempatkan gambar langsung di dalam kanvas kita dapat mencicipi warnanya lebih cepat dan lebih mudah.

Mempersiapkan Latar Belakang

Langkah 6

Memilih Latar Belakang lapisan dan klik ikon kunci di bagian atas panel Layers untuk membukanya. Klik dua kali gambar kecil untuk mengubah warnanya.

Klik warna kedua, # 948371, untuk memilihnya.

Langkah 7

Gambarlah bentuk persegi panjang di atas kanvas. Ini akan menjadi latar belakang kedua.

Langkah 8

Tetap pilih bentuk. Dalam Bilah Opsi, Buka Mengisi Warna kotak dan kemudian klik ikon roda warna. Ketika kotak dialog Color Picker dibuka, klik warna pertama untuk memilihnya. Untuk itu Pukulan pilih warna Tidak ada.

Langkah 9

Buat layer baru dan kemudian pilih kanvas atas menggunakan alat tenda persegi panjang. Aktifkan alat gradien dan isi dengan radial gradien dari putih ke hitam. Pastikan gradien berada di tengah atas kanvas.

Ubah Campur mode untuk Layar dan mengurangi nya Kegelapan untuk 37%.

Langkah 10

Buat layer baru dan beri nama 'bayangan'.

Gambarlah seleksi persegi panjang di bagian bawah latar belakang sekunder seperti yang ditunjukkan. Klik Edit: Isi. Set Menggunakan untuk Hitam. Klik baik untuk mengisi seleksi dengan warna hitam.

Langkah 11

Lembutkan menggunakan Gaussian Blur. Klik Filter> Blur> Gaussian Blur.

Langkah 12

Tahan Alt lalu tempatkan kursor di antara bayangan dan latar belakang atas lapisan. Tanpa melepaskan tombol Alt, klik untuk ubah layer menjadi Clipping Mask. Dengan mengonversinya menjadi Kliping Topeng, bayangan sekarang masuk ke dalam latar belakang atas.

Langkah 13

Turunkan bayangan Kegelapan untuk 50% untuk membuatnya halus. Di bawah, Anda dapat melihat hasilnya dalam pembesaran 100%.

Langkah 14

Itu selalu merupakan ide yang baik untuk menempatkan lapisan-lapisan ini dalam satu kelompok. Untuk melakukan ini, pilih semua lapisan dan kemudian klik Ctrl + G.

Header

Langkah 15

Gambar persegi panjang di kanvas atas seperti yang ditunjukkan.

Langkah 16

Dalam Bilah Opsi, set Pukulan warna untuk # af9f8e.

Langkah 17

Untuk itu Mengisi warna, pilih gradien linier dari # d0c4b9 hingga # a89c91.

Di bawah ini adalah hasil dalam tampilan 100%.

Nama Situs

Langkah 18

Tambahkan nama situs di sisi kiri desain. Amati penempatan seperti yang ditunjukkan di bawah ini. Klik dua kali teks dan tambahkan Drop Shadow. Untuk font-nya, gunakan Sansation.

Menggunakan Gaya Karakter

Langkah 23

Mari kita simpan pengaturan karakter sebagai Gaya Karakter. Fitur ini adalah versi Gaya Karakter yang disederhanakan di InDesign. Untuk menyimpannya, aktifkan teks lalu klik ikon 'Gaya Karakter Baru'.

Klik dua kali Gaya Karakter baru dan gunakan pengaturan berikut.

Langkah 24

Pilih menu lain dan kemudian klik Gaya Karakter untuk menerapkannya. Jika Anda menemukan tanda tambah di sebelah Gaya Karakter itu berarti karakter tersebut memiliki pengaturan yang berbeda. Untuk mengganti pengaturan, klik ikon panah melingkar.

Langkah 25

Ulangi langkah sebelumnya untuk membuat Gaya Karakter baru untuk menu aktif.

Langkah 26

Jadi, apa gunanya menggunakan Gaya Karakter? Gaya Karakter membantu kami memusatkan pengaturan karakter. Kita cukup mengedit Gaya Karakter untuk mengedit setiap teks menggunakan gaya itu. Lihat contoh di bawah ini. Jika kita mengedit jenis font di dalam Character Style Menu Top - Normal ke Corbel, semua menu normal secara otomatis diubah ke Corbel.

Langkah 27

Buat layer baru dan letakkan di bawah bilah menu. Ctrl-klik bilah menu untuk membuat pilihan baru berdasarkan bentuknya. Isi dengan hitam.

Langkah 28

Hapus seleksi menggunakan Ctrl + D. Lembutkan dengan menambahkan Gaussian Blur, Filter> Blur> Gaussian Blur.

Slider

Langkah 29

Gambarlah bentuk persegi panjang dengan lebar 10 kolom (lihat di bawah).

Untuk itu Isi warna memilih # dfd1c2. Untuk itu Pukulan memilih # c8baac dengan ukuran 10 pt. Klik panah dropdown kecil di sebelah pratinjau baris dan pastikan Sejajarkan Di Dalam dipilih.

Langkah 30

Rekatkan gambar di atas bingkai. Konversikan ke Masker Kliping dengan menekan Ctrl + Alt + G. Gambar akan secara otomatis masuk ke dalam bingkai slider. Jika perlu, Anda dapat memindahkan dan mengubah ukuran gambar tanpa mempengaruhi bingkainya.

Langkah 31

Gambarlah bentuk persegi panjang lain di belakang slider dengan warna yang sama. Pastikan untuk memasangnya ke panduan terluar. Menambahkan Layer Style> Pattern Overlay menggunakan pola pixel dari PSDfreemium. Nada bawahnya Kegelapan untuk membuatnya halus.

Langkah 32

Gambarkan bentuk persegi panjang di atas bentuk dengan Isi: # b3aca5 dan tanpa Stroke. Tekan Ctrl + T dan kemudian putar 45 °. Ubah bentuk layer menjadi Masker Kliping.

Langkah 33

Gandakan bentuk dan ubah ukurannya. Ubah Mengisi ke warna yang lebih gelap. Ubah bentuk layer menjadi Masker Kliping.

Langkah 34

Ulangi langkah yang sama untuk menggambar panah lain di sisi lain.

Langkah 35

Ctrl-klik bingkai slide untuk membuat pilihan baru. Buat layer baru dan ubah menjadi Masker Kliping. Isi seleksi dengan hitam.

Langkah 36

Hapus centang (Ctrl + D) lalu melunakkan itu menggunakan Gaussian Blur.

Anda dapat mengurangi Opacity bayangan jika diperlukan.

Langkah 37

Gambarkan persegi panjang bulat di sudut slider dengan Isi # c8baac.

Langkah 38

Gambarlah sebuah lingkaran di dalam bentuk. Atur Pukulan untuk hitam dengan Ukuran 1 pt dan hapus Isi.

Langkah 39

Pilih menu lingkaran jalan menggunakan Pemilihan Jalur alat. Shift + Alt-drag path untuk menduplikatnya.

Ulangi ini untuk menggambar lebih banyak lingkaran.

Langkah 40

Pilih salah satu jalur lingkaran. Tekan Ctrl + Shift + J untuk memotongnya ke layer baru.

Langkah 41

Dalam Bilah Opsi, hapus Pukulan dan ubah Mengisi ke a radial gradien dari # e38989 hingga # bb5c5c. Menambahkan Layer Style> Outer Glow dan Drop Shadow.

Langkah 42

Gambar pilihan elips di bawah slider. Buat layer baru dan isi dengan hitam.

Langkah 43

Batalkan pilihan (Ctrl + D). Lembutkan dengan menggunakan Gaussian Blur.

Latar Belakang Bawah

Langkah 44

Gambarlah bentuk persegi panjang lain untuk latar belakang bawah. Gunakan hal yang sama Mengisi dan Pukulan warna sebagai bentuk slider.

Seperti biasa, berhati-hatilah dengan penempatannya. Kami ingin menutupi setiap panduan di kanvas.

Menambahkan Layer Style> Pattern Overlay.

Di bawah ini adalah hasil pembesaran 100%.

Langkah 45

Pilih area uper menggunakan alat Rectangular Marquee.

Langkah 46

Buat layer baru, letakkan di belakang bentuk. Isi seleksi dengan hitam. Tekan Ctrl + T, klik kanan dan pilih Perspektif.

Seret sudut atasnya ke luar.

Klik kanan lagi dan pilih Skala. Seret gagang atas ke bawah.

Klik kanan dan pilih Melengkung. Seret segmen kiri dan kanan ke dalam.

Lembutkan dengan menggunakan Gaussian Blur.

Nada bawah Kegelapan untuk 20%.

Langkah 47

Gambar kotak putih di dalam latar belakang. Ini akan menjadi latar belakang untuk konten utama situs.

Tambahkan spasi 10 px ke sisi kiri, kanan dan atas latar belakang. Spasi harus mudah karena kami telah membuat panduan di langkah awal. Menambahkan Layer Style> Outer Glow.

Langkah 48

Tambahkan panduan baru, 25 px dari sisi atas bentuk.

Judul bagian

Langkah 49

Tambahkan Gaya Karakter baru untuk judul bagian halaman dan deskripsinya.

Tambahkan judul bagian dan deskripsinya menggunakan Type tool. Terapkan gaya yang telah kami buat sebelumnya. Pastikan untuk menambahkan ruang 25 px dari sisi atas latar belakangnya dengan bantuan dari panduan yang dibuat sebelumnya.

Langkah 50

Buat garis 5 px di bawah deskripsi situs dengan Isi: # 938270 dan Stroke: Tidak ada.

Posting Blog

Langkah 51

Buat Gaya Karakter lain untuk judul posting.

Langkah 52

Tambahkan judul tulisan dan terapkan Gaya Karakter sebelumnya.

Langkah 53

Gambarlah bentuk persegi panjang di bawah judul dengan lebar 4 kolom. Set putih untuk itu Mengisi dan #bebebe untuk itu Pukulan. Menambahkan Layer Style> Stroke.

Langkah 54

Tempel gambar di atas bentuk. Konversikan ke Clipping Mask (Ctrl + Alt + G).

Langkah 55

Gambarlah persegi panjang bulat Isi: # 8e8380 dan Stroke: Tidak ada. Konversikan ke Masker Kliping.

Langkah 56

Buat Gaya Karakter baru untuk metadata blog.

Langkah 57

Tambahkan teks metadata di atas bentuk dan terapkan Gaya Karakter yang telah kita buat sebelumnya.

Langkah 58

Mengaktifkan Mengetik alat dan klik-tarik untuk membuat kotak teks. Atur lebarnya menjadi 4 kolom. Klik Jenis> Tempel Lorem Ipsum untuk mengisinya dengan Lorem Ipsum yang dibuat secara otomatis dari Photoshop.

Langkah 59

Buat Gaya Paragraf baru untuk konten karakter. Klik pada ikon baru pada panel Gaya Paragraf.

Klik dua kali Gaya Paragraf dan gunakan pengaturan berikut ini.

Langkah 60

Terapkan gaya ini ke konten posting. Anda juga dapat bereksperimen dengan pengaturan Indent dan Spacing-nya.

Untuk desain web, nonaktifkan Hyphenation.

Langkah 61

Gambarlah persegi panjang bulat Isi: # 8e8380 dan Stroke: Tidak ada. Menambahkan Layer Style> Pattern Overlay. Untuk konsistensi, gunakan pola yang sama seperti pada slider.

Langkah 62

Tambahkan label tombol. Saya sarankan Anda untuk menyimpannya sebagai gaya karakter. Dengan cara ini, kita dapat menggunakannya dengan mudah untuk tombol lain.

Langkah 63

Tombol sebelumnya adalah untuk kondisi normal. Mari kita duplikat dan ubah warnanya menjadi # f76b6a. Juga, atur jenis labelnya menjadi tebal.

Langkah 64

Tempatkan posting di dalam grup dan tekan Ctrl + J untuk menduplikatnya. Alt-drag untuk menduplikasi grup.

Ulangi langkah yang sama untuk membuat lebih banyak posting. Ingatlah untuk mengubah gambar dan judul setiap posting.

Langkah 65

Duplikat Baca lebih lajut tombol dan ubah labelnya menjadi angka. Kami akan menggunakannya untuk navigasi halaman. Ingatlah untuk mengatur salah satu tombol untuk mengarahkan kondisi.

Langkah 66: Footer

Mari kita mulai mengerjakan footer. Tambahkan judul widget dan deskripsinya.

Langkah 67

Tambahkan tautan dan buat garis 1 px di bawahnya. Set Isi: Tidak Ada dan Stroke: # 8e8380.

Langkah 68

Klik Opsi lanjutan tombol dan pilih garis putus-putus.

Langkah 69

Tambahkan lebih banyak tautan ke widget.

Langkah 70

Gandakan widget.

Langkah 71

Kita juga perlu menambahkan kondisi hover. Atur salah satu tautan menjadi tebal.

Di bawah tautan aktif itu, tambahkan garis 5 px. Atur warnanya menjadi # f76b6a. Untuk konsistensi, tampilan tautan ini mirip dengan menu aktif pada bilah menu.

Langkah 72

Tambahkan persegi panjang lain di area bawah. Atur Mengisi untuk # 3d3123.

Informasi Footer

Langkah 73

Tambahkan info footer menggunakan Mengetik alat. Berikan itu gelap Drop Shadow untuk menambahkan kontras ke latar belakangnya.

Jaringan sosial

Langkah 74

Tambahkan beberapa ikon media sosial dari Daniele Selvitella. Menambahkan Layer Style> Outer Glow.

Langkah 75

Tekan ikon normal ke bawah 50%. Untuk kondisi melayang, mari kita simpan saja Kegelapan di 100%.

Langkah 76

Ambil ikon kursor tangan gratis dan letakkan kursor tangan terkecil di atas tautan aktif atau arahkan kursor.

Hasil akhir

Ini adalah hasil akhir kami. Anda dapat melihat bahwa versi Photoshop terbaru memiliki beberapa fitur menarik untuk mendesain tata letak web. Gaya Karakter dan Gaya Paragraf adalah peningkatan signifikan bagi setiap perancang web.

Demo
Sumber Unduhan