Bagaimana untuk membuat sistem grid tersuai anda sendiri di Photoshop

Laman web ini menggunakan perkhidmatan keselamatan untuk melindungi dirinya dari serangan dalam talian. Tindakan yang anda buat hanya mencetuskan penyelesaian keselamatan. Terdapat beberapa tindakan yang boleh mencetuskan blok ini termasuk mengemukakan perkataan atau frasa tertentu, perintah SQL atau data yang salah.

Banyak laman web Bootstrap memulakan kehidupan mereka sebagai mockup di Photoshop. Apabila mereka bentuk untuk Bootstrap, ia berguna untuk mempunyai saiz lajur yang disasarkan yang tersedia dalam beberapa bentuk, jadi objek dan teks boleh diselaraskan dengan grid dengan mudah. Untuk Bootstrap 3, ada pelbagai templat yang baik, tetapi untuk Bootstrap 4 yang akan datang tidak banyak lagi. Itulah sebabnya saya mencipta Bootstrap 4 Grid JPA sebagai asas untuk cepat mengejek tema atau laman web. Berikut adalah gambaran ringkas tentang ciri-ciri yang saya termasuk. Untuk rundown yang lebih terperinci, lihat lagi.

ciri

  • flaticonfree Ikon disesuaikan
  • Templat persembahan slaidofree
  • storysetfree disunting ilustrasi
  • wepikonline Alat Reka Bentuk

Bad Gateway

Saya telah memasukkan versi 1x dan 2x template supaya anda bebas memilih mana-mana yang anda mahu. Walaupun banyak pereka bekerja di 1x, saya fikir aliran kerja yang lebih moden adalah untuk bekerja di saiz 2x (Retina). Bekerja pada sama ada saiz mempunyai kelemahan, tetapi saya mengesyorkan 2x. Untuk mengetahui mengapa, baca artikel saya merancang Retina Web grafik di Photoshop: Sekiranya anda bekerja di 1x atau 2x?

tips untuk menggunakan fail

Dalam membuat langkah ke reka bentuk web yang responsif, salah satu rintangan yang berpotensi adalah matematik yang agak janggal untuk mengira lebar berasaskan peratusan yang diperlukan untuk susun atur cecair. Jika, sebagai contoh, anda sedang merekabentuk dengan grid 960px di Photoshop dan anda mempunyai enam lajur, setiap 140px lebar, anda membahagikan 140 oleh 960 untuk mendapatkan lebar berasaskan peratusan anda: 14. 83333%. Sekarang, saya tidak tahu tentang anda, tetapi nombor seperti itu kelihatan agak menakutkan. Tidak kira bahawa terdapat alat pengiraan yang hebat yang dibina menjadi rakan-rakan untuk melakukan matematik untuk anda; Intinya adalah bahawa angka akhir kelihatan seperti nombor sewenang-wenang tanpa hubungan segera sama ada lebar pixel bekas (960) atau lebar pixel elemen (140).

Bandingkan dengan bekas yang mempunyai lebar 1000px. 1000 adalah nombor yang bagus, mudah, bulat. Membahagikan dengan 1000 hasil dalam peratusan yang bersih dan lebih baik lagi, membahagikan oleh 1000 adalah sesuatu yang boleh kita lakukan di kepala kita: hanya keluarkan sifar. Lajur 140px di dalam bekas 1000px ialah 14%. Lajur 500px dalam kontena 1000px adalah 50%. 320px adalah 32%. Mudah!

Tetapi bagaimana dengan 960 grid yang berharga? Saya dengar awak menangis. Itu nombor suci telah melayani kami dengan baik, membahagikan dengan mudah ke dalam pelbagai lajur dan perakaunan untuk penyemak imbas Chrome pada skrin 1024 untuk menentukan 'kawasan selamat' yang diterima. Tetapi 960 grid dilahirkan di dunia susun atur lebar tetap. Sekiranya kita membina reka bentuk cecair, realiti mudah ialah grid anda boleh menjadi saiz yang anda inginkan, kerana kami hanya berkenaan dengan lebar relatif. Hari-hari yang membimbangkan tentang lebar mutlak telah berlalu.

Saya harus menunjukkan di sini bahawa saya tidak mencadangkan rangka kerja baru. Malah, saya tidak mengatakan bahawa kita semua harus mula menggunakan grid yang bekasnya khusus 1000px. Intinya adalah bahawa ia adalah untuk menjadikan kehidupan kita lebih mudah, dan 1000px berlaku menjadi nombor yang sangat mudah untuk ditangani.

Kaveat kecil adalah bahawa grid 1000px menganggap anda tidak terganggu tentang kebun di kedua-dua sisi bekas, yang mungkin mengganggu sesetengah orang bergantung kepada cara anda melakukan margin lajur anda. Saya telah memasukkan panduan dalam JPA untuk menunjukkan di mana mereka biasanya, jika itu membantu. Saya mengharapkan sesetengah orang juga akan mengadu tentang hanya ada enam lajur, tetapi secara peribadi saya suka menyimpan perkara yang mudah: Nombor besar yang bagus dan lajur besar yang bagus. Menyesuaikan diri seperti yang anda lihat patut.

Dalam penyemak imbas WebKit, kesilapan dengan cara enjin rendering merawat peratusan bermakna bahawa walaupun kita berurusan dengan jumlah keseluruhan, lebarnya sebenarnya boleh muncul seolah-olah mereka sedikit off:

Jika anda seorang pedant, ini mungkin membuat anda terjaga pada waktu malam, tetapi saya cenderung untuk mengambil pendekatan yang lebih pragmatik untuk reka bentuk web dan menerima bahawa sedikit ketidakselarasan tidak pernah membunuh sesiapa pun. Dalam contoh, penderitaan adalah jelas kerana cara lajur ditunjukkan, tetapi di dunia nyata ia hampir tidak dapat dilihat, terutama ketika berurusan dengan jenis yang betul-betul.

Post seterusnya

Saya sangat gembira memberikan sumber yang berharga kepada banyak pereka dengan PSD Grid Bootstrap asal saya. Tetapi dengan Bootstrap 3 datang grid lalai yang baru (dan mentaliti mudah alih). Sekarang, saya terperinci untuk menawarkan template Photoshop yang baru, dikemas kini untuk Twitter Bootstrap 3 Grid.

Di dalam fail zip anda akan menemui tiga fail PSD. Satu untuk grid 1170px, satu untuk grid 970px, dan satu untuk grid 750px. Setiap templat mempunyai panduan dan lapisan bentuk yang menunjukkan anda lajur bersama-sama dengan lapisan bentuk lain yang menunjukkan saiz bekas utama.

Dalam pengeluaran laman web, terdapat banyak faktor penting yang mempengaruhi alur kerja dan hasil akhir, termasuk masa. Tiada siapa yang boleh berpendapat bahawa masa dan wang yang disambungkan dengan ketat: menjimatkan masa bermakna memperoleh wang tambahan, jadi semua orang cuba menggunakannya dengan lebih cekap dengan pelbagai penyelesaian penjimatan kerja. Di sini, rangka kerja pembangunan hadapan mengambil kedudukan utama.

Terdapat banyak boilerplate profesional, tetapi kita akan menetapkan mata kita pada salah satu instrumen yang paling popular dan dicari - rangka kerja Bootstrap. Dengan pendekatan mudah alih yang dipikirkan dengan baik, penggunaan prepecressor yang kurang baik dan prepecressor yang ditakrifkan, komponen HTML yang telah ditetapkan dan plugin jQuery, dan kemas kini yang berterusan, ia telah mengekalkan 2 peratus daripada semua laman web, menyediakan projek dengan asas yang kukuh.

Nampaknya yayasan itu harus dilaksanakan di peringkat akhir pembangunan, bagaimanapun, jika anda berhasrat untuk memperoleh manfaat daripadanya dalam semua aspek, anda harus mulai memenuhi kehendaknya dari awal. Ini bermula dengan prototaip susun atur PSD mengikut semua spesifikasi.

Untuk berbuat demikian, terdapat sistem grid bootstrap yang berguna yang dibentangkan dalam format PSD yang menemani anda melalui projek. Dalam koleksi semasa kami, anda akan menemui 11 templat grid responsif buatan tangan yang sesuai dengan rangka kerja.

17 Contoh Layout Laman Web Solid untuk 2019

Ingin tahu tentang amalan terbaik di sebalik merancang susun atur laman web Semak panduan saya untuk merancang susun atur laman web dengan amalan dan contoh terbaik.

17 Contoh Layout Laman Web Solid untuk 2019
Kami menggunakan kuki
Kami menggunakan kuki untuk memastikan bahawa kami memberi anda pengalaman terbaik di laman web kami. Dengan menggunakan laman web, anda bersetuju dengan penggunaan kuki kami.
Benarkan kuki.