Share
I denne opplæringen fortsetter vi denne serien når du lager et iPhone-reklame-nettsted ved å ta vår tidligere fyrverkeri-konstruert wireframe og legge til farge, tekstur, bilder og effekter for å polere dette designet i Photoshop. Vi bruker noen interessante elementer, som iPhone bilder og en stilig Aurora vektor bakgrunns illustrasjon. Vi vil avslutte med et profesjonelt nettsteddesign klar til å bli kodet! La oss komme til det!
Ta en titt på webdesignet vi skal skape. Du kan se den endelige bildet forhåndsvisning nedenfor eller bildet i full størrelse her.
Ta tak i "wireframe_final.psd" vi eksporterte i vår siste opplæring i denne serien (Bygg en reklame iPhone App Website Wireframe i fyrverkeri). Gi nytt navn til denne filen til "final.psd" eller ditt foretrukne navn.
Legg merke til hvordan den importerte filen åpnes ganske bra i Photoshop. Det er et problem med at tekstfeltene er lengre enn dokumentet skjønt (det andre bildet under, legg merke til hvordan boksen er lang og fortsetter forbi bunnen av dokumentet). Jeg vet ikke en rask måte å fikse dette på. Det er en særegenhet jeg nevnte i den siste opplæringen. Hvis noen vet en god løsning, så fortell meg det. Så gå gjennom og kopier teksten til hvert element, så gjenskap en ny tekstboks og lim inn teksten på nytt, eller bare la den være som den er.
Også, gå videre og slett "Notes" -mappen også, siden vi ikke trenger notatene her.
Jeg liker ofte å jobbe med de dominerende (og mer viktige) visuelle elementene i design først, og deretter bygge derfra. Så, la oss komme i gang med "promotion" -området.
Vi skal legge til en Aurora-illustrasjon i bakgrunnen her. Ian Yates skrev en fantastisk Illustrator-veiledning om å lage en Aurora Borealis Vector Sky i Illustrator. Det er noen fordeler med å bruke vektorgrafikk her. Den ene er at den stilistisk skiller seg ut med et unikt utseende. Også, vi kan bruke den til andre størrelsesorden områder også.
Etter å ha fullført aurora borealis vektorveiledningen, fortsett og importer ditt unike resultat til Photoshop. Du kan se at den eneste endringen jeg laget var å flippe designet. Du bør selvfølgelig lage din egen for arbeidet ditt. Jeg limte illustrasjonen inn som piksler fordi jeg ikke trenger å gjøre noen endringer i vektor kildefilen etter å ha tatt den inn, så det er ikke nødvendig å bruke et smart objekt.
Dra nå vektormasken fra vår salgsfremmende bakgrunnsform på vår Aurora Borealis-design.
Dette vil gjelde vektormasken som vist nedenfor, bare sørg for at den rader opp som du vil ha den.
Det er spektakulær freebie av et iPhone-bilde med masse iPhone GUI-grafikk. Gå videre og last ned iPhone GUI PSD 3.0. Åpne filen og dra iPhone-bildet inn i arbeidsdokumentet. Skal deretter det og lenk det opp med styrene som vist i det andre bildet under. Pass på at du tar bildet som vist. Den eneste skjermkomponenten grepet annet enn at telefonen er en gjennomsiktig vinklet skjermblending.
Nå legger vi til aurora borealis-illustrasjonen til iPhone. Dette gjør bare designet ser litt mer interessant ut. På den endelige nettsiden vil en videofil se bra ut her, noe som viser appen i praksis skjønt. Ta med en annen kopi av Aurora Borealis-illustrasjonen. Du kan ta med en mindre versjon av den denne gangen, da vi fyller på et mindre rom. Lim inn den som piksler igjen.
Nå med illustrasjonen plassert over iPhone i den posisjonen du vil ha den i, og illustrasjonen som er valgt, gå til Lag> Vector Mask> Reveal All. Deretter tar du Rectangle Tool (U), sørg for at den er satt til Stier øverst til venstre, og tegne skjermen. Hvis du ikke får den den nøyaktige størrelsen du trenger første gang, så trykk Kommando + T og endre størrelsen på rektangulære vektormaske etter behov.
Husk å holde lagene dine organisert som vi fortsetter å bygge dette designet.
Vi har nettopp lagt to dominerende elementer på siden. Også, den aurora-illustrasjonen vi la til, er en god kilde til å hente litt farge fra for å gjøre denne sidens fargeskjema. Gå videre og dobbeltklikk på standard "Bakgrunn" -lag for å låse opp det, gi det navnet "bakgrunn", og legg det i en ny "bakgrunn" -mappe.
Ta tak i Paint Bucket Tool (G), og endre forgrunnsfarge til en mørk blåaktig grå (# 536475), som jeg valgte fra illustrasjonen. Bytt nå primærnavigasjonsbakgrunnen i mappen "header" en mørk blå (# 212b3f), som også ble samplet fra illustrasjonen. Gi "bunn" området bakgrunnen den samme mørkblå farge for bakgrunnen.
Vi endrer også fargen på noen av våre navigasjonsknapper på dette punktet også. Bildet nedenfor viser hvor vi er så langt i dette designet. Bytt primærnavigeringsknappens bakgrunnsfarger til en litt lysere grå-blå (# 5e7285) enn sidebakgrunnen, unntatt den gjeldende sideknappen. Vi vil gi den gjeldende sideknappen inntrykket av å bli trykt inn. Så gjør det samme farge som siden (# 536475). Vi forbedrer dette mye litt senere i opplæringen når vi legger til styling.
I området "secondary_nav" velger du den større bakgrunnen bak Aurora-ikonet og endrer fargen til en grå-blå (# 475665) som er litt mørkere enn sidebakgrunnen. Igjen, vi skal gjøre denne utseendet innrykket. Også, gå videre og bruk samme lysere grå-blå (# 5e7285) som de primære navigasjonsknappene på bunteknappene.
Du kan se hvordan det går mørkt med vår side design gjør det smertefullt åpenbart at det er på tide å jobbe med tekstfarger. Vi utformet teksten for det meste med mørk på lys til wireframe, men nå må vi gå på lys på mørk. Endre mesteparten av teksten din til hvit. Jeg vil peke på de få unntakene nedenfor. Rengjør også tekst, flytt elementene og eksperimentere med skriftvekt når du går gjennom dette.
Jeg setter inn noe av teksten i Myriad Pro, men i områder som vil bli kodet og ikke bilder Jeg brukte ofte Helvetica for dette designet, som er allestedsnærværende på datasystemer. Jeg brukte også Helvetica for noen områder som jeg ønsket å ha litt annerledes utseende enn Myriad Pro som ble brukt. Jeg satte Aurora navnet i Futura Condensed Extra Bold hvor det skulle brukes til merkevarebygging.
Du kan se teksten i det meste av "header", "secondary_nav", "promotion" og "body" er hvit. Noen få unntak er logo-området (som vil være bare en plassholder for nå), "Aurora App" -teksten som er mørkblå (# 131828) for å hjelpe den skille seg ut, og overskriftene for kroppen som er like mørkeblå.
Vi må også jobbe med "bunn" delen tekst også. Jeg satte alle overskriftene i Myriad Pro Bold på 20pt. Fargen er en lys babyblå (# 85a1bc). Jeg brukte det samme blå for tekstlinkene. Jeg setter resten av teksten i hvitt med en mindre Helvetica Bold.
"Footer" har bare noen få fargeendringer. Koblingene ble endret til en enda lysere babyblå (# 97b8d8), bortsett fra den aktive lenken som er hvit og understreket. Opphavsretten er 12pt Helvetica og darkish blue (# 212b3f).
Først tar du et skjermbilde av vår PSD-fil av området vi legger inn logoen inn i (med logo-plasseringsteksten slått av). Brann opp Illustrator. Legg skjermbildet på sitt eget lag og lås det. Jeg har også slått av kunstglassets synlighet (Shift + Command + H). Lag nå et lag for logoen din og sett inn teksten "iLoveMyApps," som tjener som selskapets navn for denne opplæringen. Sett teksten i Cooper Std Black Italic på 30pt, og gi den en hvit fyll, som vist nedenfor. Nå med teksten valgt, gå til Tekst> Opprett oversikter, og ungroup teksten (Shift + Command + G). Slett også "o", da vi erstatter det med et hjerte.
La oss nå jobbe på hjerteformen. Først slår du på rutenettet (Command + ") og slår på Snap to Grid (Shift + Command +"), som gjør at du kan tegne formen enkelt. Gå videre og lag en halv hjerteform med pennverktøyet. Gå nå til Objekt> Transform> Reflekter og bruk en kopi med innstillingene vist nedenfor. Nå strek inn den indre kanten av begge halve hjerteformene, og klikk deretter på Merge i Pathfinder-paletten, noe som gir oss en endelig hjerteform.
Nå skala hjerteformen ned og plasser den som vist. Også jobbe med å plassere hver bokstav i teksten til den ser riktig ut til deg. Jeg ville at hele teksten skulle vises som en, men jeg plasserte hvert ord ut litt for å øke lesbarheten. Det står fortsatt som ett ord skjønt. Kopier og lim inn den endelige logoen som et smart objekt i Photoshop.
Vi fortsetter å jobbe oss ned fra topp til bunn, men husk at når du designer, kan du hoppe rundt mer til ulike områder av designet, og eksperimentere med forskjellige utseende og stiler, noe som er flott og du føler deg fri å gjøre det.
I delen "header", velg bakgrunnen, og bruk deretter lagformatene som vises nedenfor. Dette gir toppen av kroppsområdet et lite høydepunkt, og en subtil skygge kastes på topptekstområdet, noe som skyver det litt tilbake.
Bruk nå stilene som er vist nedenfor til vår logo. For gradientoverlegget går graden fra grått (# c0c4c9) til lysegrå (# e3e5e7).
Først vil vi jobbe med bakgrunnsstiler som ikke er aktive primære linker, noe som betyr at alle unntatt koblingen "Apps". Bruk stilene som vises nedenfor, og bruk farger som ser riktig ut til deg. Merk: Jeg har mye inspirasjon fra Meta Lab-siden for denne delen av designet. Jeg elsker arbeidet som gjøres av dette firmaet, sjekk ut folio mens du er der.
Det er alltid viktig å forestille seg hvor lyskilden er i ditt design. Vi bruker noen subtile lyseffekter, noe som vil gi dette designet en moderne følelse, selv om vi fortsatt trenger å holde lyskilden i tankene.
Tenk deg at det er en lyskilde som kommer fra toppen av siden, skyter rett ned, noe som gir oss lysretningen for mange av stilene vi skal legge til. Selvfølgelig kan du forestille deg mer enn en lyskilde, og du kan avvike fra dette noe, men å holde lysets primære lyskilde i tankene vil bidra til å gjøre stilene du bruker, fornuftig og samarbeide visuelt.
Bruk nå stilene som vises nedenfor til "Apps" -linksbakgrunnen, som er vår aktive link, og får det til å se ut som om den er trykket ned.
Bruk deretter følgende kommando og Emboss-stil til teksten i primærnavigasjonen for å få det til å skille seg ut litt. Effekten på teksten er subtil, men merkbar.
Først og fremst la vi legge til våre iPhone appikoner. For Aurora-ikonet, bruk samme Aurora-illustrasjon som brukt i salgsfeltet. Dra vektormasken som brukes som en grå firkant for øyeblikket, på en nedskalert versjon av Aurora-illustrasjonen, se trinn 2 om hvordan du gjør det. La oss legge til litt stil her. Legg til følgende lagstiler på ikonet.
Bruk de samme stilene til den ytre ikonbakgrunnen som vi gjorde til bakgrunnsboksen "Apps" i trinn 7. Kontroller på miniatyrbildet av "Apps" -knappen og velg Copy Layer Styles. Deretter velger du den ytre bakgrunnen, Kontroller-klikk på miniatyrbildet for laget og velg Lim inn lagstil, som vist nedenfor.
Nå skal vi legge til noen stil til våre andre applikasjonsikoner. Disse er bare plassholdere for å vise klienten der andre ikoner skulle gå. Så jeg vil gi dem et lignende utseende som Aurora-ikonet, men ikke få dem til å skille seg ut mye. Så, la oss begynne med å fylle dem med et mønster. Først skal vi lage mønsteret.
Åpne et 4px ved 4px nytt dokument satt opp på nettet. Ta tak i blyantverktøyet, sett børstestørrelsen til 1px og maler fire rektangler som vist nedenfor. Det mørkeste rektangel er # 05020a og den letteste er # 251440 denne fargen. Hit kommando + A for å velge Alt, og gå deretter til Rediger> Definer mønster og nev det "Purple Rain." Ja, jeg gjorde hvor en skjorte med dette mønsteret på den i åttitallet tilbake i klasseskolen.
Velg det første plasseringsikonet. Legg merke til hvordan det er et formlag for tiden. Vi må rasterisere det. Så gå til Lag> Rasterize> Fyll innhold, som holder vektormasken på plass, men rasteriser fyllingen. Legg merke til at resultatet er et rasterisert lag med en vektormask påført det - raskt og enkelt. Gå gjennom og gjør dette for hvert stedholderikon.
Ta tak i Paint Bucket Tool (G), og i øverste venstre hjørne velg Mønster fra rullegardinmenyen, kontroller at "Purple Rain" -mønsteret er valgt, og klikk deretter en gang på hvert plassholderikon for å bruke mønsteret. Nå Kontroll-klikk på Aurora-ikonet miniatyrbildet og kopier lagstilen, og lim deretter inn det på hvert applikasjonsikon for plassholderen. Også juster avstanden til programnavnene for å gjøre rom for stilene.
La oss også justere vår standard app store butikkholder knappen over til høyre for denne delen. En enkel måte å gjøre denne knappen blander inn bedre i vårt design er å endre bakgrunnsfargen. Gå til Bilde> Justeringer> Fargetone / Metning og bruk innstillingene som vises nedenfor, eller de som du har valgt.
La oss starte med bakgrunnen og knappene. Først vil vi bruke stil til vårt store bakgrunnsområde. Velg Aurora-illustrasjonen og bruk følgende lagsstiler. Dette gir oss et høydepunkt på toppen og et slag rundt området.
Bruk nå de samme stilene til bakgrunnen for topp høyre prisområde, men legg også til stilene som vises nedenfor. Fargene som brukes for lilla gradientoverlegget samples fra Aurora-grafikken. Fargen på gradienten går fra lilla (# 68448f) til mørkere lilla (# 320580) og deretter tilbake til en mørk lilla nyanse (# 65428c).
Påfør samme lag stiler til vår viktigste "Light Up Your iPhone" overskrift, som vi gjorde i trinn 7. Du kan kopiere og lime inn lagstilen derfra. Bruk samme ordre og Emboss-stil til pristeksten og underrubrikken, som vi brukte på den primære navigasjonsteksten i trinn 7. Du vil kanskje endre Opacity of Highlight Mode eller Shadow Mode for skyggen selv, eksperimentere med hva ser best ut til deg. Velg også den horisontale regelen, som er en 1 px høy form, og endre den til farge til svart. Også, bruk innstillingene som vises nedenfor til den.
Bruk nå følgende lagstiler til vår hovedoppringing til handlingsknapp. Vi har lagt en dråpeskygge på dette slik at den skiller seg ut fra bakgrunnen mer. Den har en lys farge, som vil tiltrekke seg oppmerksomhet. Det er plassering tiltrekker også oppmerksomhet. Gradientoverlegget har lignende farger som det som brukes til prisbakgrunnen, men det har bare to farger brukt i stedet, som går fra lilla (# 68448f) til mørk lilla (# 320580). Vi legger til en pil på et øyeblikk for å få det til å skille seg ut også.
Ta nå Ellipseverktøyet (U), og bruk det til å lage et formlag som vist nedenfor. Fargen spiller ingen rolle fordi stilene vil overlappe det uansett. Omorganiser knappteksten for å se på balansen med det ekstra elementet. Vi bruker denne sirkelen til å plassere en nedlastingspile på kort tid. Bruk følgende lagstiler til knappen (fargene i gradientoverlegget går fra # 9cc67e til # 3a4f66).
Nå lager vi pilen vår, legger den inn i Photoshop, og stiler den.
Åpne Illustrator og opprett et webdokument. Slå på Vis> Vis rutenett og visning> Snap to Grid. Bruk pennverktøyet til å tegne en pil ved hjelp av rutenettet. Størrelsen spiller ingen rolle. Endre størrelsen på den til en form som gjelder størrelsen på den større pilen som vises nedenfor. Gå nå til Effect> Style> Round Corners og søk med en radius på 0,139. Kopier nå pilen og lim inn som et Vector Smart Object i Photoshop. Merk: Jeg bruker svart nedenfor for demonstrasjonsformål, men pilen skal være hvit.
Nå gjelder de samme stilene til pilen som vi gjorde vår logo i trinn 7 og skalere for å passe til plassen. Resultatet vises i det andre bildet under.
Her er det vi har så langt. Den øverste delen ser bra ut. La oss nå bevege oss på kroppen neste. Vi har mesteparten av nettstedet utformet nå. Det blir jevnt å seile herfra.
Det er ikke så mange stiler som må brukes her - bare noen få. La oss starte med titlene. Vi ønsker å få dem til å se innrykk ved å markere de indre bunnkarakterene, som er en stil som ofte brukes på Apples nettsteder. Bruk stilen som vises nedenfor til "Aurora" tittelteksten. Bruk også samme stil til "Skjermbilder" og "Funksjoner" titler. Med disse senere to titlene, endre Opacity til 40% skjønt (alt annet i denne Drop Shadow Layer-stilen er det samme).
Påfør samme lagestil til kulepunktene under "Funksjon" -kolonnen, som brukt på den tittelen. Resultatene hittil er vist nedenfor.
Kopier nå den horisontale regelen fra "promotion" -delen, bytt farge til mørk blå (# 131828) og skala den slik at den passer til området over tittelen "Skjermbilder". Legg merke til hvordan stilen beholdes.
Kopier nå samme horisontale regel og bruk flere kopier av den i den siste kolonnen i denne delen, som vist nedenfor. Pass på å slette de eksisterende ustylte horisontale reglene.
Følg deretter de samme trinnene for disse stedholderbildene her, slik som du gjorde i trinn 10. Bruk de samme lagstilene og "Purple Rain" -bakgrunnsmønsterfyllingen. Dette er bare en rask måte å gjøre dette området ser bra ut for kundeanmeldelsen før du får tak i de faktiske bildene som vil gå dit senere. Den endelige "kroppsdelen" er vist nedenfor.
Først, la oss bruke samme Stil og Emboss lag stil til våre titler her som vi gjorde med teksten i vår primære navigasjon i trinn 8. Dra nå fire kopier av vår stiliserte horisontale regel ned og endre størrelsen etter behov, eller bruk de samme stilene og fargelegging til de eksisterende horisontale linjene som vi gjorde med dem i delen "kropp".
Bytt de resterende horisontale reglene i denne delen med bindestreker. Du kan bruke Type Tool og Dash Key for dette. Jeg brukte Myriad Pro på 14pt for dette. Dette er noe som vil bli kodet i CSS, men vi vil sørge for at vi kommuniserer dette effektivt i designet.
Bruk samme lag stiler til våre knapper som vi gjorde i vår primære navigasjon. Bare kopier de lagformatene ned. Husk å stylisere teksten til knappene også. Bytt ut vår twitterfugl med en fargeversjon, som du kan laste ned gratis i Practika Icon-pakken fra Smashing Magazine.
Påfør følgende lagstiler til bakgrunnen av "bunn" -delen, og vi er ferdige!
Det er mange kreative nettstedløsninger du kan opprette ved hjelp av bare en håndfull utvalgte elementer, et interessant fargevalg, bruk av passende stiler og oppmerksomhet til subtile lyseffekter. Det endelige bildet er under. Du kan se en større versjon her.
Accentsconagua