Вэбсайтын загварыг хэрхэн яаж зурах вэ

Агуулгын хүснэгт:

Вэбсайтын загварыг хэрхэн яаж зурах вэ
Вэбсайтын загварыг хэрхэн яаж зурах вэ

Видео: Вэбсайтын загварыг хэрхэн яаж зурах вэ

Видео: Вэбсайтын загварыг хэрхэн яаж зурах вэ
Видео: Носки на двух спицах . Носки одним полотном. Мастер класс для новичков. 2024, Дөрөвдүгээр сар
Anonim

Вэб дээр маш олон тооны вэбсайтын загварууд байдаг боловч тэдгээр нь нэг сул талтай байдаг бөгөөд эдгээр нь өвөрмөц биш юм. Хэрэв сайтын эзэн сайтынхаа дизайныг өөр газар давтахыг хүсэхгүй байвал мэргэжлийн дизайнераас загвар захиалж эсвэл өөрөө хийхийг оролдож болно.

Вэбсайтын загварыг хэрхэн яаж зурах вэ
Вэбсайтын загварыг хэрхэн яаж зурах вэ

Энэ нь зайлшгүй шаардлагатай

Adobe Photoshop програм

Зааварчилгаа

1-р алхам

Өөрийн загварыг бий болгох нь эхлээд харахад хэцүү ажил биш юм. Ажиллахын тулд танд Adobe Photoshop хэрэгтэй - мэдээж түүнтэй ажиллах талаар дор хаяж анхан шатны ойлголттой байх хэрэгтэй. Гэхдээ програмыг эхлүүлж, бүтээж эхлэхээсээ өмнө ирээдүйн дизайныг урьдчилан бодож үзэх хэрэгтэй. Үүний хамгийн тохиромжтой арга бол эхлээд дор хаяж зуун бэлэн загвартай танилцаж, давуу болон сул талуудыг нь үнэлэх явдал юм. Зарим дизайны элементүүдийн амжилттай шийдэлд анхаарлаа хандуулаарай. Энэ нь та тэдгээрийг хуулбарлах болно гэсэн үг биш боловч зарим сайхан, тохь тухтай шийдлүүдийг үндэс болгон авах нь нэлээд үндэслэлтэй юм.

Алхам 2

Бусдын загвар, өөрийн бүтээлч байдлын дүн шинжилгээнд үндэслэн та өөрийн сайт хэрхэн харагдах талаар санаа олж авах хэрэгтэй. Ердийн А4 хуудсан дээр өнгөт харандаагаар ирээдүйн дизайны бүдүүвч зургийг хийх нь хамгийн сайн арга юм. Та яг юу зурах гэж байгаагаа сайн ойлгосны дараа л Photoshop-той ажиллаж эхлэх хэрэгтэй.

Алхам 3

Photoshop програмыг эхлүүлж, 1200x1600 хэмжээтэй шинэ төсөл үүсгэж, ил тод дэвсгэр тавь. Захирагч хэрэгслийг асаана уу, хэрэв асаагүй байгаа бол үүнийг хийхийн тулд товчлуурын хослолыг дарна уу Ctrl + R. Таслахыг идэвхжүүлэх: Харах - Хурц авах.

Алхам 4

Одоо бид загварыг түүний элементүүдийн хүрээ, тал, багана зэргийг харуулах гарын авлагаар хуваах хэрэгтэй. Жишээлбэл, та загварыг хуваахыг хүсч байгаа бөгөөд зүүн талд нь нарийн багана, баруун талд нь баруун талд нь өргөн багана байх ба дээд хэсэгт толгой байрлуулах зайтай байна. Энэ нь танд гурван босоо шугам (загварын зүүн хүрээ, баруун ба тэдгээрийн хоорондох шугам) ба толгойны доод хүрээг харуулсан хэвтээ шугам хэрэгтэй гэсэн үг юм. Босоо шугамыг тохируулахын тулд курсорыг зүүн талд нь зүүн удирдагч руу шилжүүлээд V товчийг дараад товчлуурыг дараад мөрийг хүссэн байрлал руу чирнэ үү. Бусад хоёр босоо шугамтай ижил зүйлийг хий. Хэвтээ нь ижил аргаар баригдсан бөгөөд зөвхөн дээд удирдагчийг ашигладаг.

Алхам 5

Загварынхаа дэвсгэр дэвсгэрийг олоорой, энэ нь жижиг давтагдашгүй загвар байх ёстой. Photoshop дээр нээгээд сонгоод хуулж ав. Дараа нь загварыг арын дэвсгэр дээр бөглөх шаардлагатай хэмжээгээр оруулна уу. Зуурмагийг дараах байдлаар хийдэг: "Засах" - "Наах", дараа нь арын хэсгийг хүссэн байршил руу чирнэ үү. Ctrl + V командыг ашиглан зураг оруулах нь бүр ч хурдан байдаг. Үүнтэй адил сайтын толгойн дэвсгэрийг нэмнэ үү. Арын дэвсгэр үүсгэхийн тулд та янз бүрийн градиент дүүргэгчийг ашиглаж болно.

Алхам 6

Харандаа хэрэгслийг ашиглан аль хэдийн зурсан шугамууд дээр (өөрөөр хэлбэл тэдгээрийн дээр) анхаарлаа төвлөрүүлж, загварын хүрээг зур. Та хамгийн энгийн загварын суурийг хүлээн авсан тул одоо шаардлагатай мэдээллүүд - навигацийн товчлуурууд, цэсийн мөрүүд, чимэглэлийн янз бүрийн элементүүд гэх мэтийг нэмж оруулах хэрэгтэй. Товчлуурууд болон бусад элементүүдийг хэрхэн үүсгэх талаар илүү их мэдээлэл авахыг хүсвэл Adobe Photoshop програмтай холбогдох нийтлэлүүдийг уншина уу.

Алхам 7

Загварыг бүтээсэн тул одоо үүнийг html хуудсанд оруулахын тулд хэсэг болгон хуваах хэрэгтэй. Зүсэх хэрэгслийг ашиглана уу. Үүнийг олохын тулд Frame хэрэгсэл дээр хулганы баруун товчийг дараад нээгдэх цэснээс Cutout командыг сонгоно уу. Одоо та хүссэн загвараа үүрлэж, хадгална уу: "Файл" - "Вэбд хадгалах". Нээгдсэн цонхонд файлын төрлийг сонгоно уу: HTML & дүрс, файлын нэрийг зааж өг: index.htm, хадгална уу. Танд index.htm файл болон хэрчсэн зураг бүхий зургийн хавтас байх болно.

Зөвлөмж болгож буй: