# 004 - Platno Photoshop - CSS-triki

Anonim

Iz zadnjega videoposnetka vemo, da moramo pri oblikovanju te strani upoštevati pet glavnih točk. Te bomo ohranili na vrhu, ko bomo šli naprej.

Seveda začenjamo »najprej z mobilnimi napravami« in začeli bomo ugotavljati dizajn v Photoshopu. Tam se ne bomo zadrževali, vendar so kreativna orodja v Photoshopu odlična za kreativno razmišljanje na začetku oblikovalskega projekta.

Odprli smo simulator iOS, ki je brezplačen z XCode na Macu. Namenjen je testiranju spleta in izvornih aplikacij v namiznem / prenosnem računalniku. Želimo si le hitro, da bi lahko posneli posnetek zaslona in nam dali kontekstualno platno v Photoshopu.

Za zapisnik najprej ne zaženemo »iPhonea«, to je le majhen zaslon, ki je primeren za nas, da ga lahko oblikujemo. Ne bomo oblikovali ničesar, kar bi bilo preveč specifično za velikost ali zmogljivosti iPhona.

Če si želimo delati višje platno (mesta ni treba omejiti na zgoraj), smo spodnji del telefona odrezali in povlekli nižje. Nato vzamemo tanko rezino robov iPhona in jih povlečemo navzdol, tako da imamo v bistvu ta super visok (a popoln) iPhone.

Pustimo vodnik na mestu, kjer se je končal izvirni zaslon, da nas opomni, kako velik je bil. Da, vsi se pomaknejo. Še posebej na mobilnem telefonu. A vseeno je lepo vedeti, kako izgleda ta prvi zaslon.

Datoteke

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