# 004 - O pânză Photoshop - CSS-Tricks

Anonim

Din ultimul videoclip, știm că avem cinci puncte majore de luat în considerare atunci când începem proiectarea acestui site. Îi vom ține pe cei din capul minții în timp ce înaintăm.

Desigur, începem „primul mobil” și vom începe să descoperim designul în Photoshop. Nu vom zăbovi acolo, dar instrumentele creative din Photoshop sunt excelente pentru gândirea creativă la începutul unui proiect de design.

Deschidem simulatorul iOS care vine gratuit cu XCode pe Mac. Este pentru testarea aplicațiilor native și web pe un computer desktop / laptop. Vrem doar să fie rapid, astfel încât să putem face o captură de ecran a acestuia pentru a ne oferi o pânză contextuală în Photoshop.

În concluzie, nu începem mai întâi „iPhone”, ci doar un mic ecran convenabil pentru noi de a proiecta. Nu vom proiecta nimic care să fie prea specific dimensiunii sau capacităților iPhone-ului.

Pentru a ne oferi o pânză mai înaltă de la care să lucrăm (nu este nevoie să limităm site-ul deasupra „pliului”), tăiem partea de jos a telefonului și o tragem mai jos. Apoi luăm o felie subțire de marginile iPhone-ului și le tragem în jos, așa că, în esență, avem acest iPhone foarte înalt (dar complet).

Lăsăm un ghid la locul unde ecranul original s-a încheiat pentru a ne reaminti cât de mare era. Da, toată lumea derulează. Mai ales pe mobil. Dar este totuși plăcut să știi cum arată primul ecran.

Dosare

  • # 004 - Telefon Canvas.psd.zip
  • # 004 - Raw Photos.zip