Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Buat Reka Bentuk Web Bertema Komik, Photoshop untuk HTML + CSS (Bahagian 1)

by
Length:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Dikemaskini dengan dalam Pengekodan Tut! Buat masa ini saya telah mendapat untuk anda yang menyenangkan tutorial untuk semua orang. Dalam Bahagian 1, kami akan mencipta reka bentuk yang sangat asal untuk semua peminat comicbook luar sana. Kita akan mencipta layout blog ini dari awal dengan menggunakan beberapa helah dalam Photoshop untuk membuat ia kelihatan menggerunkan. Kemudian dalam Bahagian 2 kita akan mempelajari bagaimana untuk keping ia, kod itu dan bersedia untuk dijadikan tema blog CMS. awak dah sedia?


Fasa Pengekodan Tersedia

Fasa pengkodan tutorial (Bahagian 2) kini boleh didapati melalui kami Laman, Nettuts! Apabila anda selesai dengan fasa Reka bentuk ini, kunjungi Nettuts untuk keping dan kod dalam HTML/CSS. Terima kasih untuk semua maklum balas dan permintaan untuk ikutan kepada semua orang!


Sebelum Bermula

Mari bermula! Untuk mempercepatkan bacaan saya akan mengelakkan beberapa penerangan paling asas (seperti cara membuat topeng lapisan atau bagaimana untuk mengedit pengendali atau Beziers bentuk vektor). Anda akan memerlukan beberapa pengetahuan asas mengenai lapisan, panduan, vektor dan lapisan topeng, berus, Pen Tool dan bekerja dengan Typography (watak dan perenggan).

Harta-harta untuk tutorial ini adalah:

Langkah pertama adalah membuat mock up, doodle, atau hanya lakaran susun atur pada serbet. Mempunyai draf kasar struktur tapak membuat mudah meletakkan elemen pada reka bentuk. Di bawah ini anda akan melihat lakaran ringkas yang menunjukkan unsur-unsur berikut:

Tandukan, dengan logo, bar carian dan pautan media sosial, selain bar navigasi utama.
Sebuah sepanduk dengan posts yang diketengahkan, perhatikan bagaimana teks pos diletakkan di atas imej dalam gelembung perbualan yang menggambarkan gaya "komik".
Kawasan yang kandungan, dengan senarai jawatan dipaparkan dalam dua lajur, setiap catatan mempunyai gambar berkaitan dan teks dipaparkan ke dalam ceramah bubble juga.
Footer yang, dengan senarai kategori blog, Arkib dan popular post dan komen terkini dan maklumat hak cipta.

Langkah 1: Sediakan Dokumen

Buka Photoshop, muat turun 12 kolaj Photoshop template dari 960 Grid System atau buat dokumen baru 960px dengan dan buat menarik beberapa Panduan ke sempadan kiri dan kanan.

Meningkatkan kawasan kerja untuk melihat bagaimana ia kelihatan lebih luas resolusi dan meningkatkan ketinggian juga. Saya saya Tetapkan dimensi dokumen ketinggian lebar dan 1200px 1420px. Akhirnya pergi ke Layer > New Fill Layer > Solid Color...  dan set latar belakang hitam (#000000) bagi kanvas.

Langkah 2: Latar belakang Tajuk

Menarik panduan mendatar sekitar 450px dari sempadan atas, kita akan gunakan sebagai panduan rujukan untuk menambah dan shade di atas halaman. Menggunakan alat Rectangle, melukis segi empat tepat pelbagai menggunakan warna ini sebagai latar hadapan (#AA0001). Kemudian Terpakai Topeng Lapisan kecerunan (hitam putih) kepada segi empat tepat tersebut untuk menyembunyikan bahagian bawah darinya.
Petua: Jangan gunakan lapisan kecerunan bagi latar belakang kerana apabila meningkatkan ketinggian kanvas (amalan yang sangat biasa dalam reka bentuk web) latar belakang mendapat diputarbelitkan.

Langkah 1: Menambah Tekstur yang theBackground

Buka "Tekstur kertas" daripada aset Copy dan Paste di atas lapisan kecerunan yang merah. Skala untuk membuat ia dimuatkan ke dalam batas-batas dalam reka bentuk dan mengubah cara adunan lapisan yang membakar Linear. Kami akan keping ini sebagai latar belakang imej besar, tetapi untuk resolusi yang lebih luas kita perlu untuk halus gabungan tepi kertas dengan latar belakang hitam, untuk ini, menggunakan alat tulis, gelap di kawasan berhampiran dengan tepi kiri dan kanan kami tekstur kertas. Anda boleh menggunakan berus yang besar dan lembut (0% Kekerasan).

Sentiasa pastikan anda lapisan yang dianjurkan, meletakkan kedua-dua lapisan ("Kertas" dan "Rectangle") ke dalam folder yang bernama "Bg tajuk".

Langkah 1: Sunbursts

Mari kita melangkah ke hadapan dengan gaya komik, tambah beberapa jalur sunburst melahirkan latar-belakang yang dramatik untuk logo.

Buka bentuk "Sunburst" daripada aset. Pada alat bentuk tersuai, pilih bentuk sunburst kegemaran anda untuk menarik ia ke atas lapisan kecerunan yang merah. Letakkan bentuknya yang berdekatan dengan sempadan kiri template 960 (menunjukkan panduan untuk melihat batas). Digunakan untuk lapisan "Sunburst" Radial kecerunan lapisan topeng (putih di Pusat) dan hitam di luar. Menukar kelegapan lapisan kepada 50%. Pilihan: menggunakan berus yang tidak teratur, Cat dengan hitam ke atas lapisan topeng untuk mencipta yang lebih banyak berdendam gabungan antara sunburst tersebut dan latar belakang.

Langkah 1: Separuhwarna

Untuk menguatkuasakan gaya komik, kami akan menambah beberapa perkara Separuhwarna ke atas latar belakang tajuk. Mencipta satu lapisan baru ke atas lapisan "Sunburst", dan menyebabkan sesetengah awan hitam dan putih di sana (Filter > Render > Clouds). Kemudian pergi ke  Filter > Pixelate > Color Halftone. Mengubah cara adunan lapisan "Separuhwarna" untuk membiak dan menambah Layer Mask > Hide All kepadanya. Kemudian menggunakan berus besar dan lembut (Warna: Putih dan Opacity dan Aliran ke 75%) melukis beberapa kawasan lapisan topeng supaya kelihatan sahaja sedikit corak Separuhwarna.

Langkah 1: Tajuk

Sekarang anda mempunyai tajuk latar belakang selesai, mari kita Tambah Logo. Mula-mula Lakarkan rujukan panduan kira-kira 180px di bawah sempadan atas, logo tidak boleh di bawah panduan itu. Menggunakan wajah font "Komika Title" dari aset jenis gelaran laman web ("Comicastic") Saiz Teks: 68pt dan warna latar hadapan: #FFB401. Kemudian Tambah lagi elemen teks, seperti tanda seru atau slogan dalam warna putih (saiz fon 16pt).

Kemudian menggunakan Alat Transformasi Bebas memutar teks beberapa derajat yang tersisa untuk menjadikannya kurang formal. Cuba dapatkan sesuatu seperti imej di bawah, tetapi jangan lupa untuk meletakkan sebarang unsur di bawah panduan. Akhirnya letakkan semua lapisan ini ke dalam folder yang berlabel "Logo".

Langkah 7: Logo Lapisan Gaya

Tambah Layer Style > Gradient Overlay (#EA9403 - #FFC501) a Stroke (Size:1px, Inside, #FCB600)  dan Menjatuhkan Shadow (Black, 50% Opacity, Distance and Size: 2px) to the "logo" layer. Menggunakan gaya yang sama kepada slogan, tetapi menukar warna Overlay Kecerunan #EDEDED - #FFFFFF dan strok ke putih (#FFFFFF). Jika anda meletakkan tanda seru logo, anda boleh cuba menukarkan ia ke dalam bentuk (Layer > Type > Convert to shape) dan KALAM itu sedikit sebagai menunjukkan bahagian bawah gambar di bawah.

Banner Iklan Pilihan

Langkah 8: Background

Menggunakan Rectangle bulat alat (Rdius 5px) untuk menarik pelbagai segi empat tepat semua merentasi panji-panji di bawah logo seperti dalam gambar di bawah, ketinggian jika rectangle itu adalah terpulang kepada anda, saya saya menetapkan 250px. Kemudian memohon Overlay Kecerunan (Warna: #DA7E00 - #F0AD00, Sudut: 90°) dan Strok (Warna: #F2AA00, Saiz: 1px, Kedudukan: Di dalam). Gaya Lapisan kepadanya.

Langkah 9: Menukar Banner Teratas

Menggunakan alat pemilihan langsung (A) ke atas kami rectangle bulat jenama baru, merebut dan sudut kiri atas dan alihkan ke sebelah kanan (anda boleh menggunakan kursor ke bagi satu langkah yang tepat). Kemudian gerakkan bahagian bawah kanan mata beberapa pixel yang ditinggalkan.

Langkah 10: Menambah bekas gambar gelongsor

Sekarang, menggunakan Alat Rectangle melukis segi empat tepat kelabu di dalam panji-panji kuning (630px x 250px aprox.), anda boleh meninggalkan bahagian bawah segi empat tepat yang kelabu piksel-piksel beberapa kaki ke bawah panji-panji kuning untuk mencipta sebuah out-of-bounds kesan. Tambah Stroke (Saiz: 1px, Kedudukan: Di dalam, Warna: #FFFFFF) dan bayang-bayang jatuh (warna: 000000, Opacity: 50%, Jarak: 0px, Menyebarkan: 0px, Saiz: 5px) dan cuba untuk meletakkan rectangle seperti dalam gambar di bawah. Akhirnya, meletakkan kedua-dua lapisan (Kelabu dan Kuning segi empat tepat) ke dalam folder yang bernama "Atas Banner".

Langkah 11: Menu Navigasi

Menggunakan keluarga fon "Komika teks" taip navigation muka surat di bahagian atas kanan iklan tersebut atas, bakal font saiz 18px dan warna: #FFFFFF. Meletakkannya di folder bernama "Navigasi Laman", pastikan folder ini adalah di sebalik "Banner Atas". Kemudian menggunakan Alat Rectangle Bulat (Radius: 3px, Warna: #EFA800), melukis segi empat tepat di belakang perkataan pertama telah dizum, nama lapisan "Tab dipilih". Seterusnya menggunakan langkah Alat Pemilihan Langsung (A) perkara-perkara di bawah kiri seperti gambar di bawah. Memohon Overlay Kecerunan seterusnya kepada lapisan "Tab dipilih" (Warna: #F0A900 - #FEBF00, Sudut: 90°). Jika anda mahu, anda boleh menambah Drop Shadow yang sangat halus (Warna: #000000, Opacity: 25%) teks navigasi.

Langkah 12: Menambah imej banner

Untuk menunjukkan satu contoh sebenar, menampal sebarang gambar yang atas panji-panji. Jika imej yang lebih besar yang segi empat tepat yang anda boleh gunakan topeng Keratan, untuk tampal ini imej di atas rectangle kelabu, maka Opsyen/Alt - Klik antara dua lapisan, ini akan klip imej di dalam segi empat tepat yang tanam tidak diperlukan.

Langkah 13: Banner kControl

Pilih alat bentuk adat dan memilih salah satu daripada anak panah, dan Lukiskan satu pasangan di sebelah yang lain, kedua-dua menunjuk ditinggalkan. Kemudian memohon kedua-duanya merupakan Kecerunan Overlay (#6D0004-#980000) dan Stroke (Saiz: 1px, Kedudukan: Di dalam, Warna: #B20002). Meletakkan kedua-dua anak panah ke folder yang bernama "Sebelum" dan menggunakan kawalan mengubah percuma dan memegang perintah/Ctrl kekunci, mendistorsi anak panah sedikit. Maka salinan folder dan namakannya untuk "Next", bergerak ke kanan iklan tersebut dan pergi ke Edit > Transform > Flip Mendatar untuk mengubah hala tuju. Akhirnya meletakkan kedua-dua folder "Next" dan "Kembali" ke dalam folder baru dinamakan "Kawalan".

Langkah 14: Kawalan Hover

Sekarang salinan folder "Next" dan "Sebelum" dan menggunakan gaya berbeza lapisan anak panah bagi mewujudkan kesan hover yang setiap satu. Saya saya Salin gaya lapisan sing seru tajuk.

Langkah 15: Butir-butir Separuhwarna

Dengan proses sama langkah 5, membuat lapisan Separuhwarna di atas panji-panji yang kuning. Dengan lapisan "Separuhwarna" yang dipilih Arahan/Ctrl - Klik ke atas panji-panji yang kuning, maka Perintah memukul/Ctrl Shift saya terbalikkan pilihan, maka hapuskan ini melebihi. Tukar "Separuhwarna" lapisan adunan bertindih dan Opacity kepada 25%. Akhir sekali Tambah topeng Layer Mask > Hide Alli dan menggunakan berus putih lembut yang besar, di beberapa kawasan pada lapisan topeng untuk membuat kelihatan hanya beberapa bahagian daripada pola.

Langkah 16: Agar Artikel Bercakap Gelembung

Sekarang adalah masa untuk menambah medan untuk meletakkan kandungan artikel yang diketengahkan. Untuk ini, menggunakan alat bentuk adat kelihatan bulat rahsianya dan gelembung bercakap segi empat tepat. Bayang-bayang itu ke atas "Agar imej" panji-panji dan meletakkannya di sebelah kanan sebagai menunjukkan imej di bawah. Sebelum mereka bentuk sebarang ciri-ciri ini, anda perlu melakukan beberapa kajian jika ianya tidak mustahil untuk mencapai kesan, jenis ini walaupun anda tidak tahu bagaimana untuk kod, anda boleh mencari beberapa Perpustakaan sedia ada Ajax (JQuery / MooTools) dan lihat apa yang sudah dilakukan dan bekerja , dan kemudian menyesuaikan Reka bentuk anda ke laman web Perpustakaan yang sedia ada.

Maka, menggunakan Alat Pemilihan Langsung (A) mendistorsi bentuk bebola ini sedikit. Akhirnya memohon Bayang-bayang Jatuh (Warna: #000000, Opacity: 25%, Jarak: 5px, Menyebarkan: 0px, Saiz: 10px).

Langkah 17: Featured Post teks

Inilah masanya untuk menambah tajuk dan penerangan ringkas kepada kami pos yang diketengahkan. Gelaran menggunakan "Komika Tajuk", 18pt. #680001. Untuk teks badan, gunakan "Komika Teks Ketat", Saiz: 16pt, Warna: #1B1B1B. Letakkan lapisan teks yang betul-betul sejajar seperti yang ditunjukkan pada imej di bawah.

Langkah 18: Kotak komen dan Post Meta

Sekarang, tambah gelembung yang lain, tetapi lebih kecil kali ini, gunakan warna ini sebagai latar depan: #9C0001 dan tambahkan gaya lapisan Strok (Warna: #D00000, Saiz: 1px, Posisi: Di ​​dalam), sama seperti gambar di bawah, dengan wajah font "Komika Title", Warna: #FFFFFF dan Saiz: 24pt. Dan perkataan "Comments" dengan "Komika Title", Saiz: 12pt, Warna: #FFB301.

Akhirnya tambahkan Meta kecil (maklumat tentang jawatan) di bawah jawatan ringkas dengan fon "Tahoma", Saiz: 10pt, Warna: #1B1B1B. Jika tidak ada ruang yang cukup untuk meletakkan teks Meta, anda boleh menggunakan Alat Pemilihan Langsung untuk meningkatkan ketinggian kotak gelembung pos yang dipaparkan sedikit.

Petua: Tidak pernah mengubah elemen vektor bulat sudut yang menggunakan alat mengubah percuma di Photoshop, ini akan menukar sudut, pilih perkara-perkara yang hendak bergerak menggunakan alat pemilihan langsung dan kemudian mengantikan mereka.

Langkah 19: Latar Belakang Tajuk Pos Pilihan

Duplikat gelembung latar belakang pos yang dipaparkan, sembunyikan bayang-bayang drop, ubah warna isi ke kuning (#FFC001) dan rasterize itu. Kemudian, menggunakan alat pilihan Marquee segi empat tepat, pilih semua bebola kuning di bawah garisan tajuk, kemudian menghapuskan pemilihan. Seterusnya, menambah garis sempadan, dengan "Gelembung tajuk" lapisan dipilih, perintah/Ctrl - Klik ke atas topeng vektor "Gelembung latar belakang". Kemudian Pergi ke Edit > Modify > Contract  dan atur nilai kepada 1px. Akhirnya, tekan Command/Ctrl + Shift + I untuk membalikkan pemilihan dan memadamkannya.

Ini adalah masa yang baik untuk menetapkan segala-galanya yang berkaitan dengan itu banner atas yang dianjurkan ke dalam folder dan menambah lebih terperinci jika anda mahu, saya sedang menambah garisan kuning antara ringkas jawatan dan Meta.

Kandungan Utama

Langkah 20: Latar Belakang Kandungan

Sekarang mari kita bergerak ke hadapan dengan latar belakang kandungan utama, mencipta Folder bernama "Page Content" dan menarik yang putih (#FFFFFF) sudut Rectangle bulat (Radius 5px) beberapa ketinggian piksel (jika saiz kanvas yang asal menjadi terlalu kecil buat masa ini anda boleh meningkatkan saiznya, Hanya pastikan untuk menjaga sempadan atas seperti yang).

Langkah 21: Post Gambar

Inilah masanya untuk mula menambah kandungan kepada halaman, sebagai lalai pada blog kita akan merancang senarai mesej-mesej terkini.

Menarik dua petak (3 kolum lebar aprox.) dan meletakkan mereka sebagai menunjukkan imej di bawah. Lakukan proses yang sama daripada langkah 12 menambah sesetengah imej lebih petak yang menggunakannya sebagai topeng Keratan. Akhirnya Pilih Dataran dan menambah Gaya Lapisan Strok kepadanya (Warna: #FFB801, Saiz: 1px, Kedudukan: Di dalam).

Kami akan bekerja ke atas salah satu imej ini menambah kandungan sekelilingnya, dan kemudian salinan itu kerana berkali-kali sebagai pos ingin menunjukkan di laman web.

Langkah 22: Masukkan Tajuk dan Kategori Jawatan.

Lukis dua segi empat tepat pelbagai, satu kuning (#F2AA00) dan satu lagi putih dengan kuning sempadan di bawah (#FFB401). Melalui jalur kuning, taip tajuk post yang menggunakan "Komika Tajuk", Warna: #670003, Saiz: 18pt. Dan pada jalur putih, taipkan nama kategori menggunakan "Komika teks ketat" saiz: 13pt, Warna #212121 untuk pautan dan Bilakah alihkan tetikus ke #670003.

Langkah 23: Post Ringkas dan Meta

Lukis gelembung bercakap sekali lagi, ke atas gambar dan jalur kuning, isi dengan Warna ini: #333333 dengan Stroke 1px (Warna: #696969) dan juga gunakan bayang Drop yang kami lakukan sebelum ini pada sepanduk. Kemudian tambahkan teks ringkas contoh menggunakan "Komika Text Tight" Saiz: 14pt, Warna: #FFFFFF, contoh teks Meta menggunakan "Tahoma" 10pt Warna #979797 dan jika anda mahu garis antara kedua-dua teks (#4B4B4B).

Langkah 24: Penamat Kandungan Utama

Untuk menyelesaikan bahagian ini menambah gelembung Komen, pada dasarnya mengulangi proses Langkah 18. Kemudian letakkan segala-galanya pada folder, saya menamakan folder "Pos". Kemudian, duplikatnya (Command/Ctrl + Drag) dan letakkan di sebelah kanan. Ulangi proses dengan dua atau tiga baris jawatan seperti yang tertera di bawah gambar di bawah. Meningkatkan ketinggian latar belakang putih seperti yang diperlukan untuk memuatkan semua jawatan.

Langkah 25: Sudut Kandungan Laman

Untuk menambahkan gaya "buku komik", kami akan menambah dedah Laman ringkas pada bahagian bawah kanan latar belakang putih.

Mula-mula melukis segi tiga hitam di sudut kanan bawah (anda boleh menggunakan alat Pen), maka salinan dan memindahkan segitiga yang menjadikannya "refleks" orang hitam, anda boleh mengisi salinan ini dengan mana-mana warna yang lain. Seterusnya Meleding Segitiga kedua yang menjadikannya lengkung sedikit. Kemudian, gunakan segitiga lengan Gradient Overlay menggunakan campuran warna yang menarik: (#9C0001 - #FE0000 - #9C0001) dan ubah Sudut kepada apa sahaja yang kelihatan baik mengikut sudut curl, dalam kes ini 108 darjah. Seterusnya menggunakan cat berus lembut (Black, Opacity dan aliran 50%) bayang-bayang beberapa dalam lapisan baru di sebalik warped segi tiga. Jika anda mahu, tambah beberapa perkara ke segi tiga warped untuk menambah sudut bulat ke hujung sama seperti menunjukkan bahagian bawah gambar di bawah. Akhir sekali, letakkan semua dedah berkaitan lapisan ke folder yang bernama "Page Curl". Pastikan ia sentiasa senang kerana kita akan menggunakannya nanti.

Langkah 26: Latar Belakang Footer

Kami hampir selesai, mula-mula buat folder bernama "Footer" dan pastikan berada di bawah folder "Kandungan Halaman", di dalamnya lukis bulatan merah (#9C0001), kemudian gunakan Blur Gaussian sekurang-kurangnya 65px radius. Kemudian tukar bulatan yang terhasil untuk menjadikannya sesuai dengan panduan yang terikat.

Langkah 27: Latar Belakang Sunbursts

Sekarang, dengan menggunakan alat bentuk tersuai, pilih salah satu daripada bentuk Sunburst dan menarik satu hitam di tengah-tengah, kemudian turun Opacity yang ke 50%. Kemudian Tambah corak Separuhwarna ke atas bulatan merah bercahaya, menyembunyikannya menggunakan topeng lapisan dan menunjukkan hanya beberapa bahagian darinya. Akhirnya turun kelegapan bulatan merah 50%...

Langkah 28: Footer Kandungan Latar

Kami akan menambah elemen-elemen lazim blog apa-apa kategori dan Arkib di footer tersebut.

Sekarang, mari tambah latar belakang untuk elemen footer, lukis Rectangle Bulat (radius 5px) Warna: #1A1A1A dan tetapkan nilai Isi kepada 50%, menjadikannya sekitar 3 tiang lebar. anda boleh membuat salinannya untuk membuat 4 kotak sesuai di footer.

Langkah 29: Latar Belakang Kandungan Footer - Curl

Pilih segi empat yang pertama, (anda boleh memadamkan yang lain pada titik ini). Kemudian duplikat folder "Curl Page" dan letakkannya di dalam folder"Footer", ubahnya untuk menjadikan ia sepadan dengan sudut kanan bawah segi empat tepat, kemudian tukar warna kecerunan itu kepada nada warna yang berlainan. Akhirnya tambahkan ke lapisan segi empat sama gaya Stroke (1px, Di dalam,# 242424).

Langkah 30: Kategori

Sekarang, tambahkan tajuk bahagian, dalam kes ini 'Kategori' menggunakan "Komika Title", Saiz: 14px Warna: #F2AA00. Gunakan panduan untuk membatasi asas tajuk, simpan sekurang-kurangnya 20 px di bawah hujung latar belakang kandungan halaman. Kemudian tambahkan beberapa baris sebagai kategori sampel, menggunakan "Komika Text Tight", Saiz: 16px, Warna: #FFFFFF, dan Red (#EC000A) sebagai kesan hover. Sebagai perincian tambahan untuk kesan hover, tambahkan anak panah kuning (#FFB301) menggunakan Alat Bentuk Tersuai. Letakkan semua lapisan ke dalam folder bernama "Elemen Footer".

Langkah 31: Duplikat Bahagian Footer

Duplikat folder "Footer element" dan gerakkannya ke kanan, ubah perkataan untuk menggambarkan "Arkib" kali ini.

Kemudian duplikat folder sekali lagi tetapi kali ini mengembangkan latar belakang lutut untuk menjadikannya dua kali lebih luas, di atas, taip tajuk untuk "Popular Posts", "Latest Posts" dan "Recent Comments", gunakan kuning untuk yang pertama dan kelabu untuk dua lagi. Seperti yang anda rasa, ini akan mempunyai fungsi yang sama daripada anak tetingkap. Kemudian tambah segitiga kuning kecil untuk menandakan tab yang dipilih.

Langkah 32: Kandungan tetingkap tetingkap

Oleh kerana bahagian ini akan mempunyai kebanyakan senarai jawatan, sila tambahnya, pada dasarnya adalah gabungan "Komika Title" dan 'Komika Text Tight' dengan warna yang berbeza (Lihat tangkapan skrin di bawah). Baris pertama akan menjadi sampel item yang dipilih (hover), pada ini, tambah segi empat tepat hitam (#000000) bulat di belakang teks dan tambahkan Masker Layer Gradient (Hitam hingga Putih) Horisontal.

Akhir sekali, tambah Pager sedikit di bahagian bawah bahagian ini.

Langkah 33: Cari Bar

Sudah tiba masanya untuk menambah beberapa maklumat untuk menyelesaikan grafik kami. Mari bermula dengan bar carian. Buat folder bernama "Search Bar" di atas segalanya, buat Rectangle Bulat (3px Radius, Warna: #000000 dengan Saiz Kesan Stroke: 1px, Posisi: Di ​​dalam, Warna: #7C0000) sebagai input carian, dan segiempat kecil butang carian; Salin Gaya Lapisan item yang dipilih pada navigasi utama dan tampal ke butang carian. Untuk butang sebenar, taip perkataan "Go!" di atasnya dengan White, dan gunakan Shadow Drop yang sama daripada teks navigasi utama (gaya lapisan kitar semula adalah penyelamat masa yang hebat). Pada input Cari, taip perkataan "Mencari sesuatu" dengan menggunakan "Komika Text Tight" Warna: #F9A600.

Kemudian tambah Rectangle di belakang semua lapisan dalam "Search Bar", isikan dengan merah gelap #380001 (Isi: 50%) dan sapukan Stroke menggunakan Warna ini: #890101. Konversi ke Objek Pintar dan gunakan Mask Lapisan> Sembunyikan Semua itu, isikan topeng dengan Gradien Hitam - Hitam Putih untuk membuat kesan kesan di bahagian bawah imej di bawah.

Langkah 34: Ikon Media Sosial

Ulangi proses latar belakang bar carian tetapi kali ini menggunakan bar kurang tinggi dan dengan warna Stroke yang berbeza-beza (#860001). Kemudian taip perkataan "Follow us" menggunakan "tajuk Komika" dan tampal semua ikon yang anda ingin tambah, anda boleh menggunakan ikon mini dari aset. Jangan lupa untuk memastikan lapisan anda dianjurkan di bawah folder.

Langkah 35: Navigasi Footer dan maklumat hak cipta

Menamatkan kerja hari ini, mari tambahkan navigasi Footer. Delimit bahagian dengan garis putih, bertopeng dengan kecerunan hitam putih yang tertera. Taip pautan navigasi menggunakan Arial, Saiz 10px, Warna: #515151 dan sorot kesan hover dengan kuning: #F2AA00. Kemudian tambahkan teks hak cipta sejajar dengan betul.

Langkah 36: Inilah!

Akhir sekali semak ganda semua lapisan berada di folder masing-masing.

Kesimpulan

Kami menyelesaikan bahagian grafik proses ini, sekarang sudah tiba masanya untuk melompat ke atas NetTuts+ untuk melihat cara menghiris ini dan menjadikannya HTML+CSS, siapakah anda?

.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.