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

Desain Tata Letak Blog Profesional di Photoshop

by
Read Time:21 minsLanguages:
This post is part of a series called Build a Responsive Layout With Skeleton.
Building a Responsive Layout With Skeleton: Starting Out

Indonesian (Bahasa Indonesia) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Hari ini kita akan berjalan melalui merancang tema majalah blog profesional di Photoshop. Ini adalah latihan dalam estetika dan Anda akan mempelajari banyak teknik yang akan meningkatkan kemampuan Anda dalam Photoshop.  Ambil kopi, duduk dengan baik dan mari kita mulai!


Sumber

Sebelum kita masuk lebih dalam, saya akan mengenalkan Anda pada beberapa sumber yang akan membantu Anda.

Grid

Menggunakan grid membuatnya lebih mudah untuk menyelaraskan elemen dan memutuskan proporsinya. Dalam desain ini, kita akan menggunakan Baseline Grid yang dibuat oleh orang-orang hebat di Teehan+Lax. Ini adalah grid dasar 6px yang digabungkan dengan sistem grid 960.

Tipografi

Lakukan dengan serius, saat Anda memilih tipografi. Dengan memilih font yang tepat, Anda akan mencapai desain yang sukses sebelum beralih ke langkah berikutnya dan mengkodekan template.  Berikut adalah beberapa artikel untuk membantu Anda memahami font yang tepat untuk proyek Anda.

Anti-Aliasing

Inilah artikel yang sangat bagus, Anda harus membaca yang ini! Saya tidak akan mengatakan sepatah kata pun, kecuali untuk body copy (ukuran point kecil) kita akan menggunakan Sharp, dan untuk heading (ukuran point lebih besar) kita akan menggunakan Crisp.

Pola

Dan unduhan cepat untuk koleksi .pat Anda.


Langkah 1: Pengaturan Dokumen

Buka Adobe Photoshop (saya menggunakan CS5.1, tapi itu tidak perlu diikuti).  Seperti disebutkan di atas, Anda harus mengambil salinan Baseline Grid TeehanLax. Ekstrak isi dari teehanlax_baseline_grid.zip, buka folder Teehanlax Baseline Grid dan seret grid2.psd ke Photoshop.

Hal pertama yang akan kita lakukan adalah memilih semua lapisan yang ada dalam dokumen dan menghapusnya.  Semua, kecuali folder "Marks". Setelah selesai, kunci folder Marks di panel layer.

Kita akan membangun tata letak yang cukup panjang, jadi lanjutkan dan ubah tinggi dokumen. Untuk melakukannya menerapkan pengaturan berikut dengan membuka Image > Canvas Size, mengubah ketinggian dan mengatur Anchor to Top Center.

Ketik View > Extras (untuk melihat Guides), Rulers (untuk melihat Rulers).


Langkah 2: Membuat Latar Belakang

Buat layer baru, sebut saja "BG", pilih Paint Bucket Tool (G), isi latar belakang dengan nilai warna putih ini: #FFFFFF. Lalu pergi ke Filter > Noise > Add Noise dan terapkan pengaturan berikut untuk memberi efek Noise yang lembut pada latar belakang.

  • Amount: 3.
  • Distribution: Uniform.
  • Monochromatic: Check.

Langkah 3: Membuat Navigation Bar

Untuk membuat navigation bar, pilih Rectangle Tool (U), buat empat persegi panjang 1260x49px tapi, pastikan Anda telah mengatur Color's Box menjadi nilai warna: #000000.

Petunjuk: "Jika Anda masuk ke dalam opsi pembuatan bentuk, ada kotak centang untuk "snap to pixels". Sekarang ketika Anda membuat bentuk, itu akan selalu segar karena titik-titik itu tidak pernah mendarat 'di antara' piksel." - Jeff

Dari panel layer, pilih layer navigation bar kita dan seret ke folder baru (alternatifnya, Anda bisa melakukannya dengan menekan dan tahan secara bersamaan papan tombol CTR +G) lalu beri nama folder Header, ingatlah bahwa kita sedang mengerjakan area header.

Mari kita bekerja pada layer warna dengan menggunakan Gradient Overlay. Pilih bentuk layer yang telah kita panggil "navigation bar" dan masuk ke Layer > Layer Style > Gradient Overlay. Terapkan pengaturan berikut.

Pekerjaan bagus sejauh ini! Mari beralih dengan menerapkan pengaturan gaya layer lainnya.

Gradient Overlay.

  • Blend Mode: Normal.
  • Opacity: 100%.
  • Gradient Reverse: Check.
  • Styler: Linear.
  • Angle: 90°.
  • Scale: 150%.

Inner Shadow.

  • Blend Mode: Normal.
  • Opacity: 10%.
  • Angle: -90.
  • Use global light: Uncheck.
  • Distance: 5px.
  • Choke: 0%.
  • Size: 8px.

Drop Shadow.

  • Blend Mode: Normal.
  • Opacity: 42%.
  • Angle: 90.
  • Use global light: Uncheck.
  • Distance: 2px.
  • Spread: 0%.
  • Size: 3px.

Kutipan: Smart Objects diperkenalkan ke Photoshop dengan merilis CS2. Smart Filters ditambahkan di CS3. Jadi Anda memerlukan versi Photoshop saat ini untuk memanfaatkan teknik nondestructive semacam ini. Smart Objects dan Smart Filters memungkinkan alur kerja yang fleksibel. Smart Objects mengarah ke objek vektor asli, gambar raster, atau file RAW.

Menggunakan Smart Objects berarti Anda bekerja dengan gambar referensi. Jadi saat bekerja dengan Smart Objects, perubahan yang diterapkan pada mereka tidak mempengaruhi citra aslinya. Anda bahkan bisa menyimpan efek ini dan menukar gambar. Smart Filters juga bukan efek permanen, namun bisa diedit atau dihilangkan. Normal Filters  tidak dapat diubah, setidaknya setelah menyimpan dokumen. Psdtuts+


Untuk menerapkan Smart Filters ikuti gambar di bawah ini.

Tambahkan efek Noise ke layer Smart filters kita.

  • Amount: 1.
  • Distribution: Uniform.
  • Monochromatic: Check.

Berikut bagaimana itu akan terlihat ketika Anda mengkonversi layer ke Smart Filters.

Saya telah menerima banyak pertanyaan tentang membuat efek penempelan di Photoshop. Ini tidak terlalu sulit; cukup pilih Horizontal Type Tool (T), lalu tahan papan tombol Negatif (-) sampai anda mendapatkan hasilnya di bawah ini.

Beri layer nilai warna ini: #1C1C1C, lalu terapkan pengaturan Drop Shadow.

  • Blend Mode: Normal.
  • Opacity: 10%.
  • Angle: -90.
  • Use global light: Uncheck.
  • Distance: 1px.
  • Choke: 0%.
  • Size: 0px.

Seperti yang Anda lihat pada gambar di bawah ini, kita memiliki efek menempel yang cukup meyakinkan.

Navigasi kita sedikit lebih gelap. Kupikir mungkin aku harus menerapkan sedikit cahaya, bagaimana menurutmu? Buatlah salinan dari navigation bar, lalu bersihkan gaya layer dan atur Layer Pengisi menjadi 0%.

Terapkan pengaturan gaya layer seperti yang Anda lihat pada gambar di bawah ini.

Gradient Overlay.

  • Blend Mode: Normal.
  • Opacity: 8%.
  • Gradient Reverse: Check.
  • Styler: Linear.
  • Angle: 90°.
  • Scale: 100%.

Inner Shadow.

  • Color: #FFFFFF.
  • Blend Mode: Normal.
  • Opacity: 10%.
  • Angle: 90.
  • Use global light: Uncheck.
  • Distance: 1px.
  • Choke: 100.
  • Size: 0px.

Ini adalah sebelum dan sesudah referensi.

Pilih Horizontal Type Tool (T), ketik teks navigasi Anda, lalu terapkan pengaturan karakter berikut seperti yang Anda lihat pada gambar di bawah ini.

  • Font: Helvetica Neue LT Std.
  • Weight: 55 Roman.
  • Size: 12px.
  • Kerning: Metrics.
  • Color: #EBEBEB.
  • Anti-Aliasing: Sharp.

Langkah 4: Membuat Menu yang Terbuka Ke Bawah

Ya, saatnya membuat menu yang terbuka ke bawah. Ambil Rounded Rectangle Tool (U), buat bentuk lingkaran 147x120px dan ingatlah untuk menjaga kualitas tepinya sebanyak mungkin - pixel perfection!

Lakukan seleksi dengan Rectangular Marquee Tool (M), inversikan yang telah di seleksi. Sekarang tambahkan mask baru ke layer kita dengan mengikuti pengaturan Layer > Layer Mask > Reveal Selection. Kita sekarang secara efektif memangkas bagian atas.

Inverse.

Layer Mask.

Ini adalah tampilan layer mask.

Sekarang, mari berikan sedikit bentuk melingkar pada efek gradien overlay.

Gradient Overlay.

  • Blend Mode: Normal.
  • Opacity: 100%.
  • Gradient Reverse: Uncheck.
  • Styler: Linear.
  • Angle: 90°.
  • Scale: 100%.

Drop Shadow.

  • Blend Mode: Normal.
  • Opacity: 76%.
  • Angle: -90.
  • Use global light: Uncheck.
  • Distance: 2px.
  • Spread: 0%.
  • Size: 0px.

Beralih ke langkah berikutnya dan terapkan efek noise.

  • Amount: 2.
  • Distribution: Uniform.
  • Monochromatic: Check.

Pilih Rectangular Marquee Tool (M), buat pilihan dari 147x49px, isi dengan nilai warna berikut: #FFFFFF.

Namakan "Transparent", atur Layer Pengisi ke 0%.

Setelah menyelesaiknya terapkan efek gradient transparent seperti yang dapat Anda lihat dibawah.

Dan ini yang akan terlihat setelah diterapkan efek gradien transparent.

Sekarang apa yang akan kita lakukan adalah menduplikasi salinan layer persegi panjang yang bundar dan atur Layer Pengisi menjadi 0%. Kita kemudian akan menerapkan efek gradient transparent.

Gradient Overlay.

  • Blend Mode: Normal.
  • Opacity: 8%.
  • Gradient Reverse: Uncheck.
  • Styler: Linear.
  • Angle: 90°.
  • Scale: 100%.

Inner Shadow.

  • Color: #FFFFFF.
  • Blend Mode: Normal.
  • Opacity: 10%.
  • Angle: 90.
  • Use global light: Uncheck.
  • Distance: 1px.
  • Choke: 100.
  • Size: 0px.

Gunakan Rectangular Marquee Tool (M) untuk membuat garis horizontal pemisah dengan #b4b4b4 seperti yang dapat Anda lihat pada gambar dibawah ini.

Ambil Horizontal Type Tool (T), mulai menuliskan elemen-elemen dari sub_menu, pergunakan pengaturan karakter berikut.

  • Font: Helvetica Neue LT Std.
  • Weight: 55 Roman.
  • Size: 12px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #EBEBEB.
  • Anti-Aliasing: Sharp.

Ingat bahwa teks harus berada pada Baseline Grid.


Langkah 5: Membuat Logo

Ambil Horizontal Type Tool (T), tuliskan nama situs web Anda menggunakan pengaturan karakter berikut:

  • Font: Arial.
  • Weight: Black.
  • Size: 48px.
  • Kerning: Metrics.
  • Color: #202020-D55355.
  • Anti-Aliasing: Crisp.

Langkah 6: Membuat Header Banner

Pergunakan Rectangular Marquee Tool (M) untuk membuat seleksi dari 468x60px, isi dengan nilai warna ini: #474747, kemudian terapkan efek Stroke.

Stroke.

  • Size: 3px.
  • Position: Inside.
  • Blend Mode: Normal.
  • Opacity: 100%.
  • Fill type: Color.
  • Color: #FFFFFF.

Dan berikut bagaimana itu akan terlihat ketika Anda menyelesaikan semua langkah tersebut


Langkah 6: Membuat Slideshow

Ok, mari memulai dengan slideshow. Pilih Rectangle Tool (U), buat empat persegi panjang dengan 700x254px, kemudian terapkan pengaturan berikut.

Drop Shadow.

  • Color: #000000.
  • Color: #000000.
  • Opacity: 50%.
  • Angle: 90.
  • Use global light: Uncheck.
  • Distance: 0px.
  • Spread: 0%.
  • Size: 5px.

Seret gambar ke dalam dokumen dan buat clipping mask dengan menahan ALT+CTRL+G, Anda bisa melakukannya dengan mengikuti pengaturan Layer > Create Clipping Mask.

Clipping Mask.

Kembali, pilih Rectangle Tool (U), buat empat persegi panjang 128x211px dan terapkan clipping mask padanya.

Sekarang saatnya kita membuat slide pop sedikit dengan menambahkan beberapa bayangan di balik slider. Pilih Rectangle Marquee Tool (M), buatlah pilihan bentuk layer seperti yang Anda lihat pada gambar di bawah ini.

Pilih Gradient Tool (G), pastikan itu adalah bayangan transparent gradient.

Inilah informasi cepat untuk membuat bayangan yang tepat; Setelah Anda memilih alat gradien klik dan seret dan pastikan jari Anda ada di papan tombol SHIFT.

Ulangi proses yang sama pada layer di sebelah kanan.

Hmm ... Saya pikir slideshow kita perlu direkatkan, bagaimana menurutmu? Ambil Rectangle Tool (U), buat empat persegi panjang horizontal setinggi 2px, lalu terapkan pengaturan pola berikut.

Pattern Overlay.

  • Blend Mode: Normal.
  • Opacity: 31%.
  • Scale: 100%
  • Link with layer: Check.

Buat salinan penempelan  kita dan seret sedikit ke bawah seperti yang Anda lihat pada gambar di bawah ini.

Ini bagaimana tampilannya saat Anda menerapkan efek menempel ke sisa gambar.

Ada satu langkah lagi untuk melengkapi slideshow kita, papan tombol navigasi. Ambil Round Rectangle Tool (U), buat bentuk bulat 119x19px, lalu terapkan pengaturan gaya layer untuknya.

Stroke.

  • Size: 1px.
  • Position: Outside.
  • Blend Mode: Normal.
  • Opacity: 22%.
  • Fill type: Pattern.
  • Scale: 100%
  • Link with layer: Check.

Drop Shadow.

  • Color: #000000.
  • Blend Mode: Normal.
  • Opacity: 20%.
  • Angle: 90.
  • Use global light: Uncheck.
  • Distance: 0px.
  • Spread: 0%.
  • Size: 3px.

Sekali lagi, pilih Rounded Rectangle Tool (U), buat bentuk bulat, beri lapisan nilai warna ini: #DFDFDF, lalu terapkan pengaturan gaya layer di bawah ini.

Gradient Editor.

Gradient Overlay.

  • Blend Mode: Normal.
  • Opacity: 100%.
  • Gradient Reverse: Uncheck.
  • Styler: Linear.
  • Angle: 90°.
  • Scale: 100%.

Inner Shadow.

  • Color: #000000.
  • Blend Mode: Normal.
  • Opacity: 12%.
  • Angle: 120°.
  • Use global light: Check.
  • Distance: 2px.
  • Choke: 0%.
  • Size: 2px.

Gunakan alat yang sama untuk membuat sisa papan tombol.

Kita belum selesai! Kita perlu melakukan satu hal lagi, kita akan membuat ikon kecil di bawah slideshow kita. Pilih Custom Shape Tool (U), lalu pilih bentuk seperti pada gambar di bawah ini.

Catatan editor: Saya tidak tahu elemen UI ini untuk apa! Kami akan meletakkannya ke kebijaksanaan perancang :)

Berikan layer bentuk nilai warna ini: #FFFFFF

Ambil Polygonal Lasso Tool (L), bagi menjadi setengah dari bentuk dengan membuat pilihan seperti yang Anda lihat pada gambar di bawah ini.

Ingat bagaimana kita mengaplikasikan clipping masks tadi? Baiklah kalau begitu, berikan bentuk layer mask.

Dan begitulah, kita telah selesai membuat slideshow kita.


Langkah 7: Membuat Categories

Mari kita mulai dulu dengan Love Button. Pilih Rectangle Marquee Tool (M), buat empat persegi panjang vertikal 60px, gunakan alat gradien untuk membuat bayangan transparan.

Ubah opacity dai layer kita ke 10%.

Pilih Rectangle Tool (U), buat empat persegi panjang vertikal 1x173px, lalu terapkan pengaturan berikut. Ingat bahwa kita selalu mengatur Layer Pengisi menjadi 0%.

Pattern Overlay.

  • Blend Mode: Normal.
  • Opacity: 25%.
  • Scale: 100%
  • Link with layer: Check.

Buatlah salinan lapisan vertikal, seret sedikit ke kanan seperti yang Anda lihat pada gambar di bawah ini.

Mari tambahkan teks ke love button kita. Pilih Horizontal Type Tool (T), ketik angka, lalu terapkan pengaturan karakter berikut.

  • Font: Arial.
  • Weight: Bold.
  • Size: 28px.
  • Kerning: Metrics.
  • Color: #E0E0E0.
  • Anti-Aliasing: Sharp.

Loves.

  • Font: Georgia.
  • Weight: Bold Italic.
  • Size: 21px.
  • Kerning: Metrics.
  • Color: #E0E0E0.
  • Anti-Aliasing: Sharp.

Kita akan menyelesaikan love button dengan menciptakan bentuk hati. Pilih Custom Shape Tool (U), pilih bentuk hati, beri layer ini nilai warna: #D25455.

Setelah menyelesaikan love button mari kita pindah ke langkah selanjutnya, menempatkan teks dan gambar thumbnail. Pilih Horizontal Type Tool (T), ketik nama kategori kita yang dalam hal ini adalah "Business > Gamification", lalu terapkan pengaturan karakter berikut.

Kategori.

  • Font: Georgia.
  • Weight: Bold Italic.
  • Size: 13px.
  • Kerning: Metrics.
  • Color: #5E5E5E.
  • Anti-Aliasing: Crips.

Judul.

  • Font: Helvetica Neue LT Std.
  • Weight: 55 Roman.
  • Size: 18px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #5E5E5E.
  • Anti-Aliasing: Crips.

Ditulis oleh, Tanggal, Komentar.

  • Font: Georgia.
  • Weight: Regular.
  • Size: 13px.
  • Kerning: Metrics.
  • Color: #5E5E5E-#AAAAAA.
  • Anti-Aliasing: Crips.

Deskripsi.

  • Font: Arial.
  • Weight: Regular.
  • Size: 13px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #5E5E5E.
  • Anti-Aliasing: Crips.

Tags.

  • Font: Georgia.
  • Weight: Regular.
  • Size: 11px.
  • Kerning: Metrics.
  • Color: #5E5E5E.
  • Anti-Aliasing: Crips.
  • Font: Georgia.
  • Weight: Regular.
  • Size: 13px.
  • Kerning: Metrics.
  • Color: #AAAAAA.
  • Anti-Aliasing: Crips.

Saatnya untuk membuat Thumbnail Image. Ambil Rectangle Tool (U), buat empat persegi panjang 160x157px, terapkan pengaturan gaya layer berikut.

Stroke.

  • Size: 3px.
  • Position: Inside.
  • Blend Mode: Normal.
  • Opacity: 100%.
  • Fill type: Color.
  • Color: #FFFFFF.

Drop Shadow.

  • Color: #000000.
  • Blend Mode: Normal.
  • Opacity: 20%.
  • Angle: 90°.
  • Use global light: Uncheck.
  • Distance: 0px.
  • Spread: 0%.
  • Size: 3px.

Tambahkan gambar baru ke layer bentuk kita dan gabungkan gambar dengan layer bentuk dengan menerapkan Teknik Mask; Layer > Create Clipping Mask.

Kita hampir menyelesaikan kategori pertama. Ambil Rectangle Tool (U), gunakan untuk membuat empat persegi panjang setinggi 1px seperti yang Anda lihat pada gambar di bawah ini, lalu terapkan pengaturan berikut.

Pattern Overlay.

  • Blend Mode: Normal.
  • Opacity: 10%.
  • Scale: 100%
  • Link with layer: Check.

Ini adalah bagaimana seharusnya terlihat setelah Anda membuat sisa kategori. Ingat bahwa antara setiap kategori adalah 29px tinggi ruang putih.


Langkah 8: Membuat Tulisan Lama

Untuk membuat tulisan lama, ambil dulu Rectangle Tool (U) dan buat empat persegi panjang 280x11px.

Buat ruang kosong dengan membuat seleksi 100px, ingatlah untuk memotong bagian bawah layer, pastikan bahwa Anda telah menggunakan teknik mask.

Ini adalah ruang kosong dimana kita akan menambahkan "old posts" teks kita.

Terapkan pengaturan gaya layer.

Pattern Overlay.

  • Blend Mode: Normal.
  • Opacity: 10%.
  • Scale: 100%
  • Link with layer: Check.

Ketikan "OLD POSTS", Kemudian terapkan pengaturan karakter berikut.

  • Font: Helvetica Neue (TT).
  • Weight: Bold.
  • Size: 14px.
  • Kerning: Metrics.
  • Color: #999999.
  • Anti-Aliasing: Crisp.

Buat garis vertikal kecil menggunakan Rectangle Tool (U) dengan 1px, lalu aplikasikan efek penempelan ke dalamnya. Ingatlah untuk mengatur opacity fill menjadi 0%.

Pattern Overlay.

  • Blend Mode: Normal.
  • Opacity: 10%.
  • Scale: 100%
  • Link with layer: Check.

Ambil Rectangle Tool (U), buat empat persegi panjang 60x61px, terapkan pengaturan yang sama seperti yang kita lakukan dengan kategori thumbnail image.

Stroke.

  • Size: 3px.
  • Position: Inside.
  • Blend Mode: Normal.
  • Opacity: 100%.
  • Fill type: Color.
  • Color: #FFFFFF.

Drop Shadow.

  • Color: #000000.
  • Blend Mode: Normal.
  • Opacity: 20%.
  • Angle: 90°.
  • Use global light: Uncheck.
  • Distance: 0px.
  • Spread: 0%.
  • Size: 3px.

Tambahkan gambar dan Anda akan mendapatkan hasil seperti ini.

Pilih Horizontal Type Tool (T), ketik nama kategori dan tanggalnya, lalu terapkan pengaturan karakter berikut.

  • Font: Georgia.
  • Weight: Regular.
  • Size: 12px.
  • Kerning: Metrics.
  • Color: #5E5E5E-AAAAAA.
  • Anti-Aliasing: Crisp.

Judul.

  • Font: Georgia.
  • Weight: Regular.
  • Size: 18px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #5E5E5E.
  • Anti-Aliasing: Crips.

Ini bagaimana tampilannya saat Anda membuat kategori lainnya, di antara setiap kategori terdapat 18px ruang putih.


Langkah 9: Membuat Next page

Untuk membuat halaman berikutnya, ambil Rectangle Tool (U), buat empat persegi panjang 35x37px, beri warna layer bentuk ini: #333333.

Sekali lagi, ambil Rectangle Tool (U), buat bentuk lainnya, beri layer nilai warna ini: #CCCCCC.

Pilih Horizontal Type Tool (T), ketik nomor halaman, lalu terapkan pengaturan karakter berikut seperti yang Anda lihat pada gambar di bawah ini.

  • Font: Helvetica Neue LT Std.
  • Weight: 55 Roman.
  • Size: 13px.
  • Kerning: Metrics.
  • Color: #5E5E5E.
  • Anti-Aliasing: Crisp.

Pilih Pencil Tool (B) dan (dengan hati-hati!) buat nama ikon piksel yang terlihat dibawah ini.


Langkah 10: Buat Bagian “Social Media”

Ambil Rectangle Tool (U), buat empat persegi panjang 300x100px seperti yang kita lakukan dengan bagian tulisan lama, buat ruang kosong 100px, lalu terapkan pengaturan yang sama. Kita akan memiliki hasil di bawah ini.

Ketik teks berlangganan, lalu terapkan pengaturan karakter berikut untuknya.

  • Font: Helvetica Neue (TT).
  • Weight: Bold.
  • Size: 14px.
  • Kerning: Metrics.
  • Color: #888888.
  • Anti-Aliasing: Crisp.

Saatnya untuk menambahkan ikon media sosial. Kami akan menggunakan ikon Subscribe dan Twitter, jadi ambil beberapa ikon yang sesuai (cobalah dari Design Kindle) dan seret beberapa ke dokumen Anda. Kemudian terapkan pengaturan karakter berikut.

Jumlah langganan (subscribers).

  • Font: Georgia.
  • Weight: Regular.
  • Size: 20px.
  • Kerning: Metrics.
  • Color: #444444.
  • Anti-Aliasing: Crisp.

Subscribers.

  • Font: Georgia.
  • Weight: Regaluar.
  • Size: 13px.
  • Kerning: Metrics.
  • Color: #999999.
  • Anti-Aliasing: Crisp.

Terapkan pengaturan yang sama untuk bagian Twitter seperti yang dapat Anda lihat pada gambar dibawah ini.

Dan berikut bagaimana itu muncul setelah Anda selesai.


Langkah 10: Membuat Bagian “Search Box”

Untuk membuat bagian kotak pencarian, ambil Rounded Rectangle Tool (U), buat bentuk bulat 220x31, lalu terapkan pengaturan gaya layer berikut.

Gradient Editor.

Gradient Overlay.

  • Blend Mode: Normal.
  • Opacity: 100%.
  • Gradient Reverse: Check.
  • Styler: Linear.
  • Angle: 90°.
  • Scale: 100%.

Stroke.

  • Size: 1px.
  • Position: Inside.
  • Blend Mode: Normal.
  • Opacity: 22%.
  • Fill type: Pattern.
  • Scale: 100%
  • Link with layer: Check.

Itu akan terlihat seperti ini:

Sekali lagi, ambil Rounded Rectangle Tool (U), buat bentuk papan tombolnya, beri Layer Shape nilai warna ini: #2D2D2D, ubah bentuknya menjadi Smart Filter dengan pergi ke Filter > Convert for Smart Filters, lalu terapkan pengaturan berikut.

Gradient Overlay.

  • Blend Mode: Soft Light.
  • Opacity: 60%.
  • Gradient Reverse: Check.
  • Styler: Linear.
  • Angle: 90°.
  • Scale: 100%.

Add Noise.

  • Amount: 2.
  • Distribution: Uniform.
  • Monochromatic: Check.

Pilih Horizontal Type Tool (T), ketik "Search Here" dalam bentuk dan "Search" pada form papan tombol, lalu terapkan pengaturan karakter berikut.

  • Font: Helvetica Neue (TT).
  • Weight: Bold.
  • Size: 12px.
  • Kerning: Metrics.
  • Color: #D8D8D8.
  • Anti-Aliasing: Crisp.

Langkah 11: Buat Bagian “Sponsors”

Unduh atau buat banner iklan 125x125px seperti yang Anda lihat pada gambar di bawah ini.


Langkah 11: Membuat Bagian “Most Popular”

Ambil Rounded Rectangle Tool (U), buat bentuk bulat 368x301px, atur Layer Pengisi menjadi 0%, lalu terapkan pengaturan gaya layer berikut ke dalamnya.

Drop Shadow.

  • Color: #000000.
  • Blend Mode: Normal.
  • Opacity: 28%.
  • Angle: 90°.
  • Use global light: Uncheck.
  • Distance: 0px.
  • Spread: 0%.
  • Size: 3px.

Begitulah tampilannya sekarang. Pastikan Anda sudah mengatur Layer Pengisi ke 0% agar kita bisa bekerja dengan form kosong.

Sekali lagi, ambil Rounded Rectangle Tool (U) dan mari kita bekerja pada bagian di atas yaitu "TAB". Buat bentuk bulat 230x36px, berikan layer bentuk nilai warna ini: #F4F3F3, lalu terapkan pengaturan berikut.

Gradient Overlay.

  • Blend Mode: Overlay.
  • Opacity: 50%.
  • Gradient Reverse: Check.
  • Styler: Linear.
  • Angle: 90°.
  • Scale: 130%.

Add Noise.

  • Amount: 1.
  • Distribution: Uniform.
  • Monochromatic: Check.

Ambil Rectangle Tool (U), buat tiga garis vertikal, beri layer bentuk ini nilai warna ini: #DEDEDE seperti yang Anda lihat pada gambar di bawah ini.

Ambil Horizontal Type Tool (T), ketik nama bagian Most Popular dengan menggunakan pengaturan karakter berikut.

  • Font: Helvetica.
  • Weight: Bold.
  • Size: 12px.
  • Kerning: Metrics.
  • Color: #555555.
  • Anti-Aliasing: Crisp.

Pada langkah ini kita akan membuat gambar thumbnail kecil, ambil Rectangle Tool (U), buat empat persegi panjang 40x43px, lalu terapkan pengaturan gaya layer berikut.

Stroke.

  • Size: 2px.
  • Position: Inside.
  • Blend Mode: Normal.
  • Opacity: 100%.
  • Fill type: Color.
  • Color: #FFFFFF.

Drop Shadow.

  • Color: #000000.
  • Blend Mode: Normal.
  • Opacity: 47%.
  • Angle: 90°.
  • Use global light: Uncheck.
  • Distance: 0px.
  • Spread: 0%.
  • Size: 2px.

Tambahkan sebuah gambar dan Anda akan mendapatkan hasil berikut.

Ambil Horizontal Type Tool (T), ketik nama tulisan kita, lalu terapkan pengaturan karakter berikut.

  • Font: Helvetica Neue LT Std.
  • Weight: 55 Roman.
  • Size: 14px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #444444.
  • Anti-Aliasing: Crisp.

Date.

  • Font: Georgia.
  • Weight: Italic.
  • Size: 12px.
  • Kerning: Metrics.
  • Color: #C0C0C0.
  • Anti-Aliasing: Crisp.

Buat baris 368x1px yang menempel.

Ini adalah bagaimana tampilannya setelah Anda menyelesaikan semua langkah di atas. Buat enam salinannya.


Langkah 12: Membuat Bagian “News Subscribe”

Buatlah salinan folder kotak pencarian dan ganti nama "Search here" ke "Enter your email" dan "Search" ke "Subscribe". Sederhana!


Langkah 13: Membuat Bagian “Categories and Pages”

Untuk membuat bagian kategori dan halaman, ambil Horizontal Type Tool (T), ketik nama kategori Anda, lalu terapkan pengaturan karakter berikut seperti yang Anda lihat pada gambar di bawah ini.

  • Font: Helvetica Neue (TT).
  • Weight: Bold.
  • Size: 12px.
  • Kerning: Metrics.
  • Leading: 36px.
  • Color: #5E5E5E.
  • Anti-Aliasing: Crisp.

Kanan.

  • Font: Helvetica Neue (TT).
  • Weight: Bold.
  • Size: 12px.
  • Kerning: Metrics.
  • Leading: 36px.
  • Color: #5E5E5E.
  • Anti-Aliasing: Crisp.

Berikut hasil terakhir dari bagian kategori dan halaman kita.


Langkah 14: Membuat Bagian “Video of the week”

Ambil Rectangle Tool (U), buat empat persegi panjang 300x181px, tambahkan gambar ke dalamnya, lalu terapkan pengaturan gaya layer berikut.

Stroke.

  • Size: 3px.
  • Position: Inside.
  • Blend Mode: Normal.
  • Opacity: 100%.
  • Fill type: Color.
  • Color: #FFFFFF.

Drop Shadow.

  • Color: #000000.
  • Blend Mode: Normal.
  • Opacity: 12%.
  • Angle: 90°.
  • Use global light: Uncheck.
  • Distance: 0px.
  • Spread: 0%.
  • Size: 3px.

Berikut hasil terakhir bidang "video of the week" kita.


Langkah 15: Membuat Area Footer

Ambil Rectangle Tool (U), buat empat persegi panjang 1260x721, berikan layer bentuk nilai warna ini: #2D2D2D, lalu terapkan pengaturan berikut untuknya.

Tambahkan Noise.

  • Amount: 1.
  • Distribution: Uniform.
  • Monochromatic: Check.

Sekali lagi, ambil Rectangle Tool (U), buat bagian di atas dengan tinggi 19px, berikan layer bentuk nilai warna ini: #2D2D2D.

Ingat teknik penempelan? Ok kemudian, terapkan itu pada bagian di atas.

Ambil Horizontal Type Tool (T), ketik nama logo situs web Anda dengan menggunakan pengaturan karakter berikut.

  • Font: Arial.
  • Weight: Black.
  • Size: 13px.
  • Kerning: Metrics.
  • Color: #202020-D55355.
  • Anti-Aliasing: Crisp.

Buat bentuk empat persegi panjang 60x10px, setel Layer Pengisi ke 0%, lalu terapkan pengaturan pola (pattern) berikut.

Pattern Overlay.

  • Blend Mode: Normal.
  • Opacity: 34%.
  • Scale: 100%
  • Link with layer: Check.

Ambil Horizontal Type Tool (T), ketik deskripsi situs web Anda dengan menggunakan pengaturan karakter berikut.

  • Font: Arial.
  • Weight: Regular.
  • Size: 13px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #E0E0E0.
  • Anti-Aliasing: Crisp.

Twitter.

  • Font: Helvetica Neue (TT).
  • Weight: Bold.
  • Size: 14px.
  • Kerning: Metrics.
  • Color: #FFFFFF.
  • Anti-Aliasing: Crisp.

Judul.

  • Font: Arial.
  • Weight: Regular.
  • Size: 13px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #E0E0E0.
  • Anti-Aliasing: Crisp.

Tanggal.

  • Font: Georgia.
  • Weight: Italic.
  • Size: 12px.
  • Kerning: Metrics.
  • Color: #8F8F8F.
  • Anti-Aliasing: Crisp.

Buat baris pemisah horizontal 221px seperti yang Anda lihat dibawah ini.

Berikut bagaimana itu terlihat ketika Anda telah melakukan semua langkah di atas, buat lima salinan darinya.

Terapkan pengaturan yang sama pada bagian tulisan terbaru.

  • Font: Arial.
  • Weight: Regular.
  • Size: 13px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #E0E0E0.
  • Anti-Aliasing: Crisp.

Tambahkan bagian Flickr seperti yang dapat Anda lihat dibawah.

Ambil Rectangle Tool (U), buat empat persegi panjang setinggi 73px untuk copyright bar, lalu terapkan teknik penempelan.

Ambil Horizontal Type Tool (T), ketik nama hak cipta, lalu terapkan pengaturan karakter berikut.

  • Font: Arial.
  • Weight: Regular.
  • Size: 13px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #E0E0E0.
  • Anti-Aliasing: Crisp.

Hak cipta (copyright) desainer.

  • Font: Arial.
  • Weight: Regular.
  • Size: 13px.
  • Kerning: Metrics.
  • Leading: 18px.
  • Color: #E0E0E0.
  • Anti-Aliasing: Crisp.

Kesimpulan

Ini telah lama berjalan, dan saya harap Anda telah belajar sesuatu yang baru dan berguna. Anda sekarang harus bisa menerapkan beberapa teknik ini pada desain Anda sendiri, membuat keputusan sendiri sepanjang perjalanan. Jika Anda memiliki pertanyaan jangan ragu untuk bertanya di komentar di bawah ini dan saya akan melakukan yang terbaik untuk membantu. Terima kasih sudah ikut sejauh ini!

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.