# 004 - Платно Photoshop - CSS-трикове

Anonim

От последното видео знаем, че имаме пет основни точки, които трябва да вземем предвид, когато започваме с дизайна на този сайт. Ще ги запазим на върха на ума си, докато вървим напред.

Започваме „първо мобилни“, разбира се, и ще започнем да измисляме дизайна във Photoshop. Няма да се задържаме там, но креативните инструменти във Photoshop са чудесни за креативно мислене в началото на дизайнерски проект.

Отваряме симулатора на iOS, който се предлага безплатно с XCode на Mac. Той е за тестване на мрежата и родните приложения на настолен / преносим компютър. Ние просто го искаме бързо, за да можем да направим негова екранна снимка, за да ни даде контекстно платно във Photoshop.

За протокол, ние не стартираме първо „iPhone“, това е просто малък екран, който е удобен за нас да проектираме наоколо. Няма да проектираме нищо, което да е твърде специфично за размера или възможностите на iPhone.

За да си дадем по-високо платно, от което да работим (няма нужда да ограничаваме сайта до над „сгъването“), отрязваме долната част на телефона и го плъзгаме по-ниско. След това вземаме тънък парче от краищата на iPhone и ги плъзгаме надолу, така че по същество имаме този супер висок (но пълен) iPhone.

Оставяме ръководство на място, където оригиналният екран завършва, за да ни напомня колко голям е той. Да, всички превърта. Особено на мобилни устройства. Но все пак е хубаво да знаете как изглежда този първи екран.

Файлове

  • # 004 - Телефон Canvas.psd.zip
  • # 004 - Raw Photos.zip