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

Membuat Desain Web Bertema Buku Komik, Photoshop hingga HTML + CSS (Bagian 1)

by
Read Time:18 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Diperbarui dengan Tutorial Coding! Kali ini saya memiliki tutorial yang menyenangkan untuk semua orang. Pada bagian 1 kita akan membuat desain yang sangat original untuk para penggemar komik di luar sana.   Kita akan membuat tata letak blog ini dari coretan menggunakan beberapa trik pada Photoshop untuk membuatnya terlihat mengagumkan. Kemudian pada bagian 2 kita akan mempelajari bagaimana untuk memotong, mengkode, dan mempersipkannya untuk dapat dikonversi menjadi blog tema CMS. Apakah Anda siap?


Fase Coding Telah Tersedia

Tutorial Fase Coding (Bagian 2) sekarang telah tersedia di situs bersaudara kami, Nettuts!  Ketika Anda telah selesai dengan fase desain ini, silakan menuju Nettuts untuk memotong dan mengkodenya dalam HTML/CSS. Terima kasih untuk semua masukkan dan permintaan dari followup, semuanya!


Sebelum Memulai

Mari mulai! Untuk mempercepat pembacaan saya akan menghindari beberapa penjelasan paling mendasar (seperti bagaimana membuat masker layer atau bagaimana menyunting handler atau Beziers dari Vector Shape).  Anda akan memerlukan beberapa pengetahuan dasar tentang Layer, Guide/Panduan, Vektor dan Layer Mask, Kuas, Pen Tool, dan bekerja dengan Tipografi (Huruf dan Paragraf).

Properti tutorial ini adalah:

Langkah pertama adalah dengan membuat maket, doodle, atau hanya berupa sketsa tata letak di selembar serbet. Memiliki draft kasar tentang struktur situs memudahkan untuk meletakkan elemen pada desain. Di bawah ini Anda akan melihat sketsa sederhana yang menunjukkan beberapa elemen berikut ini:

Sebuah header dengan logo, bar pencaria dan link sosial media, di samping bar navigasi utama. 
Sebuah banner dengan post fitur, perhatikan bagaimana teks post diletakkan pada gambar menjadi balon percakapan untuk menggambarkan style “komik”. 
Area konten, dengan daftar posting yang ditampilkan dalam dua kolom, masing-masing post memiliki gambar untuk diasosiasikan dan teks ditampilkan dapat balon percakapan juga. 
Sebuah footer dengan daftar kategori blog, arsip dan postingan populer dan komentar terbaru serta informasi hak cipta.

Langkah 1: Mempersiapkan Dokumen

Bukalah Photoshop, unduh template Photoshop 12 kolom dari 960 Grid System atau buatlah dokumen baru dengan 960px dan gambarlah beberapa Panduan garis dari kiri dan kanan tepi.

Tambahkan area kerja untuk melihat bagaiman ia bekerja di resolusi yang lebih tinggi dan tambahkan tingginya juga. Saya mengatur dimensi dokumen menjadi seluas 1420px dan tinggi 1200px.  Terakhir, pergilah ke Layer > New Fill Layer > Solid Color… dan atur latar belakang hitam (#000000) untuk kanvas. 

Langkah 2: Latar Belakang Header

Gambarlah Panduan/Guide horizontal sekitar 450px dari tepi atas, kita akan menggunakannya sebagai referensi pemandu untuk menambahkan corak pada bagian atas halaman.  Menggunakan Rectangle Tool, gambarlah persegi yang besar menggunakan latar depan dengan warna ini (#AA0001). Kemudian terapkan Gradient Layer Mask (Hitam ke Putih) pada persegi untuk menyembunyikan bagian dasarnya.
Tip: jangan pernah menggunakan Gradient Layer untuk latar belakang, karena ketika menambahkan tinggi kanvas (hal yang sangat lumrah dilakukan di desain web) maka latar belakang akan terdistorsi.

Langkah 3: Tambahkan Tekstur pada Latar Belakang

Bukalah “Paper Texture” dari asset, kemudian salin dan tempel di atas layer gradien merah. Ukur untuk mencocokkannya pada ikatan desain dan ubah Blending Mode layer menjadi Linear Burn. Kita akan memotongnya sebagai latar belakang gambar besar, tetapi untuk resolusi yang lebih besar kita membutuhkan penggabungan tepi-tepi kertas dengan latar belakang hitam, untuk itu, menggunakan Burn Tool, gelapkan area di dekat tepi kiri dan kanan tekstur kertas kita.  Anda dapat menggunakan kuas yang besar dan lembut (0% Hardness).

Selalu jaga layer Anda terorganisir, letakkan kedua layer (“Kertas” dan “Persegi”) ke dalam satu folder bernama “Header Bg”.

Langkah 4: Sunbursts

Melanjutkan style komik, mari tambahkan beberapa garis-garis sunburst untuk membuat latar belakang dramatis untuk logo.

Bukalah bentuk “Sunburst” dari aset. Pada Custom Shape Tool, pilihlah bentuk sunburst kesukaan Anda dan gambarlah pada layer gradien merah.  Letakkan bentukan di dekat tepi kiri dari template 960 (tampilkan Guide untuk melihat tali-tali). Terapkan Layer “Sunburst” sebuah Radial Gradient Layer Mask (putih pada bagian tengah dan hitam di luar).  Ubah Layer Opactiy menjadi 50%. Opsional: menggunakan Brush/kuas irregular, lukislah warna hitam pada Layer Mask untuk membuat penggabungan yang lebih keras antara sunburst dan latar belakang.

Langkah 5: Tone Setengah

Untuk mempertegas style komik, kita akan menambahkan beberapa poin Halftone pada latar belakang header. Buatlah layer baru di atas layer “Sunburst”, dan berikan beberapa Awan Hitam dan Putih di sana (Filter > Render > Clouds).  Kemudian pergi ke Filter > Pixelate > Color Halftone. Ubah layer Blending Mode “Halftone” menjadi Multiply dan tambahkan Layer Mask > Hide All to It.  Kemudian menggunakan kuas yang besar dan lembut (warna: Putih dan Opacity dan Flow menjadi 75%) lukislah beberapa area layer mask untuk membuat terlihat hanya sedikit dari pola halftone.

Langkah 6: Judul

Sekarang Anda memiliki latar belakang header yang telah selesai, sekarang mari tambahkan Logo. Pertama gambarlah rujukan panduan sekitar 180px di bawah tepi atas, logo seharusnya tidak di bawah panduan tersebut.  Menggunakan font “Komika Title” dari aset, ketiklah judul situs (“Comicastic”) ukuran font: 68pt dan warna latar depan: #FFB401. Kemudian tambahkan elemen teks lagi, seperti tanda seru atau slogan dalam warna putih (ukuran font 16pt).

Kemudian menggunakan Free Transform Tool putarlah teks beberapa derajat ke kiri untuk membuatnya terlihat tidak terlalu formal.  Coba temukan yang seperti gambar di bawah ini, tetapi ingat untuk tidak meletakkan elemen apapun di bawah panduan garis. Terakhir, letakkan seluruh layer ini ke dalam folder berlabel “Logo”.

Langkah 7: Style Layer Logo

Tambahkan Layer Style > Gradient Overlay (#EA9403 - #FFC501) sebuah Stroke (ukuran:1px, di dalam, #FCB600) dan Drop Shadow (Hitam, kegelapan/opacity 50%, Jarak dan Ukuran: 2px) pada layer “logo”. Gunakan style serupa untuk slogan, tetapi ubah warna Gradient Overlay menjadi #EDEDED-#FFFFFF dan Stroke menjadi Putih (#FFFFFF).  Jika Anda meletakkan tanda seru pada logo, Anda dapat mengkonversinya menjadi bentuk (Layer > Type > Convert to Shape) dan ubah sedikit seperti yang ditunjukkan pada bagian bawah gambar di bawah ini.

Banner Post Fitur

Langkah 8: Latar Belakang

Gunakan Rounded Rectangle Tool (Radius 5px) untuk menggambar persegi besar di sepanjang banner di bawah logo seperti yang ditunjukkan gambar di bawah ini, tinggi persegi terserah pada Anda, saya mengaturnya menjadi 250px. Kemudain terapkan Gradient Overlay (Warna: #DA7E00 - #F0AD00, Angle: 90°) dan Stroke (Warna: #F2AA00, Ukuran: 1px, Position: Inside). Terapkan Layer Style padanya.

Langkah 9: Mengubah Banner Atas

Menggunakan Direct Selection Tool (A) pergi ke persegi kita yang baru, ambil ujung sudut kiri atas dan pindahkan ke kanan (Anda dapat menggunakan kursor untuk perpindahan akurat). Kemudain pindahkan ujung kanan bawah beberapa pixel ke kiri.

Langkah 10: Menambahkan Container Gambar Sliding

Sekarang, menggunakan Rectagle Tool gambarlah sebuah persegi berwarna abu-abu di dalam banner kuning (sekitar 630px x 250px), Anda dapat memberikan bagian dasar persegi abu-abu beberapa pixel dari dasa banner kuning untuk membuat efek keluar garis. Tambahkan Stroke (Ukuran/size: 1px, Posisi/Position: Inside/di dalam, Warna/color: #FFFFFF) dan Drop Shadow (Warna/Color: #000000, Opacity:50%, Distance/Jarak: 0px, Spread/Sebaran: 0px, Size/Ukuran: 5px) dan cobalah untuk meletakkan persegi seperti yang ditunjukkan gambar di bawah ini.  Terakhir, letakkan kedua layer (persegi Abu-abu dan Kuning) ke dalam folder bernama “Top Banner”.

Langkah 11: Navigasi Utama

Menggunakan keluarga font “Komika Teks” ketiklah halaman navigasi pada bagian atas kanan banner, atur ukuran font menjadi 18px dan warna: #FFFFFF. Letakkan pada sebuah folder bernama “Pages Navigation”, pastikan folder ini berada di belakang “Top Banner”.  Kemudian menggunakan Rounded Rectangle Tool (Radius: 3px, Color/warna: #EFA800), gambarlah sebuah persegi di belakang kata pertama navigasi, namai layer “Selected Tab/tab dipilih”.  Selanjutnya, menggunakan Direct Selection Tool (A) pindahkan ujung bawah kiri seperti yang ditunjukkan gambar di bawah ini. Selanjutnya terapkan Gradient Overlay ke layer “Selected Tab” (Colors/warna: #F0A900 - #FEBF00, Angle/sudut: 90°).  Jika Anda ingin, Anda dapat menambahkan Drop Shadow ringan (Color/warna: #000000, Opacity/kegelapan: 25%) pada teks navigasi.

Langkah 12: Menambahkan Gambar Banner

Untuk menunjukkan contoh nyata, tempel gambar apa saja pada banner. Jika gambar lebih besar daripada persegi yang Anda buat, Anda dapat menggunakan Clipping Mas. Untuk melakukan hal tersebut, tempellah sebuah gambar pada persegi abu-abu kemudian Option/Alt-Klik antara kedua layer, hal ini akan menjepit gambar di dalam persegi tanpa ada pemotongan yang perlu dilakukan (crop).

Langkah 13: Kontrol Banner

Pilihlah Custom Shape Tool dan pilihlah salah satu panah, dan gambarlah sepasang berdampingan, keduanya mengarah ke kiri. Kemudian terapkan kedua Gradient Overlay (#6D0004 - #980000) dan sebuah Stroke (Size/ukuran: 1px, Position/posisi: Inside, Color/warna: #B20002).  Letakkan kedua panah pada sebuah folder bernama “Sebelumnya” dan menggunakan Free Transform Controls dan tahan tombol Command/Control, ubah panah sedikit.  Kemudian gandakan folder dan ubah namanya menjadi “Selanjutnya”, pindahkan ke bagian kanan banner dan pergi ke Edit > Transform > Flip Horizontal untuk mengubah arahnya. Terakhir, letakkan kedua folder “Selanjutnya” dan “Sebelumnya” pada folder baru bernama “Controls”.

Langkah 14: Kontrol Hover

Sekarang gandakan folder “Selanjutnya” dan “Sebelumnya” dan terapkan layer berbeda pada panah untuk membuat efek melayang masing-masingnya. Saya menggandakan Layer Style dari tanda seru pada judul.

Step 15: Detail Halftone

Dengan proses yang sama dengan Langkah 5, buatlah Layer Halftone di atas banner kuning.  Dengan layer “Halftone” dipilih lakukan Command/Control-klik pada banner kuning, kemudian tekan Command/Control+Shift+I untuk memilih invert, kemudian hapus exceeding/kelebihan.  Ubah layer Blending Mode “Halftone” menjadi Overlay dan Opacity/kegelapan 25%. Terakhir, tambahkan Layer Mask > Hide All dan menggunakan Brush/kuas Putih, lukislah di beberapa area layer mask untuk membuatnya hanya terlihat beberapa porsi polanya.

Langkah 16: Artikel Fitur Balon Percakapan

Sekarang adalah waktunya untuk menambahkan kolom untuk meletakkan konten post fitur. Untuk ini, gunakan Custom Shape Tool carilah yang sudutnya melingkar dan balon percakapan persegi. Gambarlah di banner “Gambar Fitur” dan letakkan pada bagian kanan seperti yang terlihat di gambar di bawah ini.  Sebelum mendesain fitur ini Anda harus melakukan beberapa penelitian terlebih dahulu apakah mungkin untuk menhasilkan efek ini, walaupun Anda tidak tahu bagaimana cara coding, Anda dapat mencari beberapa library yang ada di Ajax (JQuery/MooTools) dan lihat apa yang telah diselesaikan dan dikerjakan, kemudian adaptasi desainnya pada library yang ada.

Kemudian, menggunakan Direct Selection Tool (A) ubah bentuk balon percakapan sedikit. Terakhir, terapkan Drop Shadow (Color/warna: #000000, Opacity/kegelapan: 25%, Distance/jarak: 5px, Spread/sebaran: 0px, Size/ukuran: 10px).

Langkah 17: Teks Post Fitur

Waktunya menambahkan judul dan sekilas tentang post fitur kita. Untuk judul gunakan “Komika Title”, 18pt. #680001. Untuk badan teks, gunakan “Komika Text Tight”, Ukuran: 16pt, warna: #1B1B1B. letakkan layer teks rata kanan seperti yang ditunjukkan gambar di bawah ini.

Langkah 18: Box Komentar dan Meta Post

Sekarang, tambahkan balon lain, tapi lebih kecil, gunakan warna latar depan: #9C0001 dan tambahkan style layer Stroke (Color/warna: #D00000, Sixe/ukuran: 1px, Position/posisi: Inside), seperti yang ditunjukkan gambar di bawah inin kemudian tambahkan nomor komentar degan jenis huruf “Komika Title”, warna: #ffffff dan ukuran:24pt. Tambahkan pula kata “Komentar” dengan “Komika Title”, ukuran: 12pt, warna: #FFB301.

Terakhir, tambahkan sebuah meta (informasi tentang post) di bawah penjelasan sekilas post dengan font “Tahoma”, ukuran: 10pt, warna: #1B1B1B. jika tidak ada ruang untuk meletakkan teks meta, Anda dapat menggunakan Direct Selection Tool untuk menambah tinggi kotak balon post fitur sedikit.

Tip: Jangan pernah mengubah elemen Vector Rounded Corner menggunakan Free Transform Tool pada Photoshop, hal ini akan mendistorsi sudutnya, pilihlah ujung yang ingin Anda pindahkan menggunakan Direct Selection Tool dan pindahkan.

Langkah 19: Latar Belakang Judul Post Fitur

Gandakan balon latar belakang post fitur, sembunyikan drop shadow, ubah warna isian menjadi kuning (#FFC001) dan konversikan. Kemudian, menggunakan Rectangluar Marquee Selection Tool, pilih semua balon berwarna kunign di bawah baris judul, kemudian hapus pilihan. Selanjutnya, tambahkan baris tepi dengan layer “Bubble Title” dipilih, Cmd/Ctrl+klik pada Vektor Mask “Bubble Background”. Kemudian pergi ke Edit > Modify > Contract dan atur nilai menjadi 1px. Terakhir, tekan Cmd/Ctrl+Shift+I untuk mengubah pilihan dan menghapusnya.

Ini adalah waktu yang baik untuk mengatur semua yang berhubungan dengan banner atas teratur ke dalam folder-folder dan menambahkan detail lain jika Anda ingin, saya menambahkan garis kuning antara sekilas tentang post dan Meta.

Konten Utama

Langkah 20: Latar Belakang Konten

Sekarang mari bergerak dengan latar belakang konten utama. Buatlah sebuah folder bernama “Konten Halaman” dan gambarlah Persegi Sudut Bulat berwarna putih (#FFFFFF) (Radius 5px) dengan beberapa tinggi pixel (jika ukuran kanvas original terlalu kecil kali ini Anda dapat menambahkan ukurannya, hanya saja pastikan tepi atas tetap pada tempatnya).

Langkah 21: Post Gambar

Sekarang waktunya menambahkan konten pada halaman, sebagai default pada blog kita akan mendesain daftar posting terbaru.

Gambarlah dua persegi (kira-kira seluas 3 kolom) dan letakkan seperti yang ditunjukkan gambar. Lakukan hal yang sama dengan langkah 12 tambahkan beberapa gambar pada persegi dam menggunakannya sebagai Clipping Mask. Terakhir, pilih persegi dan tambahkan Style Layer Stroke di situ (Color/warna: #FFB801, Size/ukuran: 1px, Position/posisi: Inside).

Kita akan mengerjakan salah satu gambar ini menambahkan konten di sekitarnya, kemudian menggandakannya sebanyak post yang ingin Anda tunjukkan pada halaman rumah/homepage.

Langkah 22: Tambahkan Judul dan Kategori Post

Gambarlah dua persegi panjang yang lebar, satu berwara kuning (#F2AA00) dan satu lagi berwarna putih dengan garis tepi kuning (#FFB401). Pada garis kuning, ketiklah judul posting menggunakan “Komika Title”, Warna: #670003, Ukuran: 18pt. dan pada garis putih ketik nama Ketgori menggunakan “Komika Text Tight” ukuran: 13pt, warna: #212121 untuk link dan #670003 ketika diletakkan mouse.

Langkah 23: Sekilas Posting dan Meta

Gambarlah balon percakapan lagi, gambar dan garis kuning, isilah dengan warna: #333333 dengan Stroke 1px (Warna: #696969) dan juga terapkan "Komika Text Tight" Ukuran: 14pt, Warna: #FFFFFF, sebuah sampel teks Meta dengan "Tahoma" 10pt Warna #979797 dan jika Anda ingin menambahkan baris antara kedua teks (#4B4B4B).

Langkah 24: Meneyelesaikan Konten Utama

Untuk menyelesaikan bagian ini tambahkan balon Komentar, secara dasar mengulangi proses yang sama dengan langkah 18. Kemudian letakkan semuanya ke dalam satu folder, saya menamakan foldernya “Sebuah Post”. Kemudian, gandakan (Cmd/Ctrl+ Seret) dan letakkan pada bagian kanan. Ulangi proses yang saa dengan dua atau tiga baris post seperti yang ditunjukkan gambar di bawah ini. Tambahkan tinggi latar balakang putih sesuai kebutuhan untuk membuat semua postingan dapat termuat.

Langkah 25: Sudut Halaman Konten

Untuk meningkatkan style “buku komik”, kita akan menambahkan lengkungan halaman sederhana pada bagian kanan bawah pada latar belakang putih.

Pertama, gambarlah segitiga hitam pada bagian sudut kiri bawah (Anda dapat menggunakan Pen Tool), kemudian gandakan dan pindahkan segitiga tersebut, buatlah menjadi “refleksi” dari yang hitam.Anda dapat mengisi salinan ini dengan warna apapun. Selanjutnya, lengkungkan segitiga kedua hingga membentuk lekukan kecil. Kemudian, terapkan pada segitiga melengkung ini Gradient Overlay menggunakan warna campuran: (#9C0001-#FE0000-#9C0001) dan ubah Angle/sudut menjadi terlihat bagus sesuai dengan sudut lengkungannya, pada hal ini 108 derajat. Selanjutnya, menggunakan Soft Brush/kuas lembut (Hitam, Opacity dan Flow 50%) lukislah bayangan pada layer baru di belakang segitiga melengkung. Jika Anda mau, tambahkan beberapa ujungpada segitiga melengkung untuk menambahkan sudut bulat pada ujungnya seperti yang terlihat di gambar berikut ini. Terakhir, letakkan semua layer melengkung yang terkait pada satu folder bernama “Lengkungan Halaman”. Simpan karena kita akan kembali menggunakannya nanti.

Langkah 26: Latar Belakang Footer

Kita hampir selesai. Pertama, buatlah sebuah folder bernama “Footer” dan pastikan letaknya di bawah “Konten Halaman”. Di dalamnya gambarlah lingkaran berwarna merah (#9C0001), kemudian terapkan Gaussian Blur pada radius paling tidak 65px. Kemudian ubah hasil lingkaran blur untuk membuatnya pas dengan panduan yang mengelilinginya.

Langkah 27: Latar Belakang Sunburst

Sekarang, dengan Custom Shape Toolm pilihlah salah satu bentuk Sunburst dan gambarlah dengan warna hitam di tengah, kemudian kurangi kegelapannya menjadi 50%. Kemudian tambahkan Pola Halftone pada lingkaran merah bercahaya, sembunyikan menggunakan layer mask dan tunjukkan hanya beberapa bagiannya. Terakhir, kurangi kegelapan lingkaran merah menjadi 50%.

Langkah 28: Latar Belakang Konten Footer

Kita akan menambahkan elemen umum pada blog seperti Kategori dan Arsip pada bagian Footer.

Sekarang, mari tambahkan latar belakang untuk elemen footer. Gambarlah persegi sudut bulat (radius 5px) warna: #1A1A1A dan atur nilai isi menjadi 50%, buatlah menjadi seluas 3 kolom, Anda dapat menyalinnya untuk membuatnya muat 4 kotak pada bagia footer.

Langkah 29: Latar Belakang Konten Footer - Lengkung

Pilihlah persegi pertama, (Anda dapat menghapus yang lain pada tahap ini). Kemudian gandakan folder “Lengkungan Halaman” dan letakkan di dalam folder “Footer”. Ubahah untuk membuatnya cocok dengan sudut kanan bawah persegi, kemudian ubah warna gradient menjadi tone abu-abu yang berbeda. Terakhir, tambahkan layer persegi sebuah style Stroke (1px, Inside, #242424).

Langkah 30: Kategori

Sekarang tambahkan judul bagian, pada hal ini adalah “Kategori” menggunakan “Komika Title”, ukran: 14px, Warna: #F2AA00. Gunakan panduan untuk tidak membatasi baseline judul, jagalah setidaknya pada 20px di bawah latar belakang akhir halaman konten. Kemudian tabahkan beberapa baris sebagai sampel kategori-kategori, menggunakan “Komika Text Tight”, Ukuran: 16px, Warna: #FFFFFF dan merah (#EC000A) sebagai efek hover. Sebagai tambahan detail untuk efek hover, tambahkan panah kuning kecil (#FFB301) menggunakan Custom Shape Tool. Letakkan seluruh layer pada folder bernama “Elemen Footer”. 

Langkah 31: Gandakan Bagian Footer

Gandakan folder “elemen footer” dan pindahkan ke kanan, ubah katanya untuk menggambarkan “arsip” kali ini.

Kemudian gandakan lagi foldernya tetapi kali ini perluas latar belakang tembus cahaya untuk membuatnya dua kali lebih besar, pada bagian atas, ketik “Post Populer”, “Post Terbaru”, dan “Komentar Terbaru”, menggunakan warna kuning untuk yang pertama dan abu-abu untuk dua lainnya. Seperti tebakan Anda, hal ini akan memiliki fungsi yang sama dengan panel menjorok ke dalam. Kemudian tambahkan segitiga kuning kecil untuk menandai tab yang dipilih.

Langkah 32: Konten Panel Menjrok ke dalam

Karena bagian ini terdiri dari kebanyakan daftar post, ari tambahkan, secara umum adalah kombinasi dari “Komika Title” dan “Komika Text Tight” dengan warna yang berbeda-beda (lihat screenshoot di bawah ini). Baris pertama merupakan sampel dari item yang dipilih (melayang/hover), pada bagian ini, tambahkan warna persegi bersudut bulat dengan warna hitam (#000000) di belakang teks dan tambahkan Layer Mask Horizontal Gradient (hitam ke putih).

Terakhir, tambahkan sedikit Pager pada bagian bawah bagian ini.

Langkah 33: Kolom Pencarian

Waktunya menambahkan beberaa detail untuk menyelesaikan grafik kita. Mari mulai dengan kolom pencarian. Buatlah sebuah folder bernama “Kolom Pencarian” pada bagian atas semuanya, buatlah persegi bersudut bulat (radius 3px, warna #000000 dengan stroke effect ukuran 1px, posisi: inside, warna #7C0000) sebagai input pencarian, dan sebuah persegi kecil untuk tombol mencari; gandakan Layer Style pada item terpilih pada navigasi utama dan tempelkan pada tombol cari. Untuk tombol actual, ketiklah kata “Cari!” di situ menggunakan warna putih, kemudian terapkan Drop Shadow seperti teks navigasi utama (menggunakan ulang layer style sangatlah menghemat waktu). Pada input pencarian, ketik kata “Mencari Sesuatu” menggunakan “Komika Text Tight “ warna: #F9A600.

Kemudain tambahkan persegi di belakang semua layer di dalam “Kolom Pencarian”, isilah dengan warna merah gelap #380001 (Isi: 50%) dan terapkan Stroke menggunakan warna ini: #890101. Konversikan menajadi Smart Object dan terapkan Layer Mask > Hide All to IT, isi mask dengan Gradien Refleksi Hitam-Putih untuk membuat tampilan efek pada bagian bawah seperti gambar berikut.

Langkah 34: Ikon Sosial Media

Ulangi proses latar balakang kolom pencarian tetapi kali ini menggunakan tinggi kolom yang lebih rendah dan dengan warna Stroke yang agak berbeda(#860001). Kemudian ketik kata “Follow Us” menggunakan “Komika Title” dan tempelkan semua ikon yang ingin Anda tambahkan, Anda dapat menggunakan ikon kecil dari aset. Jangan lupa mempertahankan layer Anda terorganisir di dalam folder-folder.

Langkah 35: Navigasi Footer dan Informasi Hak Cipta

Untuk menyelesaikan tugas hari ini, mari tambahkan navigasi Footer. Hilangkan batas section menggunakan garis putih, terbungkus dengan gradien refleksi hitam-putih. Ketik link navigasi menggunakan Arial ukuran 10px, warna #515151 dan efek hover highlight berwarna kuning: #F2AA00. Kemudain tambahkan teks hak cipta, rata kanan.

Langkah 36: Selesai!

Terakhir, periksa dua kali semua layer berada pada foldernya masing-masing.

Kesimpulan

Kita selesai dengan bagian grafis dari proses ini, sekarang waktunya untuk melompat ke NetTuts+ untuk melihat bagaimana memotong ini dan mengubahnya menjadi HTML+CSS. Apakah Anda siap?

.
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.