Tutorial: Bagaimana Menata Halaman Web dengan Adobe Photoshop

MODEL-FOTO

Ada berbagai macam alat untuk mendesain halaman web dan bekerja dengan cara yang sangat sederhana dan fungsional tanpa memasukkan atau menyentuh kode. Mereka tidak terhitung banyaknya, diusulkan oleh aplikasi (Adobe Dreamweaver adalah contoh) atau langsung oleh platform online seperti Wix. Namun, bagi seorang desainer web, mengetahui prosedur manual itu penting. HTML5 dan CSS adalah pilar fundamental untuk tata letak situs web dan halaman arahan.

Namun, lebih sering daripada yang Anda duga, Anda harus beralih ke aplikasi seperti Indesign atau Adobe Photoshop untuk melengkapi pekerjaan tata letak Anda dan memberikan hasil akhir yang sempurna. Hari ini kita akan melihat dalam tutorial ekstensif ini, bagaimana kita dapat membuat tata letak halaman web menggunakan Adobe Photoshop. Pada bagian pertama ini kita akan tetap mengerjakan pekerjaan yang akan dikembangkan dari Photoshop, meskipun pada bagian selanjutnya kita akan melihat bagaimana kita dapat menerapkan pekerjaan ini secara langsung dalam kode HTML untuk membuatnya berfungsi.

Dimulai dengan desain wireframe kami

Untuk memulai dengan tata letak dan desain halaman web, sangat penting bagi kita untuk memulai dengan mendefinisikan apa elemen dasarnya, ini adalah kerangka. Struktur ini akan berfungsi sebagai penopang untuk menampung semua konten (baik tekstual maupun multimedia). Dengan menentukan setiap bagian yang membentuk halaman kita, kita dapat mengerjakannya dengan sangat akurat dan memberikan desain visual yang seakurat mungkin.

Sangat penting bahwa kami memperhitungkan dimensi yang akan dimiliki situs web kami, jika situs web itu memiliki a kotak atau lebar penuh. Halaman web kotak akan berada di dalam wadah kecil dan oleh karena itu akan muncul ruang di sekitarnya. Sebaliknya, web dengan kecerdasan penuh akan menempati seluruh layar perangkat yang mereproduksi halaman tersebut. Memilih antara satu modalitas atau lainnya hanya menanggapi pertanyaan gaya dan juga akan bergantung pada kebutuhan proyek tempat kami bekerja. Kami akan mengerjakan contoh ini dengan mode kotak sehingga tidak akan menempati semua ruang yang disediakan oleh browser.

Gambar rangka-1

Untuk membuat wireframe kita, hal pertama yang harus kita lakukan adalah masuk ke aplikasi Adobe Photoshop dan memasukkan dimensi yang kita ingin halaman kita miliki. Dalam contoh ini, halaman kita akan menjadi lebar 1280 piksel. Namun, masalah ukuran dapat bervariasi tergantung pada tujuan akhir atau perangkat tempat kami ingin mereproduksi halaman kami. Tidak ada keraguan bahwa agar desain web berfungsi dan efisien, itu harus responsif dan harus beradaptasi dengan semua perangkat di pasar. Namun, dalam hal ini kami akan bekerja untuk membuat prototipe yang akan kami gandakan di komputer desktop. Meski begitu, masalah responsif yang akan kita tangani nanti, untuk saat ini, berikut adalah hierarki dimensi layar untuk digunakan dalam contoh ini. Perlu diingat bahwa dalam hal ini kita akan membuat tata letak halaman arahan di Adobe Photoshop dan kemudian memigrasikannya ke HTML5 DAN CSS3. Tujuan dari latihan kecil ini adalah untuk mengubah desain yang dibuat di Photoshop menjadi desain web yang dapat digunakan dan interaktif yang merespons pergerakan pengguna.

Pengukuran untuk ponsel

iPhone 4 dan 4S: 320 x 480

iPhone 5 dan 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Perhubungan 4: 384x598

Perhubungan 5: 360x598

Galaxy S3, S4, S5: 360x640

HTC Satu: 360x640

Pengukuran tablet

iPad semua model serta iPad Mini: 1024 x 768

Galaxy Tab 2 dan 3 (7.0 inci): 600 x 1024

Galaxy Tab 2 dan 3 (10.1 inci): 800 x 1280

Perhubungan 7: 603x966

Perhubungan 10: 800x1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Pengukuran untuk komputer desktop

Layar kecil (digunakan misalnya di netbook): 1024 x 600

Layar sedang: 1280 x 720/1280 x 800

Layar besar: lebar lebih besar dari 1400 piksel, contoh 1400 x 900 atau 1600 x 1200.

panduan wireframe

Untuk mulai mendistribusikan elemen dan menetapkan bagian dalam mockup web kami, sangat penting bagi kami untuk mempertimbangkan proporsi untuk memastikan hasil akhir yang dapat dibaca dan melodi. Anda harus menggunakan opsi aturan dan panduan yang dapat Anda temukan di menu atas Lihat. Untuk bekerja dengan cara yang proporsional dan tepat, yang terbaik adalah kita bekerja dari persentase. Kita akan mengklik menu tampilan dan kemudian pada opsi «Panduan baru» untuk memilih modalitas divisi. Dalam hal ini kita akan membuat empat divisi vertikal sebesar 25% dan kita akan menjadikannya sebagai referensi untuk menempatkan gambar kita di footer dan gambar logo kita di header.

Gambar rangka-1a

Ada kode untuk menunjuk setiap area yang akan kita tempati model dan fungsi yang akan dimiliki masing-masing dari mereka. Misalnya, untuk menunjukkan area yang akan ditempati gambar, kita akan membuat persegi panjang dengan semacam tanda silang. Untuk menunjukkan bahwa kami ingin memasukkan video di area tertentu, kami akan menyertakan simbol putar di dalam wadah kami. Dalam contoh pertama ini kita hanya akan bekerja dengan gambar, di tangkapan atas Anda dapat melihat area yang logo dari situs web kami.

wireframe-final

Ini akan menjadi hasil akhir dari kami gambar rangka. Seperti yang bisa kita lihat, ini dibagi menjadi header yang terdiri dari gambar di mana logo akan ditemukan dan yang akan berfungsi sebagai tautan ke halaman beranda disertai dengan dua tab, mesin pencari dan empat tombol pada kotak pencarian. Selain itu, sudah di dalam body, kami telah menyertakan sidebar yang terdiri dari bar pemisah dan serangkaian kategori yang mengkategorikan jenis konten yang akan ada di situs kami. Bagian lain dengan penomoran yang menyertakan entri yang akan ada di situs kami, dan terakhir daftar dengan tag meta paling representatif di situs kami.

Di area konten, yang akan ditentukan oleh bagian yang akan disertakan konten yang dapat dikelola sendiri, kami akan menemukan konten artikel kami. Dalam hal ini, remah roti atau remah roti (yang menunjukkan struktur organik situs web kami, judul artikel, metadata, paragraf sebagai badan teks, di mana gambar disertakan.

Sebagai footer kami telah menyertakan empat gambar yang akan berfungsi sebagai link ke area lain di halaman kami. Disini kita bisa memasukkan logo atau bagian menarik lainnya. Meski pada kenyataannya, area ini akan lebih beraksi kaki depan, karena footer itu sendiri akan membahas kebijakan penggunaan, pemberitahuan hukum, dan hak cipta.

Setelah kita menentukan struktur dasar atau kerangka halaman kita, kita harus pergi ke tingkat berikutnya. Ini akan terdiri dari desain yang tepat dari masing-masing area situs web kami. Dengan kata lain, kita akan mulai "mengisi" masing-masing area ini dengan konten yang akhirnya akan disisipkan di website kita. Direkomendasikan agar kita tidak mendesain elemen-elemen ini sebelum mengerjakan wireframe karena kemungkinan besar jika kita melakukannya dalam urutan ini, kita perlu mengubah proporsinya nanti. Kami berisiko mengubah gambar kami dan harus mengulangi desain masing-masing elemen, yang akan membuang-buang waktu atau menghasilkan kualitas yang lebih rendah.

Dalam hal ini, desain situs web kami akan sangat sederhana. Kami akan menggunakan sila desain material, karena kita akan menggunakan logo Google sebagai contoh praktik ini. Saya harus menjelaskan bahwa tujuan dari tutorial ini adalah untuk menggambarkan pengetahuan teknis, sehingga hasil estetika dalam hal ini tidak relevan. Seperti yang Anda lihat, sedikit demi sedikit kami telah mengisi ruang dengan semua area yang telah kami tentukan sebelumnya dalam skema kami. Namun, kami melakukan sedikit modifikasi pada menit terakhir. Seperti yang mungkin telah Anda ketahui, kami telah mengurangi ukuran logo kami secara signifikan dan kami telah menyertakan garis pemisah di area tajuk bawah yang terhubung sempurna dengan menu atas. Dalam hal ini kami telah menggunakan tombol dan bahan dari bank sumber daya. Sebagai desainer, kita dapat mendesainnya sendiri, (terutama opsi ini disarankan jika kita ingin menghadirkan tonik yang sangat mirip dengan yang disajikan oleh citra merek atau logo).

jaringan

Penting untuk diingat bahwa untuk memberikan contoh ini kita akan bekerja pada dua tingkat yang berbeda. Di satu sisi, kami akan mengerjakan objek dan di sisi lain tampilan situs web. Artinya, di satu sisi kerangka situs web kami dan di sisi lain di semua elemen mengambang yang akan didukung kerangka ini. Anda akan melihat bahwa ada area yang tidak akan terapung sama sekali, seperti area yang akan ditempati oleh sidebar, preefooter atau bilah pemisah yang memisahkan header dari body.

web2

Struktur 1, 2, 3 dan 4 akan menjadi bagian dari latar belakang dari situs web kami, jadi sebenarnya kami tidak perlu mengekspor seperti itu dari Adobe Photoshop, meskipun kami dapat melakukannya, itu tidak perlu. Ketika datang ke Warna datar (Salah satu fitur penting dari desain datar dan desain material, mereka dapat diterapkan dengan sempurna melalui kode menggunakan lembar gaya CSS). Namun, elemen lainnya harus disimpan untuk dimasukkan nanti dalam kode HTML kita. Dalam diagram kecil ini kami juga telah mereproduksi area yang termasuk dalam latar belakang laman sehingga kami memiliki gambaran yang jelas tentang tampilan akhir situs kami nantinya.

Seperti yang dapat Anda sadari, tujuan pembuatan skema ini di Adobe Photoshop adalah untuk mendapatkan dimensi sebenarnya dari setiap elemen, dan memperjelas pengaturan dan struktur setiap elemen. Tentu saja, konten tekstual tidak memiliki tempat dalam fase proses ini karena harus ada dipasok dari editor kode kami. Kami juga harus menunjukkan bahwa dalam praktik ini, kami akan bekerja dengan tombol dan elemen statis, meskipun umumnya ini biasanya diterapkan dari kerangka kerja seperti Bootstrap atau langsung dari Jquery.

Setelah kita membuat setiap elemen yang akan membentuk halaman web kita, sekarang saatnya untuk mulai mengekspor dan menyimpannya di folder gambar yang terletak di dalam folder proyek HTML. Anda harus membiasakan diri mengekspor dari wireframe, karena kemungkinan besar Anda perlu memodifikasi beberapa elemen asli berdasarkan konfigurasi kerangka. (Misalnya, dalam hal ini, kami telah mengubah ukuran tombol asli, logo, dan sebagian besar elemen yang merupakan bagian dari komposisi, termasuk gambar di area bawah).

Penting bagi kita untuk belajar menyimpan item apa pun secara mandiri untuk menyimpannya dengan dimensi yang mereka miliki dan dengan cara yang tepat. Kesalahan apa pun, betapapun minimalnya, dapat memengaruhi semua elemen yang merupakan bagian dari halaman web Anda. Perlu diingat bahwa keduanya akan terkait satu sama lain dan harus memiliki dimensi yang sempurna agar dapat dimasukkan dari HTML di web final. Dalam hal ini, kita perlu memotong dan menyimpan elemen berikut secara mandiri:

  • Logo kami.
  • Semua tombol (yang merupakan bagian dari menu utama dan yang lainnya).
  • Semua gambar.

Kami dapat melakukannya dengan banyak cara dan mungkin Anda akan menemukan alternatif yang lebih efektif untuk Anda. Tetapi jika ini adalah pertama kalinya Anda akan membuat tata letak jenis ini, saya sarankan Anda mengikuti tips berikut ini.

  • Pertama, Anda harus pergi ke folder tempat file PSD yang berisi gambar rangka kita berada dan menduplikasinya sebanyak elemen yang akan Anda ekspor. Dalam hal ini kami telah membuat 12 salinan dari aslinya dan telah menyimpannya di folder yang sama. Selanjutnya, Anda akan mengganti nama setiap salinan dan menetapkan masing-masing nama elemen yang dikandungnya. 12 salinan kami akan diganti namanya: Logo, tombol menu 1, tombol menu 2, bilah pencarian, tombol atas 1, tombol atas 2, tombol atas 3 dan tombol atas 4. Empat sisanya akan diganti namanya menjadi: Gambar 1, Gambar 2, Gambar 3 dan Gambar 4.
  • Setelah ini selesai, kami akan membuka file dengan nama logo.
  • Kami akan pergi ke palet lapisan kami dan menemukan lapisan yang berisi logo kami. Kemudian kami akan menekan Ctrl / Cmd sementara kita mengklik thumbnail dari layer tersebut. Dengan cara ini, logo akan dipilih secara otomatis.
  • Langkah selanjutnya adalah memberi tahu Photoshop bahwa kami ingin memotong logo itu dengan cara yang tepat. Untuk ini kita hanya perlu membuat panggilan ke alat pemangkasan dari kunci atau perintah C.
  • Setelah kami melakukan ini, kami akan mengklik tombol Enter untuk mengonfirmasi pemotongan.
  • Sekarang kita akan pergi ke menu File atas untuk mengklik save how. Kami akan memilih nama, yang dalam hal ini adalah «Logo» dan kami akan menetapkan format PNG, karena merupakan file yang menawarkan kualitas tertinggi di web.
  • Kami akan mengulangi proses dengan semua salinan dan elemen. Saat Anda memangkas, pastikan sisa lapisan di palet kami siluman atau dihilangkan. Dengan cara ini kita dapat menyimpan setiap elemen dengan latar belakang transparan.

Tombol1

Dalam hal ini kami memilih tombol menu 2 dari palet lapisan. Anda dapat melihat di tangkapan layar bagaimana batas tombol kami telah dipilih secara otomatis.

tombol2

Setelah kami memilih alat pemangkasan dari tombol C, kanvas kami dikurangi hanya menjadi dimensi tombol kami.

tombol simpan

Sekarang saatnya untuk menyimpan satu per satu semua elemen yang menjadi bagian dari website kita dan memasukkannya ke dalam folder gambar dan akan kita gunakan nanti. Kami akan membuat panggilan dari kode kami dan kami akan melanjutkan dengan tata letak kami tetapi mulai sekarang dari editor kode kami.

Meskipun ada banyak alat dan alternatif untuk mengatur tata letak halaman web yang membuat prosesnya benar-benar intuitif, sangat penting bagi kita untuk belajar melakukannya di panduan. Dengan cara ini kita akan mempelajari apa saja dasar-dasar di balik desain halaman web.

ringkasan:

  1. Desain estructura situs web yang memberikan perhatian khusus pada konten yang ingin Anda transmisikan dan bagian yang harus Anda buat di situs web Anda.
  2. Kerjakan kerangka Anda atau gambar rangka dari Adobe Photoshop menunjukkan di area mana konten akan muncul dan formatnya.
  3. Bergantung pada ukuran dan merek yang telah Anda kembangkan sebelumnya, mulailah desain permukaan web. Menyertakan semua elemen (mengambang dan tetap). Jangan lupa untuk menyertakan tombol, logo, dan gambar yang sesuai.
  4. Gunting semua elemen yang merupakan bagian dari proyek satu per satu. Pastikan mereka memiliki langkah-langkah yang tepat dan tidak akan menimbulkan masalah bagi Anda nanti.
  5. Simpan semua elemen dalam format PNG di folder gambar di dalam folder proyek HTML.
  6. Perlu diingat bahwa proyek ini akan memiliki keluaran ke jendela web sehingga sangat penting bagi Anda untuk mempertimbangkan mode warna dan menerapkannya. RGB.
  7. Dapatkan inspirasi dari halaman web lain yang Anda kagumi sebelum Anda mulai bekerja, dan jangan lupa untuk mendiskusikannya dengan anggota tim Anda. Jika ini adalah proyek untuk klien, cobalah untuk tetap berpegang pada pengarahan sejauh mungkin.

2 komentar, tinggalkan punyamu

tinggalkan Komentar Anda

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai dengan *

*

*

  1. Penanggung jawab data: Miguel Ángel Gatón
  2. Tujuan data: Mengontrol SPAM, manajemen komentar.
  3. Legitimasi: Persetujuan Anda
  4. Komunikasi data: Data tidak akan dikomunikasikan kepada pihak ketiga kecuali dengan kewajiban hukum.
  5. Penyimpanan data: Basis data dihosting oleh Occentus Networks (UE)
  6. Hak: Anda dapat membatasi, memulihkan, dan menghapus informasi Anda kapan saja.

  1.   Raja Bajak Laut Piratesking dijo

    hahahahahaha dan di akhir semua ini, Anda pergi ke tombol start, mematikan peralatan, dan Anda pergi ke profesional sialan yang akan membuatkan Anda situs web yang bukan omong kosong;)

  2.   ronny dijo

    Tutorialnya sudah praece saya dengan baik, tapi mungkin yang berikutnya Anda akan membuatnya lebih detail, saya masih memulai dalam desain ini, dan ketika saya melihat gambar dengan hasil akhir ada beberapa langkah yang saya tidak tahu bagaimana melakukannya. Terima kasih.