Tutorial: Cara mengatur laman web dengan Adobe Photoshop

Terdapat pelbagai jenis alat untuk merancang laman web dan berfungsi dengan cara yang sangat mudah dan berfungsi tanpa memasukkan atau menyentuh kod. Mereka tidak terkira jumlahnya, dicadangkan oleh aplikasi (Adobe Dreamweaver adalah contoh) atau secara langsung oleh platform dalam talian seperti Wix. Namun, bagi seorang pereka web, mengetahui prosedur manual adalah mustahak. HTML5 dan CSS adalah tonggak asas untuk susun atur laman web dan halaman arahan.

Walau bagaimanapun, lebih kerap daripada yang anda jangkakan, anda harus beralih ke aplikasi seperti Indesign atau Adobe Photoshop untuk melengkapkan kerja susun atur anda dan memberi mereka kemasan yang sempurna. Hari ini kita akan melihat dalam tutorial yang luas ini, bagaimana kita dapat mengatur laman web menggunakan Adobe Photoshop. Pada bahagian pertama ini kita akan terus berusaha untuk dikembangkan dari Photoshop, walaupun pada masa akan datang kita akan melihat bagaimana kita dapat menerapkan karya ini secara langsung dalam kod HTML untuk menjadikannya berfungsi.

Bermula dengan reka bentuk wireframe kami

Untuk memulakan dengan susun atur dan reka bentuk laman web, sangat penting kita mulakan dengan menentukan elemen asas apa, ini adalah kerangka. Struktur ini akan berfungsi sebagai sokongan untuk menyimpan semua kandungan (sama ada teks atau multimedia). Dengan menentukan setiap bahagian yang membentuk halaman kami, kami akan dapat mengerjakannya dengan ketepatan yang lengkap dan memberikan reka bentuk visual seakurat mungkin.

Adalah sangat penting bahawa kita mengambil kira dimensi yang akan dimiliki oleh laman web kita, jika mempunyai berkotak atau Lebar Penuh. Halaman web berkotak akan berada di dalam bekas kecil dan oleh itu ruang akan muncul di sekitarnya. Sebaliknya, web witdth penuh akan memenuhi seluruh skrin peranti yang menghasilkan semula halaman. Memilih antara satu modaliti atau yang lain hanya menjawab persoalan gaya dan juga akan bergantung pada keperluan projek yang sedang kita jalankan. Kami akan bekerja dalam contoh ini dengan mod kotak sehingga tidak akan menempati semua ruang yang disediakan oleh penyemak imbas.

Untuk membuat wireframe kami, perkara pertama yang harus kami lakukan adalah memasukkan aplikasi Adobe Photoshop dan memasukkan dimensi yang kami mahu halaman kami miliki. Dalam contoh ini, halaman kita seluas 1280 piksel. Walau bagaimanapun, masalah saiznya mungkin berbeza-beza bergantung pada tujuan akhir atau peranti yang kami mahu menghasilkan semula halaman kami. Tidak ada keraguan bahawa reka bentuk web berfungsi dan efisien, mestilah responsif dan mesti disesuaikan dengan semua peranti di pasaran. Namun, dalam kes ini kita akan berusaha untuk membuat prototaip yang akan kita hasilkan semula di komputer desktop. Walaupun begitu, masalah responsif akan dibincangkan kemudian, buat masa ini, berikut adalah hierarki dimensi skrin untuk digunakan dalam contoh ini. Perlu diingat bahawa dalam hal ini kita akan membuat susun atur halaman arahan di Adobe Photoshop dan kemudian memindahkannya ke HTML5 DAN CSS3. Objektif latihan kecil ini adalah untuk menukar reka bentuk yang dibuat di Photoshop menjadi reka bentuk web yang boleh digunakan dan interaktif yang bertindak balas terhadap pergerakan pengguna.

Ukuran untuk telefon bimbit

iPhone 4 dan 4S: 320 x 480

iPhone 5 dan 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Pengukuran tablet

iPad semua model dan juga iPad Mini: 1024 x 768

Galaxy Tab 2 dan 3 (7.0 inci): 600 x 1024

Galaxy Tab 2 dan 3 (10.1 inci): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Pengukuran untuk komputer desktop

Skrin kecil (digunakan sebagai contoh dalam netbook): 1024 x 600

Skrin sederhana: 1280 x 720/1280 x 800

Skrin besar: lebar lebih besar daripada 1400 piksel, contoh 1400 x 900 atau 1600 x 1200.

Untuk mula menyebarkan elemen dan menetapkan bahagian dalam maket web kami, sangat penting bahawa kami mengambil kira perkadaran untuk memastikan kemasan yang dapat dibaca dan melodi. Penting untuk anda menggunakan pilihan peraturan dan panduan yang dapat anda temukan di menu atas Lihat. Untuk bekerja secara berkadaran dan tepat, lebih baik kita bekerja dari peratusan. Kami akan mengklik pada menu paparan dan kemudian pada pilihan «Panduan baru» untuk memilih modal bahagian. Dalam kes ini, kita akan membuat empat bahagian menegak pada 25% dan kita akan menjadikannya sebagai rujukan untuk meletakkan gambar kita di footer dan gambar logo kita di header.

Terdapat kod untuk menetapkan setiap kawasan yang akan memenuhi kawasan kita model dan fungsi yang masing-masing akan ada. Sebagai contoh, untuk menunjukkan kawasan yang akan ditempati oleh gambar, kita akan membuat segi empat tepat dengan sejenis salib. Untuk menunjukkan bahawa kami ingin memasukkan video di kawasan tertentu, kami akan memasukkan simbol main di dalam bekas kami. Dalam contoh pertama ini kita hanya akan bekerja dengan gambar, pada tangkapan atas anda dapat melihat kawasan yang logo dari laman web kami.

Ini akan menjadi hasil akhir dari kami bingkai kawat. Seperti yang kita lihat, ia dibahagikan kepada header yang terdiri daripada gambar di mana logo akan dijumpai dan yang akan berfungsi sebagai pautan ke halaman utama yang disertai oleh dua tab, mesin pencari dan empat butang di kotak carian. Selain itu, sudah ada di dalam badan, kami telah memasukkan bar sisi yang terdiri dari bar pemisah dan serangkaian kategori yang mengkategorikan jenis kandungan yang akan ada di laman web kami. Bahagian lain dengan penomboran yang merangkumi entri yang akan ada di laman web kami, dan akhirnya senarai dengan tag meta yang paling mewakili di laman web kami.

Di kawasan kandungan, yang akan ditentukan oleh bahagian yang akan merangkumi kandungan yang boleh diuruskan sendiri, kami akan menemui kandungan artikel kami. Dalam hal ini, serbuk roti atau serbuk roti (yang menunjukkan struktur organik laman web kami, judul artikel, metadata, perenggan sebagai isi teks, di mana gambar disertakan.

Sebagai footer kami telah memasukkan empat gambar yang akan berfungsi sebagai pautan ke kawasan lain di halaman kami. Di sini kita boleh memasukkan logo atau bahagian menarik lain. Walaupun pada hakikatnya, kawasan ini akan bertindak seperti pemula, kerana footer itu sendiri akan berjalan lebih jauh dengan dasar penggunaan, notis undang-undang dan hak cipta.

Setelah kita menentukan struktur asas atau kerangka halaman kita, kita harus menuju ke tahap seterusnya. Ini akan terdiri daripada reka bentuk yang betul bagi setiap bidang laman web kami. Dengan kata lain, kita akan mula "mengisi" setiap bidang ini dengan kandungan yang akhirnya akan disisipkan di laman web kami. Dianjurkan agar kita tidak mula merancang elemen-elemen ini sebelum mengerjakan rangka kawat kerana kemungkinan besar jika kita melakukannya dalam urutan ini, nanti kita perlu mengubah bahagiannya. Kami menghadapi risiko memutarbelitkan gambar kami dan harus membuat semula reka bentuk setiap elemen, yang akan menjadi pembaziran masa atau hasil yang berkualiti rendah.

Dalam kes ini, reka bentuk laman web kami akan menjadi sangat mudah. Kami akan menggunakan sila reka bentuk bahan, kerana kita akan menggunakan logo Google untuk menunjukkan amalan ini. Saya mesti menjelaskan bahawa tujuan tutorial ini adalah untuk menggambarkan pengetahuan teknikal, jadi hasil estetik dalam kes ini tidak relevan. Seperti yang anda lihat, sedikit demi sedikit kami telah mengisi ruang dengan semua bidang yang telah kami tentukan sebelumnya dalam skema kami. Walau bagaimanapun, kami membuat pengubahsuaian kecil pada saat-saat terakhir. Seperti yang anda perhatikan, kami telah mengurangkan ukuran logo kami dan kami telah memasukkan garis pemisah di bahagian header bawah yang menghubungkan dengan sempurna dengan menu atas. Dalam kes ini, kami telah menggunakan butang dan bahan dari bank sumber. Sebagai pereka, kita dapat merancangnya sendiri, (terutamanya pilihan ini disyorkan jika kita mahu ia menampilkan tonik yang sangat serupa dengan yang ditunjukkan oleh gambar atau logo jenama).

Penting untuk kita ingat bahawa untuk memberikan contoh ini, kita akan bekerja pada dua tahap yang berbeza. Di satu pihak, kami akan mengusahakan objek dan di sisi lain penampilan laman web. Iaitu, di satu sisi di kerangka laman web kami dan di sisi lain di semua elemen terapung yang akan disokong oleh kerangka ini. Anda akan melihat bahawa ada kawasan yang sama sekali tidak akan terapung, seperti kawasan yang akan ditempati bar sisi kami, preefooter atau bar pemisah yang membahagi header dari badan.

Struktur 1, 2, 3 dan 4 akan menjadi sebahagian daripada latar belakang dari laman web kami, jadi pada hakikatnya tidak perlu bagi kami untuk mengeksportnya dari Adobe Photoshop, walaupun kami dapat melakukannya, itu tidak perlu. Ketika datang ke Warna rata (Salah satu ciri penting reka bentuk rata dan reka bentuk bahan, mereka dapat diterapkan dengan sempurna melalui kod menggunakan lembaran gaya CSS). Walau bagaimanapun, elemen-elemen lain mesti disimpan untuk dimasukkan kemudian dalam kod HTML kami. Dalam gambarajah kecil ini, kami juga telah memperbanyak kawasan yang berada di latar belakang halaman sehingga kami mempunyai idea yang jelas tentang bagaimana penampilan akhir laman web kami.

Seperti yang dapat anda ketahui, tujuan membuat skema ini di Adobe Photoshop adalah untuk memperoleh dimensi sebenar setiap elemen, dan menjelaskan susunan dan struktur setiap elemen. Sudah tentu, kandungan teks tidak mempunyai tempat dalam fasa proses ini semestinya dibekalkan dari editor kod kami. Kita juga harus menunjukkan bahawa dalam praktik ini, kita akan menggunakan butang dan elemen statik, walaupun biasanya ini biasanya digunakan dari kerangka kerja seperti Bootstrap atau langsung dari Jquery.

Setelah kami membuat setiap elemen yang akan membentuk halaman web kami, sudah waktunya untuk mula mengeksportnya dan menyimpannya di folder gambar yang terdapat di dalam folder projek HTML. Penting agar anda terbiasa mengeksport dari bingkai kawat anda, kerana kemungkinan besar anda perlu mengubah beberapa elemen asal berdasarkan konfigurasi kerangka. (Sebagai contoh, dalam kes ini, kita telah mengubah ukuran butang asli, logo dan sebahagian besar elemen yang merupakan sebahagian dari komposisi, termasuk gambar di kawasan bawah).

Penting untuk kita belajar menyimpan item apa pun secara bebas untuk menyelamatkannya dengan dimensi yang dimilikinya dan dengan cara yang tepat. Kesalahan apa pun, tidak kira seberapa kecil, boleh mempengaruhi semua elemen yang menjadi sebahagian dari laman web anda. Perlu diingat bahawa mereka akan saling berkaitan dan mesti mempunyai dimensi yang sempurna sehingga dapat dimasukkan dari HTML di web akhir. Dalam kes ini, kita perlu memotong dan menyimpan elemen berikut secara bebas:

• Logo kami.
• Semua butang (yang merupakan bahagian dari menu utama dan selebihnya).
• Semua gambar.

Kami boleh melakukannya dengan pelbagai cara dan mungkin anda akan mencari alternatif yang lebih berkesan untuk anda. Tetapi jika ini adalah pertama kalinya anda membuat susun atur jenis ini, saya cadangkan anda mengikuti petua berikut.

• Pertama, anda mesti pergi ke folder di mana fail JPA yang mengandungi wireframe kami berada dan menggandakannya seberapa banyak elemen yang akan anda eksport. Dalam kes ini, kami telah membuat 12 salinan dari yang asal dan menyimpannya dalam folder yang sama. Seterusnya, anda akan menamakan semula setiap salinan dan memberikan masing-masing nama elemen yang terdapat di dalamnya. 12 salinan kami akan dinamakan semula: Logo, butang menu 1, butang menu 2, bar carian, butang atas 1, butang atas 2, butang atas 3 dan butang atas 4. Empat selebihnya akan dinamakan semula sebagai: Gambar 1, Gambar 2, Gambar 3 dan Gambar 4.
• Setelah ini selesai, kami akan membuka fail dengan nama logo.
• Kami akan pergi ke palet lapisan kami dan mencari lapisan yang mengandungi logo kami. Kemudian kita akan tekan Ctrl / Cmd sementara kami mengklik gambar kecil lapisan tersebut. Dengan cara ini, logo akan dipilih secara automatik.
• Langkah seterusnya adalah memberitahu Photoshop bahawa kami ingin memotong logo itu dengan tepat. Untuk ini, kita hanya perlu membuat panggilan ke alat pemangkasan dari kunci atau arahan C.
• Setelah kami melakukan ini, kami akan mengklik butang Enter untuk mengesahkan pemotongan.
• Sekarang kita akan pergi ke menu Fail atas untuk mengklik simpan caranya. Kami akan memilih nama, yang dalam kes ini adalah «Logo» dan kami akan memberikan format PNG, kerana menjadi fail yang menawarkan kualiti tertinggi di web.
• Kami akan mengulangi proses dengan semua salinan dan elemennya. Apabila sudah dipangkas, pastikan lapisan lain di palet kami berada tidak kelihatan atau dihapuskan. Dengan cara ini kita dapat menyimpan setiap elemen dengan latar belakang yang telus.

Dalam kes ini, kita memilih butang menu 2 dari palet lapisan. Anda dapat melihat dalam tangkapan skrin bagaimana had butang kami dipilih secara automatik.

Sebaik sahaja kami memilih alat pemangkasan dari kunci C, kanvas kami hanya dikurangkan kepada dimensi butang kami.

Sekarang adalah masa untuk menyelamatkan satu demi satu semua elemen yang menjadi sebahagian daripada laman web kami dan memasukkannya ke dalam folder gambar dan yang akan kami gunakan kemudian. Kami akan membuat panggilan dari kod kami dan kami akan meneruskan susun atur kami tetapi mulai sekarang dari penyunting kod kami.

Walaupun terdapat banyak alat dan alternatif untuk menyusun laman web yang menjadikan prosesnya benar-benar intuitif, sangat penting kita belajar melakukannya dalam manual. Dengan cara ini kita akan belajar apa asas di sebalik reka bentuk laman web.

Ringkasan:

1. Reka bentuk struktur laman web memberi perhatian khusus kepada kandungan yang ingin anda hantar dan bahagian yang mesti anda buat di laman web anda.
2. Bekerja pada kerangka anda atau bingkai kawat dari Adobe Photoshop menunjukkan di mana kawasan kandungan akan muncul dan formatnya.
3. Bergantung pada ukuran dan jenama yang telah anda kembangkan sebelumnya, mulailah reka bentuk permukaan web. Termasuk semua elemen (baik yang terapung dan tetap). Jangan lupa untuk memasukkan butang, logo, dan gambar yang sesuai.
4. Potong semua elemen yang menjadi sebahagian daripada projek satu persatu. Pastikan mereka mempunyai langkah-langkah yang betul dan kemudian mereka tidak akan menimbulkan masalah kepada anda.
5. Simpan semua elemen dalam format PNG dalam folder gambar di dalam folder projek HTML.
6. Perlu diingat bahawa projek ini akan mempunyai output ke tetingkap web jadi sangat penting anda mengambil kira mod warna dan menerapkannya rgb.
7. Dapatkan inspirasi dari laman web lain yang anda kagumi sebelum anda mula bekerja, dan jangan lupa untuk membincangkannya dengan ahli pasukan anda. Sekiranya ia adalah projek untuk pelanggan, cubalah berpegang teguh pada taklimat sejauh mungkin.