Design en Slank, Mørk Mobile App Hjemmeside

I denne tutorial vil vi bruge Adobe Photoshop til at designe en slank web grænseflade, der kan bruges til enhver mobil app hjemmeside. Vi vil være der dækker en bred vifte af teknikker, herunder figurer, teksturer, masker, brugerdefinerede ikoner, typografi og meget mere, der kan nemt tilpasses og anvendes på din egen web design.

Om Dette Design

Denne tutorial er baseret på den mørke, rene webstedsdesign for folder, en iPhone app designet til Envato marketplace forlag. Eric Alli af Trilab Media hjalp design og kode site, så han vil være at gå os gennem trin for trin tutorial. Uanset om du ønsker at bruge et lignende design til dine egne projekter eller bare vil se hvordan det foregik, er der masser af fremragende tricks og teknikker i denne tutorial, som du vil være i stand til at samle op på. Nyd!

Trin 1

Lad os begynde med at oprette et nyt Photoshop dokument ved at vælge fil > New.

Sæt begge lærredet bredde og højde til 1100px, Opløsning til 72, og Baggrunden Indholdet til hvid.

Næste, skal vi oprette to guider, der vil fungere som beholder for vores side.

Vælg Visning > Nye Guide...

For den første guide, angive Retningen til Lodret og Holdning til 70 px.

For den anden guide, Vælg visning > nye Guide... igen og oprette en anden lodret guide med den holdning at 1030 px.

Vi skal nu have en skitserede plads, der er 960px i bredden for vores side.

Trin 2

Næste skridt er baggrunden. Vælg Maling Spand Værktøj (G) og sæt din Forgrunds Farve Farveprøven til "1e1e1e". Derefter, klik et vilkårligt sted på lærred til at anvende farven på vores baggrundslag.

Lad os også tilføje en smule af tekstur til vores baggrund ved at vælge Filter > støj > Tilføj Støj...

Fastsættes til 2,5 og klik på OK.

Trin 3

Næste vil vi skabe et spotlight, der vil hjælpe med at sætte fokus til det øverste område af vores side.

Vælg børste værktøj (B) og ændre Master Diameter til 400px og indstille hårdhed til 0%.

Opret et nyt lag ved at vælge Lag > New > Lag... og give det navnet på "Spotlight".

Ændre din Forgrunds Farve Farveprøven til "FFFFFF" (hvid) og oprette en cirkel i nærheden af toppen af lærredet ved hjælp af Penselværk tøjet.

At hjælpe blandingsolie søgelyset i baggrunden, kan tilføje nogle støj til spotlight lag ved at vælge Filter > Tilføj Støj...

Fastsættes til 20, kontrollere Monokromatisk og klik på OK.

For at udjævne vores spotlight, Vælg Filteret > Blur > Gaussian Blur...

Indstil Radius til 50,0 og klik på OK.

Endelig indstille Opacity på Spotlight lag til omkring 25%.

Trin 4

Dernæst vil vi tilføje vores telefon grafik. For denne tutorial vil jeg bruge iPhone grafikken fra fantastisk Vektor iPhone 4 PSD fra Psdtuts + som kan downloades gratis her. Også Husk, du kan bruge enhver telefon grafik, der passer til dine særlige behov (Android, Blackberry, osv...).

Når først downloadet, åbne PSD i Photoshop. Udvid mappen "Telefoner" i panelet Lag, højreklikke på mappen "FRONT" og vælg Dubler gruppe... Her, give gruppen et genkendeligt navn (jeg brugte "iPhone"), angive destinationen til "Folder" (eller hvad det er du navngivet din PSD til denne tutorial), og klik på OK. Når du er færdig, skal du lukke denne PSD.

Placere vores første iPhone rørende den venstre vejledning og omkring 100px fra toppen af lærredet.

Dette er også en god tid til at tilpasse screenshot inden for iPhone.

En nem måde at gøre dette er at udvide mappen "iPhone" i vores lagpanelet og derefter klikke på mappen  "SCREEN CONTENTS".  Nu skal du vælge Filen > sted, vælge dine screenshot fra browseren og derefter klikke på Plads.

Træk din placerede lag over iPhone og ændre størrelsen til at passe ind i skærmen. Når først færdig, klik på Enter for at gemme ændringerne.

Duplikere "iPhone" gruppen ved at vælge Lag > Dublet Gruppe... det navnet "iPhone 2" og klik på OK i dialogboksen.

Vælg Rediger > Omdanne > Skala og udvide den duplikerede iPhone til 107.0% bredde og højde. Placer denne iPhone omkring 50px fra toppen og 200px fra den venstre vejledning.

Gentag trinnet nævnt ovenfor for at erstatte skærmbillede i mappen "iPhone 2".

Trin 5

Prikken over i'et til vores iPhones er at skabe en refleksion af dem. Lad os starte ved at vælge både iPhone grupper ("iPhone" og "iPhone 2") så vælg Lag > Duplikere Lag... og klik OK. Vælg derefter Lag > Flet Lag.

Næste nødt vi til at vende vores iPhones op og ned. Vælg Rediger > Omdanne > Spejlvend Lodret, derefter placere den vendt lag direkte under den oprindelige iPhones.

Tilføj en Lag Maske ved at klikke på ikonet Lag Maske i Panelet Lag.

Vælg Gradient Tool (G) og vælge en sort til hvid farveprøve. Tegn en linje fra top til bund på vendt iPhones, der er omkring 50px i højden.

Endelig, sænke opaciteten på lag til 30%.

Trin 6

Næste er at tilføje vores app's vigtigste detaljer til højre for vores telefoner. Før vi begynder, lad os tilføje en anden guide til at holde tingene justeret. Vælg Visning > Nye Guide... Vælg "Lodret" til orientering og 550 px for position.

På omkring 100px fra toppen af vores lærred, vil vi tilføje i vores logo. Jeg bruger et logo jeg har tidligere lavet, kan du blot bruge teksten eller indsætte dit eget logo her.

Nedenstående logo, vil vi tilføje et afsnit med tekst til vores app's beskrivelse. Vælg vandret Type værktøj (T) og tegne et rektangel mellem center guide og den rigtige vejledning. Indstille karakter indstillingerne på følgende måde:

• Font Familie: Helvetica Neue
• Størrelse: 16 px
• Stil: Regelmæssig
• Førende: 26 px
• Sporing: -25
• Anti-aliasing: Sprød
• Farve: #FFFFFF

Trin 7

Næste vil vi oprette en knap for besøgende at købe vores app. Brug Afrundet Aektangel Tool (U), tegne en 240x75px rektangel med en 4px radius. Juster det så den venstre side af knappen rører center guide og det er 45px under teksten.

Nu vil vi anvende nogle lagtyper. Dobbelt-klik på til højre for laget i panelet Lag og Bruge den under billedet for reference.

At tilføje Apple ikonet, tegne en lille tekstboks inde knappen ved hjælp af horisontale Type værktøj (T), og derefter kopiere og indsætte dette symbol:  i den tekstboks og sæt tegnindstillinger som følger:

• Font Familie: Helvetica Neue
• Størrelse: 50 px
• Stil: Regelmæssig
• Anti-aliasing: Sprød
• Farve: #000000

Endelig ændre opacitet på dette lag til 30%.

Oprette en anden tekstboks til højre og tilføje 2 linjer af tekst (ex: "Download nu på den App Opmagasinere"). Anvende indstillingerne for følgende tegn:

• Font Familie: Helvetica Neue
• Størrelse: 11 px (første linje) 24 px (anden kø)
• Stil: Fed
• Førende: 26 px
• Sporing: -25
• Anti-aliasing: Sprød
• Farve: #FFFFFF

Tilføj en Lag type til denne tekst ved hjælp af følgende billede for reference:

Dernæst vil vi tilføje en separatorlinje til højre for den tekst, vi har netop tilføjet. Vælg den linje værktøjet (U) og mens du holder SKIFT tasten nede, trække en 1px linje fra toppen af knappen til bunden, så ændre linjens farve til "FFFFFF" (hvid).

Ændre opaciteten af denne linje til 15% og duplikere det ved at vælge Lag > dubletlaget... og klik OK. Ændre farven på denne duplikerede linje til #000000 (sort) og ændre det opacitet til 10%. Derefter, flytte den duplikerede linje 1px til venstre.

Det sidste element til at tilføje til denne knap er et ikon, der angiver download. Begynde ved at vælge Ellipse Tool (U) og skabe en cirkel der er 25px i diameter.

Tilføj derefter følgende Lag Typer:

Endelig, grab Custom Shape Tool (U) og vælge en pilefigur for (jeg bruger en standard form kaldet "Pil 9"). Oprette en lille pil 10px i bredde inde i cirklen og ændre farven til "FFFFFF" (hvid).

Trin 8

Nu 's for at skabe en lille boks for at vise vores app pris. Vælge afrundet rektangel Tool (U), indstille Radius til 4px og oprette et rektangel, der overlapper vores download knap og er 52px i højden og enhver større bredde og derefter 100px.

Ændre farven på denne boks til "2B2B2B" og flytte det nedenfor på download knappen i panelet Lag.

Næste, Tilføj et slagtilfælde Lag Type til denne boks med følgende indstillinger: 

Nu kan vi tilføje den faktiske prisoplysninger. Dette vil vi oprette to separate tekstbokse siden indholdet i kræver forskellige styling.

For den første tekstboks, tilføje nogle tekst (jeg brugte "Kun") og anvende indstillingerne for følgende tegn:

• Font Familie: Helvetica Neue
• Størrelse: 19 px
• Stil: Fed
• Anti-aliasing: Sprød
• Farve: #FFFFFF

Til den anden tekst, tilføje din pris (jeg brugte "$1,99") og anvende indstillingerne for følgende tegn:

Trin 9

Går videre til den nederste del af vores side, vi har brug at skabe nogle adskillelse. Til dette bruger vi to-line teknik vi anvendte tidligere på download knappen for at give separatoren en "indsatser" look.

Vælg den Linje Værktøjet (U) og mens du holder SKIFT tasten nede, trække en 1px linje fra den venstre vejledning til den rigtige vejledning, så ændre linjens farve til "000000" (sort).

Ændre opaciteten af denne linje til 80% og duplikere det ved at vælge Lag > Dublet Laget... og klik OK. Ændre farven på denne duplikerede linje til "FFFFFF" (hvid) og ændre det opacitet til 10%. Derefter, flytte duplikerede linje 1px, så det er under den sorte linie.

Trin 10

I afsnittet nedenfor linje separatoren vi lige har oprettet, vil vi tilføje to kolonner, screenshots og en liste af funktioner.

Startende med screenshots, begynder ved at importere din første skærmbillede ved at vælge Fil > Sted. Vælg vores screenshot fra Filbrowser og klik på Placer. Ændre størrelsen på skærmbilledet til 80% bredde og højde, derefter flytte skærmbilledet nær den venstre vejledning og klik Enter.

Marker lag i panelet Lag og klikke på knappen "Tilføj Maske" to gange for at tilføje en Vektor Maske.

Nu Vælg Afrundet Rektangel Tool (U) og ændre radius for 6px og skabe et rektangel over screenshot med størrelsen af 175x120px.

Endelig vil vi tilføje et slagtilfælde Layer Style med følgende indstillinger:

Gentag trinene ovenfor for alle dine screenshots og give dem 35px i afstand mellem hinanden.

Trin 11

For at adskille vores screenshots fra funktionerne, skal du tegne en 1px linje fra toppen af den første skærmbillede til bunden af det sidste skærmbillede, der er omkring 55px fra screenshots.

Ændre linjens farve til "FFFFFF" (hvid) og sætte sin opacitet til 5%.

Trin 12

Lad os tilføje en titel, der beskriver vores funktioner (jeg brugte "Folder Funktioner"). Placer tekst 55px fra venstre skillelinjen og bruge indstillingerne for følgende tegn:

• Font Familie: Helvetica Neue
• Størrelse: 24 px
• Stil: Regelmæssig
• Sporing: -10
• Anti-aliasing: Sprød
• Farve: #FFFFFF

Nu lad os skabe vores liste over funktioner og Placer det under titlen. Oprette en tekstboks og tilføje fem eller seks linjer af funktioner og give dem de følgende tegnindstillinger:

• Font Familie: Helvetica Neue
• Størrelse: 15 px
• Stil: Regelmæssig
• Førende: 28 px
• Sporing: -10
• Anti-aliasing: Skarp
• Farve: #8d8c90

Gentag trinene ovenfor for at tilføje app's krav.

Trin 13

For at gøre vores liste af funktioner skiller sig ud, lad os skabe nogle enkle, brugerdefinerede punkttegn.

Start ved at flytte listen over funktioner tekst boks 25px til højre.

Nu Vælg Ellipse Tool (U) og oprette en cirkel, der er 9px i diameter til venstre for den første funktion. Ændre den cirkel farve til "bce086".

Tilføj den følgende Lag Type til cirklen:

Trin 14

Nu skal vi kopiere vores kugler og justere dem til hver funktion. Start ved at dublere laget cirkel ved at markere lag og derefter klikke på Lag > Dubler Lag...

Næste, Flyt det duplikerede lag ned 28px (mængden af førende vi anvendes til funktionslisten). Gentag ovenstående trin tre gange.

Trin 15

Går videre til sidefod del af vores side, vi vil igen anvende to-line teknik anvendte vi tidligere i Trin 9 til at føje nogle adskillelse.

Trin 16

Nu kan vi tilføje nogle nyttige links til vores sidefodsområdet. Først skal vi oprette fire tekstbokse, side-by-side, der vil holde vores links.

Start med at oprette en tekstboks, der er omkring 160x40px. Tilføj noget tekst til det og Gentag 3 gange. Her er nogle eksempeltekst, kan du bruge:

• Boks 1: Følg @mycompany på Twitter for nyheder og opdateringer.
• Boks 2: For hjælp & støtte hovedet til vores Support område.
• Boks 3: Hent vores presse og kit.
• Rubrik 4: Copyright 2010 Min Company, LLC.

Brug følgende for tegnindstillinger:

• Font Familie: Helvetica Neue
• Størrelse: 12 px
• Stil: Regelmæssig
• Førende: 20 px
• Anti-aliasing: Skarp
• Farve: #5555552

Som du måske bemærke, vores kasser er ujævn og ikke justeret ordentligt, så fortvivl ikke, vi vil fastsætte dette i næste trin.

Trin 17

For at løse vores tilpasning spørgsmål, begynde ved at placere de fire tekstbokse vi har lavet ovenstående i en mappe og navngiv den "Sidefod".

Først, placere den første tekst boks 55px fra den venstre vejledning og den sidste tekstboks touch den rigtige vejledning.

Nu vælger fire tekstlag i mappen sidefod og fange den flytte værktøj (V). Klik på knappen Juster lodrette midtpunkter, derefter på fordel vandret Centre fra værktøjslinjen flytte.

Trin 18

Nu kan vi tilføje nogle brugerdefinerede ikoner for at fremhæve vores links.

Vælg Ellipse Tool (U) og oprette en cirkel, der er 36px i diameter ved siden af vores første tekstboks. Ændre farven på denne cirkel til "FFFFFF" (hvid).

Nu skal du vælge Lag > Rasterisere > Lag.

Næste op er at tilføje vores ikonet til denne cirkel. For det første ikon bruger jeg Twitter "t" som jeg har downloadet gratis her.

Når først downloadet, skal du vælge Filen > Sted i photoshop til at importere ikonet i vores dokument. Når indlæst, ændre størrelsen på ikonet for at 28% bredde og højde, Placer det over vores cirkel, så klik på enter.

Næste, skal du højreklikke på miniaturen af kvidre ikon i panelet Lag og klikke på Vælg Pixel.

Nu Vælg cirkel lag i panelet Lag og derefter vælge Rediger > Klar.

Slette den importerede Twitter ikon ved at vælge den i panelet Lag og klikke på eller trække det til ikonet Papirkurv.

Endelig, sænke opaciteten på laget cirkel til 15%.

Trin 19

For resten af ​​ikonerne vist ovenfor gentages trinene i trin 18 ved hjælp af andre ikoner eller med brugerdefinerede figurer i Photoshop.

Trin 20

For at tilføje en prikken over i'et til kan vores sidefodslinks give dem et hit af farve for at hjælpe dem med at skille sig ud.

Ved hjælp af vandret Tekst Værktøj (T) fremhæve en del af teksten i hver tekstboks og ændre dets farve til "83b546".

Konklusion

Det er alt! Jeg håber du har nydt denne tutorial og har fundet nogle nyttige teknikker, som du kan tilpasse / anvende på din næste design.