Blog Theme Design tutorial

Preview: 

Akhirnya saya telah berhasil menempatkan diri saya bersama-sama dan membuat yang lain tutorial template blog!

maaf untuk semua orang yang mengandalkan itu sebelumnya, saya hanya tidak punya waktu untuk itu tapi tetap di sini itu. jadi nikmatilah!

Getting Started !
    Membuat template ini sangat mudah, hanya membutuhkan beberapa kesabaran dan sedikit usaha, sehingga apa yang pernah Anda lakukan. tidak memberikan up.Here adalah hasil dari tutorial ini.

Mudah-mudahan anggota forum akan membantu dalam coding template ini untuk tema wordpress bekerja, sehingga mengawasi keluar untuk itu :).

Diperbarui
Tema ini telah dikonversi tema wordpress untuk melihat demo live atau men-download klik disini
=> Untuk Software Online Daftar Disini
Sebelum kita melompat ke dalam tutorial gimp sakit perlu mengingatkan Anda bahwa saya hanya akan masuk ke rincian tentang bagaimana melakukan teknik cretin sekali dan kemudian sakit hanya menggambarkan secara singkat ketika pernah diulang sehingga membayar perhatian.

Langkah 1:
Menciptakan citra baru di 1024X900 dan mengisi gambar latar belakang dengan warna 3f3534 menyesuaikan tingkat zoom untuk% 50 seperti yang saya lakukan mungkin untuk membantu Anda membandingkan kemajuan Anda dengan saya.

Hal pertama yang akan dilakukan adalah membuat perbatasan transparan kotak konten itu. efek ini mudah dan memberikan sentuhan yang bagus untuk desain.

Langkah 2:
Pastikan Anda memiliki "Alat dialog option" pada layar Anda,
kemudian memulai dengan Meraih "Rectangle tool Pilih" sekarang menggambar Rectangle pada ukuran apapun dan dalam "dialog option Alat" menyesuaikan posisi ke 98 dan 150 dan ukuran 590x695.



Jika Anda melakukan itu tepat Anda harus memiliki sesuatu seperti ini.



Langkah 3:
Sedangkan seleksi masih aktif, dalam dialog "Options Alat" Centang Kotak Pojok bulat dan mengubah nilai Radius menjadi 13,7.




Setelah Anda selesai, Anda dapat klik di dalam pilihan Anda untuk menyelesaikan perubahan.

Berikut adalah bagaimana seharusnya terlihat.




Langkah 4:
Buat Layer baru dan beri nama "Perbatasan kotak konten utama", sekarang mengisi pilihan Anda dengan Solid White. kemudian mengubah Opacity ke 50.




Sekarang bahwa kita memiliki set perbatasan kita dapat menciptakan dasar yang sebenarnya dari isi kotak dengan beberapa langkah sederhana.

Langkah 5:
Klik kanan pada gambar Anda dan kemudian pergi ke Pilih> Shrink. Sekarang mengubahnya ke 5 kemudian tekan OK, di bawah ini contoh gambar adalah bagaimana pilihan Anda akan terlihat sekarang.




Langkah 6:
Seperti pada langkah 4 Buat nama Layer baru itu "kotak Konten Utama" dan mengisi seleksi dengan Solid White. Anda dapat un-pilih segalanya dengan pergi ke Pilih> Tidak ada. * Tip pastikan lapisan Transparan bawah "Kotak Isi utama" lapisan.

Sekarang Anda tahu cara membuat kotak konten yang berbatasan dengan ada saya tidak akan pergi melalui mereka lagi bukan sakit hanya sebentar menyebutkan apa nama lapisan dan nilai-nilai seperti ukuran, posisi ... dan lain-lain

Langkah 7:
Akan mulai dengan kotak pencarian.

Buat nama layer baru itu: Perbatasan Cari Kotak dengan rectangle tool pilih menggambar pemilihan dan

mengubah nilai-nilai sebagai berikut:
Posisi: 697:150 px
Ukuran: 229x65px.
Sudut bulat: radius menjadi 13,7
Fill Color: putih Padat
Lapisan Opacity: 50
Pastikan Anda memiliki pilihan dari kotak pencarian perbatasan masih aktif, sekarang klik kanan kemudian pergi ke Pilih> Kecilkan di 5px.

Buat nama layer baru "Cari kotak dasar" isi dengan putih solid dan unselect layer dengan pergi untuk memilih tidak ada>. ini adalah bagaimana Anda akan terlihat.




Langkah 8:
Buat nama layer baru: menu box perbatasan dengan rectangle tool pilih, menggambar nilai seleksi dan perubahan sebagai berikut:

Posisi: 698:225 px
Ukuran: 228x360px.
Sudut bulat: radius 13,7
Isi Warna: putih Padat
Lapisan Opacity: 50
Buat nama layer baru itu: Menu kotak Basis
dengan pemilihan lapisan perbatasan menu masih aktif, klik kanan dan pergi untuk memilih> Shrink 5px, akhirnya isi dengan putih solid. dan tidak memilih itu dengan pergi pilih> tidak ada




Langkah 9:
Buat nama layer baru itu: Perbatasan menu 2nd
seperti yang telah kita lakukan beberapa kali sekarang ambil rectangle tool pilih, menggambar nilai seleksi dan perubahan sebagai berikut:

Posisi: 698:594 px
Ukuran: 228x249px.
Sudut bulat: radius 13,7
Isi Warna: putih Padat
Lapisan Opacity: 50
Buat nama layer baru itu: Basis menu 2nd
dengan pemilihan lapisan perbatasan menu 2 masih aktif, klik kanan dan pergi untuk memilih> Shrink 5px, akhirnya isi dengan putih solid. dan unselect dengan pergi pilih tidak>.

Anda harus memiliki sesuatu seperti ini sekarang.




Sejauh ini kita telah membuat semua komponen utama dari website sekarang saatnya untuk menambahkan beberapa kuas yang bagus untuk latar belakang.
Saya menggunakan brushes Floral ditetapkan oleh solenero73, Anda dapat menggunakan Anda sendiri jika Anda inginkan, triknya adalah untuk menerapkan kuas pada setiap sudut tapi jangan pergi terlalu lepas kendali dengan itu, semakin sedikit Anda menggunakan lebih baik.
Anda dapat mendownloadnya dari sini: Download sikat bunga di sini.




Langkah 10:
Setelah Anda download dan menginstal kuas memiliki warna foreground Anda diatur ke fffe87, Buat layer baru dan beri nama "efek Floral" dan menempatkan lapisan setelah lapisan latar belakang.



Sekarang cerdas menempatkan sikat sekitar sudut, melihat hasil saya.




Sekarang waktunya untuk menciptakan tombol menu atas, tergantung pada seberapa banyak Anda berniat untuk memiliki Anda mungkin ingin menyesuaikan lebar, dalam tutorial gimp saya berniat untuk hanya memiliki tiga tombol utama.

Langkah 11: Tombol / Tab
Anda mungkin ingin memperbesar 100% untuk membuatnya lebih mudah.
Buat nama layer baru itu: border Tab
ambil rectangle tool pilih, menggambar seleksi dan mengubah nilai-nilai sebagai berikut:
Posisi: tidak penting sekarang.

Ukuran: 140x62px.
Sudut bulat: radius 13,7
Isi Warna: putih Padat
mengubah Opacity Layer untuk 50
Buat nama layer baru itu: "Tab dasar" dan dengan pemilihan lapisan "tab border" masih aktif, klik kanan dan pergi untuk memilih Shrink 5px, akhirnya isi dengan putih solid>. dan unselect dengan pergi pilih tidak>.
ini adalah bagaimana seharusnya terlihat.

Bagian diulang berkali-kali tapi sekarang di sini datang sesuatu yang berbeda. apa yang akan kita lakukan adalah menggabungkan dua lapisan yang membentuk tombol tab sehingga kita dapat menambahkan beberapa perubahan untuk itu nanti.

Langkah 12:
Untuk menggabungkan dua lapisan tab Anda perlu untuk menyembunyikan semua lapisan kami buat, kecuali dua yang terakhir yang merupakan "Tab dasar" dan "Tab Border" lapisan. untuk melakukan itu hanya un mengklik "MATA" ikon ditampilkan di samping setiap lapisan. Lapisan dialog Anda akan terlihat seperti ini




Langkah 13:
Setelah Anda yang dilakukan, klik kanan pada lapisan dasar tab dan klik pada "menggabungkan Layers Terlihat" di jendela Layers Merge tetap pada default "diperluas seperlunya" lalu tekan OK.




Langkah 14:
Sekarang itu digabung menjadi satu gambar pergi ke depan dan mengubah namanya menjadi hanya "Tab" dan menampilkan semua lapisan tersembunyi dengan mengklik ikon mata lagi.




Sebelum kita meletakkan tab ke posisi yang kita ingin menghapus bagian dari perbatasan transparan pada tab sehingga ketika kita tumpang tindih tab di atas kotak konten menyatu dengan sempurna. Anda mungkin ingin memperbesar menjadi sekitar 200% untuk membuatnya lebih mudah.

Langkah 15:
Ambil "Eraser tool" kemudian pergi ke dialog kuas dan menciptakan sikat baru dengan nilai-nilai ditetapkan sebagai berikut

Radius: 18,6
paku: 2
Kekerasan: 1
Rasio aspek: 1
Angle: 0
spasi 0
Kemudian nama itu apa yang pernah Anda sukai dan menyimpannya.

Langkah 16:
Tempatkan tab di atas kotak konten dan menggunakan penghapus dan sikat kita buat, penghapus perbatasan yang tumpang tindih, Anda mungkin tidak mendapatkannya pertama kali jadi terus mencoba membawa saya 1 menit untuk bisa melakukannya dengan benar.




Langkah 16:
Sekarang duplikat 2 lebih tab dan ruang mereka merata seperti yang ditunjukkan pada gambar di bawah.




Waktu untuk membuat tombol menu untuk sisi kategori aku akan menggunakan dua warna biru untuk overs mouse dan abu-abu untuk status normal.

Langkah 17:
Ambil alat favorit kami "Rectangle tool pilih" menggambar persegi panjang dan masukkan nilai-nilai dalam dialog "pilihan alat".

Sudut bulat: 62,7
posisi 708:253
Ukuran: 206x30px
Setelah Anda memiliki bentuk oval mengisinya dengan 36afdc warna.

Sekarang akan menduplikasi tombol menu lagi tapi kali ini berubah warna ke Gray.
Langkah 18: klik kanan pada tombol menu dan klik pada "alpha seleksi" membuat nama layer baru "Tombol Menu 2" kemudian mengisinya dengan warna ini a09999




Langkah 19:
Sekarang duplikat 5 dari nama tombol menu sebagai menu1-menu2 dll dan ruang mereka merata seperti seperti yang saya lakukan pada gambar di bawah.




Sekarang kita perlu membuat tiga tombol bulat untuk judul dari link yang akan ditempatkan di bagian bawah.

Langkah 20:
Buat persegi panjang bulat dengan menggunakan nilai-nilai
Buat nama layer baru "tombol Bawah konten"

Sudut bulat: 5.0
Posisi: 309:640
Ukuran: 168x32px
mengisi menggunakan warna d2d2d2
Duplikat 2 lebih dari mereka dan menempatkan mereka merata di bagian bawah kotak konten.

Sekarang kita akan membuat pemisah konten yang akan pergi antara setiap posting.

Langkah 21:
Ambil alat seleksi dan menggambar persegi panjang 563x1px yang pada dasarnya garis, setelah Anda memiliki hak itu, duplikat dua kali dan menempatkan mereka seperti yang saya lakukan dalam contoh di bawah ini (perhatikan tanda panah biru).




Langkah 23:
Kita harus melakukan hal ini sebelumnya, tetapi bagaimanapun pastikan Anda menambahkan tombol bulat untuk kolom pencarian dengan nilai-nilai.
Buat nama layer baru "tombol Bawah konten"

Sudut bulat: 5.0
Posisi: 717:166
Ukuran: 168x32px
mengisi menggunakan warna d2d2d2

Sejauh ini kita sudah selesai dengan layout utama dan sekarang dapat melanjutkan ke menambahkan icon / isi elemen yang benar-benar akan membuatnya terlihat bagus sekali yang dilakukan.
kita akan mulai dengan ikon. tinju dari semua saya tidak menciptakan ini sekali untuk menghemat waktu saya bukan membeli mereka dari iStockphoto, cukup murah jadi kecuali Anda akan membuat sendiri, Anda mungkin keluar beberapa sen dan membeli beberapa.

Langkah 23:
Anda akan membutuhkan pencarian, RSS, dan ikon Komentar. sekarang saya tidak berpikir saya perlu menjelaskan banyak di sini jadi hanya melihat di mana saya ditempatkan tambang dan melakukan hal yang sama. cobalah untuk tidak memiliki ikon besar dari 32x32.except untuk ikon RSS melihat apa yang cocok. di sini adalah apa yang saya ditembak mati iStockphoto


You can see my placements in this example.





Sekarang untuk konten. mungkin yang bagian tersulit ketika memulai dari awal, meletakkan konten adalah kunci untuk desain besar, Anda dapat memiliki desain yang sempurna tetapi jika Anda tidak menempatkan konten di tempat yang tepat dan gaya itu dapat menghancurkan segalanya. sehingga memperhatikan di mana saya ditempatkan tambang dan perhatikan bagaimana saya mencoba yang terbaik untuk menjaga ruang putih sama pada sisi sepanjang waktu.

Karena semua yang saya lakukan adalah menambahkan teks sakit mencoba untuk memberikan beberapa petunjuk untuk ketika Anda menerapkan konten Anda sendiri.

Gambar dalam posting harus konsisten saya memberikan diri saya sekitar 128x128.
Saya menggunakan font "Trebuchet MS Bold" untuk segala sesuatu kecuali tombol kategori yang tepat, saya menggunakan "Verdana Bold"
di sini adalah semua warna i digunakan untuk teks.

Header, Biru "36afdc"
mengirim teks, light brown "939.191"
bawah daftar, berwarna cokelat "5f5b5b"
Tanggal di pos, "d2d2d2"
Komentar menghitung, "3f3534"
Jadi itu saja! sana Anda memiliki tema desain blog yang besar dibuat dalam gimp. Anda mungkin ingin mengubah warna dan elemen lainnya untuk suite selera Anda.

The gimp XCF file sumber terpasang di bagian bawah dari pekerjaan yang tutorial.and lalu memberikan kredit di mana embunnya. Desain ini telah dikonversi menjadi tema wordpress dan dapat didownload dari sini

Pilih dari host blog dan menampilkan web secara keseluruhan apa yang Anda miliki.

Kunjungi Percetakan PsPrint.com online untuk mendapatkan penawaran terbaik di percetakan komersial!

catatan
Silakan maju Anda pertanyaan tentang langkah-langkah di bagian forum Bantuan.


Nikmati keberhasilan nyata dengan 642-374 dumps dan sertifikasi + tes praktek program pelatihan online dan terbaru testking 1Y0-A18. Juga mempersiapkan diri untuk tingkat berikutnya dengan kualitas 642-971 pertanyaan dan jawaban dari testking MCDST....