Kaip iš Photoshope sukurto dizaino susikurti verslo svetainę

Mes parodysime, kaip per kelias minutes suprojektuoti šį tinklalapį nauju būdu. Žengsime žingsnis po žingsnio į priekį ir tai ką pasieksite taps jūsų  paslaptimi. Galėsite greitai, per kelias minutes interneto svetainėje pristatyti istorijas, produktus ir paslaugas.

Tyrimai rodo, kad lieka 8 sekundės, kad sužavėti lankytojus svetainės dizainu. Mes tai pademonstruosime pasinaudodami pavyzdžiu. Klasikinis būdas, kurį matote kairėje, yra „Adobe Photoshop“ nupieštas svetainės dizaino maketas. Mes parodysime jums naują būdą!

Temos nustatymai

Sukuriama nauja svetainė. Pridėkite naują svetainę su nauju puslapiu. Mes pradedame nuo temos nustatymų. Temos parametrai naudojami tinkinant spalvas, šriftus ir tipografiją visai svetainei. Šie stiliai bus naudojami visiems tinklalapio teksto elementams. Tai labai patogu ir gražiai atrodo!

Spalvų pasirinkimas. Dizaino makete matome, kad dvi spalvos, be juodos ir baltos, naudojamos visame puslapyje. Mes pridėsime šias spalvas prie paletės. Pasirinkite temą -> Spalvos. Mes pakeisime dabartinę „Pallete“. Norėdami pasirinkti spalvą, naudokite spalvų parinkiklį. Nukopijuokite Spalvos reikšmę. Įklijuokite šią vertę į 1 spalvos lauką. Panašiai pridėkite antrąją spalvą. Naudokite spalvų parinkiklį. Nukopijuokite vertę. Įklijuokite šią vertę į „Color 2“ lauką.

Image

Šriftų pasirinkimas. Pereikite prie šriftų. Mes naudosime šriftų schemą ir tipografiją, numatytą pagal numatytuosius nustatymus, ir atliksime tikslinimą. Pasirinkite temą -> Antraštės ir tekstai. Pakeiskite antraštes, tekstą ir hipersaitą. Vėliau, pridedant šiuos elementus į skyrius, jūsų nustatyti stiliai bus pritaikyti automatiškai.

Modifikuojame nuorodas. Nuorodose yra oranžinis apatinis brūkšnys. Nustatykite šios linijos plotį ir spalvą. Linijai naudojama oranžinė spalva anksčiau buvo įtraukta į spalvas. Atminkite, kad šis nuorodos stilius bus naudojamas visoms nuorodoms šiame tinklalapyje.

Darbo sritys ir tekstas. Antraštės ir teksto stilių nustatymas padeda vienu mygtuko paspaudimu pritaikyti tinkamus stilius. Tai daro puslapį vientisą, nuoseklų ir gražų. Ir „Nicepage HTML“ svetainių kūrimo priemonė sutaupo daug laiko!

Image

Baigėme su temos nustatymais. Dabar mes einame į skyrius, pagrindinius šiuolaikinio interneto dizaino pagrindus.

Įvadinis skyrius

Vaizdo keitimas. Pirmasis skyrius buvo pridėtas pagal numatytuosius nustatymus su puslapiu. Mes jį naudosime įžangoje. Pradėkime. Padidinkite skyriaus aukštį. Dešiniajame skydelyje pakeiskite skyriaus „Spalvų užpildymas“ į „Vaizdo užpildymas“. Pakeiskite fono paveikslėlį, vilkdami kitą iš vietinio aplanko.

Konteinerių naudojimas. Tekstams naudosime konteinerį. Konteineriai padeda sugrupuoti, perkelti ir suderinti visus įdėtus elementus vienu metu. Be to, jei reikia, grupė gali turėti bendrą visų elementų pagrindą. Norėdami pridėti konteinerį, pasirinkite Pridėti -> Konteineris. Vėliau galite naudoti greitąjį klavišą „C“, kad pridėtumėte konteinerius daug greičiau.

Image

Tekstų pridėjimas. Perkelkite konteinerį į kairę. Padidinkite plotį. Pridėkite pavadinimą, pasirinkite Pridėti-> Tekstas -> Pavadinimas. Pridėkite eilutę, pasirinkite Pridėti -> Linija. Pavadinkite pavadinimą baltu. Pakeiskite pavadinimo tekstą. Atkreipkite dėmesį, kad antraštės stilius buvo anksčiau nustatytas Temoje -> Antraštės ir tekstai.

Image

Linijos modifikavimas. Kaip matote makete, linija turėtų būti oranžinė. Taip pat padarykite liniją storesnę ir trumpesnę. Kaip priminimas, oranžinė buvo nustatyta Temoje -> Spalvos. Sulygiuokite visą bloko dugną. Po antrašte matome funkcijų piktogramas su tekstais.

Tinklelių pridėjimas

Tinklelio keitimas. Lengviausias būdas pridėti panašių teksto blokų eilutę yra naudoti tinklelį. Pasirinkite Pridėti -> Tinklelis. Yra daugiau nei šimtas tinklelių išdėstymo variantų. Pasirinkite tinklelį su keturiais langeliais. Be to, tinkleliai yra labai naudingi reaguojančiuose režimuose, nes mažesniuose ekranuose ląstelės pertvarkomos automatiškai. Susitraukite iš tinklelio aukščio. Sulygiuokite kairę tinklelį.

Image

Rekomendacijos. Padarykite tinklelio lakštą visame plote. Padidinkite tarpus tarp ląstelių. Judant ir lygiuodami matote raudonas linijas. Tai yra vadovai, kurie padeda pritvirtinti valdiklius prie konteinerių, skyrių ir vienas kito.

Turinio redagavimas. Ištrinkite langelio turinį. Pasirinkite pirmąjį langelį ir paspauskite klavišą Trinti. Pridėti piktogramą. Norėdami atidaryti dialogo langą, paspauskite „I“ klavišą. Dialogo lange ieškos lauke įveskite „Telefonas“. Pasirinkite linijinio telefono piktogramą. Norėdami pridėti tekstą, paspauskite klavišą „T“. Ištrinkite paskutines dvi teksto eilutes, pridėtas pagal numatytuosius nustatymus. Dabar nukopijuosime langelį, kad visos ląstelės būtų nuoseklios. Jei norite nukopijuoti, vilkite langelį virš kito, laikydami CTRL klavišą.

Image

Darbas su piktogramomis (Icon). Antrame pardavime pakeiskite piktogramą. Ieškokite „Grafiko“ piktogramos. Trečiąjį langelį pakeiskite piktograma „Idėja“, pasirinkite lemputę. Ketvirtajam vartokite raktinį žodį „Signalizacija“ ir pasirinkite Tiesinis varpas. Pirmasis įvadinis skyrius yra paruoštas. Argi ne taip paprasta?

Image

Padalinta dalis

Pridedant tinklelį. Pridėkime antrą skyrių. Pridėkite tuščią skiltį. Padidinkite skyriaus aukštį. Matome, kad vizualiai šio skyriaus turinys yra padalintas į dvi dalis. Geriausias šiuo atveju taip pat yra naudoti tinklelį. Pasirinkite Pridėti -> Tinklelis. Pridėkite tinklelį su 2 langeliais.

Image

Pakeiskite tinklelio aukštį. Dešinę langelį padarykite didesnį. Pataisykite tinklelio išlyginimą. Vėlgi, labai naudingos raudonos linijos, snaiperiai. Pasirinkite tinkamą langelį. Sutraukti vaizdą. Pakeiskite paveikslėlio dydį. Linijos padeda prisitraukti prie centro.

Vaizdo modifikavimas. Pakeiskite vaizdą vilkdami kitą iš savo vietinio aplanko. Dešiniajame skydelyje įgalinkite „Shadow“. Pasirinkite „Shadow Preset“. Tinkinkite šešėlį. Pakeiskite suliejimą ir skaidrumą.

Image

Tekstų pridėjimas. Pasirinkite kairįjį langelį. Norėdami išvalyti langelį, paspauskite klavišą DELETE. Paspauskite „L“, kad pridėtumėte eilutę. Paspauskite „2“, kad pridėtumėte antraštę 2. Paspauskite „T“, kad pridėtumėte tekstą, ir paspauskite „H“, kad pridėtumėte hipersaitą. Padarykite liniją oranžine, storesne ir trumpesne. Pakeiskite antraštę. Pridėti daugiau teksto. Pakeiskite hipersaito tekstą. Sulygiuokite kairiojo langelio turinį paspausdami lygiavimo parinktis dešiniajame skydelyje. Šis skyriaus skyrius taip pat baigtas.

Skyrius su sutapimu

Langelio mofikacija. Pridėkite skyrių „Tuščias“. Pakeiskite fono spalvą į 1 spalvą, nustatytą temos nustatymuose. Padidinkite skyriaus aukštį. Pridėkite tinklelį su dviem langeliais, kaip ir ankstesniame skyriuje. Susitraukite iš tinklelio aukščio. Dešinę ląstelę padarykite didesnę.

Turinio pridėjimas. Pakeiskite vaizdą dešiniajame langelyje, vilkdami kitą vaizdą iš vietinio aplanko. Pasirinkite kairįjį langelį, tada paspauskite DELETE mygtuką. Paspauskite „L“, kad pridėtumėte eilutę. Paspauskite „2“, kad pridėtumėte antraštę 2. Paspauskite „T“, kad pridėtumėte tekstą. Paspauskite „H“, kad pridėtumėte hipersaitą. Padarykite „Hyperlink“ pabraukimą oranžine spalva.

Padaryti sutapimą. Virš antraštės esanti linija taip pat būtų oranžinė, storesnė ir trumpesnė. Pasukite liniją 90 laipsnių į viršų. Matote, kad eilutė dabar sutampa su ankstesniais skyriais. Dar niekada nebuvo taip lengva padaryti sutapimą!

Image

Tekstai šiek tiek keičiami. Pakeiskite antraštės tekstą. Pridėti daugiau teksto. Galiausiai pakeiskite hipersaito tekstą.

Skyrius su stulpeliais

Tinklelio pridėjimas. Pereikite į skyrių „Komanda“. Nepaisant to, kad yra daug iš anksto suprojektuotų komandos skyrių, mes darysime šį skyrių nuo nulio. Pridėkite skyrių „Tuščias“. Padidinkite skyriaus aukštį. Pridėkite tinklelį su trimis langeliais. Pakeiskite tinklelio aukštį. Perkelkite tinklelį aukštyn. Vadovus vėl patogu naudoti. Pridėkite tarpų tarp langelių.

Image

Vaizdo modifikavimas. Pasirinkite pirmąjį langelį ir sutraukite fono paveikslėlį. Vaizdas tapo ląstelės turinio dalimi. Pakeiskite dydį, kad vaizdas būtų rodomas langelio viršuje, kairėje ir dešinėje. Žemiau paveikslėlio palikite vietos vardui ir tekstui.

Turinio keitimas. Dešiniajame skydelyje įgalinkite šio langelio užpildymą. Pakeiskite spalvą į šviesiai pilką. Paspauskite „4“, jei norite pavadinimą pridėti 4 antraštėje, o „T“ - prie teksto. Pašalinkite papildomą tekstą. Įveskite vardą. Pavadinkite vardą ir tekstą žemyn. Perkeldami raudonus kreipiklius ir dydžius dėžutėse, galite suderinti.

Langelių kopijavimas. Šiek tiek padidinkite vaizdo aukštį. Pakeiskite vaizdą kitu iš vietinio aplanko. Kad langelis būtų nuoseklus, nukopijuokite pirmąją langelį į kitas dvi. Pakeiskite vaizdus. Pakeiskite pavadinimus. Dabar mes pridėsime šios skilties pavadinimą virš Tinklelio. Makete matome antraštę ir liniją.

Image

Konteinerių naudojimas. Norėdami sugrupuoti šiuos elementus, naudosime konteinerį. Pirmame skyriuje „Įvadas“ jau panaudojome elementą.

Image

Paspauskite „C“, kad pridėtumėte konteinerį. Pakeiskite konteinerio dydį. Paspauskite „L“, kad pridėtumėte eilutę. Paspauskite „2“, jei norite pridėti 2 antraštę prie skyriaus pavadinimo. Pakeiskite antraštę 2. Padarykite liniją oranžine, storesne ir trumpesne. Sulygiuokite turinį vertikaliai. Puslapis yra paruoštas. Ar nebuvo taip greita ?!

Prisitaikymo peržiūra

Vaizdai mobiliesiems. Spustelėkite Peržiūra viršutinės juostos dešinėje. Ir dabar, įvyko  magija! Spustelėję prisitaikymo režimo piktogramas pamatysite, kad puslapis atrodo puikiai, visuose ekranuose. Viskas buvo padaryta automatiškai!

Image
© 2020 Nicepage.lt

Paieška