23Jul
Pencil ir stiepļu veidošanas rīks, ko mēs varam izmantot, lai ieskicētu mūsu lietojumprogrammas lietotāja saskarni. Lieliska lieta par zīmuli ir tā, ka tā ir viegla, viegli lietojama un cieši integrēta ar Firefox. Papildus tam visu savu bezmaksas atvērtā pirmkoda lietojumprogrammu! Raksta beigās mēs jums parādīsim vienkāršu demonstrāciju par to, kā lietot zīmuli, lai izveidotu Brizzly kā karkasu.
Kāpēc mēs izveidojam karkasu rāmjus?
Karkass ir lapas izkārtojuma idejas skice. Karkass koncentrējas uz lapas dizaina dizainu, lai nodrošinātu, ka dizains atbilst lietotāja vajadzībām. Karkass parasti sastāv no dažādām formām( piemēram, kastītēm, ovāliem un dimantiem), lai attēlotu satura, funkcionālos un navigācijas elementus.Šīs formas parāda izvietojumu lapā.
Sākumā tas var šķist laika izšķiešana, radot aptuvenas lapas skices. Vadu rāmis ir svarīgs, lai jūsu lietotāji varētu koncentrēties uz svarīguma elementu savā lapā.Izstrādājot aptuvenu lapas skici, bez izdomātiem vizuālajiem elementiem, novirziet lietotāja uzmanību uz svarīgiem elementiem, piemēram, lapas sastāvdaļu lielumu, izkārtojumu un izvietojumu. Mēs sāksim iegūt labāku izpratni par to, ko klients patiešām vēlas un nepieciešams no programmatūras, kad lietotājs sāk koncentrēties uz svarīgiem lapas elementiem. Vadu rāmja izveide ļaus jums un jūsu lietotājiem efektīvi sadarboties un agri identificēt iespējamo dizaina problēmu.
Darba sākšana ar zīmuli
Lejupielādējiet Zīmu no zīmuļa pievienojamo lapu. Kad esat uzstādījis Pencil, tas ir pieejams no "Tools" & gt;"Zīmu zīmēšana".
Tas ir tas, ko izskatās Brizzly. Tas ir diezgan atdzist tīmekļa lietojumprogramma, kas apkopo jūsu Facebook un Twitter vienā lapā.
Šis ir vadu rāmja gala rezultāts. Galvenās formas šajā karkass ir taisnstūri, teksta kastes un cilnēm. Nākamā raksta sadaļa sniegs vienkāršu piemēru, kā izveidot katru formu.
Taisnstūra izveide
Pirmais stieple rāmja formas izveides solis ir vilkt formu no izvēlnes "Formas kolekcijas" uz audekls.
Izmainiet taisnstūra izmēru uz piemērotu platumu un augstumu.
Mēs varam pielāgot Zīmējuma tekstu, robežu un fona krāsu jebkurai formai. Ar peles labo pogu noklikšķiniet uz taisnstūra un izvēlieties 'Properties', lai atvērtu Properties logus.Šis ir fona rekvizītu ekrāns. Iestatiet taisnstūra fona krāsu uz baltu( #FFFFFF).
Noklikšķiniet uz cilnes "Robeža" un pielāgojiet robežas īpašības. Iestatiet robežas krāsu melnai( # 000000) un mainiet robežas svaru uz 1.
Teksta rekvizītu ekrāns ļauj mums pielāgot teksta fonta veidu, izmēru, stilu, svaru, krāsu, spilgtumu un necaurredzamību.
Cilšu izveide
Mājas, rasējumu, attēlu cilnēm ir trīs cilnes, kas tiek sakārtotas viena virs otra. Velciet trīs "Tabļu paneli" taisnstūrī.Mainiet katras cilnes izmēru, lai katra cilne būtu redzama blakus.
Atveriet teksta rekvizītu ekrānu, lai pielāgotu fontu krāsu cilnē "Attēli" un "Melnraksts".Iestatiet to uz pelēku( # 989898).
Teksta izveide
Lai izveidotu katru izvēlni, velciet formā tekstu uz audekla. Mēs varam pielāgot teksta izskatu, piekļūstot teksta rekvizītu logam.
Noderīgi padomi Krāsu
krāsu maiņai ir viena no būtiskākajām sastāvdaļām, nodrošinot patīkamu ietvaru. Visprecīzākais veids, kā mainīt formas krāsu, ir norādīt krāsas HTML kodu. Konkrētas krāsas HTML koda noteikšana var būt sarežģīta. Mēs varam izmantot HTML krāsu apkrāptu lapu no w3cschools.com, lai meklētu pareizo HTML kodu konkrētai krāsai.
Mēs arī vēlētos izmantot colorzilla, lai izvēlētos krāsas no ekrāna un izmantotu zīmuli. Noklikšķiniet uz acu pilinātāja ikonas Firefox apakšējā kreisajā stūrī, lai ekrānā atlasītu krāsu. Mēs varam arī atvērt ColorZilla krāsu atlasītāju, divreiz noklikšķinot uz acu pilienu ikonas. Vienkārši nokopējiet Hex kodu zīmnē Zīmuļa krāsu HTML kodā.
Secinājums
zīmulis ir viegli izmantot stieplementu rīku. Zīmuļu integrācija ar Firefox ļauj mums izmantot citu Firefox spraudni, lai palīdzētu izveidot labāku ietvaru
Saites
Lejupielādēt Zīmu
Lejupielādēt Colorzilla
W3C HTML krāsu apkrāptu lapas