Design Mørk Mobile App en slank, mørk Mobile App Website
I denne opplæringen vi skal bruke Adobe Photoshop til å designe en slank web-grensesnitt som kan brukes for en mobil app nettside. Vi skal dekke en rekke teknikker, inkludert figurer, teksturer, masker, tilpassede ikoner, typografi og mye mer som lett kan tilpasses og brukes på din egen web design.
Publiseres Tutorial
Hver noen uker, vi besøker noen av våre lesernes favoritt innlegg fra hele historien til området. Denne opplæringen ble første gang utgitt i januar 2011.
Om denne Design
Denne opplæringen er basert på den mørke, ren webdesign for Hefte, en iPhone app utviklet for Envato markedsplass utgivere . Eric Alli av Trilab Media hjulpet design og kode på kurset, slik at han skal gå oss gjennom trinnvise opplæringen. Enten du er ute etter å bruke en lignende design for dine egne prosjekter eller bare ønsker å se hvordan det ble gjort, er det mange gode triks og teknikker i denne opplæringen at du vil være i stand til å plukke opp. Nyt
Trinn 1
La oss begynne med å lage en ny Photoshop-dokument ved å velge Fil >!; Ny.
Sett begge lerretet Bredde og Høyde til 1100px, Oppløsning til 72, og bakgrunnen Innhold til White.
Deretter må vi lage to guider som vil fungere som beholder for . vår side
Velg Vis > New håndboken ...
For første guide, setter Orientering til Vertical og plassering til 70 px
For det andre guide, velg Vis >.; New Guide ... igjen og lage en ny vertikal guide med posisjonen satt til 1 030 px.
Vi skal nå ha en skissert plass som er 960 x bredde for vår side.
Trinn 2
Neste trinn er bakgrunnen. Velg Paint Bucket Tool (G) og sette din forgrunnsfarge Swatch til «1e1e1e". Deretter klikker du hvor som helst på lerretet for å bruke fargen til vår bakgrunnslaget
La oss også legge litt tekstur til vår bakgrunn ved å velge Filter >.; Noise > Legg Noise ...
Sett Beløp 2,5 og klikk på OK.
Trinn 3
Neste vi skal lage en spotlight som vil bidra til å legge fokusere på det øverste området av vår side.
Velg Brush Tool (B) og endre Master Diameter til 400px og sette Hardhet til 0%.
Lag et nytt lag ved å velge Layer > New > Lag ... og gi den navnet "Spotlight".
Endre forgrunnsfarge Swatch til "FFFFFF" (hvit) og lage en sirkel nær toppen av lerretet ved hjelp av penselverktøyet. Anmeldelser
For å hjelpe blande søkelyset i bakgrunnen, kan legge til litt støy i søkelyset laget ved å velge Filter > Legg Noise ...
Sett Beløp 20, sjekk Monokromatiske og klikk OK
For å jevne ut vår søkelyset, velg Filter >.; Blur > Gaussian Blur ...
Sett Radius til 50,0 og klikk på OK.
Til slutt setter Opacity på Spotlight lag til rundt 25%.
Trinn 4
Det neste vi kommer til å legge våre telefon grafikk. For denne opplæringen vil jeg skal bruke iPhone grafikk fra den flotte Vector iPhone 4 PSD fra PSDTUTS + som kan lastes ned gratis her. Også huske på, kan du bruke hvilken som helst telefon grafikk som passer dine spesielle behov (Android, Blackberry, etc ...).
Når lastet ned, åpner PSD i Photoshop. Utvid "Phones" -mappen i Lag-panelet, høyreklikk på "FRONT" mappen og velg Duplicate Group ... Her, gi gruppen et gjenkjennelig navn (jeg brukte "iPhone"), angi dette som reisemål til "Hefte" (eller hva er det du heter PSD for denne opplæringen), og klikk OK. Når du er ferdig, lukker denne PSD.
Plasser vår første iPhone berøre venstre guide og rundt 100px fra toppen av lerretet.
Dette er også en god tid til å tilpasse skjermbildet innen iPhone.
En enkel måte å gjøre dette på er å utvide "iPhone" -mappen i vårt lag panel og klikk på "skjerminnhold" -mappen. Nå velger Fil > Place, velg din skjermbilde fra nettleseren, klikk deretter på plass.
Dra plassert lag over iPhone og endre størrelse til å passe inn i skjermen. Når ferdig, klikker du på Enter for å lagre endringene
Dupliser "iPhone" gruppe ved å velge Layer >.; . Duplisere Group ... den navnet "iPhone 2" og klikk OK i dialogboksen
Velg Rediger > Transform > Skala og utvide duplisert iPhone til 107,0% bredde og høyde. Posisjon denne iPhone rundt 50 piksler fra toppen og 200px fra venstre guide.
Gjenta trinn nevnt ovenfor for å erstatte skjermbilde innenfor "iPhone to" -mappen.
Trinn 5
Den siste finpussen for våre iPhone er å skape en refleksjon av dem. Lar start ved å velge både iPhone grupper ("iPhone" og "iPhone 2") og deretter velger du Layer > Duplisere lag ... og klikk på OK. Deretter velger du Layer > Slå sammen lag.
Neste vi trenger å snu våre iPhones opp ned. Velg Rediger > Transform > Flip Vertical, plasser deretter venda lag direkte under de originale iPhones.
Legg til en lagmaske ved å klikke på Layer Mask ikonet i Lag-panelet.
Velg Gradient Tool (G), og velg en svart til hvitt swatch. Tegn en linje fra topp til bunn på venda iPhones som er rundt 50 piksler i høyden.
Til slutt senke opacity på laget til 30%.
Trinn 6 Anmeldelser
Neste er å legge vår app viktigste detaljene til høyre for våre telefoner. Før vi begynner, kan legge en annen guide for å holde ting på linje. Velg Vis > New Guide ... velg "Vertical" til orientering og 550 px for stillingen.
På rundt 100px fra toppen av vår lerret, kommer vi til å legge til i vår logo. Jeg bruker en logo Jeg har tidligere gjort, kan du bare bruke tekst eller sette inn egen logo her.
Under logoen, kommer vi til å legge til et tekstavsnitt for vår app beskrivelse. Velg Horizontal Type Tool (T) og tegne et rektangel mellom sentrum guide og høyre guide. Still tegn innstillingene slik:
Font Familie: Helvetica Neue
Størrelse: 16 px
Stil: Vanlig
Ledende: 26 px
Tracking: -25
Anti-aliasing: Crisp
Farge: #FFFFFF
Trinn 7
Neste vi vil lage en knapp for besøkende å kjøpe vår app. Bruke Avrundet rektangel Tool (U), tegne en 240x75px rektangel med en 4px radius. Justere den slik at venstre side av knappen berører sentrum guide og det er 45px under teksten.
Nå skal vi bruke noen lagstiler. Dobbeltklikk på høyre side av laget i lagpanelet og bruke under bildet for referanse.
Hvis du vil legge på Apple-ikonet, tegne en liten tekstboks inne knappen ved å bruke Horisontal Type Tool (T), deretter kopiere og lime dette symbolet: inn i tekstboksen og angi tegn innstillingene slik:
Font Familie: Helvetica Neue
Størrelse: 50 px
Stil: Regular
Anti-aliasing: Crisp
Farge:. # 000000
Til slutt, endre opacity på dette laget til 30%
Opprett en annen tekstboks til høyre og tilsett 2 linjer med tekst (ex: "Last ned nå på App Store"). Gjelder følgende innstillinger karakter:
Font Familie: Helvetica Neue
Størrelse: 11 px (første linje) 24 px (andre linje)
Stil: Fet
Ledende: 26 px
Tracking: -25
Anti-aliasing: Crisp
Farge: #FFFFFF
Legg et lag stil til denne teksten ved hjelp av følgende bilde for referanse:
Neste, vi kommer til å legge en separator til høyre for teksten vi nettopp har lagt til. Velg Line Tool (U) og mens du holder Skift-tasten, tegne en 1px linje fra toppen av knapp til nederst, og deretter endre linjens farge til "FFFFFF" (hvit).
Endre opacity av denne linjen til 15% og duplisere den ved å velge Layer > Duplicate Layer ... og klikk på OK. Endre fargen på denne duplisert linjen til # 000000 (svart) og endre sin opacity til 10%. Deretter flytter dupliseres linje 1px til venstre.
Det siste elementet for å legge til denne knappen er et ikon som viser nedlasting. Begynn med å velge Ellipse Tool (U) og lage en sirkel som er 25px i diameter
Deretter legger følgende Layer Styles.
Til slutt, ta tak i Custom Shape Tool (U) og velge en pil (jeg bruker en standard form kalt "Arrow 9"). Lag en liten pil 10px i bredden inne i sirkelen og endre fargen til "FFFFFF" (hvit).
Trinn 8
Nå for å lage en liten boks for å vise vår app pris . Velg Avrundet rektangel Tool (U), sett Radius å 4px og lage et rektangel som overlapper vår nedlastingsknappen og 52px i høyde og noen bredde større enn 100px.
Endre fargen på denne boksen for å "2B2B2B . "og flytte den under nedlastingen knappen i Layers Panel
Deretter legger du til en Stroke Layer Style til denne boksen med følgende innstillinger:
Nå kan vi legge den faktiske prisinformasjon. . For dette skal vi lage to separate tekstbokser siden innholdet innen krever forskjellig styling
For første tekstboksen, legg til litt tekst (jeg brukte "bare") og gjelder følgende innstillinger tegn: < .no>
Font Familie: Helvetica Neue
Størrelse: 19 px
Stil: Fet
Anti-aliasing: Crisp
Color : #FFFFFF
For den andre tekstboksen, legge til prisen (jeg brukte "$ 1,99") og bruke følgende innstillinger karakter:
Trinn 9
< p> Flytte til den nederste delen av siden vår, må vi opprette noen separasjon. For dette vil vi bruke de to-linje teknikk vi brukt tidligere på nedlastingsknappen for å gi separatoren en "innfelt" utseende.
Velg linjen Tool (U) og mens du holder Skift-tasten, tegne en 1px linje fra venstre guide til høyre guide, deretter endre linjens farge til "000000" (svart)
Endre tettheten av denne linjen til 80% og duplisere den ved å velge Layer >.; Duplicate Layer ... og klikk på OK. Endre fargen på denne duplisert linjen til "FFFFFF" (hvit) og endre det er opacity til 10%. Deretter flytter dupliseres linje 1px ned slik at det er under den svarte linjen.
Step 10
I avsnittet under streken separator vi nettopp har opprettet, vi kommer til å være å legge to kolonner, for skjermbilder og en liste over funksjoner
Fra og med skjermbilder, begynner ved å importere din første skjermbilde ved å velge Fil >.; Plass. Velg vår skjermbilde fra filbehandleren og klikk Place. Endre størrelsen på screenshot til 80% bredde og høyde, og deretter flytte skjermbildet nær venstre guide og klikk Enter.
Velg laget i lagpanelet, og klikk på "Legg Mask" knappen to ganger for å legge til en Vector Mask.
Nå velger Avrundet rektangel Tool (U) og endre avstanden til 6PX og lage et rektangel over skjermbilde med størrelsen på 175x120px.
Til slutt, vi kommer til å legge en Stroke Layer stil med følgende innstillinger.
Gjenta trinnene over for alle skjermbilder og gi dem 35px plass mellom hverandre
Step 11
Å skille våre skjermbilder fra de funksjoner, tegne en 1px linje fra toppen av den første skjermbilde til bunnen av siste skjermbilde som er rundt 55 piksler fra bildene.
Endre linjens farge til "FFFFFF" (hvit) og sette det opacity til 5%.
Step 12
La oss legge til en tittel som vil beskrive våre funksjoner (jeg brukte "Hefte funksjoner"). Plassere tekst x 55 piksler fra venstre skillelinjen og bruke følgende tegn innstillinger:
Font Familie: Helvetica Neue
Størrelse: 24 px
Stil: Vanlig
Tracking: -10
Anti-aliasing: Crisp
Farge: #FFFFFF
Nå la oss lage vår liste over funksjoner og plassere den under tittelen. Opprett en tekstboks og legge til fem eller seks linjer av funksjoner og gi dem følgende tegn innstillinger:
Font Familie: Helvetica Neue
Størrelse: 15 px
Stil: Regular
Ledende: 28 px
Tracking: -10
Anti-aliasing: Sharp
Farge: # 8d8c90
Gjenta trinnene over for å legge til app krav.
Step 13
For å gjøre vår liste over funksjoner skiller seg ut, la oss lage noen enkle, tilpassede kuler. Anmeldelser
Start ved å flytte listen over funksjoner tekstboksen 25px til høyre.
Nå velger Ellipse Tool (U) og lage en sirkel som er 9px i diameter til venstre for den første funksjonen. Endre sirkelens farge til "bce086"
Legg følgende Layer Style til sirkelen.
Step 14
Nå må vi duplisere våre kuler og justere dem til hver funksjon. Start med å duplisere sirkelen lag ved å velge lag deretter klikke Layer > Duplicate Layer ...
Deretter flytter dupliserte laget ned 28px (mengden Ledende vi brukt til funksjonen listen). Gjenta trinnene over tre ganger.
Step 15
Flytte til footer del av vår side, vil vi nok en gang bruke de to-linje teknikk vi brukt tidligere i trinn 9 for å legge noen separasjon.
Step 16
Nå kan vi legge til noen nyttige linker til vår bunntekstområdet. Først må vi lage fire tekstbokser, side-by-side, som vil holde våre linker.
Start med å lage en tekstboks som er rundt 160x40px. Legg til litt tekst til det og gjenta 3 ganger. Her er noen eksempler på tekst du kan bruke:
Boks 1: Følgmycompany på Twitter for nyheter og oppdateringer
Box. 2: For hjelp & støtte hodet til vår Support område
Box. 3: Last ned vår presse og media kit
Box 4:.. Copyright 2010 My Company, LLC
Bruk følgende for tegn innstillinger:
Font Familie: Helvetica Neue
Størrelse: 12 px
Stil: Vanlig
Ledende: 20 px
Anti-aliasing: Sharp
Farge: # 5555552
Som du kanskje legge merke til våre boksene er ujevn og ikke riktig justert, ikke bekymre deg, vil vi skal fikse dette i neste trinn.
Step 17
For å løse våre innretting problemer, begynner ved å plassere de fire tekstboksene vi har laget over til en mappe og gi den navnet " bunntekst ".
Først plasserer den første tekstboksen x 55 piksler fra venstre guiden og den siste tekstboksen berører høyre guide.
Nå velger de fire tekstlag i mappen bunnteksten og ta tak i Move Tool (V). Klikk på Align vertikale sentre knappen og deretter distribuere horisontal sentre knappen fra Move verktøylinjen.
Step 18
Nå kan vi legge til noen tilpassede ikoner for å fremheve våre linker.
Velg Ellipse Tool (U) og lage en sirkel som er 36px i diameter ved siden av vår første tekstboksen. Endre fargen på denne sirkelen for å "FFFFFF" (hvit)
Nå velger Layer >.; Raste > Laget.
Neste er å legge til vår ikonet til denne sirkelen. For det første ikonet, jeg bruker Twitter "t" som jeg har lastet ned gratis her
Når lastet ned, velger du Fil >.; Plassere i photoshop for å importere ikonet inn i vårt dokument. Når importert, endre størrelse på ikonet til 28% bredde og høyde, plassere den over vår sirkel, klikk deretter på enter.
Deretter høyreklikker du på miniatyrbildet av Twitter-ikonet i Lag-panelet, og klikk på Velg piksler.
Nå velger sirkelen laget i Layers Panel velg Rediger > Clear.
Slett importert Twitter ikon ved å velge den i Lag-panelet og klikk eller dra den til papirkurven.
Til slutt senke opacity på sirkelen lag 15%.
Trinn 19
For resten av ikonene vist ovenfor, gjentar du fremgangsmåten i trinn 18 ved å bruke andre ikoner eller med tilpassede former i photoshop.
Trinn 20
For å legge til en finishen til våre footer lenker, lar gi dem en hit av farge for å hjelpe dem skiller seg ut.
Bruke Horisontal Text Tool (T) fremheve en del av teksten i hver tekstboks og endre det er fargen til "83b546".
Konklusjon
Det er alt! Jeg håper du har hatt glede av denne opplæringen, og har funnet noen nyttige teknikker som du kan tilpasse /gjelder for din neste design. Anmeldelser