Share
Designul aplicației mobile este unul dintre domeniile cu cea mai rapidă creștere în industria de design. În acest tutorial, vă vom arăta cum să proiectați o interfață de proiectare a aplicațiilor mobile utilizând multe dintre instrumentele din Adobe Photoshop. Vom începe prin a vă arăta cum să configurați o rețea și să creați un fundal simplu. Vă vom arăta apoi cum să profitați de caracteristica Snap-to-Grid și să folosiți forme de mascare de bază și vectori pentru a crea un set de icoane plate. În cele din urmă, vom folosi instrumentul Rectangle Tool, un text și tehnicile de bază de amestecare și aliniere pentru a crea componente suplimentare ale unei interfețe pentru aplicația meteo. Să începem!
Deschideți Photoshop și apăsați Comandă / Ctrl + N pentru a crea un nou document. Setați lățimea la 640 x și înălțimea la 1136px, introduceți restul atributelor afișate în următoarea imagine, apoi dați clic pe O.K. Activați grila (Afișați> Afișați> Grilă) și Snap to Grid (Vizualizare> Snap To> Grid). Pentru începători veți avea nevoie de o rețea în fiecare 5px, așa că pur și simplu du-te la Editați> Preferințe> Ghidaje, Grilă și felii și să se concentreze pe Grilă secțiune. introduce 5 în Grilă în fiecare și 1 în Subdiviziune cutie. De asemenea, setați culoarea grila la # a7a7a7. Odată ce ați setat toate aceste proprietăți faceți clic pe O.K. Nu te descuraja de grila asta. Acesta vă va ușura munca și vă puteți dezactiva / activa cu ușurință Comandă / Ctrl + " Comanda rapidă de la tastatură. De asemenea, trebuie să deschideți Info panou (Fereastră> Info) pentru o previzualizare live cu dimensiunea și poziția formelor dvs..
Concentrați-vă pe straturi panou (Fereastră> Straturi), tine Alt cheie de la tastatură și pur și simplu faceți dublu clic pe "fundal"layer pentru ao debloca Asigurați-vă că stratul dvs. rămâne selectat și treceți la Bara de instrumente Faceți clic pe culoarea din față și înlocuiți atributele de culoare existente cu #bebebe. Prindeți Instrumentul pentru găleți de vopsea și pur și simplu faceți clic în interiorul panza. În final lucrurile ar trebui să arate ca în imaginea următoare.
Setați culoarea primului la alb (#FFFFFF), alegeți Instrument rotunjit dreptunghi, focalizați pe bara de sus și setați Rază la 10px. Deplasați-vă la pânză și creați pur și simplu o 55 x 20 px rotunjit, Snap to Grid vă va ușura munca. Asigurați-vă că această formă albă rămâne selectată și treceți la Instrumentul Ellipse. Verifică Adăuga butonul din bara de sus, apoi adăugați pur și simplu a 30px cerc, așa cum se arată în a doua imagine. Asigurați-vă că forma vectorului dvs. alb rămâne în continuare selectată și folosiți Instrumentul Ellipse, adauga o 35px cerc așa cum se arată în imaginea a treia. În cele din urmă, utilizând același instrument, adăugați a 25px cerc așa cum se arată în a patra imagine. Deplasați-vă la straturi panou, faceți dublu clic pe forma vectorului făcută în acest pas și numiți pur și simplu "cloudyIcon".
Utilizarea Instrumentul Ellipse, creeaza o 25px cerc. Asigurați-vă că această nouă formă a vectorului rămâne selectată, continuați cu Instrumentul Ellipse, verifică Adăuga butonul din bara superioară și pur și simplu adăugați a 5px cerc, așa cum se arată în a doua imagine. Treceți la Instrumentul de selecție directă (sau Instrument de selecție a traseului), tine Alt cheie din tastatură, faceți clic în interiorul acelei minuscule, 5px cerc apoi glisați-l jos, așa cum se arată în a treia imagine.
Continuați să vă concentrați asupra formei de vector realizate în pasul anterior și adăugați șase copii mai multe 5px cerc, după cum se arată în imaginile următoare. După ce ați terminat, treceți la straturi panou și numele acestei noi forme vectoriale "sunnyIcon".
Reluați-vă "cloudyIcon"forma vectorului și duplicarea lui (Comandă / Ctrl + J). Selectați această copie și trageți-o cu câțiva pixeli spre dreapta pentru ao separa de forma originală. Continuați să vă concentrați asupra acestei copii și apucați-o Instrument rotunjit dreptunghi. Asigurați-vă că Rază este setat la 10px apoi creați o 5 x 15 pixeli formarea vectorului și plasați-o așa cum se arată în a doua imagine. Selectați acest nou dreptunghi rotunjit și apăsați Comandă / Ctrl + T (sau mergeți la Editare> Transformare liberă). Focalizați pe bara de sus, introduceți a 30.00 grade unghi apoi lovit introduce. În cele din urmă, lucrurile ar trebui să arate ca în a treia imagine. Asigurați-vă că Instrument rotunjit dreptunghi este încă activ, creați un 5 x 25 pixeli vector și așezați-o așa cum se arată în a patra imagine. Selectați acest nou dreptunghi rotunjit și rotiți-l 30.00 așa cum ați făcut cu cel precedent. Utilizarea Instrument rotunjit dreptunghi, creaza un nou 5 x 15 pixeli forma vectorială, plasați-o așa cum se arată în cea de-a șasea imagine, apoi rotiți-o 30.00 grade. Folosind același instrument, creați oa treia 5 x 15 pixeli forma vectorială, plasați-o după cum se arată în a opta imagine, apoi rotiți-o 30.00 grade. În final, tigrii ar trebui să arate ca în a noua imagine.
Concentrați-vă pe straturi , selectați din nou copia acelui "cloudyIcon"forma vectorului împreună cu cele patru rotite dreptunghi rotunjite și lovit Comandă / Ctrl + G la grup lor. Continuați să vă concentrați pe straturi panou și pur și simplu numele acestui nou grup "rainyIcon"
Reluați-vă "cloudyIcon"forma vectorului și duplicarea lui (Comandă / Ctrl + J). Selectați această copie și trageți-o cu câțiva pixeli spre dreapta pentru ao separa de forma originală. Continuați să vă concentrați asupra acestei copii și apucați-o Instrumentul de selecție directă. Selectați cele patru puncte de ancorare evidențiate în prima imagine, apoi apăsați butonul Șterge de pe tastatură. În cele din urmă lucrurile ar trebui să arate ca în a doua imagine. Resetați-vă "sunnyIcon"forma vectorului și duplicarea lui (Comandă / Ctrl + J). Selectați această copie și plasați-o după cum se arată în a treia imagine.
Continuați să vă concentrați asupra formelor de vector realizate în etapa anterioară. Deplasați-vă la straturi panou, țineți apăsată tasta Comandă / Ctrl cheia de la tastatură și pur și simplu faceți clic pe acea copie a "cloudyIcon"Forma vectorului pentru a încărca o selecție în jurul acestuia. Asigurați-vă că acesta rămâne activ și mergeți la Selectați> Modificare> Extindeți. Introduce "2"în fereastra nouă și faceți clic pe O.K. Deplasați-vă la straturi , selectați copia documentului "sunnyIcon"forma vectorială, țineți apăsată tasta Alt cheia de la tastatură și pur și simplu faceți clic pe Adăugați masca de strat buton. În cele din urmă, soarele mascat ar trebui să arate ca în a treia imagine. Lovit Comandă / Ctrl + D pentru a scăpa de această selecție, treceți la straturi panou, selectați forma vectorială care formează această nouă pictogramă și grup lor (Comandă / Ctrl + G). Continuați să vă concentrați pe straturi panou și numele acestui nou grup "mostlyCloudyIcon".
Reluați-vă "cloudyIcon"forma vectorului și duplicarea lui (Comandă / Ctrl + J). Selectați această copie și trageți-o cu câțiva pixeli spre stânga pentru al separa de forma originală. Asigurați-vă că această nouă formă de vector este selectată și lovită Comandă / Ctrl + T (sau mergeți la Editare> Transformare liberă). Concentrați-vă pe bara de sus, bifați Raportul de aspect Mentain buton, introduceți 50.00% în caseta de lățime (sau înălțime), apoi apăsați introduce. Resetați-vă "sunnyIcon"forma vectorului și duplicarea lui (Comandă / Ctrl + J). Selectați această copie și plasați-o după cum se arată în a treia imagine.
Continuați să vă concentrați asupra formelor de vector realizate în etapa anterioară. Deplasați-vă la straturi panou și încărcați o selecție simplă în jurul acelui nor mic. Asigurați-vă că acesta rămâne activ și mergeți la Selectați> Modificare> Extindeți. Introduce "2"în fereastra nouă și faceți clic pe O.K. Deplasați-vă la straturi panou, reselectați copia acelui "sunnyIcon"forma vectorială, țineți apăsată tasta Alt cheia de la tastatură și pur și simplu faceți clic pe Adăugați masca de strat buton. În cele din urmă, soarele mascat ar trebui să arate ca în a treia imagine. Scapa de această selecție (Comandă / Ctrl + D), treceți la straturi panou, selectați forma vectorială care formează această nouă pictogramă și grup lor (Comandă / Ctrl + G). Continuați să vă concentrați pe straturi panou și numele acestui nou grup "mostlySunnyIcon".
Pentru pașii următori veți avea nevoie de o rețea în fiecare 10px, așa că pur și simplu du-te la Editați> Preferințe> Ghidaje, Grilă și felii și intră 10 în Grilă în fiecare cutie. Setați culoarea primului la # 00aeef, alegeți Instrumentul dreptunghiului, creeaza o 640 x 100 pixeli formarea vectorului și plasați-o exact așa cum se arată în imaginea următoare. Rețeaua și accesul la rețea ar trebui să vă ușureze munca.
Setați culoarea primului la # FF0000, alegeți Instrumentul dreptunghiului, creaza un 80px pătrați și plasați-o exact așa cum se arată în imaginea de mai jos.
Concentrați-vă pe straturi și selectați dreptunghiul albastru și pătratul roșu. Mutați-vă în pânză, apucați-o Mutați instrumentul (V), tine Alt și Schimb chei de la tastatură, apoi pur și simplu faceți clic și trageți-vă vectori selectate forme 100px sus. Reveniți la straturi panou, focalizați pe copia acelui dreptunghi albastru și pur și simplu înlocuiți albastrul cu # 8dc63f. În final lucrurile ar trebui să arate ca în imaginea următoare.
Înmulțiți aceste forme de vector albastru, verde și roșu și împrăștiați copii după cum se arată în imaginea următoare. Profitați din plin de Fixat la retea caracteristică și asigurați-vă că evitați suprapunerile sau lacunele.
Concentrați-vă pe partea de sus, pătrat roșu. Selectați "mostlySunnyIcon"grupați-o și plasați-o aproximativ așa cum se arată în prima imagine straturi panou, încărcați o selecție în jurul acelui pătrat roșu și asigurați-vă că "mostlySunnyIcon"grupul este încă selectat Mutați instrumentul (V), focalizați pe bara de sus și pur și simplu faceți clic pe Aliniați centrele verticale și Alinierea centrelor orizontale butoane. În cele din urmă,mostlySunnyIcon"grupurile ar trebui să fie plasate în centrul pătratului roșu așa cum se arată în a treia imagine. Nu uitați să scapați de acea selecție (Comandă / Ctrl + D).
Selectați restul pictogramelor unul câte unul și utilizați tehnicile menționate în etapa anterioară pentru a le alinia, după cum se arată în imaginea următoare.
Concentrați-vă pe straturi panou, selectați toate pătratele roșii și apăsați butonul Șterge cheie de pe tastatură pentru a le elimina. Apoi, trebuie să modificați culorile folosite pentru dreptunghiurile verzi și albastre. Practic, vom asocia o culoare cu fiecare pictogramă. Concentrați-vă pe dreptunghiul care se află în spatele "sunnyIcon"forma vectorului și înlocuiți culoarea existentă cu # ffbc53. Deplasați-vă la dreptunghiurile care se află în spatele dvs. "mostlySunnyIcon"grupați și înlocuiți culoarea existentă cu # ffda71. Continuați cu dreptunghiurile care se află în spatele "mostlyCloudyIcon"grupați și înlocuiți culorile existente cu # c9caa3. Deplasați-vă la dreptunghiul care se află în spatele "cloudyIcon"forma vectorului și înlocuiți culoarea existentă cu #bccccc. În cele din urmă, selectați dreptunghiul care se află în spatele "rainyIcon"grupați și înlocuiți culoarea existentă cu # a8b8b8.
Setați culoarea primului la negru (# 000000), alegeți Instrumentul dreptunghiului, creeaza o 110 x 700 pixeli formarea vectorului și plasați-o așa cum se arată în prima imagine. Asigurați-vă că acest dreptunghi negru rămâne selectat, focalizați pe straturi panou, și coborâți Opacitate la 3%.
Setați culoarea primului alb, alegeți Instrumentul dreptunghiului, creaza un nou 110 x 700 pixeli formarea vectorului și plasați-o așa cum se arată în prima imagine. Asigurați-vă că acest dreptunghi alb rămâne selectat, focalizați pe straturi panou, și coborâți Opacitate la 7%.
Pentru pașii următori veți avea nevoie de o rețea în fiecare 5px, așa că pur și simplu du-te la Editați> Preferințe> Ghidaje, Grilă și felii și intră 5 în Grilă în fiecare cutie. Focalizați pe partea stângă a dreptunghiului galben de sus și alegeți Instrument tip orizontal (T). Pur și simplu faceți clic pe panza dvs. și adăugați "marţi"bucată de text. Asigurați-vă că această nouă piesă de text rămâne selectată și deschideți Caracter panou (Fereastră> Caracter). Alegeți Calibri font, setați stilul la Îndrăzneţ dimensiunea la 35pt și culoarea albă. Reveniți la pânza dvs. și asigurați-vă că piesa dvs. de text este așezată așa cum se arată în prima imagine. Reveniți la straturi și dați dublu clic pe piesa de text pentru a deschide Stratul de stil fereastră. Verifică Umbra , introduceți proprietățile afișate în următoarea imagine, apoi faceți clic pe O.K. Continuați să vă concentrați pe straturi panou, faceți clic dreapta pe piesa dvs. de text și du-te la Stilul stratului de copiere. Vom folosi aceste atribute de stil pentru textul care va fi adăugat mai târziu.
Asigurați-vă că Instrument tip orizontal este încă activă, adăugați numele zilelor rămase așa cum se arată în imaginea de mai jos și utilizați același nume Caracter atribute. Asigurați-vă că aceste noi piese de text sunt selectate, se concentrează pe straturi panou, faceți clic dreapta pe unul dintre aceste texte și pur și simplu mergeți la Lipiți stilul stratului.
Asigurați-vă că Instrument tip orizontal este încă activ, adăugați valorile temperaturii după cum se arată în imaginea de mai jos și aplicați același lucru Caracter atributele folosite pentru denumirile zilelor. De asemenea, adăugați Stratul de stil atribute folosind același lucru Lipiți stilul stratului opțiune.
Asigurați-vă că Instrument tip orizontal este încă activă și adăugați "Bună"și "iată"bucăți de text așa cum se arată în următoarea imagine. Utilizați același font, stil și culoare, dar micșorați dimensiunea la 14pt. Selectați toate aceste bucăți de text și adăugați subtil Stratul de stil atributele folosind Lipiți stilul stratului opțiune.
Pentru pașii următori veți avea nevoie de o rețea în fiecare 1px, așa că pur și simplu du-te la Editați> Preferințe> Ghidaje, Grilă și felii și intră 1 în Grilă în fiecare cutie. Setați culoarea primului alb, alegeți Instrumentul Ellipse și de a crea un 20px cerc. Asigurați-vă că această nouă formă a vectorului rămâne selectată și treceți la Instrumentul dreptunghiului. Verifică Scădea butonul din bara superioară, apoi trageți pur și simplu a 10 x 7px dreptunghi, așa cum se arată în a doua imagine. Prindeți Ștergeți instrumentul Anchor Point și faceți clic pe punctul de ancorare evidențiat în cea de-a doua imagine pentru ao elimina cu ușurință. Alegeți Instrumentul de selecție directă, selectați punctul de ancorare evidențiat în a treia imagine și pur și simplu trageți-l 5px la dreapta. În cele din urmă, lucrurile ar trebui să arate ca în a patra imagine. Deplasați-vă la straturi , găsiți forma vectorului făcută în acest pas și denumiți-o "săgeată".
Reluați-vă "săgeată"forma vectorului, plasați-o după cum se arată în cele ce urmează, apoi se concentrează pe straturi panou. În primul rând, schimbați Mod de amestecare la Lumina slaba apoi coborâți Opacitate la 75%.
Multiplicați (Comandă / Ctrl + J) ta "săgeată"forma vectorului și împrăștiați copii după cum se arată în imaginea următoare.
Pentru pașii următori veți avea nevoie de o rețea în fiecare 10px, așa că pur și simplu du-te la Editați> Preferințe> Ghidaje, Grilă și felii și intră 10 în Grilă în fiecare cutie. Setați culoarea primului la # ffbc53, alegeți Instrumentul dreptunghiului, creeaza o 320 x 400 pixeli vector și așezați-o așa cum se arată în imaginea următoare.
Setați culoarea primului la # ffda71, alegeți Instrumentul dreptunghiului, creeaza o 320 x 100 pixeli vector și așezați-o așa cum se arată în imaginea următoare. Setați culoarea primului la # ffbc53, creați o secundă 320 x 100 pixeli vector și așezați-o așa cum se arată în imaginea următoare. Setați culoarea primului la # c9caa3, creați un al treilea 320 x 100 pixeli vector și așezați-o așa cum se arată în imaginea următoare. Setați culoarea primului la # a3d1ff, creați un al patrulea 320 x 100 pixeli vector și așezați-o așa cum se arată în imaginea următoare.
Concentrați-vă pe straturi și deschideți Stratul de stil fereastră pentru galben forma de vector realizată în etapa anterioară. Activați funcția Umbra interioara, introduceți proprietățile afișate în imaginea de mai jos și dați clic pe O.K. Concentrați-vă pe straturi panou, țineți apăsată tasta Alt cheia de la tastatură, faceți clic pe micul fx pictograma care este reprezentată de dreptunghiul dvs. galben, trageți-l doar în dreptunghiul khaki și eliberați butonul mouse-ului. Repetați această tehnică pentru dreptunghiul gri. În cele din urmă lucrurile ar trebui să arate ca în a doua imagine.
Pentru pașii următori veți avea nevoie de o rețea în fiecare 5px, așa că pur și simplu du-te la Editați> Preferințe> Ghidaje, Grilă și felii și intră 5 în Grilă în fiecare cutie. Utilizarea Instrument tip orizontal, adaugă "Dimineaţă","Dupa amiaza","Seară" și "Peste noapte"bucăți de text și plasați-le după cum se arată în imaginea următoare Calibri font, setați stilul la Îndrăzneţ, dimensiunea la 30pt și culoarea albă. Asigurați-vă că toate cele patru bucăți de text sunt selectate și mergeți la Lipiți stilul stratului.
Asigurați-vă că Instrument tip orizontal este încă activă, adăugați valorile temperaturii și aplicați același lucru Caracter atributele utilizate pentru text. Selectați toate aceste numere și mergeți la Lipiți stilul stratului.
Asigurați-vă că Instrument tip orizontal este încă activă și adăugați "Bună"și "iată"bucăți de text așa cum se arată în următoarea imagine. Utilizați același font, stil și culoare, dar micșorați dimensiunea la 14pt. Selectați toate aceste piese de text și mergeți la Lipiți stilul stratului.
Concentrați-vă pe straturi panou, reselectați "sunnyIcon"forma vectorului și duplicarea lui (Comandă / Ctrl + J). Selectați această copie, plasați-o după cum se arată în prima imagine și apăsați Comandă / Ctrl + T. Concentrați-vă pe bara de sus, bifați Raportul de aspect Mentain buton, introduceți 200.00% în caseta de lățime (sau înălțime), apoi apăsați introduce. În cele din urmă lucrurile ar trebui să arate ca în a doua imagine.
Utilizarea Instrument tip orizontal si "Melbourne,","Australia","Însorit" și "25°C"bucăți de text Caracter atributele sunt afișate mai jos și le plasați aproximativ ca în imaginea de mai jos. După ce ați terminat, reselectați toate aceste bucăți de text și mergeți la Lipiți stilul stratului.
Concentrați-vă pe straturi panou, reselectați unul dintre "săgeată"formează vectorii și o duplică (Comandă / Ctrl + J). Selectați această copie și plasați-o după cum se arată în imaginea următoare.
Pentru pașii finali veți avea nevoie de câte o grilă 1px, așa că pur și simplu du-te la Editați> Preferințe> Ghidaje, Grilă și felii și intră 1 în Grilă în fiecare cutie. Setați culoarea primului la # 323232, alegeți Instrumentul dreptunghiului, creeaza o 640 x 32 pixeli vector și așezați-o așa cum se arată în imaginea următoare.
Utilizarea Instrument tip orizontal, adaugă "Vreme de prognoza meteo Vă prezentăm: Lorem Ipsum Biroul de Meteorologie"bucată de text și așezați-o așa cum se arată în prima imagine Calibri apoi setați dimensiunea la 15pt și culoarea la # 505050. Reveniți la straturi și deschideți Stratul de stil fereastră pentru această bucată de text întunecată. Verifică Umbra , introduceți proprietățile afișate în imaginea următoare, dați clic pe O.K și ați terminat.
Iată cum ar trebui să arate. Sper că v-ați bucurat de acest tutorial și puteți aplica aceste tehnici în proiectele viitoare.
Iată cum ar trebui să pară un ecran.
Accentsconagua