Desain situs penggemar langkah demi langkah

Post ini telah dipersiapkan dan direncanakan sejak lama. Awalnya, pos ini seharusnya menjadi kelanjutan dari siklus artikel "Membuat Situs Penggemar" (satu dan dua). Lalu, apa yang dilakukan artikel ini di blog Fable 3? Jawabannya sederhana: dalam hal desain, tanpa contoh konkret, sulit untuk menjelaskan sesuatu. Tidak ada desain yang bersifat bola dalam vakuum. Oleh karena itu, ketika beberapa waktu lalu diputuskan untuk melakukan restart salah satu situs penggemar kami yang didedikasikan untuk seri permainan Fable, saya memutuskan ini adalah contoh yang tepat untuk "berbagi rahasia".

Sebenarnya, saya tidak berniat untuk mengungkap rahasia besar alam semesta atau mengajarkan cara membuat desain unik untuk situs penggemar Anda hanya dengan satu artikel. Topik desain sangat luas dan multilateral sehingga tidak ada seorang desainer pun yang dapat mengungkapkannya sepenuhnya hanya dengan satu proyek... Saya juga ingin langsung menjelaskan bahwa ini bukan tutorial tentang cara menggunakan Photoshop. Banyak tutorial tersedia tanpa saya, Google sebagai bantuan. Sebagai seorang penulis, saya mengasumsikan bahwa Anda sudah akrab dengan dasar-dasar fungsi Photoshop, jadi harap tidak mengharapkan instruksi langkah-demi-langkah "klik di sini", "pergi ke sana". Ini bukan pelajaran tentang Photoshop, ini adalah masterclass tentang membuat desain. Saya akan menceritakan bagaimana cara saya bekerja, memberikan beberapa tip dan trik, yang sebenarnya bukan rahasia, tetapi sering dilupakan. Mari kita mulai :)

Menyediakan Kanvas dan Papan Cat

Dalam kasus kami, papan cat adalah, seperti yang sudah Anda duga, Photoshop CS4, dan kanvas adalah file baru kami yang masih kosong. Selain "photo manipulation", ada juga program lain, misalnya Gimp. Beberapa orang berhasil bekerja di Corel Draw. Namun begitu, sampai saat ini, tidak ada program untuk desain web yang lebih baik dari Photoshop. Ini adalah alat utama desainer web. Corel Draw atau Adobe Illustrator dapat digunakan untuk membuat elemen-elemen tertentu dari desain Anda, tetapi "merakit" mockup paling nyaman dilakukan di Photoshop.

Setelah membahas "papan cat", saatnya untuk kanvas. Di sini, kita perlu mengingat resolusi layar. Sekitar lima tahun yang lalu, resolusi 1024x768 mendominasi di mana-mana, dan 1280x960 baru mulai diakui oleh orang-orang. Beberapa tahun lalu, 1680x1050 dan 1600x1200 dianggap sebagai resolusi besar. Saat ini, monitor dengan resolusi Full HD default semakin menjadi norma sehari-hari, artinya kita harus mengacu pada kualitas resolusi maksimum sebesar 1920x1080. Meskipun begitu, 1024x768 masih bertahan dan belum sepenuhnya pensiun, berarti ini adalah batas bawah kita. Sebenarnya, yang lebih penting adalah lebar, karena secara vertikal situs kami akan sangat tinggi, seperti 90% situs di internet.

Dulu, membuat situs yang "merentang" adalah tren. Elemen desain terdiri dari elemen-elemen yang berulang, yang membuat situs berkembang dalam lebar sesuai dengan resolusi pengguna. Namun, dengan kedatangan Full HD, metode penyesuaian situs dengan resolusi pengguna menjadi kurang estetis. Mata manusia terbiasa melihat informasi yang berada dalam jangkauan lengan dengan lebar yang kira-kira seukuran kertas A4. Segala sesuatu yang lebih lebar sudah tidak fokus. Oleh karena itu, dalam beberapa waktu terakhir, bagian konten biasanya dibuat sempit, dan ruang yang tersisa di kiri dan kanan diisi dengan dekorasi latar belakang. Dengan cara ini, domba akan kenyang dan serigala aman :) Jadi, bagian konten kita akan memiliki lebar 1000 piksel (jangan lupa bahwa di browser, ada bilah gulir di kanan yang "mengambil" 24 piksel dari 1024). Maka area untuk "batas" dengan keindahan latar belakang adalah (1920-1000)/2=460 piksel di kiri dan kanan. Untuk memastikan kita tidak keluar batas itu secara tidak sengaja, saya menggunakan panduan. Dalam mode ruler aktif, saya cukup menggerakkan kursor dan "menggeser" panduan ke tempat yang diinginkan. Saya juga menandai pusat kanvas. Saya juga telah memperkirakan tinggi tempat yang saya sisihkan untuk header situs, yang nantinya akan bergerak, tetapi saya sudah memberi tanda. Semuanya, pekerjaan pendahuluan sudah selesai. Mari kita beralih ke persiapan :)

Persiapan pendahuluan telah selesai

Mengumpulkan Inspirasi

Tahap ini adalah yang paling sederhana dan paling sulit pada saat yang sama. Anda perlu mengumpulkan materi dari mana kita akan membentuk desain kita. Jika Anda seorang seniman profesional, Anda tentu bisa menggambar semua seni dan elemen antarmuka yang diperlukan sendiri atau menyerahkannya kepada tim Anda... Di sisi lain, dalam hal ini, apa yang Anda, Artemy Tatyanych Andreyevich, lakukan di artikel ini? :) Ini adalah artikel untuk pemula. Kita akan membutuhkan seni bertema dan elemen untuk antarmuka kita atau setidaknya hal-hal yang bisa kita buat. Kemungkinan besar, pada percobaan pertama Anda tidak akan mendapatkan semua yang Anda butuhkan untuk pekerjaan Anda, dan Anda akan kembali untuk mencari seni dan inspirasi tidak hanya sekali. Saya biasanya mulai mencari di situs resmi lalu pindah ke situs penggemar besar, jika ada. Setelah itu, saya beralih ke pencarian gambar di Google dan Yandex. Dan saya menggunakan kedua mesin pencari tersebut, karena hasilnya sangat berbeda. Di mana satu gagal, yang lain menemukan banyak materi. Bagus jika ada banyak seni, ada tangkapan layar besar dari antarmuka permainan, pengembang merilis banyak wallpaper... tetapi sering kali Anda akan kekurangan sesuatu.

Hasil pencarian saya menemukan banyak seni untuk Fable dan bagian lainnya dari permainan. Namun, untuk bagian ketiga, ada sedikit seni yang bagus. Tapi kumpulkan semua: wallpaper, konsep, tangkapan layar... Anda tidak pernah tahu apa yang akan berguna. Saya tidak akan membebani Anda dengan koleksi lengkap dari materi yang ditemukan. Dalam spoiler Anda akan menemukan elemen-elemen yang pada akhirnya menjadi dasar desain.

Frame ini kemudian dipecah menjadi banyak elemen antarmuka yang terpisah


Art normal pertama tanpa ditemukan untuk bagian ketiga

Ini adalah seni kedua. Itu saja, tidak ada lagi yang cocok dalam gaya yang diperlukan

Art ini langsung diambil untuk latar. Tidak sempurna, tetapi yang lebih baik tidak ditemukan.

Art untuk bagian kedua digunakan di akhir pekerjaan

Tidak ada logo?

Memulai Pekerjaan

Sekarang kita bisa mulai bekerja. Saya langsung memberikan sedikit trik, saya secara berkala menyimpan hasil kerja dengan nama baru mengikuti sejarah versi. Secara default, hasil pertama adalah versi 0_1, kemudian dilanjutkan ke 0_2, 0_3, dan seterusnya. Versi 1_0 datang ketika Anda merasa bahwa Anda telah melakukan semuanya dan dapat mulai menunjukkan pekerjaan kepada para reviewer/teman/klien. Kemungkinan besar, desain akan memerlukan revisi. Maka akan muncul versi 1_1, 1_2, dan sebagainya. Ini berguna untuk melacak kemajuan Anda sendiri, dan juga agar ketika perlu, Anda dapat kembali ke ide-ide dari versi yang lebih lama atau menarik elemen dari sana yang dihapus atau diubah hingga tidak dikenali di versi terkini.

Dan satu saran lagi, di Photoshop semua elemen Anda disimpan di layer yang terpisah. Jangan malas untuk langsung memberi mereka nama yang berarti, dan mengelompokkan layer dari elemen tertentu menggunakan fungsi ctrl+b. Ketika dalam file Anda terkumpul lebih dari 100 layer, memahami tanpa label dan pengelompokan menjadi sangat sulit.

Tapi cukup berbicara, mari kita lihat hasil pertama. Meskipun ini bahkan bukan hasil pertama, ini hampir nol:

Pada tahap ini, area untuk konten sudah ditandai, seni telah ditempatkan kira-kira di tempatnya. Di seluruh tempat, elemen-elemen yang sudah terlihat dan tidak terlihat terlihat, yang nantinya harus terintegrasi ke dalam desain. Atau tidak terintegrasi. Mari kita maju ke tahap selanjutnya. Pada tahap ini, dua pekerjaan teknis penting telah dilakukan. Dengan sangat hati-hati, karakter kami dipotong dari latar belakang, dan bingkai dipecah menjadi bagian kecil.

Untuk memotong, saya lebih sering menggunakan bukan penghapus, tetapi masker layer. Bagian yang perlu disembunyikan dicat dengan warna hitam, sementara bagian yang terlihat dibiarkan berwarna putih. Nuansa abu-abu - daerah transparansi. Berkat ini, jika saya menghapus sesuatu yang berlebih, saya dapat dengan mudah mengembalikannya kembali. Saya menyimpan karakter yang dipotong dalam resolusi maksimum secara terpisah agar tidak hilang.

Bingkai dipecah menjadi bagian dengan memotong potongan-potongan kecil dan mengubahnya menjadi tekstur. Sudut-sudut adalah sudut kiri atas yang tercermin tiga kali. Dengan cara ini, saya mencapai simetri.

Pada awalnya, desain direncanakan agak gelap, mirip dengan dua seni dasar kami yang pertama. Dengan menggunakan kuas lembut dan berbagai mode pencampuran, saya berhasil mengubah gambar latar yang cukup cerah menjadi kanvas yang cukup gelap. Saya mencoba menggambarkan bagian konten dalam bentuk gulungan yang dilipat tiga kali, yang seharusnya dibingkai oleh bingkai emas yang dikenal oleh Anda. Mahkota, sebagai salah satu elemen kunci, terus hadir dalam desain. Saya mulai perlahan-lahan mencari font untuk menu.

Dengan font Cyrillic yang cantik, ada sedikit masalah. Karena, umumnya, font tersebut tidak ada. Misalnya, ada huruf Inggris, tetapi tidak ada huruf Rusia. Entah untuk versi Rusia diminta uang yang cukup banyak, atau versi Rusia dikerjakan oleh perajin rakyat dengan buruk dan jelek. Atau semuanya baik-baik saja, tetapi fontnya tidak terbaca :) Font di gambar ini disebut bonzai. Bagi yang membutuhkan, silakan hubungi saya. Saya akan berbagi. Mari kita lanjutkan.

Setelah beberapa perjuangan, mulai ada sesuatu yang masuk akal. Versi pertama dari menu utama dibuat (nanti akan berubah, tetapi yang ini akan berguna beberapa kali). Teman-teman yang hati-hati mungkin memperhatikan bahwa sisi kiri dan kanan menu ini adalah mahkota kami yang digabungkan dengan keriting dari bingkai. Jangan takut untuk mengombinasikan elemen antarmuka yang berbeda. Bersama-sama, mereka sering memberikan hasil yang tak terduga tetapi menyenangkan. Selain itu, konsep bagian konten utama juga berubah. Saya mencoba menggambarkan sesuatu seperti jubah kerajaan, tetapi saya sama sekali tidak menyukainya. Oleh karena itu, muncul keputusan tegas untuk mengubah konsep.

Ini bukan iterasi baru, ini dasar yang, pada dasarnya, hanya percobaan pena: bagaimana tampilannya dalam versi terang dan tanpa "jubah"? - Jelas lebih baik, tetapi perlu untuk berpikir lebih lanjut. Ngomong-ngomong, elemen di kiri atas adalah "huruf" font fleur. Hal yang sangat bagus untuk membuat elemen antarmuka. Sejumlah besar keriting dan bunga dalam satu kemasan.

Dan inilah sesuatu yang baru. Saya bereksperimen dengan penempatan pahlawan kami di header situs, tetapi yang terpenting bukan itu. Saya menghapus menu horizontal dan mencoba membuat yang vertikal. Apa pun, tampaknya cukup bagus. Dan menu pusat kami telah dipindahkan ke footer.

Iterasi sementara lainnya, di mana saya membandingkan menu horizontal dan vertikal, sambil memikirkan untuk membuat blok samping mengembang dengan klik.

Inilah saat di mana versi sebelumnya yang disimpan akan berguna. Desain ini menjadi tidak sesuai dengan arah. Gulungan sepanjang lebar konten dengan bingkai di tengah dan bingkai yang lebih kecil untuk blok samping terlihat buruk. Saya menolak opsi ini, kembali satu langkah, dan bergerak di jalur yang berbeda.

Dan inilah momen kebenaran! Kembali satu langkah, bermain-main dengan elemen-elemen kami, akhirnya saya mendapatkan maket yang sudah sangat dekat dengan versi final. Semua elemen utama telah dikumpulkan dan berada di tempatnya: menu utama, blok samping, konten, header, dan footer. Jika Anda memperhatikan, Anda mungkin melihat bahwa beberapa elemen dari iterasi yang gagal sebelumnya masih berguna. Teks markup diambil secara acak dari situs tentang Dragon Age, asalkan hanya untuk memperkirakan penempatan teks. Sebagai yang utama, Palatino Linotype diambil. Ini adalah font standar yang indah, yang sangat penting. Dalam hal ini, situs Anda tidak akan mengalami masalah dalam ditampilkan kepada semua pengguna Windows. Tentu saja, ada cara untuk menggunakan font khusus yang akan dimuat di cache pengguna, tetapi itu akan menambah lalu lintas tambahan dan masalah dalam menampilkan font di berbagai browser. Saya tidak merekomendasikan untuk terjebak dalam hal ini. Di internet ada tabel standar font Windows yang bagus. Saya menggunakannya dan saya rekomendasikan Anda juga. Namun di header, Anda bisa dan malah perlu menggunakan font dekoratif. Untuk nama situs, pada tahap ini, saya menemukan font yang sangat keren bernama Algerius Caps. Rasakan perbedaannya dengan yang sebelumnya!

Tahap yang sangat menarik, yang secara jelas menunjukkan bahwa bahkan dalam desain yang mendekati penyelesaian, selalu ada ruang untuk perbaikan. Pertama-tama, saya tetap meninggalkan menu bawah dan akhirnya mengubahnya menjadi footer. Ingat, saya bilang bahwa menu horizontal akan berguna? - Itu berguna. Maket itu telah dibersihkan dari elemen-elemen yang sudah tidak perlu, agar tidak mengacaukan desain kami. Tetapi yang paling penting adalah, tempat terakhir bagi mahkota di desain telah ditemukan. Hancurkan pedang dari sarung! Kami mengambil salah satu seni kami dan memotong tangan dengan pedang dan mahkota. Pekerjaan untuk menghapus logo yang menggantung di atas sarung tangan sangat halus. Itu adalah kasus di mana skala lebih dari 1000% tidak akan berlebihan. Dan saya juga mulai bekerja dengan koreksi warna latar belakang kami. Terlalu kuning-hijau. Saya meredamnya. Biasanya saya menggunakan lapisan tambahan yang diisi dengan warna yang diperlukan dengan mode pencampuran soft light (cahaya lembut), tetapi tergantung kebutuhan, Anda juga bisa mencoba mode pencampuran lainnya. Dalam hal ini, gama dikoreksi dengan lapisan biru.

Saya terus memperbaiki desain. Saya memperbaiki penempatan seni di latar belakang, mengubah warna gambarnya lagi. Saya menghilangkan hampir semua sampah yang tersisa setelah pembersihan sebelumnya, hanya satu keriting yang terlewat. Tetapi saya juga memperhatikan bahwa nama situs terlihat pudar di latar belakang langit. Oleh karena itu, saya mengubah gaya dan membuatnya kontras dengan latar belakang, tetapi tetap menggunakan warna utama situs.

Jalur Akhir

Paarraaaam! Inilah versi 1_0. Sebenarnya, ini bukan final, tetapi pada tahap ini saya memilih untuk menunjukkan maket kepada teman-teman saya dan mendengarkan kritik. Tidak ada lagi sampah di sini, latar belakang sudah diwarnai kembali. Tetapi yang tak kalah penting, menu pencarian dan tombol jejaring sosial telah ditambahkan. Pada awalnya, hanya RSS yang akan berfungsi, tetapi segera suatu saat Twitter, saluran YouTube, dan halaman di Facebook akan dibuka.

Catatan penting pertama - pahlawan kami jelas kesepian di header situs. Dia butuh teman. Sayangnya, seni wanita yang indah untuk bagian ketiga tidak ditemukan, tetapi seorang wanita gipsi dari seni untuk bagian kedua membantu. Ini juga relevan. Situs ini bukan hanya tentang bagian ketiga. Sebagai pengganti wanita, pahlawan kami harus dilepaskan dari pistol, yang jelas tidak diperlukan.

Tetapi pekerjaan belum selesai, dan satu set komentar lagi muncul. Situsnya menjadi terlalu cerah emas, dan bingkai emas pada blok konten pusat mengambil terlalu banyak ruang. Nah, saya meredakan nada dengan efek layer, mengurangi bingkainya. Rantai yang memperberat desain dan memperumit penataan juga dihapus. Momen kebenaran telah tiba. Versi final:

www.Fable-game.ru

Penutup

Sebenarnya, masih ada penataan yang menunggu kami di depan, yang juga membawa beberapa koreksi kecil. Misalnya, penempatan latar belakang dan pahlawan relatif terhadapnya. Ada juga penyempurnaan gaya, pencarian bug dan kesalahan. Tapi itu sudah menjadi masalah teknis. Hal yang paling sulit telah berlalu. Jika Anda telah mencapai tahap ini, Anda dapat bersantai, memuji diri sendiri, dan dengan bangga menambahkan karya baru ke portofolio Anda. Dan kemudian mulai mengisi dan mengisinya dengan materi, merencanakan struktur optimal... tetapi itu sudah cerita yang sepenuhnya berbeda :)

Saya sangat berharap bahwa "cerita saya dengan gambar dan tentang gambar" telah menyentuh hati Anda, dan yang terpenting, bahwa itu akan membantu Anda dalam menciptakan desain Anda sendiri yang indah, unik, dan menakjubkan untuk situs Anda. Saya menunggu pertanyaan, saran atau komentar dari Anda di kolom komentar.

*Penulis desain dan teks adalah saya, Ksandr\_Warfire

Materi disiapkan khusus untuk GAMER.ru