Share
Photoshop CS6 este o aplicație mult mai puternică de editare a vectorilor decât predecesorii săi. În acest tutorial, vă vom arăta cum să utilizați aceste noi caracteristici pentru a crea o interfață de aplicație iPhone pentru muzică, atât în rezoluția iPhone originală, cât și în retină fără a trebui să repetați același proces pentru ambele modele. Să începem!
Următoarele bunuri au fost utilizate în timpul producerii acestui tutorial.
Creați un fișier nou. Setați Lățimea la 320px și Înălțimea la 480px.
În acest pas vom crea fundalul. Există o nouă modalitate mai ușoară de a crea forme vectoriale în Photoshop CS6 și vom folosi această metodă prin intermediul întregului tutorial.
Creați un grup nou și denumiți-l "Background". Selectați instrumentul Rectangle (R) și în bara de opțiuni setați modul Tool pentru a forma, apoi faceți clic pe butonul de lângă acesta pentru a alege tipul de umplere a formei. Din lista de tipuri de umplere selectați butonul Gradient. Setați toate valorile la fel ca valorile evidențiate în imaginea de mai jos. Utilizați culorile # 3F4042 și # 303133 pentru gradient.
Faceți clic oriunde pe panza. Atunci când fereastra Create Rectangle se deschide, faceți clic pe OK și asigurați-vă că dimensiunile sunt setate la 700x700px. Denumiți stratul nou creat "Fundal".
Apăsați Cmd / Ctrl + A pentru a selecta întreaga pânză, selectați Instrumentul de mutare (V) și apoi în bara de opțiuni, faceți clic pe Centrul alinierii orizontale și Aliniați margini inferioare Butoane.
Faceți dublu clic pe miniatură de strat de pe stratul "Fundal" și asigurați-vă că este bifată caseta de selectare Dither. În acest fel veți obține un gradient neted fără bandaj.
Deschideți statusbar.psd în Photoshop și importați grupul Bară de stare în PSD-ul dvs. de lucru. Utilizați metoda menționată mai sus pentru a alinia grupul "Bară de stare" - Apăsați Cmd / Ctrl + A pentru a selecta întreaga pânză și în timp ce utilizați Instrumentul de mutare (V), faceți clic pe butoanele Align Center Horizontal and Align Top Edges.
Creați un grup nou sub grupul "Bară de stare" și denumiți-l "Bară de navigare". Selectați Instrumentul rotunjit dreptunghi (U) și setați proprietățile după cum se arată în imaginea de mai jos. Utilizați # 5F8F1D și # 99B83D pentru gradient. Dați clic pe oriunde pe panza și faceți clic pe OK când fereastra Creare dreptunghi rotund apare. Denumiți stratul nou creat "Nav Bg".
Aliniați stratul pe orizontală spre centru și vertical, chiar sub bara de stare, după cum se arată mai jos.
Selectați instrumentul Rectangle (U) și trageți o formă dreptunghiulară similară cu cea prezentată mai jos, dar asigurați-vă că această formă acoperă doar partea de jos a stratului "Nav Bg". Am folosit opțiunea Fără culoare pentru tipul de umplere a formei.
Utilizând instrumentul de selecție a căilor (A), selectați forma nou creată. Apăsați Cmd / Ctrl + C pentru a copia forma în clipboard. Acum, selectați stratul "Nav Bg" din panoul Straturi și apăsați Cmd / Ctrl + V. Acum, forma este lipită pe stratul "Nav Bg".
Cu instrumentul de selectare a căii (A) încă activat, faceți clic pe butonul Operațiuni de cale din bara de opțiuni și apoi selectați Scădere în față a formei.
Faceți clic din nou pe butonul Operații cale și apoi selectați Componente fuzionare.
Utilizând Instrumentul de selectare directă (A), selectați cele două puncte de fund și deplasați-le până când înălțimea formei este de 43px.
Aplicați următorul stil pentru stratul "Nav Bg":
Utilizând instrumentul Rounded Rectangle (U), desenați o formă cu proprietățile prezentate mai jos. Utilizați culoarea solidă pentru tipul de umplere a formei. Denumiți stratul nou creat "Setări Bg".
Aplicați următorul stil:
Deplasați "Setări Bg" astfel încât să fie aliniat vertical cu centrul "Nav Bg" și orizontal 6px de la marginea dreaptă a pânzei.
Deschideți iconițele.psd și mutați layerul "Setări" în PSD. Aliniați pictograma orizontal și vertical în centrul "Setări Bg".
Aplicați următorul stil:
Utilizând instrumentul Rounded Rectangle (U), desenați o formă cu proprietățile prezentate mai jos. Utilizați culoarea solidă pentru tipul de umplere a formei. Denumiți stratul nou creat "Back Bg".
Utilizând instrumentul Add Anchor Point, adăugați un punct de ancorare în partea stângă a dreptunghiului și 14px sub marginea superioară.
Cu ajutorul instrumentului Convert Point faceți clic pe același punct de ancorare.
Acum, selectați Instrumentul de selecție directă (A) și mutați punctul 10px spre stânga.
Cu instrumentul de selectare directă (A) încă selectați cele două puncte de ancorare care sunt evidențiate în imaginea de mai jos și deplasați-le cu 1px spre stânga. Apoi selectați instrumentul Convert Point și faceți clic pe fiecare din cele două puncte de ancorare.
Aliniați forma pe verticală în centrul "Nav Bg" și pe orizontală 6px din marginea din stânga a pânzei.
Acum, când am terminat cu desenul formei, putem adăuga un stil la ea. Faceți clic dreapta pe layerul "Setări Bg" și selectați Copy Layer Style, apoi faceți clic dreapta pe layerul "Back Bg" și selectați Paste Layer Style.
Adăugați textul butonului utilizând parametrii din imaginea de mai jos. Am folosit fontul Helvetica Neue. Aliniați textul în centrul formei și copiați stilul stratului din stratul "Setări".
Adăugați textul titlului folosind parametrii din imaginea de mai jos și aliniați-l la centrul barei de navigare.
Creați un grup nou sub grupul "Bară de navigare" și denumiți-o "Poziție". Selectați Instrumentul Rectangle (U) și setați proprietățile așa cum se arată în imaginea de mai jos, apoi faceți clic pe undeva pe pânză. Utilizați # 2E2F30 și # 494A4C pentru gradient. Denumiți stratul "Poziție Bg".
Plasați forma sub bara de navigare, dar asigurați-vă că există un decalaj între pixeli. Aliniați forma orizontală la centrul panzei.
Aplicați următorul stil pentru stratul de formă:
Selectați Instrumentul rotunjit dreptunghi (U) și setați proprietățile așa cum se arată în imaginea de mai jos, apoi faceți clic pe undeva pe pânză. Setați Radiusul la o valoare mai mare. Am folosit 50 pixeli.
Denumiți stratul "Poziție gol" și aliniați-l, atât pe orizontală cât și pe verticală, în centrul stratului "Poziție Bg".
Aplicați următorul stil:
Selectați Instrumentul rotunjit dreptunghi (U) și setați proprietățile așa cum se arată în imaginea de mai jos, apoi faceți clic pe undeva pe pânză. Utilizați # 85AD2A, # A0D028 și # B6D028 pentru gradient. Din nou, setați Radiusul la o valoare mai mare. Denumiți acest strat "Poziție completă".
Aliniați forma așa cum se arată în imaginea de mai jos, dar asigurați-vă că există un spațiu de două pixeli pe toate laturile între formă și stratul "Poziție gol".
Aplicați următorul stil pentru stratul de formă:
Selectați instrumentul Ellipse (U) și setați proprietățile așa cum se arată în imaginea de mai jos, apoi faceți clic pe undeva pe pânză. Utilizați # 444547 și # 5C5E61 pentru gradient. Denumiți acest strat "Manipulați".
Aliniați această formă astfel încât să acopere marginea dreaptă a stratului "Position Full".
Aplicați următorul stil:
Selectați din nou instrumentul Ellipse (U) și setați proprietățile așa cum se arată în imaginea de mai jos, apoi faceți clic pe undeva pe pânză. Utilizați # 636669 și # 38393B pentru gradient. Denumiți acest strat "Manipulați cercul".
Aliniați forma la centrul stratului "Maner".
Adăugați text pentru timpul. Utilizați Helvetica Neue, Bold. Dimensiunea este 10pt și culoarea # B2B2B2. Aliniați textul după cum se arată în imaginea de mai jos.
Creați un grup nou și numiți-l "Comenzi de redare". Utilizând instrumentul Ellipse (U) trageți un cerc cu dimensiunile de 50x50 px. Nu acordați atenție celorlalți parametri. Denumiți noul layer "Play Bg."
Extindeți grupul "Poziție", faceți clic dreapta pe stratul "Manipulați" și selectați Copiere atribute forme din meniu.
Reveniți la grupul "Playback Controls", faceți clic dreapta pe layerul "Play Bg" și selectați Paste Shape Attributes din meniu. Aceasta este o caracteristică nouă în Photoshop CS6. În acest fel, în loc să setăm toate atributele pentru tipul de umplere a formei, cum ar fi culorile gradientului, unghiul etc., copiem acele atribute din stratul "Handle", deoarece folosim aceleași valori pentru stratul nou creat.
Aliniați stratul pe orizontală spre centrul pânzei și vertical 20px sub "Position Bg".
Aplicați următorul stil:
Faceți clic dreapta pe stratul "Play Bg" și selectați Duplicate Layer. Denumiți noul strat "Fast Backward Bg."
Utilizând instrumentul de selecție a traseului (A), faceți clic pe stratul "Fast Backward Bg" și modificați dimensiunile din bara de opțiuni la 34x34px.
Aliniați stratul vertical în centrul "Play Bg" și în orizontală 8px spre stânga.
Duplicați "Fast Backward Bg" și denumiți noul strat "Fast Forward Bg." Aliniați stratul la fel ca cel precedent, dar de data aceasta pe partea dreaptă.
Creați o nouă formă de cerc cu parametrii din imaginea de mai jos. Utilizați # 46484A și # 2C2D2E pentru gradient. Asigurați-vă că stratul nou creat este sub toate celelalte straturi din grupul "Controlul redării".
Denumiți stratul "Playback Bg" și aliniați-l atât pe orizontală cât și pe verticală în centrul "Play Bg"
Duplicați "Playback Bg" și reduceți dimensiunea la 48x48px, utilizând metoda folosită la Pasul 12. Aliniați stratul în centrul "Fast Backward Bg".
Acum duplicați stratul din nou și aliniați-l spre centrul "Fast Forward Bg".
Importați straturile "Fast Backward", "Play" și "Fast Forward" de la icons.psd. Aliniați pictogramele după cum se arată în imaginea de mai jos.
Selectați cele trei straturi de pictograme prin menținerea Cmd / Ctrl pe tastatură și făcând clic pe fiecare strat corespunzător. Setați opacitatea la 85%.
Importați straturile "Speaker" și "Repeat" din icons.psd. Aliniați pictogramele după cum se arată mai jos.
Icoanele importate sunt pline de culoare solidă, dar le vom aplica un gradient. Utilizând instrumentul de selecție a traseului (A), selectați stratul "Difuzor" și setați parametrii din imaginea de mai jos. Utilizați culorile # 6B6C70 și # 797B80 pentru gradient.
Copiați atributele de pe pictograma difuzor cu opțiunea Copiere forme atribute și lipiți-le în pictograma repetare.
Aplicați următorul stil de stil la difuzor și repetați pictogramele:
În acest pas vom plasa albumele în designul nostru. După import, le vom converti la obiecte inteligente și vom reduce dimensiunea obiectelor inteligente cu 50%. Facem acest lucru deoarece în pasul final tutorial fișierul va fi redimensionat la rezoluția retinei. În acest fel, nu vom pierde calitatea imaginilor raster după redimensionare la retină.
Deschide albumcover-02.jpg și importați imaginea în PSD.
Conversia stratului la obiect inteligent, accesând Layer> Smart Objects> Convert to Object Smart. Apăsați Cmd / Ctrl + T de pe tastatură pentru a transforma stratul. Reduceți dimensiunea la 50%. Denumiți acest strat "Centrul de acoperire a albumelor".
Aliniați stratul pe orizontală spre centrul pânzei și vertical 20px sub stratul "Play Bg".
Utilizând instrumentul Rounded Rectangle (U) trageți o formă cu parametrii prezentați mai jos. Setați dimensiunea la 180x180px. Nu utilizați culoarea pentru tipul de umplere a formei și setați raza la 3 pixeli.
Aliniați forma exact pe partea superioară a imaginii copertei albumului.
Aplicați acum forma pe imaginea de pe albumul de album prin glisarea cursorului mouse-ului din miniatură a stratului dreptunghi rotunjit în miniatură a stratului "Album Cover Center", ținând în același timp tastele Cmd / Ctrl + Alt de pe tastatură. După ce terminați copierea, ștergeți stratul cu dreptunghi rotunjit, deoarece nu mai avem nevoie de acesta.
Deschide albumcover-01.jpg și importați imaginea în PSD, convertiți-o în obiect inteligent și redimensionați la 50%. Aliniați capacul vertical în centrul stratului "Album Cover Center" și în orizontală 40px spre stânga. Denumiți layerul "Cover Cover Album".
Utilizând instrumentul Rounded Rectangle (U) trageți o formă cu parametrii prezentați mai jos. Acest timp a setat dimensiunea la 160x160px. Nu utilizați culoarea pentru tipul de umplere a formei și setați raza la 3 pixeli.
Copiați forma dreptunghiului rotunjit în stratul "Album Cover Left" utilizând aceeași metodă pentru capacul central. După ce ați terminat, ștergeți stratul cu dreptunghiul rotunjit.
Deschide albumul-03.jpg și îl importă în PSD-ul tău. Repetați aceeași procedură pe care am folosit-o pentru capacul din stânga, dar în acest moment aliniați imaginea pe partea dreaptă, după cum se arată mai jos.
Aplicați următorul stil pentru stratul central:
Copiați stilul stratului de la capacul central și lipiți-l pe celelalte două capace. Acum, selectați atât straturile de acoperire din stânga, cât și din dreapta și setați funcția Umplere la 50%.
Introduceți un text pentru titlul melodiei de redare. Plasați-l cu câțiva pixeli sub capacul central.
Introduceți un alt rând de text pentru autorul piesei de redare. Aliniați ambele linii la centru.
Utilizând instrumentul Rectangle (U) trageți o formă cu parametrii prezentați mai jos. Utilizați # 292A2B și # 38393B pentru gradient.
Aliniați forma în colțul din stânga jos al pânzei.
Cu ajutorul instrumentului Adăugare punct de ancorare adăugați două puncte de ancorare și setați distanțele așa cum se arată în imagine.
Selectați cele două puncte de ancorare care sunt evidențiate pe imagine și deplasați-le cu 6px în sus.
Folosind Instrumentul de selecție directă (A) trageți liniile de direcție astfel încât să pară asemănătoare cu cele care sunt previzualizate mai jos.
În acest pas vom finaliza fundul barei de tabă duplicând și mirroring calea pe care am creat-o în pasul anterior.
Duplicați stratul și răsturnați-l orizontal, accesând Edit> Cale de transformare> Flip orizontal.
Mutați stratul duplicat exact în colțul din dreapta jos al pânzei. O notă importantă: Asigurați-vă că nu există nici un spațiu între cele două forme.
Acum, selectați ambele straturi, după cum se arată în imagine, dați clic dreapta și selectați Merge Shapes.
Aceasta ar trebui să fie forma rezultată. După cum puteți vedea, există o linie verticală în mijlocul formei. Aceasta înseamnă că avem două forme într-un strat care nu sunt complet îmbinate.
Folosind Instrumentul de selecție a traseului (A) faceți clic pe stratul de formă, faceți clic pe butonul Operațiuni de cale din bara de opțiuni și selectați Componente fuzionare. Acum aveți cele două forme complet îmbinate. Denumiți acest strat "Tab Bara Bg".
Dacă selectăm selecția directă (A) vom observa că există câteva puncte de ancorare inutile care au fost create în timpul fuzionării formelor. Întotdeauna încercați să vă păstrați drumurile curate de puncte inutile.
Pentru a șterge aceste puncte de ancorare, selectați instrumentul Ștergeți punctul de ancorare și faceți clic pe cele două puncte de ancorare.
Aplicați următorul stil de strat la "Tab Bar Bg":
În acest pas vom crea ghiduri care ne vor ajuta să aliniem mai ușor pictogramele barei de tabul.
Folosind Instrumentul de marcaj dreptunghiular (M) faceți o selecție largă de 60px pornind din partea stângă a pânzei.
Trageți acum un ghidaj de la rigla stângă și plasați-l pe marginea din dreapta a selecției. Asigurați-vă că este activată opțiunea de conectare la ghidaje. Puteți găsi acest lucru accesând Vizualizați> Ghid de accesare> Ghiduri.
Repetați procedura precedentă pentru a plasa celelalte ghidaje. Setați distanțele așa cum se arată în imaginea de mai jos.
Trageți două ghidaje orizontale de la rigla de sus și setați distanțele așa cum se arată în imagine.
Glisați stratul "Acasă" din fișierul icons.psd.
Folosind Instrumentul de marcaj dreptunghiular (M) faceți o selecție care se fixează la ghidajele de mai jos.
Folosind Instrumentul de mutare (V), faceți clic pe butoanele Align Center Centers (Centrale verticale Aliniere) și Align Center Centers din bara de opțiuni.
Introduceți textul "Acasă" cu următorii parametri:
Aliniați textul vertical în apropierea ghidajului inferior și orizontal în centrul pictogramei.
Repetați Pasul 21 pentru celelalte pictograme și text (Favorite, Liste de redare și Căutare). Utilizați imaginea de mai jos pentru referință.
Utilizând instrumentul Rectangle (U) trageți o formă cu parametrii din imaginea de mai jos. Utilizați # 5F8F1D și # 99B83D pentru gradient.
Aliniați forma astfel încât marginea superioară atinge ghidajul orizontal superior și orizontal spre centrul barei de aripă. Denumiți stratul "Acum se joacă Bg".
Aplicați următorul stil:
Glisați stratul "Now Playing" din fișierul icons.psd și schimbați culoarea de umplere a stratului la # 000000.
Aplicați următorul stil:
Aliniați pictograma pe orizontală spre centrul "Now Playing Bg" și la câțiva pixeli vertical sub marginea superioară.
Introduceți textul "Now Playing" cu următorii parametri:
Aliniați textul din nou orizontal cu centrul butonului și cu câțiva pixeli vertical sub pictogramă. Copiați stilul stratului din pictograma Now Playing.
Am terminat cu crearea tuturor elementelor de design. Dar avem un pas final, care scade fișierul pentru retină.
Scalarea la rezoluția retinei este foarte ușoară și durează doar un pas. Accesați Imagine> Dimensiune imagine și setați valorile după cum se arată mai jos. Asigurați-vă că toți parametrii evidențiați sunt setați exact la fel ca în imagine.
Acesta ar trebui să fie rezultatul redimensionării imaginii la rezoluția retinei.
Bacsis:Încercați întotdeauna să desenați elementele din desenele dvs. cu forme vectoriale, așa cum am făcut în acest tutorial. Astfel, le puteți personaliza cu ușurință și nu veți pierde calitatea atunci când vă scalați la retină.
În acest tutorial, v-am arătat cum să creați o interfață de aplicație iPhone în Photoshop utilizând noile sale capabilități de editare vectoriale. În plus, am arătat modul în care puteți utiliza aceste tehnici pentru a crea o aplicație iPhone compatibilă cu dispozitivul original de rezoluție, precum și pentru omologul său de rezoluție a retinei.
Accentsconagua