Niranth; Terjemahan: Slutskaya Svetlana

Mencipta reka letak web yang menarik dan berfungsi adalah bahagian penting dalam kehidupan pereka web. Dalam pelajaran ini Photoshop kami akan membuat susun atur laman web profesional dari awal. Semasa pelajaran, anda akan mempelajari beberapa helah berguna apabila mencipta reka bentuk.

Sumber Pelajaran:

1. Set Ikon (wefunction.com)
   Set ikon alternatif
2. Ikon Twitter (iconeden.com)
3. Fon Bebas (dafont.com)

Langkah 1. Mockup

Sebelum kita mula membuat susun atur tapak web, kita perlu membuat pelan lakaran reka letak masa hadapan, yang akan menunjukkan kefungsian dan penampilan anggarannya.

Langkah 2. Buat dokumen.

Kami akan membuat susun atur tapak web selebar 960 piksel. Untuk melakukan ini, buat dokumen baharu dengan saiz 1200x1500 piksel. Resolusi 72 piksel.

Memandangkan reka letak tapak akan selebar 960 piksel, kami perlu mentakrifkan kawasan ini dengan menambahkan panduan. Pilih keseluruhan dokumen ( Ctrl+A).

Pergi ke menu Pilih - Transform Selection(Pilih > Transform Selection). Dalam bar sifat di bahagian atas skrin, tetapkan lebar kepada 960 piksel. Ini akan menjadi kawasan kerja susun atur.

Tetapkan panduan tepat di sepanjang sempadan pilihan.

Kita perlu membuat margin antara tepi kawasan kerja susun atur dan kawasan kandungan yang akan kita tambahkan kemudian. Dengan dokumen dipilih secara aktif, pergi ke menu sekali lagi Pemilihan - Transform Selection(Pilih > Transform Selection). Kurangkan lebar pilihan kepada 920 piksel. Ini bermakna akan terdapat 20 piksel pelapik pada setiap sisi reka letak, dengan jumlah 40 piksel.

Tetapkan garis panduan sepanjang pilihan baharu:

Langkah 3. Buat pengepala tapak.

Mari kita teruskan untuk mencipta pengepala tapak. Buat pilihan tinggi 465px di bahagian atas reka letak.

Isi pilihan dengan kelabu dan kemudian gunakan Gaya Lapisan untuk menggunakan warna dan kecerunan.

Tambahkan isian kecerunan pada pengepala menggunakan gaya lapisan Tindanan kecerunan(Tindanan Kecerunan). Buat kecerunan dua warna.

Sekarang pengepala akan kelihatan seperti ini:

Kini anda perlu menambah pencahayaan pada pengepala. Buat lapisan baharu ( Ctrl + Alt + Shift + N) dan pilih berus lembut dengan saiz 600 piksel. Pilih warna #19535a dan gunakan berus untuk klik sekali pada bahagian tengah atas pengepala.

Buat pilihan 110px pada pengepala.

Tekan kekunci Padam untuk memadam bahagian yang dipilih.

Terbalikkan lapisan sorotan secara menegak (Ctrl+T).

Anda perlu memastikan bahawa titik cahaya pada penutup betul-betul di tengah. Untuk melakukan ini, buat lapisan dengan pengepala dan serlahkan aktif dan pilih alat Bergerak(Alat Gerakkan) (V). Pada bar harta di bahagian atas skrin, klik butang Jajarkan Pusat Mendatar.

Buat lapisan baharu (Shift + Ctrl + N) dan lukis dengan alatan Pensel(Alat Pensil) titik, bersaiz 1 piksel. Untuk lukisan gunakan warna #01bfd2.

Mari licinkan tepi lapisan ini menggunakan topeng kecerunan. Pilih alat Kecerunan(Gradient Tool) dan buat kecerunan seperti yang ditunjukkan di bawah:

Sapukan lapisan baharu dengan topeng dan isikannya dengan kecerunan yang baru anda buat.

Langkah 4. Buat corak

Sekarang mari kita cipta corak mudah yang akan kita tambahkan pada pengepala. alat Pensel(Alat Pensil) dengan saiz 2 piksel, lukis dua mata, seperti yang ditunjukkan dalam rajah. Matikan keterlihatan lapisan latar belakang untuk seketika (klik pada ikon mata di sebelah lapisan latar belakang) dan buat corak (Penyuntingan - Tentukan Corak)(Edit > Tentukan Corak):

Buat lapisan baharu (Shift + Ctrl + N) dan letakkannya di bawah lapisan sorotan. Pilih kawasan yang anda mahu gunakan corak dan buka tetingkap isi(Isi) (Shift + F5). Klik OK.

Selepas menambah tekstur, pengepala kelihatan seperti ini:

Buat peralihan lancar daripada corak ke pengepala: tambah topeng pada lapisan corak dan gunakan berus putih lembut (#ffffff) dengan kelegapan 60% untuk melukis di atas topeng.

Keputusan:

Langkah 5. Tambah logo

Mari kita teruskan untuk menambah logo. Pilih berus lembut dengan warna #19535a dan cat tempat.

Tulis teks:

Tambahkan gaya lapisan pada lapisan logo Bayang-bayang(Drop Shadow).

Langkah 6: Navigasi

Tambah teks navigasi.

Lukis butang navigasi menggunakan Rectangular Marquee Tool. Isikan pilihan dengan sebarang warna dan kurangkan parameter Isi kepada sifar.

Tambah gaya pada lapisan butang Tindanan kecerunan(Tindanan Kecerunan).

Langkah 7: Peluncur Kandungan

Buat pilihan 580x295 piksel.

Isi pilihan dengan mana-mana warna kelabu.

Letakkan imej. Klipkannya dengan lapisan yang anda buat sebelum ini.

Sekarang mari tambahkan kesan pada gelangsar. Buat lapisan baharu (Shift + Ctrl + N), pilih Berus(Alat Berus) dengan diameter 400 piksel. Buka palet Berus (F5) dan tetapkan parameter yang ditunjukkan dalam tangkapan skrin:

Pilih warna hitam (#000000) dan lukis tempat:

Sapukan penapis untuk melembutkan tepi kabur Gaussian(Kabur Gaussian).

Pilih bahagian bawah bayang-bayang dan padamkan (Padam).

Letakkan lapisan bayang di atas peluncur:

Picit lapisan bayang oleh pemegang tengah (Ctrl + T), dan kemudian tengah lapisan bayang sekali lagi: pilih kedua-dua lapisan dan klik pada butang dalam panel sifat Menjajarkan pusat secara mendatar(Sejajarkan Pusat Mendatar).

Gandakan lapisan bayang-bayang (Ctrl + J) dan letakkan pendua di tepi bawah peluncur.

Lukis butang pada gelangsar menggunakan alat Marquee segi empat tepat(Alat Marqee segi empat tepat ) . Isi butang dengan hitam (#000000).

Kurangkan kelegapan lapisan butang kepada 50%.

Tambahkan bentuk anak panah pada butang peluncur anda:

Di bahagian bawah peluncur, lukis jalur dan isi dengan hitam (#000000).

Kurangkan kelegapan lapisan jalur kepada 50%.

Tambahkan penerangan projek anda pada bar ini:

Langkah 8. Tambah teks ucapan

Tulis teks ucapan:

Langkah 9. Menamatkan pengepala tapak

Kami hampir selesai mengerjakan pengepala tapak. Tambah bayang halus menggunakan alat Berus(Alat Berus).

Tinggalkan jurang 1 piksel antara bayang-bayang dan tajuk.

Buat lapisan baharu di bawah lapisan pengepala (Shift + Ctrl + N) dan gunakan kecerunan padanya.

Langkah 10. Tambah butang untuk peluncur

Lukis butang tukar slaid.

Tambahkan gaya lapisan pada satu butang Bayang dalaman(Bayang Dalam), dan kemudian salin lapisan butang bilangan kali yang diperlukan (Ctrl + J).

Langkah 12. Buat pemisah kandungan

Gunakan Alat Pensil dan lukis garis kelabu muda (#aaaaa) selebar 1 piksel.

Tambahkan topeng pada lapisan garisan dan gunakan kecerunan untuk mencipta peralihan yang lancar di tepi.

Langkah 13. Tambah kandungan

Sudah tiba masanya untuk menambah kawasan untuk kandungan. Kawasan kandungan akan dibahagikan kepada 3 lajur yang sama jaraknya. Akan terdapat inden 25 piksel antara setiap lajur.

Sebelum kita mula mereka bentuk susun atur tapak web, kita memerlukan lakaran yang akan menunjukkan rupa dan fungsinya. Untuk lakaran, saya hanya menggunakan ton kelabu untuk secara amnya fokus pada "layout" dan tidak mengganggu warna lagi. Akibatnya, anda boleh menukar atau membuat semula sesuatu dengan cepat pada bila-bila masa.

2. Buat dokumen

Reka letak tapak akan selebar 960 piksel, jadi kita perlu mencipta dokumen dengan dimensi 1200x1500 piksel, dengan resolusi 72 piksel/inci.

Kami telah memutuskan lebarnya, kini kami perlu menetapkan kawasan ini menggunakan . Tekan Ctrl + A untuk memilih keseluruhan dokumen.

Pergi ke Pilih dan pilih Transform Selection. Dalam bar pilihan di bahagian atas, tetapkan lebar kepada 960, ini ialah kawasan kerja susun atur masa hadapan.

Letakkan panduan di sepanjang tepi pilihan.

Sekarang kita akan membuat margin antara sempadan kawasan kerja dan kawasan untuk kandungan yang akan ditambah kemudian. Pastikan anda mempunyai pilihan yang aktif, kemudian pergi sekali lagi ke menu Pilih > Transform Selection (Selection - Transform selected area). Kurangkan saiz lebar kepada 920 piksel. Ini bermakna akan terdapat inden sebanyak 20 piksel pada kedua-dua belah reka letak dan sejumlah 40 piksel.

Mari tambah dua lagi panduan menegak di sepanjang tepi pilihan baharu.

3. Mencipta pengepala tapak

Di bahagian atas reka letak, buat pilihan setinggi 465px.

Isi kawasan yang dipilih dengan warna kelabu; sedikit kemudian kami akan menggunakan gaya lapisan padanya untuk menukar warna.

Tambahkan kecerunan pada pengepala menggunakan gaya Tindanan Kecerunan. Kecerunan akan terdiri daripada dua warna #0f201c dan #002931.

Inilah yang anda patut dapatkan:

Sekarang mari tambahkan sedikit pencahayaan pada pengepala. Ambil berus bermata lembut dengan diameter 600px, warna - #19535a dan pada lapisan baharu, klik berus di bahagian tengah atas pengepala.

Di bahagian atas pengepala, buat pilihan 110px.

Dengan menekan kekunci Padam, padamkan kawasan yang dipilih.

Menggunakan Free Transform (Ctrl + T), flip lapisan serlahan secara menegak.

Pastikan lampu pengepala berpusat dengan sempurna. Untuk melakukan ini, aktifkan lapisan dengan sorotan dan pengepala, pilih Alih (V) daripada bar alat. Di bahagian atas bar pilihan, pilih Jajarkan Pusat Mendatar.

Setelah mencipta lapisan baharu, gunakan Alat Pensil (B) untuk melukis garisan 1 px merentasi lebar keseluruhan dokumen. Warna - #01bfd2.

Menggunakan topeng kecerunan, ratakan tepi garisan yang dibuat. Ambil Gradient Tool (G) dan laraskannya seperti tangkapan skrin di bawah:

Isi lapisan yang dibuat dengan kecerunan.

4. Mencipta corak

Kami akan menghiasi pengepala susun atur dengan corak berkotak-kotak. Menggunakan pensel 2 piksel, lukis dua titik yang terletak secara menyerong. Matikan lapisan latar belakang buat sementara waktu dengan mengklik pada mata di sebelah lakaran kecil lapisan latar belakang. Kemudian buat corak dengan pergi ke menu Edit dan pilih Define Pattern.

Di bawah sorotan buat lapisan baharu. Pilih kawasan yang anda mahu gunakan corak. Tekan Shift + F5 untuk mengisi pengepala.

Keputusan:

Apa yang tinggal ialah membuat peralihan yang lancar dari corak ke topi. Selepas menambah topeng pada lapisan corak, buat peralihan yang lancar menggunakan berus putih lembut dengan kelegapan 60%.

Lihat hasilnya:

5. Menambah logo

Logo adalah bahagian penting dalam setiap laman web. Untuk menciptanya, ambil berus lembut, tetapkan warna kepada #19535a dan cat tempat di sudut kiri atas.

Kemudian tulis teks untuk logo.

Gunakan kesan berikut padanya:

Tindanan kecerunan:

6. Navigasi

Buat butang untuk kategori navigasi yang dipilih menggunakan Rectangular Marquee Tool (M). Isikan kawasan yang dipilih dengan sebarang warna dan turunkan nilai isian kepada 0%.

7. Peluncur Kandungan

Buat kawasan pilihan 580x295 piksel.

Isi kawasan yang dipilih dengan sebarang warna kelabu.

Letakkan imej di atas dan pasangkannya ke lapisan bawah.

Anda perlu menambah bayang pada peluncur. Setelah mencipta lapisan baharu, ambil Berus (B) dengan saiz 400px dan tekan kekunci F5 untuk membuka tetingkap tetapan berus. Lihat imej di bawah untuk semua tetapan.

Tetapkan warna kepada hitam dan lukis tempat.

Untuk melembutkan tepi, gunakan penapis Gaussian Blur.

Buat pilihan untuk bahagian bawah bayang-bayang dan padamkannya.

Letakkan bayang di bahagian atas gelangsar.

Mula-mula, kecilkan sedikit bayang, dan kemudian tengahkannya menggunakan fungsi Align Horizontal Centers.

Salin bayang dan letakkan salinan di bahagian bawah peluncur.

Menggunakan Rectangular Marquee Tool (M) pada peluncur, buat dua butang dan isikan dengan hitam.

Untuk lapisan butang, turunkan kelegapan kepada 50%.

Menggunakan bentuk Photoshop standard, tambahkan anak panah pada butang.

Buat jalur di bahagian bawah peluncur dan isi dengan hitam.

Untuk jalur, turunkan kelegapan kepada 50%.

Di sini anda boleh menambah penerangan untuk projek anda.

8. Teks alu-aluan

Di sebelah kiri peluncur, masukkan teks ucapan anda.

9. Menamatkan tajuk

Kami sedang menyelesaikan kerja pada pengepala. Dan akhirnya, gunakan berus untuk menambah bayang yang ketara sedikit.

Tinggalkan jarak 1 piksel antara bayang-bayang dan tajuk.

Buat lapisan baharu di bawah lapisan pengepala. Gunakan kecerunan padanya.

10. Butang untuk peluncur

Sudah tiba masanya untuk menambah butang untuk menukar slaid.

Gunakan gaya lapisan Bayangan Dalam pada butang pertama untuk menjadikannya aktif.

11. Pemisah kandungan

Tepat di bawah butang untuk peluncur, lukis garisan warna kelabu muda #aaaaaa, lebar 1 px.

Selepas menambah topeng pada garisan, buat peralihan yang lancar di tepi menggunakan kecerunan. Kami telah mencipta garis pemisah.

12. Menambah kandungan

Sekarang mari tambah kawasan untuk bahagian kandungan. Ia akan dibahagikan kepada 3 lajur dengan lekukan 25px.

Letakkan panduan menegak pada kedua-dua hujung pembesar suara.

Untuk setiap lajur, tambahkan tajuk dan ikon yang sesuai. Di bawah tajuk, tambah kandungan.

Menggunakan Alat Segiempat Bulat, buat butang Baca Lagi. Pastikan mod Bentuk dipilih dalam Bar Pilihan.

Gunakan gaya Tindanan Kecerunan dan Strok pada butang.

Salin butang Baca Lagi (Ctrl + J) dua kali lagi dan letakkannya dalam setiap lajur di bawah kandungan.

Seperti sebelum ini, anda perlu membuat garis pemisah, meletakkannya di bawah butang. Di bawah, letakkan segi empat tepat kelabu dan gunakan gaya Strok padanya.

Letakkan imej pada setiap segi empat tepat.

Cipta bayang-bayang seperti sebelumnya dan letakkannya di bawah kawasan imej.

Di bawah setiap imej, letakkan tajuk, kandungan, butang Baca Lagi dan garis pemisah.

Letakkan ikon Twitter di bawah dalam lajur pertama.

Kemudian hantar di Twitter.

Lukis satu lagi butang Lagi Tweet.

Gunakan gaya Tindanan Kecerunan dan Strok pada butang ini:

Tulis teks Lagi Tweet di atasnya.

13. Buat pengaki

Di bahagian paling bawah susun atur tapak, buat kawasan yang dipilih dan isi dengan kelabu.

Gunakan gaya Tindanan Warna pada pengaki.

Akhir sekali, letakkan navigasi dan hak cipta pada pengaki.

Susun atur tapak sudah sedia!

KandunganMembuat susun atur laman web: hiburan untuk golongan elit Membangunkan reka letak laman web: peringkat Kaedah No. 1. Memotong reka letak daripada templat tapak web Kaedah No. 2. Membuat susun atur laman web dalam hampir Photoshop Kaedah No. 3. Alat mockup dalam talian

Untuk memulakan, fikirkan mengapa anda memutuskan untuk membuat reka letak laman web sendiri. Pekerjaan ini memerlukan pengetahuan serba boleh daripada seseorang dalam IT dan reka bentuk, pemikiran analitikal dan kreatif pada masa yang sama. Dan juga sebahagian daripada masa anda. Baiklah, terdapat 4 sebab mengapa anda mungkin memerlukan ini. Jika anda mempunyai yang berbeza, tulis dalam komen, saya akan menambahnya.

Mencipta reka letak tapak web: menyeronokkan untuk golongan elit

Sebab #1. Minat dalam membangunkan reka letak laman web

Adakah minat anda sangat spesifik? Kita berada di sini kami tidak menilai sesiapa. Pada suatu masa dahulu ia menjadi menarik bagi kami, dan kami mula melakukannya! Di samping itu, kehausan untuk pengetahuan adalah ciri tersendiri kami. Saya menghargai rasa ingin tahu anda.

Sebab #2. Pembangunan susun atur laman web sebagai cara untuk mendapatkan wang

Jika anda ingin menjadi seorang pereka web pada masa hadapan, anda perlu bermula di suatu tempat, iaitu daripada susun atur asas halaman tapak. Hasil pantas kerja anda memberi motivasi seperti yang lain. Nasib baik, dalam artikel ini saya hanya mencadangkan cara blitz untuk membuat susun atur.

By the way, kerja seorang pereka web bukan jenaka. Di bawah ini saya hanya akan meninggalkan jadual gaji bergantung kepada tempoh perkhidmatan (mengikut data DOU untuk Mei-Jun 2016). Saya tidak membayangkan apa-apa. Hanya memburu tersembunyi.

Sebab #3. Merangka spesifikasi teknikal untuk pembangunan susun atur laman web untuk pereka bentuk

Selalunya bukan pereka berhadapan dengan keperluan untuk menunjukkan susun atur tapak web - kadangkala hanya untuk menggambarkan idea anda, Tetapi kadangkala untuk mengukuhkan spesifikasi teknikal. Sudah tentu, ini tidak perlu dan pereka yang cekap akan memahami idea anda malah melakukannya dengan lebih baik daripada yang anda jangkakan. Walau bagaimanapun, jika anda tahu dengan tepat apa yang anda mahukan, adalah lebih baik untuk menunjukkannya daripada memberitahunya.

Aplikasi ini juga mudah digunakan Coggle, yang boleh anda sambungkan KepadaGooglememandu.

Saya suka Coggle kerana ia adalah peta minda. sentiasa di tangan, adalah mudah untuk berkongsi dengan rakan sekerja, dan warna elemen antara muka dipilih dengan baik. Di samping itu, butang kanan tetikus berfungsi, yang membolehkan anda menyesuaikan peta dengan mudah. Saya akhirnya dengan struktur ini untuk halaman utama tapak.

Pada peringkat pertama mereka bentuk susun atur, peta minda tapak dibuat

Peringkat 2: Mencipta prototaip laman web

Seterusnya, anda boleh mula melukis susun atur tapak web dengan serta-merta dalam Photoshop, tetapi walaupun anda membuat susun atur kerana rasa ingin tahu terbiar, mula-mula anda harus melukis prototaip laman web. Dalam pembangunan langkah demi langkah, prototaip ialah langkah penting yang mengukuhkan kesihatan mental pereka web. Apabila membuat prototaip, ia dirancang blok utama tapak masa hadapan(pengepala, peluncur, butang, kenalan, struktur bahan, dsb.). Ini membolehkan anda menjimatkan masa dengan ketara pada peringkat melukis reka letak kerana anda boleh melihat hasil anggaran dan membuat perubahan tanpa rasa sakit.

Penat? Permudahkan hidup dan pesanan pembangunan laman web dari KOLORO. Kami akan mengambil kira kehendak anda dan anda akan mendapat apa yang anda inginkan.

Mencipta prototaip laman web dalam talian

Saya biasanya menggunakan dua alatan dalam talian yang paling popular untuk prototaip tapak web: Moqups dan Mockflow. Dalam kedua-dua kes ada peluang untuk mencipta prototaip secara percuma, tetapi dengan fungsi terhad. Tarif untuk tapak pertama bermula pada $13/bulan. (10 projek, 1 GB), dan untuk yang kedua - daripada $14/bulan. (bilangan projek tanpa had + 25 GB dalam awan). Semua orang juga mengesyorkan Mockingbird. Dan saya akan mengesyorkannya, tetapi hanya untuk menghormati Eminem, kerana di sini 3 projek akan menelan kos $12/bulan, dan terdapat lebih sedikit alat percuma.

Sekarang tentang tanggapan peribadi saya. Moqups lebih mudah dan intuitif walaupun dari lawatan pertama. Terdapat banyak blok dan ikon siap sedia di sini - hanya perkara yang anda perlukan untuk melalui peringkat prototaip dengan cepat. Di samping itu, unsur-unsurnya mudah pusat relatif kepada bahagian tengah halaman atau elemen lain. Sedikit mengganggu had 300 objek untuk halaman dalam mod percuma - ini mungkin tidak mencukupi untuk susun atur tapak web satu halaman. Anda boleh memasukkan elemen daripada kerangka kerja Bootstrap. Mockflow membolehkan anda melakukan lebih sedikit, dan anda hanya perlu memikirkannya dalam beberapa minit dan telah membiasakan diri dengan kepadanya, bagaimanapun, lebih ruang cakera mungkin menarik seseorang.

Prototaip tapak web dalam Moqups dan Mockflow

Bagaimana untuk membuat prototaip tapak web masa hadapan?

Mari kita lihat contoh Moqups cara membuat prototaip halaman dengan teks untuk blog.

Langkah 1. Tambah topi(teks boleh diubah).

Langkah 2. Tambah blok untuk gambar dan tulisan (tajuk artikel). Menggunakan gaya, anda boleh menukar saiz, fon dan pemformatan teks lain dengan mudah.

Langkah 3. Tambah teks dan bertanya lebar lajur. Semua blok dipusatkan dengan mudah berbanding bahagian tengah halaman.

Langkah 4. Teks hendaklah dipecahkan gambar. Dan lebar lajur terlalu besar, 500 px adalah lebih baik. Nasib baik, anda boleh menukarnya dengan cepat. Tambahan besar: elemen yang dipilih dikurangkan secara relatif antara satu sama lain dan blok saya dengan gambar juga menjadi lebih kecil.

Langkah 5. Tambah bar sisi(lajur sisi), ia akan menjadi mudah di sini. Mari letak medan untuk cari dan blok untuk langganan ke surat berita (dengan gambar yang menarik dan butang terang).

Langkah 6. Katakan artikel kami ternyata sekecil ini. Anda juga boleh menambah tinjauan Dan penilaian artikel. Hasilnya ialah prototaip halaman blog yang kemas. Tambah elemen lain mengikut keinginan anda.

Prototaip membenarkan lihat skala halaman dan membuat keputusan mengenai blok tertentu. Dengan cara ini, menggunakan alat ini anda boleh membuat prototaip untuk peranti yang berbeza. Sebagai contoh, jika anda mencuba, anda akan mendapat sesuatu seperti ini. Walau bagaimanapun, prototaip biasanya terhad kepada reka bentuk hitam dan putih.

Prototaip aplikasi telefon pintar

Peringkat 3: Membuat reka letak laman web yang cantik: memilih warna

Bergantung kepada kejayaan pilihan warna persepsi tapak Dan jenama oleh pengguna. Saya tidak mengesyorkan bergantung pada kekuatan anda sendiri - memilih warna yang betul boleh mengambil masa berjam-jam. Oleh itu, saya mengesyorkan menggunakan palet warna siap sedia untuk web. Google baru-baru ini mengeluarkan panduan terperinci tentang warna yang baik untuk reka bentuk bahan(trend reka bentuk web). Warna-warna ini digabungkan dengan harmoni dan anda boleh yakin dengan daya tarikannya. Menggunakan Materialpalette, anda boleh berjaya memilih dua warna - yang utama dan aksen, dan juga melihat bagaimana ia akan kelihatan dalam antara muka. Sedikit lagi warna pada Warna Reka Bentuk Bahan.

Adakah anda telah membentangkan tapak? Adakah anda telah membuat prototaip? Adakah anda telah memilih warna anda? Kini anda boleh meneruskan untuk membuat reka letak itu sendiri. Saya menawarkan anda beberapa cara.

Perhatian! Tidak akan ada nasihat di sini tentang cara membuat susun atur laman web dalam Photoshop - ini adalah topik untuk artikel berasingan, berikut adalah kaedah yang lebih mudah.

Kaedah nombor 1. Memotong reka letak daripada templat tapak web

atau tapak sedia ada

Kaedah ini sesuai untuk anda jika anda mahu:

• fikirkan alatan asas Photoshop;
• cari yang berbeza rujukan untuk tapak web masa depan anda dan letakkannya bersama-sama;
• rasa pereka selama beberapa jam;
• menunjukkan kepada pereka web atau agensi (contohnya, kami:) paling banyak penglihatan terperinci tapak;
• mengukuhkan TK untuk pembangunan tapak web bukan sahaja "di sini adalah butang panggilan, dan di sini ialah pemisah dan magnet utama."

Kelebihan pendekatan ini untuk pembangunan susun atur:

• awak boleh mengelakkan kesilapan biasa, setelah melihat tapak berkualiti yang mencukupi;
• awak akan faham apa yang tidak boleh dilakukan untuk menjadikannya baik;
• penghibur reka bentuk web akan jelas bayangkan apa yang anda harapkan;
• ini sangat laju- dalam beberapa jam anda akan membuat susun atur untuk semua halaman tapak.

Kekurangan:

• anda tidak akan memahami sepenuhnya apa itu reka bentuk web;
• Beberapa rujukan yang anda temui tidak boleh dilaksanakan oleh pereka bentuk reka letak tanpa mengubah bahagian lain tapak.

Bagaimana ia dilakukan

Cara termudah dan terpantas untuk membuat susun atur tapak web adalah dengan memilih templat untuk tertentuCMS dan buat semula untuk diri sendiri. Oleh itu, pertama anda perlu membuat keputusan mengenai CMS, yang akan memudahkan pembangunan tapak. Walau bagaimanapun, sila ambil perhatian bahawa reka bentuk tapak akan menjadi menjadi terhad unsur-unsur yang terdapat dalam templat. Sudah tentu, anda boleh menukar warna, tetapi elemen antara muka individu sudah sedia dibuat dan anda tidak boleh mengubahnya.

Jika anda lakukan "rebus" dari tapak yang berbeza, jangan lupa untuk menulis di suatu tempat dalam buku nota anda dengan pensel sumber. Ini akan memudahkan lagi pembangunan reka bentuk dan susun atur susun atur.

Susun atur laman web untuk Wordpress

CMS yang paling popular ialah Wordpress. Sebagai contoh, anda akan menemui banyak templat moden untuk CMS ini. Untuk apa? Laman web pada templat mempercepatkan pelancaran projek dengan ketara, namun ia tidak akan menjadi unik. Walaupun, jika anda menggunakan ilustrasi asli, imej dan pendekatan kreatif - walaupun susun atur templat boleh dibuat semula di luar pengiktirafan. Kelebihan utama ialah laman web anda dijamin adaptif dan secara amnya cantik dari segi paparan pada peranti yang berbeza.

Semak imbas templat yang berbeza dan pilih yang paling anda sukai. Saya melakukan beberapa lagi carian di Envato Market dan menemui templat Dalton yang paling saya suka. Dengan mengakses templat versi demo, anda akan segera melihat konsep tapak web korporat. Dengan mengklik pada menu anda boleh melihat lebih banyak lagi secara terperinci apakah fungsi templat tersebut bagaimana rupa halaman yang berbeza itu. Adalah lebih baik untuk meluangkan masa setengah jam untuk perkara ini dan benar-benar memahami kandungan templat.

Apa yang akan datang? Memilih saiz susun atur laman web, pemotongan dan pelekatan

Apabila anda sudah selesa dengan templat, anda boleh mula mengeditnya. menghiris. Bagus jika resolusi skrin anda 1920 px atau lebih - ini akan membolehkan anda hanya mengambil tangkapan skrin bahagian tapak dan menggabungkannya dalam editor. Bekerja dengan susun atur bermula dengan pengepala, kemudian - pelbagai blok (badan), dan pada akhir - pengaki.

Anda perlu:

• selesa alat untuk mengambil gambar kawasan yang dipilih(alat tangkapan skrin), saya menggunakan Lightshot - ia menawarkan untuk menyimpan imej ke fail berasingan atau menyalinnya ke papan keratan;
• Photoshop- untuk melekatkan bahagian imej yang dipotong.

Peringkat membuat reka letak untuk tapak web berdasarkan templat

Langkah 1. Pilih lebar susun atur tapak

Tentukan halaman mana yang akan anda lakukan dahulu. Jangan mulakan dengan yang utama - lebih baik meninggalkannya untuk yang terakhir, kerana... ini adalah halaman yang paling penting bagi tapak dan pertama-tama adalah lebih baik untuk penuhkan tangan anda. Dalam contoh, saya akan membuat halaman "Perihal Kami" - akan ada maklumat menarik tentang syarikat dan pekerjanya. saya dah ada prototaip laman web, jadi saya tahu apa yang saya lakukan. By the way, bagaimana keadaan prototaip anda?

Buka Photoshop dan tetapkan lebar susun atur tapak 1920 px. Ini akan cukup untuk dilihat bagaimana tapak akan kelihatan dalam penyemak imbas. Jika resolusi anda lebih rendah, tetapkan pada lebar yang dibenarkan oleh monitor anda. Jangan bimbang tentang ketinggian lagi - sukar untuk meneka dan anda masih perlu meregangkan/mengundurkan kawasan tersebut.

Langkah 2. Kami terus membuat susun atur tapak web dalam Photoshop

Pilih satu daripada templat topi, yang anda suka. Potong menggunakan alat yang mudah, buka dokumen dalam Photoshop dan masukkan di sana (Ctrl+V). Gunakan Move Tool (V) untuk meletakkan pengepala di bahagian atas. Saya suka pengepala dengan bar atas, di mana terdapat maklumat hubungan tentang syarikat.

Langkah 2.A. Buat susun atur tapak web yang betul dengan segera

Kini anda mempunyai dua cara - tukar teks dalam imej atau tulis teks yang disertakan dalam fail teks. Mana yang lebih selesa? Semuanya bergantung pada matlamat anda. Dari pengalaman peribadi saya boleh mengatakan bahawa lebih baik untuk melakukan ini dalam susun atur, dengan segera memilih fon dan saiz. Ini akan menjadi lebih selamat dan akan menjadi WYSIWYG dalam tindakan (What You See Is What You Get, "what you see is what you get").

Langkah 3. Mari menuju kejayaan

isi saya susun atur blok yang berbeza dan edit mereka mengikut keperluan anda. Anda tidak perlu bermain dengan warna pada peringkat ini jika anda tidak mempunyai kemahiran Photoshop. Untuk meningkatkan ketinggian susun atur, gunakan alat "Bingkai"(DENGAN).

Apa yang berlaku

Selepas beberapa minit berfikir, memotong dan melekatkan kepingan yang paling saya suka, saya mendapatnya susun atur halaman berstruktur"Tentang kita"

Apa yang anda tidak sepatutnya lupa

1. Panggil setiap lapisan dengan blok secukupnya, mengikut apa yang ada. Jika tidak, anda akan hilang sepenuhnya.
2. Apabila memilih fon anda perlu memilih saiz yang berbeza untuk tajuk dan badan teks. Dalam kes ini, adalah lebih baik untuk dibimbing oleh perpustakaan fon web Google Fonts. Jangan lupa untuk menapis fon Cyrillic.

Kaedah nombor 2. Membuat susun atur tapak web dalam Photoshop hampir

Kaedah nombor 2 sesuai untuk anda jika:

• awak TidakPhotoshop(hati nurani tidak membenarkan atau tiada ruang cakera) atau anda belum belajar cara menggunakannya;
• Awak mahu berkenalan denganKod HTML dangaya CSS tanpa gangguan dengan tanda;
• anda memerlukan susun atur tapak web interaktif.

Saya mengesyorkan alat susun atur percuma yang hebat iaitu Macaw. Untuk bekerja dengan program anda memerlukannya muat turun dan pasang- ia hanya beberapa minit. Dalam program anda boleh mod visual secara praktikal susun atur susun atur, kerana anda boleh segera menerbitkannya dan melihat kod HTML dan CSS. Sedikit lebih terperinci tentang cara program ini berfungsi. Macaw mempunyai kelemahan yang ketara - ia mencipta halaman web tidak responsif. Bagaimana untuk menangani perkara ini? Kemahiran akan diperlukan di sini pereka susun atur untuk menyambungkan rangka kerja (contohnya, jika anda membuat susun atur tapak untuk Bootstrap). Walau bagaimanapun, jika anda hanya perlu menunjukkan susun atur kerja untuk rakan sekerja - Macaw adalah sempurna.

Beginilah rupa templat tidak responsif pada peranti yang berbeza. i mahu menangis

Untuk bermula, lancarkan program pada komputer anda. Kami sampaikan untuk perhatian anda dokumen kosong dengan lebar halaman 1200 px dengan susun atur tapak grid. Secara lalai, terdapat antara lajur lekukan(padding), jadi akan ada ruang antara elemen yang dicipta. Apa yang anda perlu lakukan ialah melukis dalam lajur, kerana jika anda melampaui mereka, blok akan muncul di bawah satu sama lain. Jadi perhatikan mereka.

Anda boleh menetapkan lebar lajur, nombornya dan jarak antara lajur secara bebas. Jika anda mahu unsur melekat antara satu sama lain, tetapkan lebar lajur kepada 100% dan keluarkan padding di antaranya. Mengapa anda memerlukan mesh ini? Dengan susun atur HTML susun atur tapak akan ada Lebih mudah untuk membuat templat responsif, kerana rangka kerja moden menggunakan grid 12 lajur.

Anda boleh menukar lebar kawasan kerja dengan menyeretnya ke kanan atau dengan menetapkan sendiri saiznya

Apa yang akan datang? Susun atur

Sediakan ruang kerja anda seperti yang anda mahukan dan mari mula bekerja. Saya akan membuat halaman yang sama yang saya potong daripada templat Dalton.

Langkah 1.

Mula-mula anda perlu mencipta topi. Ia akan menjadi bekas dengan ketinggian 100 px dan sempadan bawah 1 px ketebalan.

Di dalam yang lain bekas akan ada logo, dan di dalam yang seterusnya akan ada menu. Tidak perlu mencipta menu untuk item menu individu blok berasingan, sudah cukup untuk menetapkan jarak yang boleh diterima antara perkataan (jarak perkataan).

Langkah 2

Dengan pengepala selesai, anda boleh meneruskan ke blok yang tinggal. Dalam blok seterusnya saya akan mempunyai latar belakang yang perlu muat turun secara berasingan.

Langkah 3. Buat susun atur tapak web interaktif

Saya terus menyeret blok dan memasukkan teks ke dalamnya. Saya mencipta butang menggunakan alat khas " Butang"(logik!). Macaw membolehkan anda membuat susun atur interaktif dengan keadaan butang yang berbeza dan keupayaan untuk bertukar antara halaman.

Sila ambil perhatian perkara yang diserlahkan berikut. Mereka membantu anda bertukar antara blok yang berbeza dan mengaturnya. Sebagai contoh, teks mestilah dalam bekas tertentu, dan bukan sekadar berkeliaran.

Jika anda menekan Fail ->Menerbitkan, anda akan menerima halaman siap sedia di mana anda boleh melihat kod HTML dan CSS dalam tab yang berbeza. Ini sangat mudah jika anda mahu melihat bagaimana rupa penanda itu.

Apa yang berlaku

Ternyata seperti ini. Di sini untuk perbandingan, dibiarkan kepingan templat yang disunting terpaku, di sebelah kanan- susun atur dibuat dalam Macaw. Kelebihan besar program ini ialah anda boleh memasukkan butang, menambah pautan kepada mereka, membuat halaman yang berbeza dan menavigasi antara mereka. Cuma jangan lupa tentang hierarki kontena dan jangan tersesat di dalamnya.

Ciri-ciri kaedah ini untuk membuat susun atur tapak web:

• untuk memahami kehalusan kerja program, anda perlu menghabiskan masa tambahan;
• walaupun anda telah mendalami program ini, kadangkala masih tidak jelas mengapa ia berkelakuan seperti ini dan bukan sebaliknya;
• anda boleh melupakan kebolehsuaian jika anda tidak menyelesaikannya sendiri;
• sungguh mudah untuk membuat susun atur dan juga memahami sedikit susun atur - anda boleh melihat bagaimana elemen berinteraksi dan struktur secara umum;
• perkara seperti "lebar: 16.6666666666%" mungkin muncul dalam gaya, yang perlu diperbaiki; anda hanya perlu memahami bahawa ini adalah WYSIWG, dan tidak lebih.

Kaedah No 3. Alat mockup dalam talian

Jika anda sedang mencari pilihan tentang cara membuat susun atur tapak dalam permohonan dengan antara muka yang paling mudah dan intuitif, saya sediakan kaedah ini khas untuk anda.

Alat yang mudah untuk mencipta maklumat grafik, yang telah lama saya gunakan - perkhidmatan Creately. Terdapat berpuluh-puluh dan beratus-ratus komponen untuk dibuat reka bentuk UI untuk peranti yang berbeza (lebih banyak untuk peranti mudah alih). Anda pasti akan menyukainya, saya akan tunjukkan beberapa daripadanya.

Masih disini mudah untuk mengedit elemen, tambah teks (dan juga buat butang dengan pautan!). Secara umum, hanya dalam beberapa minit saya sudah mendapat perkara yang sama seperti di Macaw, sahaja lebih berhati-hati. Walau bagaimanapun, reka letak sedemikian tidak boleh dibuat sangat interaktif. Tidak akan ada langkah untuk kaedah ini kerana... Perkhidmatan ini sangat intuitif. Pada skrin saya cuba memaparkan sebanyak mungkin keupayaan perkhidmatan.

Ciri-ciri perkhidmatan Creately

Itu sahaja. Ini adalah kaedah yang saya datangi pada satu atau satu peringkat perkembangan kreatif. Jika anda rasa bahan ini berguna, kami gembira.

P.S. Artikel ini adalah untuk tujuan maklumat sahaja dan tidak akan membenarkan anda menjadi pereka web. Untuk mendapatkan pengetahuan yang serius, anda perlu melakukan lebih banyak penggalian di Internet.

Dalam tutorial ini, kita akan belajar cara membuat reka letak blog gaya minimalis menggunakan teknologi Photoshop baharu. Pilihan baharu untuk mencipta dan menyimpan gaya akan membantu kami dalam hal ini. Gaya Watak dan Gaya Perenggan.

Mari lihat apa yang akan kami buat dalam tutorial ini.

Untuk melengkapkan pelajaran ini, anda memerlukan sumber berikut:

• Fon percuma Sansation Font Percuma.
• Tekstur 26 Corak Piksel Boleh Diulang
• Ikon Sosial Tetapkan Ikon Media Sosial Percuma
• Ikon Kursor Tangan
• Imej stok Foto stok: Tuai 1
• Imej stok Foto stok: New York Streets 3
• Imej stok Foto stok: Zaman Daisy
• Imej stok Foto stok: Pokok di kaki langit
• Foto stok: Angka jualan
• Imej stok Foto stok: Masa adalah Wang!

Menyediakan Kanvas

Langkah 1

Dalam tutorial ini kita akan menggunakan rangka kerja 960GS . Diperlukan dengan muat turun templat dari halaman utamanya dan cari fail di dalam arkib"Grid 12 Lajur".

Klik pada ikon mata di sebelah lapisan 12 Col Grid untuk menyembunyikan keterlihatannya - sehingga kita memerlukannya.

Langkah 2

Buat masa ini, saiz kanvas kami agak kecil. klik Imej>Saiz Kanvas(atau Ctrl + Alt + C) untuk menjadikan saiz lebih besar sedikit dan tetapkan titik sauh di tengah.

Langkah 3

klik Ctrl + Runtuk menunjukkan pembaris. klikLihat> Baru Panduan (Lihat - Panduan Baharu) untuk mencipta panduan baharu.Pilih Menegak dan Jawatan: 185px untuk mencipta panduan menegak yang akan diimbangi 185 px dari tepi kiri.

Langkah 4

Cipta lebih banyak panduan menegak pada jarak150 , 1095 Dan 1130 piksel .

Menyediakan Tema Warna

Langkah 5

Dalam reka bentuk kami, kami akan menggunakan kombinasi warna berikut - Colorlouver . Klik pada imej untuk membuka kombinasi warna dan simpan sebagai JPEG.

Letakkan skema warna di dalam fail Photoshop.Dengan meletakkan imej terus di dalam templat kami, mengaksesnya akan menjadi lebih cepat dan lebih mudah.

Menyediakan latar belakang

Langkah 6

Pilih lapisan Latar Belakang dan klik pada ikon kunci untuk membuka kunci lapisan ini. Klik dua kali pada imej untuk menukar warna latar belakang.

Gunakan penitis mata untuk memilih warna kedua skema warna kami (# 948371) .

Langkah 7

Lukiskan bentuk segi empat tepat di bahagian atas kanvas.Ini akan menjadi latar belakang kedua.

Langkah 8

Pilih borang yang dibuat dan pergi ke Bar Pilihan. buka isi Warna dan klik ikon pemilih warna. Apabila kotak dialog Color Picker muncul, pilih warna pertama. Di padang Strok pilih tiada

Langkah 9

Buat lapisan baharu dan gunakan Rectangular Marquee Tool untuk memilih segi empat tepat atas. Aktifkan Alat Isian Kecerunan dan isikan kawasan yang dipilih dengan kecerunan jejari daripada putih ke hitam.

Mengubahnya mod Blend mod pada Skrin dan mengurangkan kelegapan Kelegapan sebelum ini 37% .

Langkah 10

Buat lapisan baru dan namakannya "bayangan".

Lukiskan pilihan segi empat tepat di bahagian bawah latar belakang kedua seperti yang ditunjukkan dalam imej di bawah. klik Sunting: Isi . Pasang guna - Hitam . klik okeyuntuk mengisi pemilihan dengan warna hitam.

Langkah 11

Kaburkannya dengan Gaussian Blur. klikPenapis> Kabur> Gaussian Blur .

Langkah 12

Tahan Alt, letakkan kursor di antara bayang Dan lapisan dengan latar belakang kedua. Semasa memegang Al, klik untuk menukar lapisan kepada topeng kliping. Menukarnya kepada Topeng Keratan, bayang-bayang kini diletakkan di dalam latar belakang atas.

Langkah 13

Tukar ketelusan bayang-bayangKelegapan sebelum ini 50% . Di bawah anda boleh melihat hasilnya pada pembesaran 100%.

Langkah 14

Sudah tiba masanya untuk meletakkan semua lapisan ke dalam satu kumpulan. Untuk melakukan ini, pilih semua lapisan dan tekan Ctrl + G.

Kepala

Langkah 15

Lukiskan segi empat tepat di bahagian atas kanvas seperti yang ditunjukkan dalam imej.

Langkah 16

Dalam panel Bar Pilihan, tetapkan warna Strok- #af9f8e .

Langkah 17

Untuk pengisian pilih warna kecerunan linear berikut - daripada#d0c4b9 Kepada #a89c91.

Nama tapak

Langkah 18

Di sebelah kiri templat kami menambah nama tapak kami. Sila ambil perhatian bahawa peletakan sepadan dengan gambar di bawah. Klik dua kali pada teks dan tambahDrop Shadow. Fon yang digunakan dalam pelajaran Sansation.

Menu

Langkah 19

Menggunakan fon Sansation 14 pt, kami mencipta menu. Sekali lagi, perhatikan penempatan.

Langkah 20

Untuk butang menu aktif, tetapkan jenis fon kepada tebal.

Langkah 21

Aktifkan alat Poligon dan tetapkan bilangan sisi kepada 3 . Lukiskan segitiga dengan warna isianIsi: #3d3123dan nilai strokStrok: tiada. Tambah bayang pada lapisan -Gaya Lapisan>Jatuhkan Bayang .

Langkah 22

Mari kita serlahkan butang menu aktif. Aktifkan Alat garisan dan tetapkan berat saiznya -5 piksel. Pilih warna#f76b6a dan garisan hendaklah tanpa strok.

Letakkan garisan di bawah menu aktif dan tambahkan jarak 1 px antara garisan dan bentuk segi empat tepat.

Menggunakan Gaya Watak

Langkah 23

Mari kita simpan tetapan gaya untuk teks. Ini adalah sesuatu seperti versi ringkas gaya watak dalam InDesign. Untuk menyimpannya, anda perlu mengaktifkan teks, dan kemudian klik pada ikon "Gaya Watak Baru".

Klik dua kali pada gaya baharu dan pilih tetapan berikut.

Langkah 24

Pilih item menu seterusnya dan kemudian klik butang Gaya Watak untuk menggunakan tetapan gaya.Jika anda menemui tanda tambah di sebelah gaya, ini bermakna ia mempunyai tetapan yang berbeza.

Langkah 25

Ulangi langkah sebelumnya untuk menggunakan gaya yang dibuat pada menu aktif.

Langkah 26

Jadi apakah kelebihan menggunakan gaya watak? Mereka akan membantu kami memusatkan tetapan teks. Kita hanya boleh menukar gaya aksara untuk mengedit sebarang teks. Sebagai contoh, jika anda menukar gaya Menu Teratas – Biasa pada Corbel, semua item menu secara automatik akan bertukar kepada Corbel.

Langkah 27

Buat lapisan baharu dan letakkan di bawah item menu. klikCtrl dan klik padamenu untuk membuat pilihan seterusnya. Isilah hitam.

Langkah 28

Alih keluar pilihan dengan mengklikCtrl + D.Kaburkan kawasan hitam dengan menggunakan penapisPenapis> Kabur> Gaussian Blur .

peluncur

Langkah 29

Lukiskan bentuk segi empat tepat lebar lajur (lihat di bawah).

Untuk warna isian, pilih #dfd1c2. Warna Strok #c8baac, saiz 10 pt. Klik pada anak panah kecil di sebelah baris untuk memastikan pilihan dipilih Selaraskan Dalam.

Langkah 30

Masukkan imej seperti yang ditunjukkan dalam rajah di bawah. Tukarkan kepada Clipping Mask dengan mengklik Ctrl + Alt + G . Imej akan diletakkan secara automatik di dalam blok gelangsar. Jika perlu, anda boleh mengubah saiz dan mengalihkannya tanpa menjejaskan bingkainya dalam apa jua cara.

Langkah 31

Lukiskan satu lagi bentuk segi empat tepat berhampiran peluncur dengan warna yang sama.Pastikan bentuk akan tersentap ke panduan paling luar. Menambah gayaGaya Lapisan > Tindanan Corak, menggunakan tekstur

Photoshop ialah program yang sangat popular di kalangan pereka web, malah standard untuk ramai. Dan apabila ia datang kepada reka letak tapak web, dalam kebanyakan kes ia bermaksud fail .PSD.

Sebelum membuat susun atur secara langsung, anda perlu memutuskan struktur tapak, fikir melalui navigasi, dan bayangkan di mana blok dan elemen akan ditempatkan.

Apakah susun atur terdiri daripada?

Sebilangan besar halaman web terdiri daripada:

• Bahagian atas (pengepala), di mana logo, slogan, menu navigasi, dll. terletak;
• blok utama di mana kandungan diletakkan;
• bar sisi (bar sisi);
• bahagian bawah (footer), yang biasanya menyimpan maklumat sokongan, maklumat hak cipta, pautan berguna, dsb.

Bagaimana untuk mencipta?

Buat dan fikirkan strukturnya. Tidak rugi melukisnya pada sekeping kertas atau dalam Photoshop itu sendiri.

Beri perhatian kepada skema warna - nada mesti digabungkan dan sesuai dengan tema dan arah tapak. Teks harus mudah dibaca dan halaman harus dimuatkan dengan cepat. Jangan berlebihan dengan hiasan, elemen interaktif dan fon mewah - kemudahan adalah lebih penting daripada reka bentuk yang mencolok, kerana pengguna melawat tapak bukan untuk melongo melihatnya, tetapi dengan tujuan yang telah ditetapkan, dan lebih cepat sumber anda dapat menyelesaikannya, lebih banyak ia adalah dihargai.

Tentukan sama ada reka bentuk anda boleh diregangkan atau diperbaiki. Templat bersaiz tetap kelihatan sama pada semua skrin, manakala templat "getah", mengubah saiz, menyesuaikan diri dengan peranti. Jika reka bentuk adalah "getah", maka anda perlu memutuskan apa yang akan mengisi latar belakang tapak.

Walau bagaimanapun, kami mencipta reka letak sumber web ini dalam, yang merupakan sebahagian (saya sangat mengesyorkan), dan anda boleh menemui contoh yang kompleks di dalamnya.

Di sini, agar tidak terganggu oleh butiran dan penggunaan alat yang telah dipelajari, saya akan mempertimbangkan contoh bersyarat susun atur, gambar rajah templat, tetapi menggunakan algoritma yang diterangkan anda boleh dengan mudah bekerja dengan susun atur anda sendiri.

1. Buat dokumen untuk susun atur masa hadapan. Jangan lupa untuk saiz.
2. Hadkan reka letak menggunakan panduan yang diambil daripada pembaris.

Untuk mendayakan pembaris, sama ada tekan kombinasi kekunci Ctrl+R, atau laksanakan arahan View -> Rulers menu utama program.

Untuk menyeret keluar panduan mendatar, klik pada pembaris atas dengan butang tetikus dan, tanpa melepaskannya, gerakkan penunjuk ke bawah sehingga panduan berada dalam kedudukan yang diingini. Untuk memanjangkan garis menegak, lakukan perkara yang sama, cuma gerakkan penunjuk ke kanan pembaris di sebelah kiri.

Akibatnya, templat anda harus ditandakan.

1. Lukiskan susun atur. Tambahkan grafik, garisan, butang dan elemen lain. Segala-galanya di sini adalah individu, dan kami melihat alat untuk bekerja sepanjang masa.

1. Tambah sedikit warna jika anda belum melakukannya. Ingat keharmonian dan kelembutan nada. Pengetahuan tentang interaksi manusia-mesin dan sekolah seni hanya akan menjadi nilai tambah.

Cara memotong

Reka letak yang telah siap perlu dipotong "ke dalam kepingan" untuk menggunakan elemennya dalam reka bentuk tapak, sebahagian daripadanya akan dilaksanakan melalui HTML, sebahagian melalui CSS, dan sebahagian melalui gambar yang mana reka letak akan dipotong. Ingat ini apabila anda ingin meninggalkan beberapa gambar dengan latar belakang putih, teks halaman atau nama pautan - anda perlu meninggalkan hanya apa yang akan diambil daripada fail grafik dan tidak akan dilaksanakan dengan cara lain.

Jadi, susun atur sudah siap dan terbuka. Kami akan memotongnya.

1. Matikan lapisan dengan elemen susun atur yang tidak perlu - teks, butang, borang, dll. Untuk menyembunyikan lapisan, klik pada mata dalam barisnya.

1. Laraskan panduan yang diambil daripada pembaris kepada elemen struktur tapak. Pada dasarnya, susun atur boleh dipotong di sepanjang mereka, tetapi dalam kes ini ia mungkin tidak sesuai dengan keperluan, jadi kami akan menggunakan alat lain.
2. Pilih alat Bersarang. Ia terletak pada palet dalam kumpulan Frame.

1. Untuk memotong sekeping reka bentuk anda, gerakkan penunjuk anda ke tempat yang anda mahu mulakan dan bertindak seolah-olah anda sedang memilih kawasan segi empat tepat. Bahagian yang dipotong akan diberi nombor. Warna biru nombor bermakna serpihan itu aktif dan boleh diedit. Bahagian yang program mengharapkan anda potong diberi nombor pada latar belakang kelabu. Serpihan yang dipotong diserlahkan dan mempunyai penanda, berkat saiz dan kedudukannya boleh dilaraskan.

1. Buat potongan seterusnya dengan cara yang sama, dan seterusnya sehingga kerja selesai.
2. Apabila semuanya selesai, simpan hasilnya. Untuk melakukan ini, jalankan arahan Fail -> Eksport -> Simpan untuk Web (versi lama), semak tetapan (pilih format, kualiti, dll.), klik Simpan dan tentukan folder di mana katalog fail grafik akan dibuat .

1. Di dalam direktori yang dipilih, folder imej muncul dengan fail grafik, setiap satunya mengandungi sebahagian daripada reka letak.
2. Kini anda boleh menyimpan butang, ikon dan elemen lain yang tersembunyi sebelum ini.

Susun atur dibuat, dipotong dan siap sepenuhnya.