Jika anda ingin membuat halaman web anda sendiri, fahami cara membuat tapak dalam Photoshop. Adobe Photoshop adalah editor grafik. Adalah mungkin untuk menarik susun atur dan elemen masing-masing. Ini adalah proses yang panjang dan rumit. Selama bertahun-tahun, pereka web telah belajar bagaimana untuk merancang templat dan meletakkan halaman web pada mereka. Tetapi tata letak mudah boleh mengumpul mana-mana orang. Hanya pengetahuan asas dan fantasi Photoshop yang diperlukan.

Di Photoshop untuk menarik reka bentuk laman web yang mudah walaupun pemula boleh

Dari kali pertama anda tidak mungkin mendapatkan halaman seperti master reka bentuk. Tetapi anda boleh menarik perkhidmatan yang menarik dan tidak selesa.

Sedikit tentang membuat laman web

Penyahkodan beberapa istilah.

• CSS (Lembaran Gaya Cascading) dan HTML (HyperText Markup Language) adalah bahasa komputer yang digunakan untuk membuat sumber web. Jika anda membuka kod sumber mana-mana halaman di Internet, akan ada tag HTML.
• Layout - susun atur dan pemasangan bahan dari susun atur, mengubahnya menjadi template html. Ia bergantung kepada bagaimana objek disusun, sama ada mereka kelihatan cantik dalam komposisi keseluruhan, sama ada mudah untuk membaca teks dan sebagainya.
• Lapisan adalah sebahagian daripada susun atur. Bersama-sama mereka membuat gambaran besar. Tetapi mereka boleh diedit dan bergerak berasingan dari satu sama lain.
• Tubuh adalah tempat kandungannya berada. Mungkin terdapat latar belakang di sekelilingnya.
• Frame (Frame) - elemen halaman. Satu blok dengan beberapa maklumat, gambar, borang.

Buat tapak yang menakjubkan dari awal hanya boleh menjadi profesional. Untuk melakukan ini, anda perlu memahami reka bentuk web dan mengetahui HTML. Oleh kerana susun atur selesai masih perlu mengenakan cekap.

Tetapi ada cara yang lebih mudah. Terdapat perkhidmatan dan program dalam talian yang secara automatik menukar .psd (format fail Photoshop) ke HTML dan CSS. Anda hanya perlu memasang template dengan betul.

Untuk menggunakan Photoshop, tidak perlu menjadi seorang artis dan memahami semua pilihan program. Tetapi jika anda mula-mula memulakannya dan tidak tahu bagaimana memasukkan teks, lukiskan bentuk geometri, menduplikasi lapisan, menukar warna atau pilih kawasan sewenang-wenang, anda harus bermula dengan sesuatu yang lebih mudah. Untuk membuat susun atur di Photoshop, kami memerlukan sekurang-kurangnya kemahiran awal dalam bekerja dengan utiliti dan pemahaman fungsi dasar (bagaimana untuk melukis garis, meletakkan panduan, memilih font, dan sebagainya).

Maklumat umum tentang perkhidmatan rangkaian juga berguna. Laman ini boleh dicirikan oleh kriteria berikut:

• Halaman tunggal. Semua elemen, kandungan, semua kandungan sumber berada di satu tempat. Pada satu halaman. Untuk melihat kandungan perkhidmatan, jangan klik pada pautan atau buka tab baharu. Pada masa yang sama laman web itu sendiri boleh sewenang-wenangnya besar. Ia akan sesuai dengan risalah pengiklanan kecil, dan sebuah novel 600 muka surat yang besar.
• Multipage. Oleh itu, termasuk banyak halaman. Ini boleh, sebagai contoh, "Rumah", "Forum", "Buku Tetamu", "Jawapan kepada soalan yang sering ditanyakan", "Kenalan". Bagi setiap daripada mereka, anda perlu melakukan susun atur. Anda juga memerlukan navigasi dan peta tapak: bahagian berasingan dengan pautan ke semua bahagian perkhidmatan. Supaya pengguna dapat dengan cepat mencari penanda halaman yang dia perlukan.
• "Getah". Mengubah saiz bergantung pada resolusi skrin. Diregangkan bersama dengan tetingkap penyemak imbas. Kita mesti mengira terlebih dahulu apa yang akan kelihatan seperti tapak. Jika dengan lebar 1300 semuanya dipaparkan secara normal, maka dalam 900 piksel satu bahagian artikel boleh "pergi" di luar sempadan bingkai, imej tidak akan berdiri sebagaimana mestinya, dan animasi flash akan menutup borang input.
• Tetap Tubuh laman web tidak mengubah saiznya. Pilihan yang paling mudah dan paling praktikal. Untuk menjadikan laman kelihatan padat, dan ketika mengembangkan tetingkap tidak ada ruang "kosong" di tepi, anda boleh membuat latar belakang getah.

Layout

Pertama, tentukan reka bentuk yang anda perlukan. Ia tidak cukup untuk hanya "bayangkan", dan kemudian mengatur di Photoshop. Mesti pandangan yang jelas. Lukis corak pada kertas kosong. Tidak perlu menggambar semula setiap gambar. Skim yang cukup: beberapa segi empat dan bulatan, yang secara konvensional menunjukkan unsur-unsur laman web. Fikirkan bagaimana bingkai akan ditempatkan, di mana lebih baik meletakkan logo, di mana untuk meletakkan maklumat untuk pelawat.

Lihat contoh halaman di Internet. Fikirkan mana yang anda suka dan mengapa. Sama ada susunan bingkai yang mudah, warna-warna yang menyenangkan atau pendekatan yang menarik untuk reka bentuk. Salin reka bentuk orang lain tidak berbaloi. Ia cukup untuk menarik inspirasi daripada itu. Selepas itu, anda boleh memikirkan bagaimana untuk melukis laman web di Photoshop.

• Buat dokumen baru (Fail - Baru). Dimensi dipilih dengan pengiraan pada monitor kecil atau resolusi rendah: 1024 × 720 piksel. Ini adalah lebar bahagian "maklumat", dan bukan gambaran keseluruhannya. Jika anda mahu halaman 1100 piksel, maka anda perlu membuat dokumen dengan lebar 1300 piksel. Panjangnya, sebenarnya, tidak tetap - ia bergantung kepada berapa banyak kandungan yang anda mahu letakkan di sumber itu. Ini adalah cadangan, bukan peraturan. Anda boleh membina susun atur yang besar jika anda mahu.
• Hidupkan penguasa. Tekan Ctrl + R atau pergi ke menu Paparan - Raja. Ini adalah skala pengukur. Dia muncul di luar gambar. Tanpa itu, anda perlu menganggarkan saiz dan jarak "dengan mata", yang tidak menjejaskan keputusan akhir. Anda boleh mengkonfigurasi fungsi ini dalam menu Edit - Tetapan - Unit Pengukuran dan Penguasa. Di sana lebih baik menukar centimeter per piksel untuk berfungsi dengan satu parameter, dan tidak mengira berapa banyak mata dalam satu inci.
• Anda juga perlu mengaktifkan grid. Lihat - Tunjukkan - Grid atau Ctrl + E (anda juga boleh mematikannya). Ini adalah jenis analog notebook dalam sangkar. Di Photoshop, garis menegak dan mendatar akan dipaparkan. Mereka tidak akan muncul pada lukisan itu sendiri. Mereka boleh dilihat hanya semasa mengedit. Fungsi ini diperlukan untuk merata semua elemen templat. Seseorang lebih mudah bekerja dengan grid, seseorang tanpa ia. Ia adalah yang terbaik untuk menghidupkannya jika anda membuat laman web untuk kali pertama
• Untuk mengkonfigurasinya, pergi ke Edit - Tetapan - Panduan, Grid, dan Fragmen. Di sana anda boleh memilih saiz sel, serta warna dan jenis garis (pepejal, bertitik, di luar titik).

Contoh reka bentuk laman web moden

• Pasang panduan. Antara mereka akan menjadi sumber kandungan utama - badan tetap laman web ini. Dan di belakang mereka - latar belakang getah. Untuk melakukan ini, klik Lihat - Panduan Baru. Dalam kotak "Orientasi", semak "Menegak". Dalam medan "Kedudukan" tulis jarak di mana objek itu akan berada di tepi kiri. Fokus pada skala penguasa.
• Dua panduan diperlukan - ke kanan dan kiri badan halaman. Jarak antara mereka harus maksimum 1003 piksel untuk memaparkan dengan resolusi 1024 × 720. Anda boleh menentukan lebar yang berbeza. Tetapi sumber-sumber yang besar tidak menyusahkan untuk melihat pada monitor kecil.
• Kenapa 1003, bukan 1024? Sekiranya tapak perlu menatal ke bawah ("tatal") ke bawah, penyemak imbas akan mempunyai gelangsar menegak untuk menatal. Saiz slider ini adalah lebih kurang 21 piksel. Sekiranya anda tidak menganggapnya, tatal mendatar akan muncul. Dan pengunjung sumber perlu memindahkan halaman kiri dan kanan untuk melihat semua maklumat.
• Tubuh harus berada di pusat kanvas.

Ini adalah peringkat persiapan kerja. Cara membuat susun atur di Photoshop bergantung pada imaginasi dan rasa anda. Oleh itu, hanya akan menjadi saranan umum mengenai sifat teknikal.

• Pertama, susun atur anda memerlukan latar belakang. Ia boleh dibuat secara bebas atau dimuat turun dari rangkaian. Terdapat banyak sumber dengan tekstur percuma. Jangan letakkan imej tapak yang tertakluk kepada hak cipta. Jangan mengambil latar belakang yang terang atau kontras. Adalah lebih baik untuk tidak menggunakan tekstur dengan banyak butiran kecil yang menarik perhatian. Mereka akan mengalih perhatian pelawat dari badan halaman.
• Jika anda hanya membuka lukisan di Photoshop, ia akan berada pada tab baru, dan tidak ditambah pada susun atur. Sorok latar belakang keseluruhan. Untuk melakukan ini, anda perlu pintasan papan kekunci Ctrl + A atau alat Pemilihan (ia terletak di anak tetingkap kiri). Salin dan tampal ke templat.
• Juga pilihan ini tersedia jika anda mengklik Edit - Tampal.

• Lapisan baru akan muncul dalam senarai di bahagian bawah kanan. Klik padanya dengan butang tetikus kanan untuk melihat tindakan yang mungkin. Dalam menu "Layer Options", anda boleh menukar namanya. Dalam "Tetapan Overlay" adalah tetapan imej asas. Anda boleh membuatnya berseri, emboss, gloss, stroke, kecerunan. Jika anda memilih pilihan, perubahan akan segera muncul di Photoshop. Terdapat satu set gaya siap sedia. Jadi dari tekstur standard, penyelesaian reka bentuk asal dicipta. Dan jangan menarik apa-apa tambahan.
• Butang "Penapis" berada dalam bar menu. Di sana anda akan mendapati pelbagai tiruan (pastel, cat air, pensel), gaya, tekstur, lakaran, sorotan, kabur.
• Anda boleh memilih latar belakang kosong. Warna bergantung pada pilihan peribadi anda. Tetapi lebih baik tidak menjadikannya hitam atau beracun. Tempat tidur yang sesuai dan nada lembut atau sejuk telus (sebagai contoh, cahaya kelabu, biru pucat).
• Selepas tekstur, anda boleh mengumpul tapak itu sendiri. Di sini anda mempunyai kebebasan untuk mencipta.
• Untuk menambah beberapa bentuk (baris, persegi, bujur), klik pada butang yang sesuai di sebelah kanan. Ia akan mempunyai rupa dan nama objek yang kini dipilih untuk dilukis. Sebagai contoh, "Ellipse Tool", "Alat Polygon". Dalam Photoshop, bilangan bentuk adalah terhad. Tetapi mereka boleh didapati di Internet, dimuat turun dan dipasang melalui menu Edit - Set Management. Dalam medan Jenis, nyatakan koleksi koleksi objek yang anda muatkan.
• Dalam pelbagai versi program, angka-angka ini dipanggil dengan cara yang berbeza. Sama ada dengan butang dalam bentuk segitiga hitam kecil (di sebelah kanan), atau dengan ikon gear, atau dengan item "Bentuk titik" (di bawah bar menu). Objek boleh digabungkan, dikumpulkan, membuat komposisi mereka.
• Untuk membuat bingkai teks, klik pada butang dalam bentuk huruf besar "T". Kemudian pilih tempat di mana watak-watak itu harus ditempatkan, klik di sana dan taipkan apa yang anda perlukan.
• Setiap elemen adalah lebih baik untuk meletakkan lapisan berasingan. Oleh itu, ia akan menjadi lebih mudah untuk bergerak dan diedit, tanpa "menyentuh" ​​keseluruhan tapak. Untuk menambah objek ini, pergi ke Lapisan - Baru.

• Untuk memproyeksikan imej ke dalam kawasan yang telah dipilih, mula-mula pilih, dan kemudian buka Edit - Paste Special. Terdapat pilihan "Insert instead" dan "Insert outside".
• Anda boleh memindahkan sebahagian daripada satu gambar ke lapisan baru. Untuk melakukan ini, pilihnya, klik kanan padanya dan pilih "Potong ke lapisan baru".
• Dengan bentuk, kapsyen dan imej pilihan sama ada dengan latar belakang: kesan, penapis dan sebagainya.
• Di Photoshop, masih terdapat banyak alat untuk melukis: berus, pen, pensel.

Anda boleh membuat sumber yang berkualiti walaupun dari objek geometri mudah.

Terdapat sumber dengan susun atur percuma. Muatkannya dalam Photoshop dan edit jika perlu. Ia lebih mudah dan lebih cepat daripada melukis dari awal.

Bagaimana untuk menukar susun atur ke fail html?

Anda mengetahui cara membuat tapak di Photoshop, dan merancang susun atur pertama anda. Apa yang perlu dilakukan seterusnya? Lagipun, ia tidak boleh dimuat naik ke hosting sahaja.

Ia boleh diberikan kepada pengkod yang akan membuat template html berkualiti tinggi. Tetapi ada pilihan lain. Gunakan perkhidmatan untuk menukar fail JPA ke HTML dan CSS.

• Psd2Html Converter. Perkhidmatan dalam talian yang dibayar. Segera tukar format Photoshop ke templat laman web. Dengan sumber ini, walaupun dari susun atur yang berkualiti tinggi, anda boleh membuat laman web yang layak.
• HTML Panda.
• PSDCenter
• 40 Dolar Markup.

Pembina

Layout juga boleh dikumpulkan di tapak khas. Biasanya terdapat antara muka yang jelas dan intuitif. Anda hanya memasang template dari pelbagai bahagian. Sesetengah elemen terbaik disediakan dalam Photoshop. Jadi anda mendapat reka bentuk asal. Walaupun ia dicipta pada pembina.

Dalam Photoshop bukan sahaja menarik. Ia mengumpulkan susun atur untuk tapak. Dalam kebanyakan kes, ini dilakukan oleh tuan-tuan. Tetapi templat mudah boleh membuat sesiapa pun. Hanya pengetahuan asas mengenai Photoshop yang diperlukan.