Bagian 1 - Membuat Kertas Tekstur
Ada tiga cara yang berbeda Anda bisa mendapatkan kertas bertekstur lihat:
- Memindai dalam makalah Anda sendiri
Periksa Bittbox yang Membuat Awesome Grunge Paper Texture Tutorial - Gunakan tekstur orang lain
Ada tumpukan situs yang daftar tekstur sekitar, memeriksa link ini: Bittbox | TextureKing | PSDTUTS + Textures - Buatlah di Photoshop
Ini adalah apa yang akan kita lakukan!
Membuat tekstur di Photoshop umumnya akan menghasilkan lebih bergaya daripada tampilan yang realistis, tetapi memiliki daya tarik tersendiri. Juga itu berarti Anda tidak memerlukan gambar eksternal.
Langkah 1
Jadi pertama kita akan memulai dokumen baru, kanvas ini adalah 1200px wide x 900px tinggi. Selanjutnya kita mengisi lapisan latar belakang dengan warna beige - # e8e8e2.
Langkah 2
Sekarang buat layer baru di atas dan membuat foreground dan background warna: # 979a8f dan # cfd1c5yang adalah variasi dari warna aslinya. Lalu pergi ke Filter> Render> Clouds
Langkah 3
Sekarang kita jalankan Filter> Artistic> Palette Knife dengan pengaturan yang ditunjukkan pada gambar di atas. Pisau palet ternyata awan kami menjadi gumpalan ... semacam, akhirnya ini akan memberikan nuansa kusut sedikit untuk tekstur.
Langkah 4
Selanjutnya kita akan menambahkan beberapa kebisingan ke kanvas dengan Filter> Noise> Add Noisemenggunakan pengaturan ditampilkan. Hal ini seharusnya membuat kita terlihat tekstur kasar.
Langkah 5
Sekarang kita mengambil bising, lapisan kumuh dan mengaturnya untuk Multiply dan 30%. Ini akan nada itu segera kembali.
Langkah 6
Sekarang buat layer baru di atas dan membuat foreground dan background warna: # 42433e dan # cfd1c5- yang merupakan versi lebih gelap dari set terakhir sehingga kita mendapatkan lebih kontras saat ini. Lalu pergi ke Filter> Render> Clouds
Langkah 7
Kemudian kita jalankan lagi Filter> Artistic> Palette Knife filter.
Langkah 8
Dan kali ini kita mengatur lapisan ke Overlay dan baru 60%. Hal ini akan memberikan tekstur kami sedikit lebih mendalam.
Dan itu saja! Ini adalah tekstur kami!
Langkah 9
Untuk tutorial ini tekstur cahaya yang sempurna, tetapi Anda dapat dengan mudah membuat variasi lain hanya dengan mengotak-atik alat pencampuran. Misalnya untuk membuat tekstur kertas cokelat gelap ini:
- Ambil versi ringan dan tekan CTRL-U untuk mengubah Hue / Saturation, atur slider untuk -30, -10 dan -5 masing-masing.
- Gandakan layer dan tekan CTRL-SHIFT-U untuk membuatnya hitam dan putih
- Kemudian masih pada lapisan hitam dan putih, pergi ke Edit> Adjustments> Brightness / Contrastdan pergi ke -30 dan +30 masing-masing
- Sekarang mengatur lapisan hitam dan putih ke Overlay
- Kemudian membuat lapisan lain di atas dan mengisinya dengan # beac93 kemudian mengubah lapisan ke Multiply.
- Gandakan layer dikalikan
- Kemudian duplikat layer hitam dan putih dan tarik kanan ke atas. Set ke Overlay dan 20% dan putar 90 'untuk mendapatkan sedikit lebih mendalam untuk tekstur.
Langkah 10
Jika variasi warna tidak cukup, Anda juga dapat mengubah nuansa tekstur dengan menggunakan filter yang berbeda . Sebagai contoh di sini kami telah membuat lebih perkamen-y merasa dengan mengambil tekstur yang ringan dan:
- Ambil lapisan kumuh / noise pertama dan menjalankan Filter> Texture> Texturizer dan menggunakan kanvas, 75% dan 2 untuk pengaturan Anda
- Ambil lapisan kumuh / noise kedua dan menjalankan filter yang sama
- Sekarang duplikat layer kedua dan putar 90 ', menjaganya agar tetap diatur ke Overlay dan 60%.
- Buat layer baru di atas dan mengisinya dengan warna putih - # ffffff
- Jalankan Filter> Texture> Texturizer dan ini menggunakan waktu Canvas, 200% dan 16 kemudian mengatur lapisan ini ke Overlay dan 20%
- Sekarang membuat lapisan lain di atas dan lagi mengisinya dengan warna putih, kali ini mengubah blending mode layer ke Color dan 53% untuk mendapatkan tekstur kami sedikit lebih putih.
Catatan tekstur kertas akhir
Sekarang bahwa Anda memiliki tekstur tentunya Anda bisa mengubahnya menjadi latar belakang mulus ubin .
Untuk tutorial ini kita akan menggunakan tekstur pertama yang kami buat - satu dari langkah 8.
Bagian 2 - Membuat Website Layout
Jadi sekarang kita akan membuat tata letak portofolio untuk pergi dengan tekstur kertas kami. Berikut adalah struktur perkiraan untuk homepage. Seperti yang Anda lihat itu sedikit lebih dari sebuah struktur rumit daripada di sebelumnya tata letak web tutorial karena kali ini kami memiliki tata letak di dalam tata letak.
Jadi jaringan kami secara keseluruhan adalah tiga kolom grid, kemudian di panel utama, kami telah menggunakan jaringan itu untuk memecah wilayah tersebut menjadi dua ruang utama, satu adalah ukuran kolom 1 dan bentang lainnya atas kedua kolom lainnya.
Langkah 13
Jadi pertama kita akan membuat area kerja dan meringankan itu. Jadi di sini saya telah menyeret dua pemandu pada layar, satu di 100px dan satu di 1100px - yang membuat daerah saya sedang bekerja persis 1000px yang sempurna.
Lalu kita buat layer baru dan menggambar kotak putih besar seperti yang ditunjukkan.
Langkah 14
Selanjutnya kita akan mengatur kotak putih kembali ke 25% opacity.
Kemudian kita akan kasar permukaannya itu. Ada banyak besar sikat grunge sekitar, tapi untuk langkah ini kita hanya akan menggunakan satu kuas standar Photoshop. Anda bisa melihatnya dalam gambar di atas dengan 60 bawahnya.
Jika sikat ini tidak muncul untuk Anda, cukup klik panah kanan yang kecil di bagian atas layar dan pilih sikatWet Media Brushes, kemudian klik Append untuk menambahkannya ke set Anda saat ini.
Langkah 15
Jadi pilih Eraser Tool (E), pilih brush yang kita sebutkan dan kemudian pergi di sekitar tepi bentuk kami dan hanya kasar permukaannya itu namun Anda merasa. Aku sudah meninggalkan tepi atas utuh seperti yang Anda lihat.
Langkah 16
Berikutnya buat layer baru tepat di bawah kotak putih, dan menarik dalam Radial Gradient (G) akan dari putih ke transparan. Ini hanya akan menyoroti di mana kita akan menempatkan logo kami dalam satu detik.Mengatur lapisan ke Overlay dan 70%.
Langkah 17
Sekarang kita akan menambahkan sedikit "logo" - dalam kasus kami hanya sebuah kata diatur dalam jenis huruf yang bagus. Font saya telah memilih di sini adalah Egyptian710 BT yang cukup font terkenal dan cocok untuk tujuan kita karena itu sangat tidak merata mencari - huruf yang lebih tebal dari huruf kecil - dan slab serif tampilan jenis mesin tik-ish yang berjalan dengan tema paper kami.
Langkah 18
Selanjutnya kita akan membuat watermark hanya untuk menambahkan sedikit lebih banyak barang di latar belakang. Sebenarnya Anda dapat pergi gila dan menambahkan ton barang ke dalam tekstur latar belakang, tapi kami akan puas dengan watermark tunggal.
Jadi di sini saya telah ditulis kata Folio di beberapa huruf acak ( HumstSlab712 Blk ) dan saya sudah mengaturnya dalam warna ini - # c5c6ba.
Langkah 19
Sekarang mari kita ubah blending mode untuk Warna Burn dan 70% dan kami akan menambahkan stroke 1px seperti yang ditunjukkan. Perhatikan bahwa untuk Fill Type I telah menggunakan Pola dan kemudian memilih tekstur aku menggantung tentang. Ketika dikombinasikan dengan opacity rendah (36%) dan blending mode (Multiply) ini membuat garis besar kami terlihat seperti itu memudar di bagian.
Langkah 20
Sekarang kita akan pindah watermark kami untuk duduk di belakang logo.
Langkah 21
Selanjutnya kita akan membuat sedikit elemen pemisah horisontal. Jadi membuat layer baru dan menarik dalam garis 1px dalam coklat gelap.
Langkah 22
Sekarang ambil bahwa sikat penghapus lama yang sama dan hanya pergi melewati garis menghapus potongan-potongan kecil dari itu sehingga terlihat tertekan. Juga menyingkirkan tepi sehingga mulai di tempat yang sama dengan kotak putih.
Langkah 23
Berikutnya buat layer baru di bawah ini dan menarik sebuah kotak coklat yang sekitar 3-4px tinggi seperti yang ditunjukkan.
Langkah 24
Mengatur kotak cokelat untuk Multiply dan 5%. Ini akan menjadi semacam bayangan untuk pemisah kami.
Langkah 25
Berikutnya buat layer baru dan kali ini menggambar kotak putih tentang tinggi 20px di atas garis.
Langkah 26
Mengatur kotak putih sekitar 50% opacity dan sekali lagi menggunakan kuas kami, hanya menghapus bagian atas dengan cara yang berantakan.
Langkah 27
Sekarang ulangi tiga langkah terakhir untuk menggambar kotak putih kedua, tapi kali ini ketika Anda menghapusnya, menghapus lebih sehingga itu strip putih tipis.
Ketika kedua lapisan putih digabungkan mereka akan memberikan semacam berantakan sorot.
Kelompok ini lapisan pemisah menjadi kelompok lapisan tunggal.
Langkah 28
Sekarang kita dapat menduplikasi kelompok lapisan kami memiliki tiga salinan untuk membentuk daerah grid horisontal kami seperti yang ditunjukkan.
Langkah 29
Di sini saya baru saja ditempatkan beberapa konten masuk Seperti yang Anda lihat saya telah dicampur sedikit jenis huruf display dengan jenis huruf HTML biasa.
Untuk teks biasa saya sudah benar-benar digunakan Cambria yang merupakan font Vista. Dalam CSS Anda akan memiliki tidak default kembali ke Georgia untuk orang-orang yang tidak memiliki font Vista. Jika Anda, diri Anda tidak memiliki font Vista, Anda bisa mendapatkan mereka secara bebas & hukum, hanyaikuti petunjuk ini . Ada beberapa font yang rapi, saya cukup seperti Calibri juga.
Langkah 30
Sekarang kita akan menambahkan panel utama kami. Jadi menarik sebuah kotak persegi besar dalam warna coklat tua - # 1e1a19 - dan melakukannya dengan menggunakan Rounded Rectangle Tool (U)dengan Radius 5px.
Langkah 31
Sekarang tampilannya ke pojok kiri atas dan ambil pilihan kecil persegi kemudian mengisinya dengan warna coklat gelap yang sama. Kami tidak ingin kurva di sudut ini.
Langkah 32
Sekarang memperbesar di sudut kanan atas dan menggunakan Polygonal Lasso Tool (L) sambil memegang pergeseran ke bawah membuat pilihan yang miring seperti ditunjukkan dan kemudian tekanHapus.
Langkah 33
Sekarang dalam layer baru di atas imbang dalam persegi warna coklat terang, mengatakan # 352f2b, dan kemudian membuat pilihan lain miring dan menghapus pergi setengah alun-alun sehingga Anda yang tersisa dengan segitiga yang 1px jauh dari tepi.
Langkah 34
Berikutnya buat layer baru dan memperbesar sudut kiri atas lagi. Kita sekarang akan membuat bentuk tab kami. Kami melakukan ini dengan menggunakan pen tool dan beberapa klik sangat tepat. Pada gambar di atas saya sudah dimatikan semua lapisan latar belakang sehingga Anda dapat melihat bentuk persis.Berikut adalah cara membuatnya:
- Mulai pada titik kiri bawah dan klik satu titik di
- Kemudian tahan SHIFT sehingga Anda akan mendapatkan garis lurus mati dan klik titik berikutnya sepanjang garis, tahan tombol mouse ke bawah saat Anda klik sehingga titik memiliki menangani dan tarik ke atas sedikit. Ini berarti titik berikutnya Anda klik akan memiliki kurva akan antara.
- Sekarang klik posisi ketiga dan lagi tahan tombol mouse ke bawah dan juga tahan SHIFT bawah untuk menyeret pegangan keluar di sudut kanan. Anda harus bisa mendapatkan kurva sempurna.Setelah pergeseran diadakan memastikan sudut semua bagus dan tepat sehingga hanya soal mendapatkan ukuran dan posisi yang tepat. Mungkin membawa Anda beberapa pergi, tapi hal yang baik adalah Anda hanya dapat menekan CTRL-Z untuk membatalkan jika Anda tidak bisa melakukannya dengan benar, dan jika Anda perlu untuk kembali lebih dari satu langkah, cukup tekanCTRL-ALT-Z
- Berikutnya sambil memegang SHIFT klik titik keempat, sekali lagi memegang mouse ke bawah dan menyeret tepat sehingga Anda mendapatkan pegangan muncul. Pegangan ini dapat Anda lihat pada gambar di atas (karena itu salah satu dari dua titik terakhir sebelum saya screenshot). Seperti yang Anda lihat pegangan harus mati lurus - ini dijamin dengan menahan shift ke bawah.
- Akhirnya, tahan SHIFT ke bawah dan klik titik kelima dan lagi tarik kanan. Ini akan memberi Anda bahwa kurva akhir mengagumkan.
Langkah 35
Setelah Anda membuat titik kelima, Anda hanya dapat mengisi sisa bentuk apapun tua bagaimana, karena kita akan hanya memotong tepi bawah harus lurus sempurna pula.
Setelah Anda menyelesaikan bentuk, klik kanan dan pilih Make Selection.
Langkah 36
Sekarang Anda dapat mengisi bentuk dengan coklat gelap untuk mencocokkan kotak utama. Kemudian memotong bit ekstra bawah sehingga sangat bagus dan datar dan duduk dengan sempurna di atas seperti yang ditunjukkan.
Langkah 37
Selanjutnya kita akan menduplikasi layer tab kami dan bergerak yang baru di bawah tab lama (jadi satu cokelat terlihat seperti itu di depan). Kemudian klik kanan pada tab baru dan pilih Blending Options dan memberikan Overlay Warna warna oranye kemerahan ini bagus - # cc5630. Alasan kita melakukan overlay warna dan tidak hanya mengisi tab dengan warna baru adalah bahwa jika Anda melakukan metode kedua Anda akan mendapatkan beberapa tersisa piksel coklat menunjukkan melalui.
Berikutnya tahan CTRL dan klik pada tab pertama kemudian pilih Rectangular Marquee Tool dan tekan kanan panah atas beberapa kali sampai pilihan Anda telah pindah bersama untuk tumpang tindih dengan tab oranye. Alasan saya mengatakan Anda harus memilih alat tenda dalam langkah ini adalah bahwa untuk memindahkan pilihan Anda harus memiliki alat pilih up. Jika bukan Anda memiliki alat panah biasa dipilih, Anda akan benar-benar bergerak di sekitar piksel serta seleksi. Cobalah kedua dan Anda akan melihat apa yang saya maksud.
Langkah 38
Sekarang kita membuat layer baru di antara dua tab dan mengisi pilihan dengan warna oranye gelap -. # B44724 Kemudian tahan tombol CTRL dan klik pada layer tab oranye, kemudian klik CTRL-SHIFT-I untuk membalikkan seleksi dan klik pada lapisan tengah dan tekan Delete. Ini harus meninggalkan Anda dengan hanya bagian oranye gelap yang tumpang tindih tab oranye.
Langkah 39
Seperti yang Anda lihat kami telah menciptakan semacam bayangan di tab kedua kami.
Sekarang jika saya berkata begitu sendiri tab ini terlihat mengagumkan, dan alasan mereka lakukan adalah karena mereka tumpang tindih. Sayangnya hal ini juga membuat mereka lebih sulit untuk bekerja dengan dalam HTML. Namun Anda dapat melakukan berbagai hal dengan transparan PNG, atau bergantian hanya membuat mengubah warna teks dalam rollovers dan tidak khawatir tentang mengubah warna tab.Bagaimanapun ini semua sedikit di luar cakupan tutorial ini. Cukuplah untuk mengatakan menu mungkin agak sulit untuk membangun.
Langkah 40
Jadi, inilah tata letak kami sejauh ini. Saya telah menambahkan tab beberapa lebih dan memberi mereka beberapa teks.
Langkah 41
Sekarang kita akan menggambar di area kerja ditampilkan. Ini akan menjadi persegi panjang putih sederhana di mana pekerjaan akan pergi. Kemudian di belakang yang menciptakan lapisan lain dan menggunakan Polygonal Lasso Tool (L) untuk menggambar semacam persegi panjang miring dan mengisinya dengan gelap, warna coklat gelap - # 0e0c0c.
Langkah 42
Selanjutnya kita akan menambahkan beberapa teks deskriptif di sebelah kiri dan item itu sendiri. Perhatikan bahwa dengan teks Saya telah menggunakan coklat gelap untuk dua deskriptor (Judul Proyek dan Project Description) ini membuat mereka memudar ke latar belakang yang baik karena mereka tidak begitu penting.Judul proyek dan teks deskriptif di sisi lain menonjol. Kedua item terakhir diatur dalam warna beige cahaya diambil dari latar belakang dengan judul yang lebih terang dari teks.
Juga saya telah menambahkan radial gradient samar untuk sampel pekerjaan berlangsung dari putih ke krem cahaya - hanya karena aku mencintai gradien radial dan tidak bisa mendapatkan cukup dari mereka :-)
Langkah 43
Sekarang akhirnya saya akan menambahkan beberapa sedikit digambar tangan corat-coret untuk menyelesaikan desain. Untuk ini saya telah menggunakan David Leggett dari Tutorial9 's yang sangat baik dan gratis sikat tangan-larut . Anda dapat menambahkan kuas dengan membuka palet kuas seperti yang ditunjukkan, klik pada panah kanan sedikit dan memilih Load brushes, kemudian memilih file sikat Anda download.
Karena sikat jauh lebih besar daripada yang saya ingin mereka sangat penting untuk mempertajam lapisan setelah Anda ukurannya. Jadi di sini saya telah menyusut panah ke bawah dan kemudian menjalankanFilter> Sharpen> Masker Unsharpen untuk memperbaikinya.
Desain
Jadi ada kita pergi, desain akhir, dengan beberapa variasi untuk halaman yang berbeda. Final desain PSDtentu saja pada ThemeForest untuk dijual, dan saya akan menambahkan homepage PSD ke sistem Plus.
Final Thoughts
Jadi itulah saya mengambil semacam tekstur kertas dari tata letak. Ada banyak desainer yang ini terlihat jauh lebih baik dari saya, khususnya memeriksa pekerjaan Liam McKay di WeFunction dan juga melihat melalui galeri desain seperti WebCreme dan Anda akan menemukan banyak rapi kumuh, desain tipis.
Tidak ada komentar:
Posting Komentar