Margin Padding

Adobe Photoshopda Web-sayt dizayni elementlarini yaratish Web-tipografiyasini ishlab chiqish. Matn bloklarini joylashtirish.
Veb-sahifalarni loyihalashtirish va juda oddiy va funktsional usulda kodni kiritmasdan yoki tegmasdan ishlash uchun juda ko'p turli xil vositalar mavjud. Ular son-sanoqsiz, ilovalar tomonidan taklif qilingan (Adobe Dreamweaver misol) yoki to'g'ridan-to'g'ri Wix kabi onlayn platformalar orqali. Biroq, veb-dizayner uchun qo'llanma protseduralarini bilish juda muhimdir. HTML5 va CSS veb-saytlar va ochilish sahifalarini joylashtirish uchun asosiy ustunlardir.
Biroq, siz kutganingizdan ko'ra tez-tez Indesign yoki kabi dasturlarga murojaat qilishingiz kerak bo'ladi Adobe fotoshop sizning tartib ishingizni to'ldirish va ularga mukammal ishlov berish uchun. Bugun biz ushbu keng qo'llanmada Adobe Photoshop dasturidan foydalanib veb-sahifani qanday joylashtirishimiz mumkinligini ko'rib chiqamiz. Ushbu birinchi qismda biz Photoshop-da ishlab chiqiladigan ishda qolamiz, ammo kelgusi qismlarda biz ushbu ishni qanday qilib to'g'ridan-to'g'ri HTML kodida qo'llashimiz mumkinligini ko'rib chiqamiz.
Indeks

• 1 Simli ramkamizning dizaynidan boshlaymiz

  
  

• 2 Mobil telefonlar uchun o'lchovlar

  
  

• 3 Tabletkalarni o'lchash

  
  

• 4 Statsionar kompyuterlar uchun o'lchovlar

  
  

Simli ramkamizning dizaynidan boshlaymiz

Veb-sahifaning dizayni va dizaynidan boshlash uchun asosiy elementlarning nima bo'lishini aniqlashdan boshlashimiz juda muhim, bu skelet. Ushbu tuzilma barcha tarkibni (matnli yoki multimedia) saqlashga yordam beradi. Bizning sahifamizni tashkil etuvchi bo'limlarning har biriga aniqlik kiritib, ular ustida to'liq aniqlik bilan ishlashimiz va iloji boricha aniq tasviriy dizaynni taqdim etishimiz mumkin.

Agar u bo'lsa, bizning veb-saytimiz o'lchamlarini hisobga olishimiz juda muhimdir quti yoki to'liq kenglik. Qutidagi veb-sahifa kichik konteyner ichida bo'ladi va shu sababli uning atrofida bo'sh joy paydo bo'ladi. Aksincha, to'liq veb-sahifa sahifani qayta ishlab chiqaruvchi qurilmaning butun ekranini egallaydi. U yoki bu usulni tanlash shunchaki uslubiy savollarga javob beradi va biz ishlayotgan loyihaning ehtiyojlariga ham bog'liq bo'ladi. Ushbu misolda biz qutidagi rejim bilan ishlaymiz, shunda u brauzer tomonidan taqdim etilgan barcha joylarni egallamaydi.

Simli ramkamizni yaratish uchun birinchi navbatda Adobe Photoshop dasturiga kirish va sahifamizga kerakli o'lchamlarni kiritish kerak. Ushbu misolda bizning sahifamiz 1280 piksel kenglikda bo'ladi. Biroq, o'lchamdagi muammo oxirgi manzilga yoki sahifamizni ko'paytirmoqchi bo'lgan qurilmaga qarab farq qilishi mumkin. Hech shubha yo'qki, veb-dizayn funktsional va samarali bo'lishi uchun u bo'lishi kerak javob va u bozordagi barcha qurilmalarga moslashishi kerak. Ammo, bu holda biz statsionar kompyuterda ko'paytiradigan prototipni yaratish ustida ish olib boramiz. Shunday bo'lsa-da, biz javob beradigan masalani keyinroq ko'rib chiqamiz, hozircha ushbu misolda ishlash uchun ekran o'lchamlari iyerarxiyasi. Shuni yodda tutingki, bu holda biz Adobe Photoshop-da ochilish sahifasini joylashtiramiz va keyin HTML5 VA CSS3-ga o'tkazamiz. Ushbu kichik amaliyotning maqsadi fotoshopda yaratilgan dizaynni foydalanuvchi harakatiga javob beradigan, foydalanishga yaroqli va interaktiv veb-dizaynga aylantirishdir.