# 004 - Kanvas Photoshop - Trik CSS

Anonim

Dari video terakhir, kami tahu bahawa kami mempunyai lima perkara utama yang perlu dipertimbangkan ketika memulakan reka bentuk laman web ini. Kami akan memastikan mereka berada di tahap teratas semasa kita bergerak ke hadapan.

Sudah tentu kita mula "bergerak dahulu", dan kita akan mula mengetahui reka bentuknya di Photoshop. Kami tidak akan berlama-lama di sana, tetapi alat kreatif di Photoshop sangat bagus untuk pemikiran kreatif pada permulaan projek reka bentuk.

Kami membuka simulator iOS yang percuma dengan XCode pada Mac. Ini untuk menguji aplikasi web dan asli pada komputer desktop / komputer riba. Kami hanya mahu cepat sehingga kami dapat mengambil tangkapan layarnya untuk memberi kami kanvas kontekstual di Photoshop.

Sebagai rekod, kami tidak memulakan "iPhone" terlebih dahulu, hanya skrin kecil yang sesuai untuk kami rancang. Kami tidak akan merancang sesuatu yang terlalu khusus untuk ukuran atau kemampuan iPhone.

Untuk memberikan kanvas yang lebih tinggi untuk bekerja (tidak perlu mengehadkan laman web ini hingga ke atas "lipatan"), kami memotong bahagian bawah telefon dan menyeretnya ke bawah. Kemudian kami mengambil bahagian tipis tepi iPhone dan menyeretnya ke bawah, jadi pada dasarnya kami mempunyai iPhone yang sangat tinggi (tetapi lengkap) ini.

Kami meninggalkan panduan di tempat skrin asal berakhir untuk mengingatkan betapa besarnya skrin. Ya, semua orang menatal. Terutama di telefon bimbit. Tetapi masih bagus untuk mengetahui seperti apa paparan skrin pertama itu.

Fail

  • # 004 - Telefon Canvas.psd.zip
  • # 004 - Foto Mentah.zip