23Jul

Upotrijebite Firefox da biste stvorili jednostavne modele

click fraud protection

Olovka je alat za izradu žica koji možemo upotrijebiti da skiciramo podsmijeh korisničkog sučelja naše aplikacije. Velika je stvar o olovku da je lagana, lagana za upotrebu i čvrsto integrirana s Firefoxom. Na vrhu je sve to besplatan program otvorenog koda! Na kraju članka ćemo vam dati jednostavnu demonstraciju o tome kako koristiti olovku kako biste stvorili Brizzly poput žice.

Zašto radimo žičane okvire?

Žičani okvir je skica idejnog rješenja za stranicu. Okvir žica se usredotočuje na oblikovanje informacija stranice kako bi se osiguralo da se dizajn uklapa u ono što korisnik treba.Žičani okvir obično se sastoji od različitih oblika( kao što su kutije, ovalni i dijamanti) koji predstavljaju sadržajne, funkcionalne i navigacijske elemente. Ove oblike prikazuju njihov položaj na stranici.

Na početku se može činiti kao gubitak vremena stvarajući grube skice stranice. Okvir žice je važno kako bi se korisnici usredotočili na element važnosti na vašoj stranici. Stvaranje grube skice stranice bez ikakvih vizualnih elemenata mijenja pozornost korisnika na važne elemente kao što su veličina, izgled i položaj komponenti vaše stranice. Počet ćemo bolje razumijevanje onoga što klijent zaista želi i treba iz softvera kada se korisnik usredotočuje na važne elemente stranice. Stvaranje okvira žice omogućuje vam da vaši korisnici i vaši korisnici učinkovito surađuju i identificiraju potencijalni problem dizajna rano.

instagram viewer

Početak korištenja olovke

Preuzmite Olovka iz olovke na stranici. Nakon što instalirate Olovku, dostupan je iz alata "Alati" & gt;'Olovka Skiciranje'.

Ovo je ono što izgleda Brizzly. To je prilično zgodna web aplikacija koja agregira vašu Facebook i Twitter u jednu stranicu.

Ovo je krajnji rezultat okvira žice. Glavni oblici u ovom žičanom okviru su pravokutnici, tekstualni okviri i kartice. Sljedeći dio članka daje jednostavan primjer kako stvoriti svaki oblik.

Izrada pravokutnika

Prvi korak izrade žičanog oblika okvira je povlačenje oblika iz izbornika 'Zbirke oblika' na platno.

Promijenite veličinu pravokutnika na odgovarajuću širinu i visinu.

Možemo prilagoditi tekst, granicu i pozadinsku boju bilo kojeg oblika u olovku. Desni klik na pravokutnik i odaberite "Svojstva" kako biste otvorili prozore Svojstva. Ovo je zaslon svojstava pozadine. Postavite boju pozadine pravokutnika u bijelo( #FFFFFF).

Kliknite karticu "Granica" i podesite svojstva granica. Postavite boju obruba na crnu boju( # 000000) i promijenite težinu rubova na 1.

Zaslon svojstava teksta prilagodite vrstu fonta, veličinu, stil, težinu, boju, svjetlinu i neprozirnost teksta.

Izrada kartica

Kućište, nacrt, kartice sa slikom su tri kartice koje su složene jedna na drugu. Povucite tri 'Kartice ploče' u pravokutnik. Promijenite veličinu svake kartice tako da se svaka kartica prikazuje jedan do drugog.

Otvorite zaslon svojstava teksta kako biste prilagodili boju fonta na kartici "Slike" i "Nacrt".Postavite je na Gray( # 989898).

Izrada teksta

Povucite oblik "Tekst" na platnu kako biste izradili svaki od izbornika. Možemo prilagoditi izgled teksta pristupanjem prozoru svojstava teksta.

Korisni savjeti za promjenu boje

Boja je jedan od najvažnijih dijelova u pružanju ugodnog žičanom okviru. Najprecizniji način mijenjanja boje oblika je određivanjem HTML koda boje. Izračunavanje HTML koda za određenu boju može biti teško. Možemo koristiti HTML varalicu za boju iz w3cschools.com da bismo potražili pravi HTML kod za određenu boju.

Također, želimo koristiti colorzilla kako bismo odabrali boje s ekrana i upotrijebili je u Olovku. Kliknite ikonu kapaljke za oči u donjem lijevom kutu Krijesnice da biste odabrali boju na zaslonu. Također možemo otvoriti ColorZilla berač boja dvostrukim klikom na ikonu kapi za oči. Samo kopirajte Hex kôd u kôd boje HTML-a u boji.

Zaključak

Olovka je jednostavan za korištenje alata za vođenje žice. Integracija olovke s Firefoxom omogućava nam da koristimo drugi dodatak za Firefox kako bismo stvorili bolji žičani okvir

Linkovi
Preuzmite olovku
Preuzmite Colorzilla
W3C HTML Colour Cheat Sheet