Share
Jeg er en stor fan av fotocentriske nettsteddesigner? så i dag er jeg glade for å lansere en ny "komplett nettsted" opplæring som er rettet mot fotografer, illustratører og andre visuelle reklamer. I dag 1 skal jeg utforme malen i Photoshop med noen spesielle triks og teknikker. I dag 2 vil vi gå gjennom forberedelsen før kollisjonen for kodingsfasen, som vi vil gå over i detalj i dag 3. I dag 4 viser vi hvordan du lager tre helt forskjellige nettsteder med samme rå HTML. Klar til å komme i gang? La oss gjøre dette!
Som med ethvert webdesign prosjekt, er det viktig å identifisere målene for et prosjekt? så før vi dykker inn, la oss si noen ord om hva våre endelige mål er:
Det siste jeg skal nevne er kanskje det viktigste: det må være 100% tilpasses bruker minst mulig arbeid! Hva betyr dette for oss? Jeg vil at alle skal være i stand til å merke og omhulle hele oppsettet uten å måtte røre rotet ved å skrive om noen av kjernen HTML. Det betyr ideelt at ved å bytte ut noen bilder (logoen og et tilpasset bakgrunnsbilde) og noen CSS, kan et helt annet utfall opprettes? Det er derfor på den siste dagen i denne serien, vi skal tilegne og hele økten for å skape tilpasninger!
OK, med våre mål nå klart definert, la oss begynne!
Videoopplæringen er ment å være en følgesvenn til den skriftlige tuten under. Tenk på det som "supplerende" materiale - jeg vil ikke dekke alt som er i den skriftlige delen, men noen ganger er det bare hyggelig å se noen andre jobbe i Photoshop for å hente andre triks, effektivitetstips og andre teknikker som du kanskje ikke ellers ville være kjent med.
Den fulde skriftlige trinnvise veiledningen er under. Vi starter med et tomt Photoshop-dokument, men du kan også laste ned demo PSD for å sjekke arbeidet ditt mot min.
Begynn med å opprette et nytt dokument på størrelse 1280 x 800px. Hvorfor? Fordi dette vil gi oss et fint stort lerret å leke med. Bredden på vår endelige design vil faktisk ikke være 1280px, men vi vil se litt bakgrunnsfarge akkurat som vi normalt ser i et stort nettleservindu.
Det første praktiske dilemmaet med et hvilket som helst webprosjekt er å bestemme størrelsen på dokumentet du skal jobbe med. I vårt tilfelle vil jeg at designet skal sitte foran og midt på skjermen, fylle opp så mye plass som mulig på en mindre skjerm - og ikke se for liten på en stor skjerm.
Breddehensyn: Jeg velger å bruke 994px som den totale bredden. Dette nummeret er noe vilkårlig - det kunne ha vært noen få px bredere eller noen få px mindre, men til slutt vil det gjøre jobben. Hvorfor? Fordi den passer inn i 1003px "sikker sone" for de mest populære nettleserne som brukes akkurat nå, med litt polstring på hver side for å være trygg.
Høydehensyn: Jeg skal jobbe med høyden på 644px inne i Photoshop Høyden er et annet vilkårlig tall for dette designet. Hvorfor? Fordi 1) det kommer til å være justerbart fra CSS, 2) vi skal la denne "flex" passe til innholdet som vi kaster inn og 3) jeg er mindre opptatt av foldhøyden enn jeg kan være for en større skala prosjekt.
Den viktigste tingen å merke seg her er at alt dette skal være 100% justerbart fra CSS når vi er ferdige. Så, hvis du tilfeldigvis foretrekker et bredere layout med en mer grunn høyde, vil du kunne få akkurat dette innen få sekunder når du bestemmer dine preferanser. Tanken her er å holde ting væske selv om vi bruker en fast størrelse mal? så vær ikke for hengt opp på de nøyaktige tallene akkurat nå.
påminnelse: Denne "holde den væske" tilnærming er faktisk unik for denne spesielle malen? Jeg starter vanligvis et prosjekt med mye mer raffinert analyse for å finne den perfekte størrelsen, som vi skal gå over i andre tut-serier.
Selv om det er mange fordeler ved å bruke et forhåndsbygd gridsystem (som 960gs eller 978gs), har jeg en ganske klar visjon om hva jeg vil bygge, og ikke finne et rutenettsystem som umiddelbart imøtekommer designet mitt, jeg har valgt å freestyle denne utformingen.
Hva er konsekvensene av freestyling en layout? For en må vi være mye mer forsiktig med dimensjonene til hver innholdsmodul som vi oppretter fordi vi ikke har guider som forteller oss hvor ting skal gå. For å skape en virkelig jevn utseende mal, må vi bare være så mye mer flittige om å skape vårt eget gridsystem som er innfødt i denne mal.
Tegn det avrundede rektangel: Nå som vi har bestemt oss for 994px ved 644px Som vår containerstørrelse, fortsett og tegne et avrundet rektangel av den størrelsen (ved hjelp av en 12px radius). Åpne Info-panelet (Vindu> Info eller F8) for å vise størrelsen på rektangelet mens du tegner det.
Legg merke til at fargene på rektangelet ikke har betydning på dette punktet. Mens vi til slutt vil gjøre den hvit, vil vi nå se det skille seg ut fra bakgrunnen.
Lag skyggeeffekten: Jeg skal bruke den samme metoden som vi brukte i "Opprett din egen saftig tabbedskyder" -veiledning fordi det er den enkleste måten å få en skygge på som vil være lett å skille og bli til en gjennomsiktig PNG når det er på tide for koding.
For å lage denne skyggen, ta bare med penselverktøyet og sett det til 60px i størrelse og 0% hardhet.
Deretter, opprett et nytt, tomt lag å trekke på, hold nede Skifte nøkkelen til å tegne en rett linje, og bare dra markøren over halvparten av beholderrektangel.
Til slutt bruker vi Gratis Transform verktøyet (Cntrl + T) for å vinkle det veldig litt for å skape en bøyende effekt (jeg brukte om 2.5 for vinkelen). Hvorfor vinkle dette i det hele tatt? Fordi det vil bidra til å skape litt ekstra dimensjon hvis lyskilden ser ut til å bøye seg ut litt.
La oss nå duplisere det børste laget (Cntrl + J mens den er valgt på laget) og vri den horisontalt (Rediger> Transform> Vend horisontal). Skyv det nye vendte børstelaget over til det omtrent samsvarer med den andre siden av beholderrektangelet. Resultatet skal være en skygge som er motsatt av den første.
Flytt begge skyggelagene bak? Rammen? lag og skala dem (velg begge lagene og trykk Ctrl + T) slik at de passer like innenfor rammen rektangelens totale bredde.
Til slutt slå sammen begge skyggelagene sammen (Ctrl + E) og skygg skyggelaget til riktig sted (bruk det grunnleggende utvalgsverktøyet [V] og bruk tastaturet til å knuse). Du kan også justere skyggelagets opasitet slik at det passer dine egne personlige preferanser. Jeg brukte om 60%, du kan gjøre mer eller mindre i henhold til hva du er ute etter.
Bonustrinn: For å legge til enda mer dybde, bruk Perspektiv Transform på skyggen for å få det til å gå tilbake i rommet. Bare bruk en liten Gaussian Blur på laget når du har forvandlet det til å fjerne noen pikselartefakter.
Her er et ekstra bonusstrinn hvis du leter etter enda mer drama: Prøv å lage et duplikat skyggelag som er 70% mindre (bruk Free Transform og prosentvis skalering for å justere dette), sløret ut mer, og med en annen opasitet (70 %) for å lage en "core shadow" på innsiden av den primære.
Gå videre og navn skyggelagene dine (når du er ferdig med å spille med dem) og legg dem inn i en ny lag mappe kalt skygger. Organisasjonen vil gjøre tilpasningen enklere når vi er klare til å skille denne opp!
Opprette bakgrunnen:
Bakgrunnen vi skal skape er et subtilt lyseblå "støymønster". Jeg vil gå over dette raskt, men for å finne ut mer om å lage disse mønstrene, sjekk ut vår fullstendige opplæring på dem her.
Begynn med å opprette en nytt tomt lag og fyller den inn med hvit (Shift + F5).
La oss legge til litt støy ved hjelp av Filter> Støy> Legg til støy. Du kan justere dette til dine egne preferanser, men jeg har brukt 14% for beløpet.
Sett det nye "støylaget" til Multiple under blandingsmoduspanelet, og trekk et rektangel (fyll farge # e1ebef) bak dette laget.
Sist, la oss legge til et nytt justeringslag (Lag> Nytt justeringslag> Hue / Metning) over disse andre to lagene, slik at støyen vår ikke er kjedelig gammel grå.
Under justeringspanelet i justeringslaget (Vindu> Justeringer), Brukte jeg innstillingene til (Fargetone: 200, lør: 100, og lyshet: +60) med boksen Fargelegging merket. Du kan spille rundt til du får din egen ønskede effekt.
Gå videre og plasser disse tre nye lagene (adj. Laget, støynivået og bakgrunnsfargelaget) til en ny lag mappe kalt "Bakgrunnsfarger".
Til slutt, la oss gå videre og gjøre vår beholderboks farge Hvit nå som vi har lagt til litt bakgrunnsfarge. Jeg har også lagt til et lys 1px slag rundt vår containerkasse (# d8d8d8 i farger) for å skille seg ut fra bakgrunnen.
På dette tidspunktet bør dokumentet ditt se ut slik:
Lagene dine bør også organiseres slik:
Nå som vi har vår grunnleggende innholdsbeholder opprettet og utformet, er det på tide å begynne å fylle den inn med innhold. Vi starter med navigeringsnavigasjonen, fordi det skal definere hvor mye plass vi har til innhold senere.
Hvor bred bør det være? Bredden på sidefeltet er virkelig opp til deg? Jeg har valgt å bruke 235px som bredden, fordi den kan mer eller mindre passe til de tingene jeg vil ha der inne (rikelig med plass til lange sidetitler, den sosiale medie-widgeten og en søkefelt). Du kan justere dette for å passe dine egne behov skjønt? og som jeg har sagt hele tiden, vil dette alle bli justerbar fra CSS senere.
For å starte, tegne en 1px linje med samme farge som vi brukte til våre containers grense (# d8d8d8) langs beholderens vertikale akse. Legg den rundt 285 px fra venstre side av kanten.
Deretter kan det være nyttig å tegne en veiledning på dette punktet - ca 20px unna kanten av beholderens grense. Vi bruker dette som en veiledning for hvor du skal plassere alt vårt innhold slik at tingene ser jevnt ut og godt justert.
Jeg vil ikke gå inn i for mye dybde her, for vel, du skal nok bruke din egen logo;). Kort sagt, jeg har startet med et enkelt rammeikon (fra det edle settet med ikoner), og lagt til mitt eget bilde i rammen. Så brukte jeg skriften Museo på 26pt; Ved å bruke 2 forskjellige vekter og farger for å skape noe visuelt utvalg, setter jeg tittelen på vår mal, "ShutterPress" pent ved siden av ikonet.
Igjen, vil du sannsynligvis bruke din egen logo (eller en klient) på dette stadiet? så jeg skal hoppe over lagstiler og andre tweaks. Du er velkommen til å sjekke dem ut i demo PSD skjønt!
Bare plasser logoen inne i sidefeltet. Legg merke til at vi bruker omtrent samme mengde topppolstring og høyre polstring som vi brukte til polstring på venstre side.
Små triks som å holde plassen rundt et objekt så viktig som logo uniform er en av de tingene som vil gjøre forskjellen mellom god design og en flott design.
Trekkspillnavigasjonen er det første funksjonelle elementet som vi vil hakke på. Som sådan er det verdt å merke seg at vi kommer inn i noe gråområde her. Vi vil gjemme dette opp som om det ble brukt? hovedsakelig slik at hvis vi viser dette til noen (som en utvikler), vil de forstå hvordan det skal se ut i alle mulige interaktive stater.
Som sådan vil vi vise en aktiv lenke, så vel som minst en åpen trekkspill og en lukket trekkspill.
Jeg bruker en enkel skrifttype for dette - Lucida Sans på 12 pkt med det ledende settet til 36 pkt med den svarte fargen på # 252525. Jeg tilfeldigvis foretrekker å bruke Skarp anti-aliasinnstilling for webfonter i Photoshop mockups, men du kan bruke det du vil.
Jeg bruker også en liten variant for den aktive linken: Modig med fargen satt til # 0285da, som skjer for å etterligne logoen, samt bakgrunnsfargen.
Bruk noen få enkle tastatur mellomrom for å sette inn linkene som til slutt blir våre trekkspill.
Vær oppmerksom på at vi bruker den samme vertikale retningslinjen for å henge teksten slik at den passer fint med logoen.
36pts av ledende er mye å sette en enkel horisontal linje mellom hver lenke, så la oss gå videre og gjøre det på dette punktet. Bruk fargen #EAEAEA for disse horisontale linjene, noe som er litt lettere enn vår primære kantfarge. Hvorfor? Det vil bidra til å fastslå at disse reglene er litt mindre faste enn de andre.
La oss nå legge til trekkspillknappene. Begynn med å lage en 2px radius avrundet rektangel størrelse på 11px ved 11px. Legg til følgende lagstiler:
En lys grå gradient (# E6E6E6 til hvit) fra bunn til topp, henholdsvis.
EN 1px utenpåslag av #bfbfbf.
Dupliser det knappelaget, og legg til en enkel tekst "+" og "-" for å fullføre knappene. Plasser dem som vist:
Fra nå av bruker vi de samme grunnleggende stylingsregler for alle nye elementer. Border bør samsvare med samme grå som vi har brukt før. Padding bør også være omtrent det samme som vi har brukt til tidligere elementer. Skriftstiler og farger vil gjøre det samme. Som sådan vil jeg ikke bore deg med å skrive om disse notatene, bare hold dem i tankene!
For Social Media Widget, gå videre og ta tak i ikonsettet du velger (eller sjekk ut vår store raundup av ikoner angir her). Vi skal bruke 16px med 16px versjoner av hvilket ikon som du velger. Demoen bruker dette settet, men du kan bruke det du vil.
Jeg har også valgt å desaturere de sosiale ikonene (Bilde> Justeringer> Desaturate) slik at de ikke distraherer fra kjerneinnholdsområdet. Legg til ikonene eller ditt valg (fordelt ut av noen få px), og legg til i "Sosial:" -teksten slik at de har en tittel.
Legg til i våre horisontale linje grenser for separasjon og la litt ledig plass under vår søkelinje.
Søke-widgeten er super enkel å lage. Bare tegne a 25px høyt avrundet rektangel (8px radius) med en 1px slag av # e0e0e0 og slipp i et forstørrelsesglassikon. Jeg brukte den fra Fugue-settet med ikoner (det er gratis), men du kan bruke din egen til å legge til noen stil eller bluss.
Whallah! Vårt sidebar er nå gjort. Du kan legge til dine egne egendefinerte widgets eller la det være som det. Det er på tide å fylle vårt innholdsområde med noe, godt innhold!
Jeg skal gjøre ting litt bakover i disse neste to trinnene. Normalt vil du starte et webdesign med hjemmesidenes design? siden som folk først kommer til. Dette skjer imidlertid for å være et sjeldent tilfelle hvor undersiden (dvs. galleri mal) er uten tvil viktigere enn den faktiske destinasjonssiden.
Så, for å vite at jeg alltid kan lage et slank hjemmesidedesign, skal jeg starte innholdsdesignen vår med Galleri Mal, fordi den gir flere problemer for oss. Chief blant disse problemene er:
Det morsomme er at når vi har løst disse problemene, kan vi faktisk lage hjemmesiden ganske raskt. Ved å starte her, tillater vi oss selv å kunne lage et killer miniatyrbilde uten å forsøke å møte eventuelle begrensninger som vi ved et uhell kan sette på oss ved å starte med hjemmesiden.
Ok, la oss komme i gang!
Jeg skal begynne med å etablere en grunnleggende utfylling som jeg alltid vil forbli rundt innholdsområdet. I vårt tilfelle har jeg valgt 32px for å være beløpet. Det er litt mindre enn navigasjonslinjens høyde, men ikke så liten at ting blir tette eller begrensede.
Det forlater meg med et aktivt område av grovt 696px ved 586px (igjen høyden er fleksibel, så vi er ikke veldig bekymret for det).
Med vårt aktive innholdsområde definert, vil vi nå velge den ideelle miniatyrstørrelsen og polstring. Å regne ut dette er ikke rakettvitenskap? Jeg spilte egentlig bare med flere ordninger av crudely trukket rektangler til jeg fant noe som så harmonisk.
Nå vet jeg at ordet harmonisk ikke er veldig spesifikt? så hva mener jeg? Å vite at jeg vil passe rundt 15-20 bilder per side, prøvde jeg våre forskjellige miniatyrstørrelser / plasskombinasjoner til jeg fant en som gjenspeilet en god balanse mellom positiv og negativ plass, samt en raffinert følelse av hierarki. Ting som Golden Ratio spiller inn i dette, men jeg vil være ærlig og bare innrømme at jeg eyeballed det i dette spesielle tilfellet. Det er ingen magi som foregår her? bare masse å eksperimentere.
Så, hva er den endelige formelen? EN 155px bred ved 125px høy miniatyrbilde, satt inn i 4 kolonner (og i vårt tilfelle 4 rader også, som fyller opp vår høyde).
Padding: Det er omtrent 21 px horisontal separasjon mellom hver miniatyr og ca. 18 px vertikal separasjon. Hvorfor forskjellen?
Fordi vi arbeider med et landskapsoppsett (som betyr at det er bredere enn det er smalt), føles det bare riktig å opprettholde det samme formforholdet over hele vårt design.
Legg merke til hvordan den endelige miniatyrstørrelsen jeg plukket, også gjenspeiler dette landskapsforholdet. Så det er fornuftig at vi legger litt mindre polstring mellom rader enn vi legger mellom kolonner.
Her er det endelige utfallet:
Legg merke til at jeg har forlatt omtrent 50 px plass nederst for å sette inn en slags paginering (måten brukerne skal navigere fra en side med miniatyrbilder til neste). Naturligvis, hvis det ikke er nok miniatyrbilder for å utløse paginasjonen, beskjærer vi layoutet nærmere i bunnen.
Den visuelle styling av miniatyrbildene er også viktig. Fordi vi tar så stor omsorg for å lage masse små pusse detaljer på tvers av hele vårt design, ser ren gamle miniatyrbilder med harde kanter føles rå.
Vi legger til litt subtile styling for å lette opp dette og gi galleriet vårt en følelse av raffinement. Bruk følgende lagstil til hver av miniatyrbildene dine:
En 2px Inner Stroke (i CSS-vilkår, blir dette padding) #EAEAEA
En 1px Drop Shadow (i CSS-vilkår vil dette bli grense) # F2F2F2
Jeg vil zoome inn på 100% her for å vise deg den endelige stilen:
Nå som vi har etablert vårt rutenett, la oss legge til noen virkelige bilder for å gi dette oppsettet noe liv:
Vi er nesten ferdige med denne siden? nå er alt vi trenger, en måte for brukerne å navigere fra en side med miniatyrer til neste. Dette kalles paginering. Det er mange måter å gjøre dette på (noe mer komplekst enn andre). I vårt tilfelle ønsker vi en enkel metode for paginering? så jeg velger å bruke en enkel venstre-pil | høyre pil-tilnærming - dvs.: (). Dette er en av de mer intuitive metoder for paginering, så det gir mening for vår situasjon.
La oss gå videre og opprette to 18px diameter sirkler:
Legg merke til at jeg bare har kopiert / limt inn lag stil fra trekkspillknappene som vi brukte før. Hvorfor? Fordi dupliserende visuelle stiler bidrar til å sikre at vårt layout føles ensartet? og det er virkelig ingen grunn til å kaste bort arbeidet med å prøve å designe en helt ny stil. Konsekvent lagstilbruk vil faktisk bidra til brukervennligheten til nettstedet vårt.
Når du har tegnet kretsene dine, legger du til pilene (dette er allerede vist ovenfor). I mitt tilfelle brukte jeg en tilpasset> form i Photoshop, men du kan like enkelt bruke et tilpasset tekst ">" -symbol. Siden dette ikke er en nybegynner, vil jeg anta at du kan finne ut hvordan du får denne formen der inne på en eller annen måte;)
FIN! Det fullfører faktisk denne innholdssiden. Ved å bruke de samme grunnleggende stiler og polstring regler som vi har etablert, kan vi også enkelt omdanne dette til andre gridoppsett (for eksempel et 2x2-nett eller et 3x3-nett).
OK - Til sluttstadiet i design sesjonen! Vi kan sannsynligvis finne ut hvordan du oppretter forskjellige andre støttesider, men det vi virkelig trenger nå, er startsiden. Å være at dette er en fotografmålrettet mal, bør et fotografi selvsagt ta midtpunktet. Vi trenger også noen beskrivende tekst skjønt (for en fotograf å forklare hvem han / hun er, hva slags tjenester de tilbyr, etc.)
Breddehensyn: I de fleste tilfeller ville vi bare kopiere over det aktive innholdsrommet som vi brukte i Gallerikjablonen. Jeg skal bytte ting litt opp ved å endre polstring fra 32px til 20px. Hvorfor? Dette gir oss litt ekstra plass til å bruke et "FULL-størrelse" -bilde. Det er et veldig subtilt skift i det generelle oppsettet, men virkningen skal være enorm fordi vi kan passe et massivt bilde inn i rommet.
Høydehensyn: Som vi har sagt hele tiden, er høyden virkelig variabel og vil til slutt overlates til individuelle brukere / designere / klienter for å bestemme hvor mye innhold du vil ha på denne siden? i mitt tilfelle skal jeg forsøke å holde dimensjonene på denne siden på samme måte som vår galleriside skjønt.
Resultatet av disse overvejelsene er en aktiv plass som er litt større enn det vi brukte i gallerimalen: 720px ved 604px.
Dette gir mening for oss av noen grunner: 1) det gir oss god plass til å designe rundt og 2) den vil passe inn i de mest populære nettlesernees "fold" -rom. Så lenge vi ikke legger noen viktig informasjon nær selve bunnen av dette området, bør det være bra å bruke dette rommet på noen måte vi kanskje tror.
Tegne bildet: Begynn med å tegne en 716px bred ved 438px høy avrundet rektangel (Radius: 10px).
Bruk følgende lagstiler, begynner med a 2px slag:
Og legg også til en indre skygge (som vil bidra til å gjøre bildet vårt "pop" mer på siden):
Den endelige visuelle stilen bør se slik ut:
Opprette fanene:
Flikene vil være måten brukerne vil kunne sykle gjennom bilder på hjemmesiden. Dette er egentlig bare en grunnleggende jQuery-karusell når du tenker på det når det gjelder koding? men det er ingen grunn til å begrense oss til de visuelle stilene som de fleste forhåndsbygde skyveknappene vil bruke som standard.
Så, la oss få litt mer kreativ med venstre / høyre faner ved å skape noen visuelt interessante indre kretser.
Start med a 92px diameter sirkel form. Bruk Svart for fyllfarge og sett inn opacity til 57%.
Bruk Rectangle Marquee-verktøyet til å lage et valg som går langs vår "bildebeholder" og bruk det valget for å lage en lagmaske.
Legg nå til "
Så du bør ha dette:
Gå videre og grupper disse lagene i en gruppe, dupliser den, flip den kopierte gruppen horisontalt og skyv den over til høyre side:
Nå er alt du trenger å gjøre, dra et bilde på det avrundede rektangellaget (gjør bildet a Clipping Mask av det laget) slik at vi kan se hvordan dette faktisk vil se ut:
Opprette mellomrom: Å bestemme størrelsen på disse mellomrom har så mye å gjøre med hvor mye plass vi vil ha mellom dem som hvor mye plass vi vil ha dem til å ta opp. Jeg vil ha ikke mindre enn 20 px separasjon mellom hver modul (for å hindre at de ser jumbled opp), så det vi får er en moduloppsett noe slikt:
I virkeligheten vil disse modulene vises mer spredt ut enn dette fordi teksten ikke vil bli rettferdiggjort på høyre side? så det er rikelig med plass. Husk at disse modulene er usynlige? eller rettere sagt, det er ingen bakgrunnsfarge eller noe sånt. Bildet over er bare for å illustrere hvordan jeg har kommet til avstanden min.
Legge til titler: Vi legger nå til noen titler for hver tekstmodul. Plasser hver tittel langt til venstre for de skjulte rektanglene som vi opprettet i det siste trinnet. I demonstrasjonen skal jeg bruke fonten Museo til titlene? som skjer med det samme som logotype. Det er åpenbart at du vil justere skrifttypen som passer til ditt eget prosjekt. Slik gjør du demo-teksten:
Legge til beskrivende tekst: Den beskrivende teksten for hver modul kommer neste. Vi bruker det grunnleggende Lorem Ipsum-skriptet her, men det kan hende du vil bruke noen faktisk tekst for å teste linjens høyde og skriftstørrelse som vil fungere best for deg. Her er hva demoen gjengis som:
Legge til bildeikoner: Til slutt, la oss legge til 16px med 16px ikoner for å legge til noen visuell interesse for modulene. Husk å pusse over titlene også:
Og det er det! Her er de endelige bildene som vi opprettet i dag. Klikk på hver for å se den i full størrelse:
På dette punktet bør du ha brukt omtrent en time eller to å sette opp dette dokumentet; Hastighetsdesignere kan ha gått raskere, men jeg tillater litt "kreativ tid" hvor du kanskje vil leke med forskjellige størrelser og stiler.
Accentsconagua