Create en Promotional iPhone App Site i Photoshop

I denne opplæringen, vil vi fortsette denne serien på å lage en iPhone app kampanje nettstedet ved å ta våre tidligere Fyrverkeri konstruert trådramme og legge farge, tekstur, bilder og effekter for å polere av dette designet i Photoshop. Vi vil bruke noen interessante elementer, som iPhone bilder og en stilig aurora vektor bakgrunn illustrasjon. Vi vil avslutte med et profesjonelt nettsted utforme klare til å bli kodet! La oss komme til det!

Final Bilde Forhåndsvisning

Ta en titt på webdesign vi skal opprette. Du kan se det endelige bildet forhåndsvisningen under eller bildet i full størrelse her

Trinn 1 -. Dokumentoppsett

Grab "wireframe_final.psd" vi eksportert i vår siste tutorial i denne serien ( Bygg en Promotional iPhone App Nettstedet Rammeverk i Fireworks). Gi denne filen til «final.psd", eller ønsket navn.

Legg merke til under hvordan den importerte filen åpnes ganske godt i Photoshop. Det er et problem med tekstboksene være lenger enn dokumentet selv (andre bildet nedenfor, legg merke til hvordan boksen er lang og fortsetter forbi bunnen av dokumentet). Jeg vet ikke en rask måte å fikse dette. Det er en særegenhet jeg nevnte i forrige tutorial. Hvis noen vet en god løsning, definitivt gi meg beskjed. Så, gå gjennom og kopiere teksten i hvert element, og deretter gjenskape en ny tekstboks og lime inn teksten tilbake på plass, eller bare la den være som den er.

Også, gå videre og slett "Notater" -mappen også, som vi ikke trenger notene her

Trinn 2 -. Første Dominant Visual Element

Jeg liker ofte å arbeide på de dominerende (og viktigere) visuelle elementer av design først, og deretter bygge derfra. Så, la oss komme i gang med "opprykk" område.

Vi kommer til å legge en aurora illustrasjon til bakgrunnen her. Ian Yates skrev en kjempe Illustrator tutorial på å lage en Aurora Borealis Vector Sky i Illustrator. Det er noen fordeler ved å bruke vektorgrafikk her. Det ene er at det stilistisk skiller seg ut med et unikt utseende. Dessuten kan vi bruke det til andre store merkevare områder også.

Etter fullført aurora borealis vektor tutorial gå videre og importere unikt resultat i Photoshop. Du kan se at den eneste endringen jeg gjorde var å bla design. Du bør selvfølgelig lage din egen for arbeidet ditt. Jeg limte illustrasjonen i så piksler fordi jeg ikke trenger å gjøre noen endringer i vektor kildefilen etter å bringe det inn, så ingen trenger å bruke en smart objekt.

Nå drar vektormaske fra vår kampanje . bakgrunn formen på vår aurora borealis design on

Dette vil gjelde vektormaske som vist nedenfor, bare sørg for at det linjer opp som du vil ha det

Trinn 3 -. Legge til en iPhone bilde

Det er spektakulært freebie av en iPhone bilde med massevis av iPhone GUI grafikk. Gå videre og laste ned iPhone GUI PSD 3.0. Åpne filen og dra iPhone bilde inn i en arbeidsdokument. Så skalere det og line den opp med guider som vist i det andre bildet nedenfor. Sørg for å ta bildet som vises. Den eneste skjermen komponent grep annet enn telefonen er en gjennomsiktig vinklet gjenskinn.

Nå skal vi legge til aurora borealis illustrasjonen til iPhone. Dette gjør bare utformingen se litt mer interessant. I den endelige nettstedet en videofil ville se bra ut her, som viser app i aksjon selv. Bring i en annen kopi av aurora borealis illustrasjon. Du kan ta med i en mindre versjon av det denne gangen, så vi fyller en mindre plass. Lime den inn som piksler igjen

Nå med illustrasjonen plassert over iPhone i den posisjonen du vil ha den i, og illustrasjonen valgt, gå til lag >.; Vector Mask > Reveal All. Så grip rektangel Tool (U), sørg for at det er satt til Veier i øverste venstre hjørne, og trekke skjermen. Hvis du ikke får det den eksakte størrelsen du trenger den første gangen, deretter traff Command + T og endre størrelsen på rektangelet vektormaske etter behov.

Sørg for å holde lagene organisert som vi fortsetter å bygge dette designet .

Trinn 4 - Arbeid på vårt fargevalg

Vi har nettopp lagt to dominerende elementer på siden. Også aurora illustrasjonen vi har lagt er en stor kilde til å få tak i noen farge fra å gjøre dette sidens fargevalg. Gå videre og dobbeltklikk på standard "Bakgrunn" lag for å låse den opp, den navnet "bakgrunn", og legg den i en ny "bakgrunn" -mappen.

Grip Paint Bucket Tool (G), deretter endre forgrunnsfargen til en mørk blå-grå (# 536475), som jeg valgte fra illustrasjonen. Nå endrer primærnavigasjonen bakgrunnen ligger i "header" mappe en mørk blå (# 212b3f), som også ble samplet fra illustrasjonen. Gi "bunnen" området bakgrunn samme mørkeblå farge for bakgrunnen.

Vi vil også endre farge på noen av våre navigasjonsknapper på dette punktet også. Bildet nedenfor viser hvor vi er så langt i denne design. Endre den primære navigasjonsknapp bakgrunnsfarger til en litt lysere grå-blå (# 5e7285) enn siden bakgrunnen, med unntak av den gjeldende siden knappen. Vi ønsker å gi den aktuelle siden knappen inntrykk av å være presset i. Så, gjør det samme farge som siden (# 536475). Vi vil forbedre dette i stor grad litt senere i opplæringen når vi legger til styling.

I "secondary_nav" området velger større bakgrunnen bak Aurora ikonet og endre det er farge til en grå-blå (# 475665) som er litt mørkere enn sidebakgrunnen. Igjen, vi kommer til å gjøre dette ser innrykket. Også, gå videre og bruke den samme lysere grå-blå (# 5e7285) som den primære navigasjonsknappene på bunn knappene

Trinn 5 -. Endre Vår tekstfarge og grunnleggende stiler

Du kan se hvor kommer mørket med vår side design gjør det smertelig
åpenbart at det er på tide å arbeide med tekstfarger. Vi har utformet teksten meste med mørke på lys for wireframe, men nå må vi gå til lys på mørke. Endre meste av teksten til hvit. Jeg vil peke ut de få unntakene nedenfor. Også rydde opp all tekst, flytte elementer, og eksperimentere med skrift vekt som du går gjennom dette.

Jeg setter noe av teksten i Myriad Pro, selv i områder som vil bli kodet og ikke bilder jeg ofte brukt Helvetica for design, som er allestedsnærværende på datasystemer. Jeg brukte også Helvetica for noen områder som jeg ønsket å ha et litt annet utseende enn Myriad Pro som brukes. Jeg satt Aurora navn i Futura Condensed Extra Bold hvor det skulle brukes til merkevarebygging.

Du kan se teksten i det meste av "header", "secondary_nav", "opprykk" og "kroppen" er hvit. Et par unntak er logoen området (som vil er bare en plassholder for nå), den "Aurora App" tekst som er mørk blå (# 131828) for å hjelpe den skiller seg ut, og overskriftene for kroppen som er like mørk blå

. Vi trenger også å jobbe på "bunnen" i teksten også. Jeg satt alle overskriftene i Myriad Pro Bold på 20 pkt. Fargen er en lys babyblå (# 85a1bc). Jeg brukte den samme blå for de tekstlenker. Jeg satt resten av teksten i hvitt med en mindre Helvetica Bold.

"footer" har bare et par fargeendringer. Koblingene ble endret til en enda lysere himmelblå (# 97b8d8), bortsett fra den aktive koblingen som er hvit og understreket. Opphavsretten teksten er 12pt Helvetica og mørk blå (# 212b3f)

Trinn 6 -. Bringing i Logo Design

Først, ta en skjermdump av vår PSD fil av området vi vil være plassere logoen inn (med logoen eksempeltekst slått av). Fyr opp Illustrator. Plasser skjermbilde på sin egen lag og låse den. Jeg snudde også av artboard synlighet (Shift + Command + H). Nå opprette et lag for din logo og sett teksten "iLoveMyApps", som er fungerer som selskapets navn for denne opplæringen. Angi tekst i Cooper Std Svart Kursiv på 30pt, og gi det et hvitt fyll, som vist nedenfor. Nå med teksten valgt, gå til Tekst > Lag Outlines, deretter dele opp teksten (Shift + Command + G). Også slette "o", som vi skal erstatte det med et hjerte.

Nå skal arbeide på hjerte form. Først slår du på rutenettet (Command + ") og slå på Fest til rutenett (Shift + Command +"), som vil tillate deg å tegne formen lett. Gå videre og skape et halvt hjerte form med Pen Tool. Nå gå til Objekt > Transform > Reflektere og bruke en kopi med innstillingene som vises nedenfor. Nå stille opp den indre kanten av begge halvt hjerte former, deretter i Pathfinder paletten klikk på Merge, som gir oss en endelig hjerte form.

Nå skalere hjerte form ned og plassere den som vist. Også jobbe med mellomrom ut hver bokstav i teksten til det ser riktig for deg. Jeg ønsket hele teksten for å fremstå som en, men jeg mellomrom hvert ord ut akkurat litt for å øke lesbarheten. Det fortsatt lyder som ett ord om. Nå kopiere og lime den endelige logoen som et smart objekt i Photoshop

Trinn 7 -. Begynner å legge stil til Vårt Design

Vi vil fortsette å jobbe oss ned fra topp til bunn, men husk at når du designer kan du sprette rundt mer til ulike områder av design, og eksperimentere med forskjellig utseende og stiler, som er store og gjerne gjøre det.

Innenfor "header "velger bakgrunnen, deretter bruke lagstiler vist nedenfor. Dette gir toppen av kroppen området et lite høydepunkt og en subtil skygge er støpt på overskriftsområdet, noe som presser den tilbake litt.

Nå gjelder stilene nedenfor til vår logo. For gradient overlay gradienten går fra grå (# c0c4c9) til lys grå (# e3e5e7)

Trinn 8 -. Legge stil til Vårt hovednavigasjon

Først vi skal jobbe på ikke -Active primære lenke bakgrunn stiler, noe som betyr alt unntatt for "Apps" linken. Påfør stilene nedenfor og bruke farger som ser rett til deg. Merk: Jeg fikk mye av inspirasjonen fra Meta Lab stedet for denne delen av design. Jeg elsker det arbeidet som gjøres av dette selskapet, sjekk ut deres folio mens du er der.

Det er alltid viktig å forestille seg hvor lyskilden er i design. Vi søker noen subtile lyseffekter, som vil gi dette designet som et moderne preg, selv om vi fortsatt trenger å holde lyskilden i tankene.

Tenk deg at det er en lyskilde som kommer fra toppen av siden skyte rett ned, noe som gir oss lyset retning for mange av stilene vi skal legge. Selvfølgelig kan du forestille deg mer enn en lyskilde, og du kan avvike fra dette noe, men holder lyset primære lyskilden i tankene vil bidra til å gjøre stilene du søke fornuftig og arbeide sammen visuelt.

Nå gjelder stilene nedenfor til "Apps" linken bakgrunn, som er vår aktiv lenke og vil gjøre det ser ut som det er trykket ned.

Nå gjelder følgende Bevel og preg stil til teksten i primærnavigasjonen å gjøre det skiller seg ut litt. Effekten på teksten er subtil, men merkbar

Trinn 9 -. Bruk av Style til Vårt Andre navigasjon

Først av alt la oss legge våre iPhone app ikoner. For hoved Aurora ikonet, bruke samme aurora illustrasjon som brukes i reklame området. Dra vektormaske som er brukt som en grå firkant i dag, på en nedskalert versjon av nordlys illustrasjon, se trinn 2 på hvordan du gjør det. Nå la oss legge til noen stil her. Legg til følgende lagstiler til ikonet.

Bruk de samme stilene til den ytre ikonet bakgrunnen som vi gjorde til "Apps" bakgrunn knappen i trinn 7. Kontroll-klikk på laget miniatyr av "Apps" knappen bakgrunn og velg Copy Layer Styles. Velg deretter den ytre bakgrunn, Kontroll-klikker sitt lag thumbnail og velg Paste Layer stil, som vist nedenfor

Trinn 10 -. Bruk av Style til Vårt Andre navigasjon Fortsatt

Nå skal vi legge til litt stil til våre andre programikoner. Disse er bare plassere holdere for å vise kunden hvor andre ikoner ville gå. Så jeg ønsker å gi dem et lignende utseende som Aurora ikon, men ikke gjøre dem skiller seg ut mye. Så, la oss begynne med å fylle dem med et mønster. Først skal vi lage mønsteret.

Åpne en 4px av 4px nye dokumentet satt opp for web. Grab Pencil Tool, satt penselstørrelsen til 1px og male fire rektangler som vist nedenfor. Den mørkeste rektangelet er # 05020a og letteste er # 251440 denne fargen. Hit Command + A for å velge Alle, og deretter gå til Rediger > Definer Mønster og gi den navnet "Purple Rain". Ja jeg gjorde der en skjorte med dette mønsteret på det på åttitallet tilbake i grunnskolen.

Velg den første plassholder ikonet. Legg merke til hvordan det er et formlag for tiden. Vi trenger å rastrere det. Så gå til lag > Raste > Fyll innhold, som holder vår vektormaske på plass, men rastrerer fyllet. Legg merke til at resultatet er et rastrert lag med en vektor maske påført på det - rask og enkel. Gå gjennom og gjøre dette for hver plassholder ikon.

Grip Paint Bucket Tool (G), og i øverste venstre hjørne velge mønster fra rullegardin, sørge for at vårt "Purple Rain" mønster er valgt, klikk deretter én gang på hver plassholder ikonet for å bruke mønsteret. Nå Kontroll-klikk på Aurora ikonet miniatyr og kopier lag stil, og lim den inn hver plassholder programikon. Også justere avstanden mellom programnavn for å gjøre plass til de stiler.

La oss også justere vår standard app store plassholder knapp over på høyre side av denne delen. En enkel måte å gjøre denne knappen blanding i bedre til vårt design er å endre bakgrunnsfargen. Gå til Image > Justeringer > Hue /Saturation og bruke innstillingene som er vist nedenfor, eller de du velger

Trinn 11 -. Bruk av Style til Vårt Promotional området

La oss starte med bakgrunnen og knapper. Først vil vi gi stil til vår store bakgrunnsområde. Velg aurora illustrasjon og gjelder følgende lagstiler. Dette gir oss et høydepunkt på toppen og et slag rundt området.

Nå gjelder de samme stilene til øverste høyre prisområde bakgrunn, men også legge stilene vist nedenfor. Fargene som brukes for den lilla gradient overlay er samplet fra aurora grafikken. Fargene på gradienten går fra lilla (# 68448f) til mørkere lilla (# 320580) og deretter tilbake til en mid lilla nyanse (# 65428c).

Bruk de samme lagstiler til vår viktigste "Light Up Your iPhone "overskriften, slik vi gjorde i trinn 7. Du kan kopiere og lime inn lag stil derfra. Påfør samme Bevel og preg stil til prisen tekst og underoverskriften, som vi brukt på primærnavigasjonen teksten i trinn 7. Det kan være lurt å endre Opacity av Highlight Mode eller Shadow Mode for skyggelegging skjønt, eksperimentere med hva ser best for deg. Velg også horisontal linje, som er en 1px høy form, og endre den farge til svart. Også bruke innstillingene nedenfor til det

Trinn 12 -. Bruk av stil til vår viktigste Call to Action Button

Nå gjelder følgende lagstiler til vår viktigste handlingsknapp. Vi har plassert en skygge på dette, slik at den skiller seg ut fra bakgrunnen mer. Den har en lys farge, noe som vil tiltrekke seg oppmerksomhet. Det plassering også tiltrekker seg oppmerksomhet. Gradient overlay har lignende farger til den som brukes for prisen bakgrunnen, men det har bare to farger er benyttet i stedet, som går fra lilla (# 68448f) til mørk lilla (# 320580). Vi vil legge til en pil i bare et øyeblikk å gjøre det skiller seg ut mer i tillegg.

Nå grip Ellipse Tool (U), og bruke den til å lage et formlag som vist nedenfor. Fargen spiller ingen rolle fordi stiler vil kle det uansett. Omorganisere knappen teksten å se balansert med den ekstra element. Vi skal bruke denne sirkelen for å plassere en nedlastingspilen inne kort tid. Gjelder følgende lagstiler til knappen (fargene i gradient overlay gå fra # 9cc67e til # 3a4f66).

Nå vil vi lage vår pil, plassere den i Photoshop, og style det. Anmeldelser

Åpne Illustrator og lage et web-dokument. Slå på View > Vis rutenett og Se > Fest til rutenett. Bruk Pen Tool til å tegne en pil utnytte rutenettet. Størrelsen spiller ingen rolle. Nå endre størrelsen til en form som er omtrent på størrelse med den større pilen vist nedenfor. Nå gå til Effect > Stil > Runde hjørner og påfør med en radius på 0,139 i. Nå kopierer pilen og lime som en Vector smart objekt i Photoshop. Merk: Jeg bruker svart under for demonstrasjonsformål, men pilen skal være hvite

Nå gjelder de samme stilene til pilen som vi gjorde vår logo i trinn 7 og skala til. passe den plassen. Resultatet er vist i det andre bildet nedenfor.

Her er hva vi har så langt. Den øverste delen er ser bra ut. Nå la oss gå på kroppen neste. Vi har fått mesteparten av området stylet nå. Det vil være jevn seiling herfra

Trinn 13 -. Bruk stiler for vår kropp Område

Det er ikke så mange stiler som må brukes her - bare noen få. La oss starte med titlene. Vi ønsker å gjøre dem ser innrykket ved å merke den indre bunnen karakter kanter, noe som er en stil som ofte brukes i Apples nettsider. Påfør stilen vist nedenfor til "Aurora" title tekst. Dessuten gjelder det samme stil til "Skjermbilder" og "Egenskaper" titler. Med disse senere to titler, endre Opacity til 40% selv (alt annet i denne Drop Shadow Layer stil er det samme).

Bruk samme lag stil til de punkter under "Feature" kolonnen, som brukt til det er tittelen. Resultatene så langt er vist nedenfor.

Nå kopierer horisontal linje fra "opprykk" delen, endre fargen til mørk blå (# 131828) og skalere det til å passe området over "Screenshots" title. Legg merke til hvordan stilen er beholdt.

Nå kopiere denne samme horisontale regelen og bruke flere kopier av det i den siste kolonnen i denne delen, som vist nedenfor. Sørg for å slette de eksisterende Unstyled horisontale linjer.

Nå følger de samme trinnene for disse plassholderbilder her som du gjorde i trinn 10. Påfør samme lag stiler og "Purple Rain" bakgrunnsmønster fyll. Dette er bare en rask måte å gjøre dette området ser bra for klienten vurdering før du får tak i selve bildene som vil gå der senere. Den endelige "body" -delen er vist nedenfor

Trinn 14 -. Påfør stil til den nederste delen

Først, la oss bruke samme Bevel og preg lag stil til våre titler her som vi gjorde for å teksten i vårt primærnavigasjonen i trinn 8. Nå drar fire eksemplarer av vår stilisert horisontal linje ned og endre størrelsen etter behov, eller bruke de samme stilene og farging til eksisterende horisontale linjer som vi gjorde mot dem i "kroppen" -delen.

Sett de resterende horisontale reglene i denne paragraf med streker. Du kan bruke tekstverktøyet og Dash Key for dette. Jeg brukte Myriad Pro på 14 pkt for dette. Dette er noe som vil bli kodet i CSS, men vi ønsker å sørge for at vi kommuniserer dette effektivt i utformingen.

Bruk de samme lagstiler til våre knapper som vi gjorde i vår primære navigasjon. Bare kopiere disse lagstiler ned. Sørg for å stilisere teksten på knappene også. Nå erstatte vår twitter fugl med en full-color versjon, som du kan laste ned gratis i PRACTIKA Ikon pakken fra Smashing Magazine.

Bruk følgende lagstiler til bakgrunnen av "bunnen" delen, og vi er gjort!

Konklusjon

Det er mange kreative webløsninger du kan lage ved hjelp av bare en håndfull utvalgte elementer, en interessant fargevalg, bruk av hensiktsmessige stiler, og oppmerksomhet til subtile lyseffekter. Det siste bildet er nedenfor. Du kan se en større versjon her. Anmeldelser