23Jul
" pieštukas yra įrankis, kurį galime panaudoti, kad suplanuotų mūsų taikomosios programos vartotojo sąsają.Puikus Pencilio dalykas yra tai, kad jis yra lengvas, lengvas naudoti ir glaudžiai integruotas su "Firefox".Be to, visa tai nemokama atviro kodo programa! Straipsnio pabaigoje mes pateiksime jums paprastą demonstraciją, kaip naudoti pieštuką, kad būtų sukurta "Brizzly" tipo karkasas.
Kodėl mes kurdami vielinius rėmus?
Karkasas yra puslapio išdėstymo idėjos eskizas. Karkasas orientuojasi į puslapio informacinį dizainą, siekiant užtikrinti, kad dizainas atitiktų vartotojo poreikius. Karkasas paprastai susideda iš skirtingų formų( tokių kaip dėžės, ovalai ir deimantai), atstovaujantiems turinio, funkcinių ir navigacinių elementų.Šios formos rodo jų vietą puslapyje.
Iš pradžių gali atrodyti, kad laiko švaistymas sukuria grubius puslapio brėžinius. Kabelių rėmelis yra svarbus norint, kad jūsų vartotojai sutelktų dėmesį į svarbų elementą jūsų puslapyje. Sukūrę neapdorotą puslapio eskizą be išgalvotų vaizdinių elementų, nukreipkite vartotojo dėmesį į svarbius elementus, pvz., Puslapio komponentų dydį, išdėstymą ir vietą.Mes pradėsime geriau suprasti, ką klientas tikrai nori ir reikia iš programinės įrangos, kai vartotojas pradeda sutelkti dėmesį į svarbius puslapio elementus. Kabelių rėmo kūrimas leidžia jums ir jūsų vartotojams veiksmingai bendradarbiauti ir anksti nustatyti galimą dizaino problemą.
Pradedant pieštuku
Atsisiųsti pieštuką iš Pencil's add-on puslapio.Įdiegę pieštuką, jis pasiekiamas iš "Įrankiai" & gt;"Pieštuko piešimas".
Tai atrodo kaip Brizzly. Tai gana kieta žiniatinklio programa, kuri sujungia "Facebook" ir "Twitter" per vieną puslapį.
Tai yra vielos rėmo galutinis rezultatas. Pagrindinės šios vielos formos figūros yra stačiakampiai, teksto laukeliai ir skirtukai. Kitame straipsnio skyriuje pateikiamas paprastas pavyzdys, kaip sukurti kiekvieną formą.
Stačiakampis
kūrimas Pirmasis vielos rėmo formos kūrimo žingsnis yra vilkti formą iš "Shape Collections" meniu į drobę.
Pakeiskite stačiakampio dydį iki tinkamo pločio ir aukščio.
Mes galime pritaikyti kiekvienos formos tekstą, sieną ir fono spalvą pieštuku. Dešiniuoju pelės mygtuku spustelėkite stačiakampį ir pasirinkite "Ypatybės", kad atidarytumėte langą "Ypatybės".Tai fono ypatybių ekranas. Nustatykite stačiakampio fono spalvą į baltą( #FFFFFF).
Spustelėkite skirtuką "Pasienis" ir koreguokite sienos savybes. Nustatykite rėmelio spalvą juodai( # 000000) ir pasikeiskite krašto svorį iki 1.
Teksto ypatybių ekranas leidžia mums pritaikyti teksto šriftą, dydį, stilių, svorį, spalvą, ryškumą ir neskaidrumą.
skirtukų kūrimas
Namų, piešinių, paveikslėlių skirtukai yra trys skirtukai, kurie yra sudedami vienas ant kito. Vilkite tris "Tabų skydelį" į stačiakampį.Keiskite kiekvieną skirtuką, kad kiekvienas skirtukas būtų vienas šalia kito.
Atidarykite teksto savybių ekraną, norėdami koreguoti skirtuko "Nuotraukos" ir "Juodraštis" šriftą.Nustatykite "Grey"( # 989898).
Teksto kūrimas
Norėdami sukurti kiekvieną meniu, vilkite "Text" formą ant drobės. Galime koreguoti teksto išvaizdą, atidarę teksto savybių langą.
Naudingi patarimai, kaip keisti spalvą
Spalva yra viena iš svarbiausių elementų, suteikiant malonų karkasą.Pats tiksliausias būdas pakeisti spalvos formą yra nurodant spalvos HTML kodą.Suprasti konkrečios spalvos HTML kodą gali būti sunku. Mes galime naudoti HTML spalvų cheat sheet iš w3cschools.com ieškoti tinkamo HTML kodo konkrečiai spalvai.
Mes taip pat norime naudoti colorzilla, norėdami pasirinkti spalvas iš ekrano ir naudoti ją pieštuku."Firefox" apatiniame kairiajame kampe spustelėkite akių lašintuvo piktogramą, kad pasirinktumėte spalvą ekrane. Mes taip pat galime atidaryti "ColorZilla" spalvų rinkiklį, dukart spustelėdami akių lašų piktogramą.Tiesiog nukopijuokite Hex kodą į pieštuko spalvos HTML kodą.
Išvada
Pieštuku yra lengva naudoti vielos ruošimo įrankį.Pieštuko integracija su "Firefox" leidžia mums naudoti kitą "Firefox" įskiepį, kad padėtų sukurti geresnę korpusą.
Nuorodos
Parsisiųsti Pieštukas
Atsisiųskite "Colorzilla
W3C HTML Spalvų kodą"
