# 004 - Kanvas Photoshop - Trik CSS

Anonim

Dari video terakhir, kami tahu bahwa kami memiliki lima poin utama yang harus dipertimbangkan ketika memulai desain situs ini. Kami akan menyimpannya di atas pikiran kami saat kami bergerak maju.

Kami tentu saja memulai "seluler dulu", dan kami akan mulai mencari tahu desain di Photoshop. Kami tidak akan berlama-lama di sana, tetapi alat kreatif di Photoshop sangat bagus untuk pemikiran kreatif di awal proyek desain.

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

Sebagai catatan, kami tidak memulai "iPhone" terlebih dahulu, ini hanya layar kecil yang nyaman untuk kami desain. Kami tidak akan merancang apa pun yang terlalu spesifik untuk ukuran atau kemampuan iPhone.

Untuk memberikan diri kami kanvas yang lebih tinggi untuk bekerja (tidak perlu membatasi situs ke "lipatan" di atas), kami memotong bagian bawah ponsel dan menyeretnya lebih rendah. Kemudian kami mengambil sepotong tipis tepi iPhone dan menyeretnya ke bawah, jadi pada dasarnya kami memiliki iPhone super tinggi (tapi lengkap) ini.

Kami meninggalkan panduan di tempat di mana layar asli berakhir untuk mengingatkan kami seberapa besar itu. Ya, semua orang menggulir. Apalagi di ponsel. Tapi tetap menyenangkan mengetahui seperti apa tampilan layar pertama itu.

File

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