Accentsconagua

Creați un App App pentru cumpărături mobile în Photoshop

Design & Illustration
Share

În acest tutorial, vă voi arăta tehnicile folosite pentru a crea un design interfață modernă și plană (UI) pentru o aplicație iPad.

Tutorial Active

Pentru a finaliza tutorialul, veți avea nevoie de următoarele elemente și pluginuri. Simțiți-vă liber să găsiți fotografii și fonturi alternative.

  • GhidGuide Plugin pentru Photoshop
  • Set Mini Icoane
  • Pictograme adiționale
  • Pacifico Font
  • Avenir (Negru, Mediu, Roman)
  • Fotografie 01
  • Fotografie 02
  • Fotografie 03
  • Fotografie 04
  • Fotografie 05
  • Fotografie 06

1. Creați pagina de produse

Pasul 1

Creați un document nou (Fișier> Nou ... ) folosind setările de mai jos.


Pasul 2

Creați grila (Fereastră> Extensii> GhidGuide) utilizând setările de mai jos. Faceți clic pe purpuriu mare Butonul GG în mijloc pentru a activa ghidajele.



Acum creați câteva ghiduri suplimentare. Ștergeți toate măsurătorile din interiorul Ghidul paletei, cu excepția marjei de top pe care ar trebui să o schimbați 100px. apasă pe Butonul GG pentru a adăuga noul ghid.


Utilizarea Instrument de marcaj dreptunghiular, faceți o selecție între 20px si 100px ghidaje orizontale și modificați marginea superioară în Paleta GG la 10px și partea de jos pentru a 10px.



Pentru a finaliza configurarea rețelei, utilizați Instrument de marcaj dreptunghiular pentru a selecta totul sub 100px ghidaj orizontal și introduceți următoarele pentru margini, coloane și jgheaburi.



Acum ar trebui să aveți ceva de genul:


Pasul 3

  1. Creați un nou strat cu un # 5f666b completati. Acesta este stratul de fond. Sună-l bg.
  2. Folosește Instrumentul dreptunghiului pentru a crea o măsură de formă a dreptunghiului 257px x 1024px, cu # 292c2e completati. Denumiți stratul Nav bg. Toate obiectele de navigare vor merge aici.
  3. Folosește Instrumentul dreptunghiului pentru a crea o măsură de formă a dreptunghiului 768 x 100 pixeli cu #FFFFFF completati. Acesta va fi fundalul zonei superioare a barei. Denumiți acest strat Sus bg.

Pasul 4

  1. Deschide Pictograme adiționale (furnizate în materialele tutorial de mai sus) și trageți sau duplicați bara de stare strat pe pânză. Puneți-o înăuntru 20px margine.
  2. De la aceeași Pictograme adiționale PSD, selectați grupuri de icoane și trageți sau duplicați siglă grupați pe pânză.
  3. Apoi, pe logo bg layer, scrieți "Sticks & Stones" folosind Tip Tool, Fontul Pacifico, 20 pixeli, # 292c2e.

Pentru a adăuga o umbră de picătură în fundal, faceți clic dreapta pe Sus bg strat în Paleta straturilor și selectați Opțiuni amestecate în vârf. Selectați Umbra din meniul din stânga al ferestrei stilurilor de straturi, completați următoarele setări și dați clic pe O.K.



Pasul 5

Acum este momentul să adăugați pictogramele în documentul dvs..

  1. Vom începe cu pictograma de setări. Trageți sau duplicați setări de la Icoane suplimentare PSD pe pânză. Puneți-l lângă marginea dreaptă și centrată vertical între marginile de sus și de jos ale barei de sus.
  2. Trageți un nou ghid și puneți-l pe cealaltă parte a setări pictograma astfel încât să arate ca setări pictograma se află între marginea dreaptă și noul ghid. Trageți un alt ghid către setări icoană, dar puneți-o 20px la stânga, creând un 20px jgheab.
  3. Utilizarea Tip Tool introduceți "James" în Avenir Negru font, 14pt, # 6d767c, casete mari, și plasați-l lângă 20px jgheab.
  4. Deschide 50 Mini Icoane set (listate în activele tutorial) și trageți sau duplicați Utilizator strat pe documentul dvs. Pune-l 5px la stanga James. Îți poți folosi Paleta de informații pentru a vedea coordonatele exacte ale plasamentului.
  5. Repetați acest proces pentru Cart și inimă astfel încât rezultatul final să arate astfel:

Pasul 6

  1. Folosește Instrument rotunjit dreptunghi pentru a seta Raza de colț la 5px și de a crea un 230px x 30px forma cu a # 1c1f20 completati. Denumiți stratul căutare bg.
  2. Duplicați sau trageți Căutare pictogramă (de la 50 Mini Icoane) în documentul dvs..
  3. Adauga o Umbra la căutare bg strat prin intrarea în Opțiuni amestecate a stratului și copierea setărilor prezentate mai jos.


Pasul 7

  1. Creați un dreptunghi de măsurare 230px x 310px cu # 1c1f20 completati. Copiați stilul stratului căutare bg layer prin clic dreapta pe căutare bg în Paleta straturilor și selectarea Stilul stratului de copiere. Faceți clic dreapta pe A BĂRBAȚILOR fundal, apoi faceți clic pe Lipiți stilul stratului pentru a adăuga o umbră de picătură.
  2. Utilizarea Instrumentul Ellipse creeaza o 7x7 elipsă cu a # 88e2d2 completati.
  3. Utilizarea Tip Tool scrie A BĂRBAȚILOR în Avenir Roman, 14pt, #FFFFFF, Majuscule.

Pasul 8

  1. Utilizarea Instrumentul dreptunghiului crea 1x1px pătrat cu a # 464d51 completati. presa Shift-Option-comandă pentru a duplica pătratul în timp ce îl mutați cu 5px în jos. Repetați de 6 ori. Ar trebui să aveți o linie cu 8 puncte (pixeli) cu spații de 5px între fiecare punct. Selectați cele 8 straturi de formă, faceți clic dreapta și selectați Îmbinare forme pentru a îmbina toate formele într-un singur strat.
  2. Duplicat stratul și apăsați Comandă / Ctrl-T pentru a roti linia punctată 90 de grade astfel încât să devină orizontală. Alăturați-vă cele două linii punctate așa cum se arată în # 2 în imaginea de mai jos și contopi cele două forme.
  3. Duplicat forma de 7 ori și aliniați-o așa cum se arată în imaginea # 3. contopi formează într-un singur strat și o numesc linie punctata.

  1. Utilizarea Tip Tool, tip "Shorts, Tops, Sweaters, Coats, Pants, Swim, Accesorii" Într-o listă verticală. Du-te la tine Caractere Paletă și asigurați-vă că setările sunt setate imaginea de mai jos.
  2. Duplicați sau trageți pictograma de marcaj din Pictograme adiționale și puneți-l 5px la dreapta cuvântului Pulover.
  3. Combinați toate straturile într-un singur grup și denumiți-o A bărbaților.



Pasul 9

  1. Selectați A bărbaților Grup și presă Comandă / Ctrl-Shift-Option să îl duplicați în timp ce îl mutați simultan.
  2. Redenumiți grupul la Femei și Șterge stratul liniei punctate, marcajul de selectare și lista categoriilor verticale.
  3. Redenumiți mens bg strat la Womens bg. presa Comandă / Ctrl-T pentru a schimba înălțimea dreptunghiului la 54px.
  4. Dublu Faceți clic pe Elipsa 1 pentru a schimba culoarea de umplere la # 6d767c.
  5. Duplicați grupul Womens. Deplasați-o cu 15 pixeli față de grupul original al Femeilor și redenumiți totul Surf.
  6. Repetați pentru butonul Acasă.

Pasul 10

  1. Creați un dreptunghi 236x288 pixeli cu a #FFFFFF completati.
  2. Loc image01, după cum se arată mai jos (Fișier> Loc> ... ) în pânză.
  3. presa Opțiunea-comandă-G pentru a crea o mască de tăiere și a mări imaginea, astfel încât să pară aproximativ la fel ca în imaginea de mai jos. Combinați cele două straturi într-un singur grup și sunați-l produs bg..

  1. Duplicat produs bg grupați-l și denumiți-l pret bg.
  2. Redenumiți grupul pret bg și în interiorul grupului redenumiți produs bg strat la pret bg strat.
  3. presa Comandă / Ctrl-T pentru a muta partea de sus în jos la 70 de pixeli.
  4. Selectează image01 strat și a crea o blur de a merge la Filtru> Blur> Guassian Blur și setați raza la 20px așa cum se arată într-o imagine.

Dublu click image01 strat pentru a deschide Styles de strat dialog. aplica Suprapunere de culori așa cum se arată în imaginea de mai jos.


Adauga o Umbra la pret bg folosind setările de mai jos.


Pasul 11

  1. Creați o formă de dreptunghi 50x70px cu # 88e2d2 completati.
  2. Utilizarea Instrument de linie, setați greutatea liniei la 1px și trageți a 30px line - orizontal și vertical centrat în interiorul formei dreptunghiului, după cum se arată mai jos.
  3. Setările de tip pentru preț $ 36 ar trebui să fie stabilite după cum urmează. Avenir Negru, 14pt, # 292c2e; Pentru ceaiul simplu Avenir Black, 14, # 3b4244; și pentru mediul alb al tevilor Avenir, 12pt, # 6d767c.
  4. Duplicați Cart ic strat din bara de sus. Mutați stratul astfel încât acesta să stea în grupul de etichete Preț cu restul straturilor. Dublu click pe strat pentru a schimba umplerea la #FFFFFF și poziționați-o astfel încât rezultatul final să corespundă imaginii de mai jos.

Repetați ultimii doi pași pentru a crea restul imaginilor produsului. Combinați grupurile de imagini pentru produse și grupul nav într-un singur grup și denumiți-o Pagina produsului.


2. Creați suprapunerea cu setări

Pasul 1

  1. Creați un grup nou numit Setări și asigurați-vă că se află sub ea In capul barului Grup și de mai sus Pagina produsului grup.
  2. În interiorul grupului, creați un nou strat de fundal umplut cu #FFFFFF și numește-o Acoperire. Reduce Opacitate la 80%.
  3. Utilizarea Instrument rotunjit dreptunghi cu Raza de colț setat la 5px creați o formă de 450x300px cu un # f0eff5 completati.
  4. Adauga o Umbra în fundal utilizând următoarele setări.


Pasul 2

  1. Duplicat Setări bg strat și redenumiți-l Setări Sus bg. Faceți dublu clic pe strat pentru a modifica umplerea la #FFFFFF.
  2. Utilizarea Ștergeți instrumentul Anchor Point ștergeți cele două ancore inferioare din partea inferioară, după cum se arată mai jos.

Utilizarea Convertizor Punct Tool faceți clic pe cele două ancore de fund pentru a îndrepta linia de jos.


Utilizarea Convertizor Punct Tool selectați cele două ancore de fund, apăsați Comandă / Ctrl apoi faceți clic pe, Țineți și mutați linia de jos în partea de sus până când se află la 245px după cum se arată în imagine 03.


Adauga o Umbra stratul utilizând următoarele setări.



  1. Adauga o Setări poziționată pe orizontală și verticală în interiorul Setări Sus bg asigurându-vă că are setarea afișată mai jos.
  2. Apoi adauga Terminat și poziționați-o 20px în partea stângă a marginii drepte, centrată pe verticală cu setările afișate mai jos.

Pasul 3

  1. Creeaza o General Titlu în majuscule Helvetica Neue Regular, 14pt, # 4f4f4f și puneți-l 20px sub bara de setări.
  2. Utilizarea Instrument rotunjit dreptunghi cu raza de colț setată la 5px creeaza o 410x88px forma cu a #FFFFFF umpleți - poziționați-l cu 10px sub Titlul general și denumiți stratul Setări Secțiunea 01.
  3. Utilizarea Instrument de linie, setați greutatea liniei la 1px, și trageți a 390px linia. Îndreptați-o vertical în interiorul dreptunghiului, în timp ce aliniați-l la marginea dreaptă.
  4. Adăuga Despre și Versiune titluri în Helvetica Regular 18pt # 292c2e și poziționați-le după cum se arată mai jos.
  5. Adăuga 2.3 în Helvetica Regular 18pt # b4b4b4 și poziționați-o după cum se arată mai jos.
  6. Duplicați sau trageți chevron ic de la Icons.psd și poziționați-o după cum se arată mai jos.

Pasul 4

  1. Creeaza o Servicii de localizare rubrica cu majuscule Helvetica Neue Regular, 14pt, # 4f4f4f și plasați-l sub 20px sub aria de setare 01.
  2. Utilizarea Instrument rotunjit dreptunghi cu raza de colț setată la 5px creeaza o 410x44px forma cu a #FFFFFF completati. Pozitionati-l 10px de sub rubrica Servicii de localizare.
  3. Adăuga Detectați automat locația titlu în Helvetica Regular, 18pt, # 292c2e și poziția după cum se arată mai jos.
  4. Cu ajutorul instrumentului Rounded Rectangle, setați raza de colț la 60px și creați a 51x31px formă umplută cu # 88e2d2.
  5. Utilizarea Instrumentul Ellipse creați o elipsă de 30x30 pixeli cu un #FFFFFF completați și adăugați o Umbra cu setările afișate mai jos.


Suprapunerea de setări ar trebui să arate ca imaginea de mai jos.


3. Creați pagina de conectare

Pasul 1

  1. Opriți toate grupurile în afară pentru In capul barului faceți clic dreapta, duplicați și redenumiți grupul la Logare.
  2. În interiorul noului Logare grupul șterge Ca, Cumpărături, și Utilizator grupuri, precum și setări ic.
  3. Creați un strat nou numit bg sub Sus Bg Strat, cu a # 292c2e completati.
  4. Selectați Top Layer Bg, apăsați Command / Ctrl-T, clic și trageți dreptunghiul în jos până când este de 500px după cum se arată mai jos.
  5. Deschideți Logo Group și rearanja textul și imaginile în lateral astfel încât să se potrivească cu poziționarea logo-ului de mai jos.
  6. Combinați toate straturile - fără a include bg - într-un singur grup și apelați grupul Zona superioară.

Pasul 2

  1. presa Comanda-; pentru a vă activa ghizii.
  2. Utilizarea Instrument de linie cu 1px greutate a crea 236px line cu a # 3d4144 umple care se potrivește în interiorul coloanei de mijloc așa cum se arată mai jos. Pozitionati-l 150px din Sus bg și spune-i Linia câmpului de text.
  3. Creeaza o Nume de utilizator eticheta. Avenir Roman, 14pt # 88e2d2. Așezați-o pe ghidajul din stânga și 20px din linia câmpului Text.
  4. Selectează Nume de utilizator si Text câmpurile liniei de câmp, apăsați Shift - Opțiune, clic și deplasați în jos 48px pentru a crea un duplicat. Redenumiți duplicatul Nume utilizator Parola.
  5. Duplicat Parola text folosind tehnica de mai sus. Schimbă-l la Ați uitat parola? și culoarea la # 3d4144.

Pasul 3

  1. Utilizarea Instrumentul dreptunghiului creeaza o 236x50px forma cu a # 1c1f20 umpleți și apelați stratul Autentificare btn. Adăugați Conectați utilizând setarea de mai jos și poziționați vertical și orizontal textul din btn Login.
  2. Adauga o Umbra pentru a conecta stratul btn utilizând setările de mai jos.
  3. Combinați pe straturi într-un grup și apelați-l Cântați în btn.



Pasul 4

  1. Duplicați Conectare grupați-l și mutați-l jos 20px din original. Redenumiți-o Inscrie-te.
  2. Schimbați numele de nume btn de conectare la Înscrieți-vă btn, și faceți dublu clic pe strat pentru a schimba umplerea la # 88e2d2. Modificați textul pentru a citi Inscrie-te și culoarea textului la # 292c2e.
  3. Schimba Umbra setări la următoarele.



Ecranul dvs. de conectare ar trebui să arate astfel.


Concluzie

În acest tutorial, v-am arătat cum să creați 3 ecrane distincte pentru o aplicație iPad în Photoshop utilizând o combinație de plug-in-uri, linii de ghidare, forme vectoriale și stiluri de straturi. Când ați terminat, trebuie să aveți niște ecrane similare cu cele de mai jos. Sper că ați învățat ceva din acest tutorial și puteți folosi aceste tehnici pentru a crea interfețe mobile uimitoare.




Resurse suplimentare

Dacă sunteți interesat să obțineți ajutor cu privire la designul aplicației dvs., Envato Studio are o colecție minunată de servicii de proiectare a aplicațiilor pe care ați dori să o explorați.

Design & Illustration
×