Reka Bentuk Blog Bersih dan Elegan Di Photoshop CS6

Dalam tutorial ini saya akan menunjukkan kepada anda proses membuat blog reka bentuk yang ringkas dan bersih menggunakan Photoshop terkini. Kami akan menggunakan yang baru Gaya Watak dan Gaya Perenggan untuk membantu kami menyelaraskan proses.

Untuk mengikuti tutorial ini, anda memerlukan sumber-sumber berikut:

Free Font Sansation dari Bernd Montag.
26 Corak Pixel Ulang dari PSDfreemium.
Ikon Media Sosial Percuma dari Daniele Selvitella.

Demo

Menyediakan Kanvas

Langkah 1

Dalam reka bentuk ini, kita akan menggunakan 960 gs sebagai rangka kerja. Muat turun templat dari halaman utamanya dan dalam fail zip, cari fail photoshop. Buka fail '12 Column Grid 'di Photoshop.

Klik ikon mata untuk lapisan 12 Grid Lap untuk menyembunyikannya; kita tidak akan memerlukannya sekarang.

Langkah 2

Saiz kanvas saat ini terlalu kecil. Klik Imej> Saiz Kanvas (atau Ctrl + Alt + C). Tambah saiz yang lebih besar dan pastikan anda menetapkan titik utama ke pusat.

Langkah 3

Tekan Ctrl + R untuk mendedahkan penguasa. Klik Lihat> Baru Panduan untuk membuat panduan baru yang akan membantu kami merancang dengan tepat. Pilih Menegak dan pada Kedudukan: 185 px untuk membuat panduan menegak 185 px dari sudut kiri atas kanvas.

Langkah 4

Lukis lagi panduan menegak pada kedudukan 150 px, 1095 px dan 1130 px.

Berikut adalah panduan terakhir kami di dalam kanvas.

Menyediakan Tema Warna

Langkah 5

Untuk reka bentuk ini, kami akan menggunakan kombinasi warna yang bagus dari Colorlouver. Klik pada pautan Pratonton untuk membuka kombinasi warna sebagai fail jpeg.

Simpan kombinasi warna dan letakkan di dalam fail Photoshop. Dengan meletakkan imej secara langsung di dalam kanvas, kita boleh mencuba warna lebih cepat dan lebih mudah.

Menyediakan Latar Belakang

Langkah 6

Pilih Latar Belakang lapisan dan klik ikon kunci di atas panel Lapisan untuk membuka kuncinya. Klik dua kali lakaran kecil untuk menukar warna.

Klik warna kedua, # 948371, untuk memilihnya.

Langkah 7

Lukis bentuk segi empat tepat di atas kanvas. Ini akan menjadi latar belakang kedua.

Langkah 8

Pastikan bentuk yang dipilih. Di dalam Bar Pilihan, buka Isi Warna kotak dan kemudian klik ikon roda warna. Apabila kotak dialog Color Picker dibuka, klik warna pertama untuk memilihnya. Untuk itu Strok pilih warna Tiada.

Langkah 9

Buat lapisan baru dan kemudian pilih kanvas atas menggunakan alat marquee segi empat tepat. Aktifkan alat kecerunan dan isi dengannya radial kecerunan dari putih ke hitam. Pastikan kecerunan berpusat di atas kanvas.

Tukar Campurkan mod kepada Skrin dan mengurangkannya Kelegapan kepada 37%.

Langkah 10

Buat lapisan baru dan namakannya 'bayangan'.

Lukis pemilihan segi empat tepat di bahagian bawah latar belakang sekunder seperti yang ditunjukkan. Klik Edit: Isi. Tetapkan Guna kepada Hitam. Klik okey untuk mengisi pemilihan dengan hitam.

Langkah 11

Melembutkannya menggunakan Gaussian Blur. Klik Tapis> Blur> Gaussian Blur.

Langkah 12

Tahan Alt dan kemudian letakkan kursor di antara bayangan dan latar belakang atas lapisan. Tanpa melepaskan kekunci Alt, klik untuk tukar lapisan ke Clipping Mask. Dengan menukarkannya kepada Clipping Mask, bayangan kini masuk ke dalam latar belakang atas.

Langkah 13

Bawa bayangan Kelegapan kepada 50% untuk menjadikannya halus. Di bawah ini, anda boleh melihat keputusan dalam pembesaran 100%.

Langkah 14

Adalah idea yang baik untuk meletakkan lapisan ini dalam satu kumpulan. Untuk membuat ini, pilih semua lapisan dan kemudian klik Ctrl + G.

Kepala

Langkah 15

Lukiskan segi empat tepat pada kanvas atas seperti yang ditunjukkan.

Langkah 16

Di dalam Bar Pilihan, ditetapkan Strok warna kepada # af9f8e.

Langkah 17

Untuk itu Isi warna, pilih kecerunan linear dari # d0c4b9 ke # a89c91.

Berikut adalah hasil dalam 100% pandangan.

Nama Tapak

Langkah 18

Tambahkan nama tapak di sebelah kiri reka bentuk. Perhatikan penempatan seperti ditunjukkan di bawah. Klik dua kali teks dan tambahkan Drop Shadow. Untuk fonnya, gunakan Sansation.

Menggunakan Gaya Watak

Langkah 23

Mari kita simpan tetapan watak sebagai Gaya Watak. Ciri ini merupakan versi Gaya Aksara yang dipermudahkan dalam InDesign. Untuk menyimpannya, aktifkan teks dan kemudian klik ikon 'Gaya Watak Baru'.

Klik dua kali Gaya Watak yang baru dan gunakan tetapan berikut.

Langkah 24

Pilih menu lain dan kemudian klik Gaya Watak untuk memohon. Jika anda mencari tanda tambah bersebelahan dengan Gaya Watak ia bermakna bahawa watak itu mempunyai tetapan yang berbeza. Untuk mengatasi tetapan, klik ikon anak panah bulat.

Langkah 25

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

Langkah 26

Jadi, apakah gunanya menggunakan Gaya Watak? Gaya Watak membantu kami memusatkan tetapan aksara. Kami hanya boleh mengedit Gaya Watak untuk mengedit setiap teks menggunakan gaya itu. Lihat contoh di bawah. Jika kami mengedit jenis fon di dalam Gaya Watak Menu Teratas - Biasa ke Corbel, semua menu biasa secara automatik ditukar kepada Corbel.

Langkah 27

Buat lapisan baru dan letakkannya di bawah bar menu. Ctrl-klik bar menu untuk membuat pemilihan baru berdasarkan bentuknya. Isikan dengan hitam.

Langkah 28

Keluarkan pemilihan menggunakan Ctrl + D. Melembutkannya dengan menambah Kabur Gaussian, Tapis> Blur> Gaussian Blur.

Slider

Langkah 29

Lukiskan bentuk segi empat dengan lebar 10 lajur (lihat di bawah).

Untuk itu Isi warna pilih # dfd1c2. Untuk itu Strok pilih # c8baac dengan saiz 10 pt. Klik anak panah jatuh kecil di sebelah pratonton garisan dan pastikan Align Inside dipilih.

Langkah 30

Tampalkan gambar di atas bingkai. Tukar kepada Keratan Clipping dengan memukul Ctrl + Alt + G. Gambar secara automatik akan masuk ke dalam bingkai gelangsar. Jika perlu, anda boleh bergerak dan mengubah saiz gambar tanpa menjejaskan bingkainya.

Langkah 31

Lukiskan bentuk segi empat tepat di belakang gelangsar dengan warna yang sama. Pastikan untuk merapatkannya kepada panduan yang paling tepat. Tambah Gaya Layer> Overlay Corak menggunakan corak piksel dari PSDfreemium. Nada ke bawahnya Kelegapan untuk membuatnya halus.

Langkah 32

Lukiskan bentuk segi empat tepat di atas bentuk dengan Isi: # b3aca5 dan tiada strok. Tekan Ctrl + T dan kemudian putarkannya 45 °. Tukar bentuk lapisan ke Keratan Clipping.

Langkah 33

Duplikat bentuk dan ubah saiznya. Tukar Isi kepada warna yang lebih gelap. Tukar bentuk lapisan ke Keratan Clipping.

Langkah 34

Ulangi langkah yang sama untuk menarik anak panah lain di sisi lain.

Langkah 35

Ctrl-klik bingkai slaid untuk membuat pilihan baru. Buat lapisan baru dan tukar kepada a Keratan Clipping. Isi pemilihan dengan hitam.

Langkah 36

Nyahpilih (Ctrl + D) kemudian melembutkan ia menggunakan Kabur Gaussian.

Anda boleh mengurangkan Opacity bayang jika diperlukan.

Langkah 37

Lukiskan segi empat bulat di sudut slider dengan Isikan # c8baac.

Langkah 38

Lukis bulatan di dalam bentuk. Tetapkan ia Strok kepada hitam dengan Saiz 1 pt dan keluarkan Isi.

Langkah 39

Pilih bulatan jalan menggunakan Pemilihan Laluan alat. Shift + Alt seret laluan untuk menduplikasinya.

Ulangi ini untuk menarik lebih banyak kalangan.

Langkah 40

Pilih salah satu laluan bulatan. Tekan Ctrl + Shift + J untuk memotongnya ke lapisan baru.

Langkah 41

Di dalam Bar Pilihan, keluarkannya Strok dan menukarnya Isi kepada a radial kecerunan dari # e38989 ke # bb5c5c. Tambah Gaya Layer> Outer Glow dan Drop Shadow.

Langkah 42

Lukiskan pemilihan elips di bawah gelangsar. Buat lapisan baru dan isikannya hitam.

Langkah 43

Nyahpilih (Ctrl + D). Melembutkan ia menggunakan Kabur Gaussian.

Latar Belakang yang lebih rendah

Langkah 44

Lukis bentuk segiempat lagi untuk latar belakang bawah. Gunakan yang sama Isi dan Strok warna sebagai bentuk gelangsar.

Seperti biasa, berhati-hati dengan penempatannya. Kami mahu ia meliputi setiap panduan di kanvas.

Tambah Gaya Layer> Overlay Corak.

Di bawah adalah hasil pembesaran 100%.

Langkah 45

Pilih kawasan pendaki yang menggunakan alat Rectangular Marquee.

Langkah 46

Buat lapisan baru, letakkan di belakang bentuknya. Isi pemilihan dengan hitam. Tekan Ctrl + T, klik kanan dan pilih Perspektif.

Seret sudut atasnya ke luar.

Klik kanan sekali lagi dan pilih Skala. Seret pegangan atas ke bawah.

Klik kanan dan pilih Warp. Seret bahagian kiri dan kanan ke dalam.

Melembutkan ia menggunakan Kabur Gaussian.

Nada ke bawah Kelegapan kepada 20%.

Langkah 47

Lukiskan segi empat tepat putih di dalam latar belakang. Ini akan menjadi latar belakang untuk kandungan utama tapak.

Tambahkan ruang 10 px ke kiri, kanan dan bahagian atas latar belakang. Jarak haruslah mudah kerana kami telah membuat panduan dalam langkah awal. Tambah Gaya Layer> Outer Glow.

Langkah 48

Tambah panduan baru, 25 px dari bahagian atas bentuk.

Tajuk Seksyen

Langkah 49

Tambah Gaya Watak baharu untuk tajuk seksyen halaman dan penerangannya.

Tambahkan tajuk bahagian dan keterangannya menggunakan alat Jenis. Memohon gaya yang telah dibuat sebelum ini. Pastikan untuk menambah ruang 25 px dari bahagian atas latar belakangnya dengan bantuan dari panduan yang dibuat sebelum ini.

Langkah 50

Lukiskan garis 5 px di bawah penerangan tapak dengan Isi: # 938270 dan Strok: Tiada.

Post Blog

Langkah 51

Buat Gaya Watak lain untuk tajuk pos.

Langkah 52

Tambah tajuk pos dan sapukan Gaya Watak terdahulu.

Langkah 53

Lukiskan bentuk segi empat tepat di bawah tajuk dengan lebar 4 lajur. Tetapkan putih untuknya Isi dan #bebebe untuknya Strok. Tambah Gaya Lapisan> Strok.

Langkah 54

Tampalkan imej di atas bentuknya. Tukar ke Clipping Mask (Ctrl + Alt + G).

Langkah 55

Lukiskan segi empat bulat dengan Isi: # 8e8380 dan Strok: Tiada. Tukar kepada Keratan Clipping.

Langkah 56

Buat Gaya Watak baharu untuk metadata blog.

Langkah 57

Tambah teks metadata di atas bentuk dan gunakan Gaya Watak yang telah kami buat sebelumnya.

Langkah 58

Aktifkan Taipkan alat dan seret klik untuk membuat kotak teks. Tetapkan lebarnya kepada 4 lajur. Klik Taip> Paste Lorem Ipsum untuk mengisi dengan Lorem Ipsum yang dihasilkan secara automatik dari Photoshop.

Langkah 59

Buat Gaya Perenggan baru untuk kandungan aksara. Klik ikon baru pada panel Gaya Perenggan.

Klik ganda Gaya Perenggan dan gunakan tetapan berikut ini.

Langkah 60

Terapkan gaya ini kepada kandungan pos. Anda juga boleh mencuba dengan tetapan Indent dan Spasinya.

Untuk reka bentuk web, nyahaktifkan Hyphenation.

Langkah 61

Lukiskan segi empat bulat dengan Isi: # 8e8380 dan Strok: Tiada. Tambah Gaya Layer> Overlay Corak. Untuk konsisten, gunakan corak yang sama seperti dalam gelangsar.

Langkah 62

Tambah label butang. Saya cadangkan anda menyimpannya sebagai gaya watak. Dengan cara ini, kita boleh menggunakannya dengan mudah untuk butang lain.

Langkah 63

Butang sebelumnya adalah untuk keadaan normal. Let's duplicate it and change its color to # f76b6a. Juga, tetapkan jenis labelnya dengan huruf tebal.

Langkah 64

Letakkan siaran di dalam kumpulan dan kemudian tekan Ctrl + J untuk menduplikasinya. Drag seret untuk menduplik kumpulan.

Ulangi langkah yang sama untuk membuat lebih banyak catatan. Ingat untuk menukar gambar dan tajuk setiap pos.

Langkah 65

Duplikat Baca Lebih Lanjut butang dan tukar labelnya kepada nombor. Kami akan menggunakannya untuk navigasi laman. Ingat untuk menetapkan salah satu butang untuk keadaan hover.

Langkah 66: Footer

Mari mula bekerja pada footer. Tambah tajuk widget dan keterangannya.

Langkah 67

Tambahkan pautan dan lukis baris 1 px di bawahnya. Tetapkan Isi: Tiada dan Strok: # 8e8380.

Langkah 68

Klik Lebih banyak Pilihan butang dan pilih garis putus-putus.

Langkah 69

Tambah lebih banyak pautan ke dalam widget.

Langkah 70

Duplikat widget.

Langkah 71

Kita juga perlu menambah keadaan hover. Tetapkan satu pautan ke huruf tebal.

Di bawah pautan aktif itu, tambah baris 5 px. Tetapkan warna kepada # f76b6a. Untuk konsistensi, penampilan pautan ini mirip dengan menu aktif pada bar menu.

Langkah 72

Tambah segiempat tepat lain di bahagian bawah. Tetapkan ia Isi kepada # 3d3123.

Maklumat Footer

Langkah 73

Tambah info kaki menggunakan Taipkan alat. Berikannya gelap Drop Shadow untuk menambah kontras dengan latar belakangnya.

Rangkaian sosial

Langkah 74

Tambah beberapa ikon media sosial dari Daniele Selvitella. Tambah Gaya Layer> Outer Glow.

Langkah 75

Nada ikon normal ke 50%. Untuk keadaan hover, mari kita simpan sahaja Kelegapan pada 100%.

Langkah 76

Dapatkan ikon kursor tangan percuma dan letakkan kursor tangan terkecil di atas pautan aktif atau hover.

Keputusan akhir

Inilah hasil akhir kami. Anda dapat melihat versi terbaru Photoshop mempunyai beberapa ciri menarik untuk mereka bentuk susunatur web. Gaya Watak dan Gaya Perenggan adalah peningkatan yang ketara bagi setiap pereka web.

Demo
Muat turun Sumber