Membuat desain situs menggunakan Photoshop

Jika Anda ingin membuat halaman web Anda sendiri, pahami cara membuat situs di Photoshop. Adobe Photoshop adalah editor grafis. Dimungkinkan untuk menggambar tata letak dan elemen masing-masing. Ini adalah proses yang cukup panjang dan rumit. Selama bertahun-tahun, desainer web telah belajar bagaimana mendesain template dan membuat halaman web. Tetapi tata letak yang sederhana dapat mengumpulkan siapa pun. Hanya pengetahuan dan fantasi Photoshop dasar yang diperlukan.

Di Photoshop untuk menggambar desain situs sederhana bahkan seorang pemula pun bisa

Sejak pertama kali Anda tidak mungkin mendapatkan halaman seperti master desain. Tapi Anda bisa menggambar layanan yang menarik dan tidak nyaman.

Sedikit tentang membuat situs

Decoding beberapa istilah.

  • CSS (Cascading Style Sheets) dan HTML (HyperText Markup Language) adalah bahasa komputer yang digunakan untuk membuat sumber daya web. Jika Anda membuka kode sumber dari setiap halaman di Internet, akan ada tag HTML.
  • Layout - tata letak dan pemasangan bahan dari tata letak, mengubahnya menjadi html-templat. Itu tergantung pada bagaimana objek diatur, apakah mereka terlihat indah dalam komposisi keseluruhan, apakah nyaman untuk membaca teks dan sejenisnya.
  • Layers adalah bagian dari layout. Bersama-sama mereka membuat gambaran besar. Tetapi mereka dapat diedit dan dipindahkan secara terpisah dari satu sama lain.
  • Tubuh adalah tempat di mana konten berada. Mungkin ada latar belakang di sekitarnya.
  • Frame (Bingkai) - elemen halaman. Blok dengan beberapa informasi, gambar, formulir.

Membuat situs yang menakjubkan dari awal hanya bisa menjadi profesional. Untuk melakukan ini, Anda perlu memahami desain web dan mengetahui HTML. Karena tata letak yang sudah selesai harus tetap diberlakukan secara kompeten.

Tetapi ada cara yang lebih sederhana. Ada layanan dan program online yang secara otomatis mengkonversi .psd (format file Photoshop) ke HTML dan CSS. Anda hanya harus memasang template dengan benar.

Untuk menggunakan Photoshop tidak perlu menjadi seorang seniman dan memahami semua opsi program. Tetapi jika Anda pertama kali memulainya dan tidak tahu cara menyisipkan teks, menggambar bentuk geometris, menduplikasi layer, mengubah warna atau memilih area arbitrer, Anda harus mulai dengan sesuatu yang lebih sederhana. Untuk membuat tata letak di Photoshop, kita memerlukan setidaknya keterampilan awal dalam bekerja dengan utilitas dan pemahaman tentang fungsi dasar (cara menggambar garis, meletakkan panduan, memilih font, dan sejenisnya).

Informasi umum tentang layanan jaringan juga berguna. Situs ini dapat ditandai dengan kriteria berikut:

  • Halaman tunggal. Semua elemen, konten, semua konten sumber daya ada di satu tempat. Di satu halaman. Untuk melihat konten layanan, jangan klik tautan atau buka tab baru. Pada saat yang sama, situs itu sendiri dapat berukuran besar secara sewenang-wenang. Ini akan cocok dengan brosur iklan kecil, dan novel setebal 600 halaman.
  • Multipage. Dengan demikian, termasuk banyak halaman. Ini dapat berupa, misalnya, "Beranda", "Forum", "Buku Tamu", "Jawaban untuk pertanyaan yang sering diajukan", "Kontak". Untuk masing-masing, Anda perlu melakukan tata letak. Anda juga memerlukan navigasi dan peta situs: bagian terpisah dengan tautan ke semua bagian layanan. Sehingga pengguna dapat dengan cepat menemukan bookmark yang dia butuhkan.
  • "Karet". Mengubah ukuran tergantung pada resolusi layar. Membentang bersama dengan jendela browser. Kita harus menghitung terlebih dahulu seperti apa situs itu nantinya. Jika dengan lebar 1300 semuanya ditampilkan secara normal, maka dalam 900 piksel bagian dari artikel dapat "melampaui" batas bingkai, gambar tidak akan berdiri sebagaimana mestinya, dan animasi flash akan menutup formulir input.
  • Diperbaiki Badan situs tidak mengubah ukuran. Opsi termudah dan paling praktis. Untuk membuat halaman terlihat solid, dan ketika memperluas jendela tidak ada ruang "kosong" di tepinya, Anda dapat membuat latar belakang karet.

Tata letak

Pertama, putuskan desain apa yang Anda butuhkan. Tidak cukup hanya "membayangkan", dan kemudian mengatur di Photoshop. Harus tampilan yang jelas. Gambar pola di atas kertas biasa. Tidak perlu menggambar ulang setiap gambar. Skema yang cukup: beberapa persegi panjang dan lingkaran, yang secara konvensional menunjukkan elemen halaman web. Pikirkan tentang bagaimana frame akan ditempatkan, di mana lebih baik untuk meletakkan logo, di mana menempatkan informasi untuk pengunjung.

Lihat contoh halaman di Internet. Pikirkan yang mana yang Anda sukai dan mengapa. Baik itu pengaturan bingkai yang nyaman, warna-warna yang menyenangkan atau pendekatan yang menarik untuk desain. Menyalin desain orang lain tidak sepadan. Cukup untuk menarik inspirasi darinya. Setelah itu Anda bisa mengetahui cara menggambar situs di Photoshop.

  • Buat dokumen baru (File - Baru). Dimensi dipilih dengan perhitungan pada monitor kecil atau resolusi rendah: 1024 × 720 piksel. Ini adalah lebar bagian "informasi", dan bukan keseluruhan gambar. Jika Anda menginginkan halaman berukuran 1100 piksel, maka Anda harus membuat dokumen dengan lebar 1.300 piksel. Panjangnya, pada kenyataannya, tidak diperbaiki - tergantung pada seberapa banyak konten yang ingin Anda tempatkan pada sumber daya. Ini adalah rekomendasi, bukan aturan. Anda dapat membangun tata letak yang besar jika Anda mau.
  • Nyalakan penggaris. Tekan Ctrl + R atau buka menu View - Rulers. Ini adalah skala pengukuran. Dia muncul di luar gambar. Tanpa itu, Anda harus memperkirakan ukuran dan jarak "dengan mata", yang tidak terlalu mempengaruhi hasil akhir. Anda dapat mengkonfigurasi fungsi ini dalam menu Edit - Pengaturan - Unit Pengukuran dan Penguasa. Lebih baik mengubah sentimeter per piksel agar berfungsi dengan satu parameter, dan tidak menghitung berapa poin dalam satu inci.
  • Anda juga harus mengaktifkan kisi. Lihat - Tampilkan - Kotak atau Ctrl + E (Anda juga dapat mematikannya). Ini adalah sejenis analog dari notebook di kandang. Di Photoshop, garis vertikal dan horizontal akan ditampilkan. Mereka tidak akan muncul pada gambar itu sendiri. Mereka hanya dapat dilihat saat mengedit. Fungsi ini diperlukan untuk mengatur elemen-elemen templat secara merata. Seseorang yang lebih nyaman bekerja dengan grid, seseorang tanpa itu. Yang terbaik adalah menyalakannya jika Anda membuat situs untuk pertama kalinya.
  • Untuk mengkonfigurasinya, buka Edit - Pengaturan - Panduan, Kotak, dan Fragmen. Di sana Anda dapat memilih ukuran sel, serta warna dan jenis garis (padat, bertitik, dari titik-titik).

Contoh desain situs modern

  • Instal panduannya. Di antara mereka akan menjadi sumber konten utama - tubuh tetap dari situs. Dan di belakang mereka - latar belakang karet. Untuk melakukan ini, klik Lihat - Panduan Baru. Di kotak "Orientasi", centang "Vertikal". Di bidang "Posisi" tulis jarak di mana objek akan dari tepi kiri. Fokus pada skala penguasa.
  • Diperlukan dua panduan - di kanan dan kiri badan halaman. Jarak di antara mereka harus maksimal 1003 piksel untuk tampilan dengan resolusi 1024 × 720. Anda dapat menentukan lebar yang berbeda. Tetapi sumber daya besar tidak nyaman untuk dilihat pada monitor kecil.
  • Mengapa 1003, bukan 1024? Jika situs perlu digulir ke bawah ("gulir") ke bawah, browser akan memiliki slider vertikal untuk menggulir. Ukuran slider ini sekitar 21 piksel. Jika Anda tidak memperhitungkannya, gulir horizontal akan muncul. Dan pengunjung sumber daya harus memindahkan halaman ke kiri dan ke kanan untuk melihat semua informasi.
  • Tubuh harus berada di tengah kanvas.

Ini adalah tahap persiapan pekerjaan. Cara membuat tata letak di Photoshop tergantung pada imajinasi dan selera Anda. Karena itu, hanya rekomendasi teknis umum yang akan lebih jauh.

  • Pertama, tata letak Anda membutuhkan latar belakang. Itu dapat dibuat secara independen atau diunduh dari jaringan. Ada banyak sumber daya dengan tekstur gratis. Jangan letakkan gambar situs yang tunduk pada hak cipta. Jangan mengambil latar belakang yang cerah atau kontras. Lebih baik tidak menggunakan tekstur dengan sejumlah besar detail kecil yang menarik. Mereka akan mengalihkan perhatian pengunjung dari isi halaman.
  • Jika Anda hanya membuka gambar di Photoshop, itu akan ada di tab baru, dan tidak ditambahkan ke tata letak. Sorot seluruh latar belakang. Untuk melakukan ini, Anda memerlukan pintasan keyboard Ctrl + A atau alat Seleksi (terletak di panel kiri). Salin dan tempel ke templat.
  • Juga opsi ini tersedia jika Anda mengklik Edit - Tempel.

  • Lapisan baru akan muncul dalam daftar di kanan bawah. Klik dengan tombol kanan mouse untuk melihat tindakan yang mungkin. Di menu "Opsi Lapisan", Anda dapat mengubah namanya. Dalam "Pengaturan Hamparan" adalah pengaturan gambar dasar. Anda dapat membuatnya bercahaya, emboss, kilap, goresan, gradien. Jika Anda memilih opsi, perubahan akan segera muncul di Photoshop. Ada satu set gaya yang sudah jadi. Jadi dari tekstur standar, solusi desain asli dibuat. Dan jangan menggambar apa pun ekstra.
  • Tombol "Filter" ada di bilah menu. Di sana Anda akan menemukan berbagai imitasi (pastel, cat air, pensil), gaya, tekstur, sketsa, highlight, blur.
  • Anda dapat memilih latar belakang polos. Warna tergantung pada preferensi pribadi Anda. Tetapi lebih baik tidak membuatnya hitam atau beracun. Tempat tidur yang cocok dan nada lembut atau dingin transparan (misalnya, abu-abu muda, biru pucat).
  • Setelah tekstur, Anda dapat mengumpulkan situs itu sendiri. Di sini Anda memiliki kebebasan untuk membuat.
  • Untuk menambahkan beberapa bentuk (garis, kotak, oval), klik tombol yang sesuai di sebelah kanan. Itu akan memiliki penampilan dan nama objek yang saat ini dipilih untuk menggambar. Misalnya, "Ellipse Tool", "Polygon Tool". Di Photoshop, jumlah bentuk terbatas. Tetapi mereka dapat ditemukan di Internet, diunduh dan diinstal melalui menu Edit - Set Management. Di bidang Jenis, tentukan koleksi objek yang Anda muat.
  • Dalam versi program yang berbeda, angka-angka ini disebut dengan cara yang berbeda. Entah dengan tombol dalam bentuk segitiga hitam kecil (ada di kanan), atau dengan ikon roda gigi, atau oleh item "Bentuk titik" (di bawah bilah menu). Objek dapat digabungkan, dikelompokkan, buat komposisi mereka.
  • Untuk membuat bingkai teks, klik tombol dalam bentuk huruf kapital "T". Kemudian pilih tempat di mana karakter harus ditempatkan, klik di sana dan ketik apa yang Anda butuhkan.
  • Setiap elemen lebih baik untuk diletakkan di layer terpisah. Jadi akan lebih mudah untuk memindahkan dan mengedit, tanpa "menyentuh" ​​seluruh situs. Untuk menambahkan objek ini, pergi ke Layers - New.

  • Untuk memproyeksikan gambar ke area yang dipilih sebelumnya, pilih dulu, lalu buka Edit - Tempel Spesial. Akan ada opsi "Sisipkan sebagai gantinya" dan "Sisipkan di luar".
  • Anda dapat mentransfer bagian dari satu gambar ke layer baru. Untuk melakukan ini, pilih, klik kanan padanya dan pilih "Potong ke lapisan baru".
  • Dengan bentuk, teks, dan gambar, opsi yang sama tersedia dengan latar belakang: efek, filter, dan sebagainya.
  • Di Photoshop, masih ada banyak alat untuk menggambar: kuas, pena, pensil.

Anda dapat membuat sumber daya berkualitas bahkan dari objek geometris sederhana.

Ada sumber daya dengan tata letak gratis. Muat di Photoshop dan edit jika perlu. Lebih mudah dan lebih cepat daripada menggambar dari awal.

Bagaimana mengubah tata letak menjadi file html?

Anda menemukan cara membuat situs di Photoshop, dan mendesain tata letak pertama Anda. Apa yang harus dilakukan selanjutnya? Toh, tidak bisa hanya mengunggah ke hosting.

Ini dapat diberikan kepada pembuat kode yang akan membuat templat html berkualitas tinggi. Tetapi ada opsi lain. Gunakan layanan untuk mengkonversi file PSD ke HTML dan CSS.

  • Pengonversi Psd2Html. Layanan online berbayar. Konversi format Photoshop dengan cepat ke templat laman web. Dengan sumber daya ini, bahkan dari tata letak berkualitas buruk, Anda dapat membuat situs yang layak.
  • Panda HTML.
  • PSDCenter
  • Markup 40 Dolar.

Konstruktor

Tata letak juga dapat dikumpulkan di situs khusus. Biasanya ada antarmuka yang jelas dan intuitif. Anda cukup merakit template dari berbagai bagian. Beberapa elemen terbaik diambil di Photoshop. Jadi Anda mendapatkan desain aslinya. Terlepas dari kenyataan bahwa itu dibuat pada konstruktor.

Di Photoshop tidak hanya menggambar. Ia mengumpulkan tata letak untuk situs. Dalam kebanyakan kasus, ini dilakukan oleh tuan. Tapi templat sederhana bisa membuat siapa saja. Hanya pengetahuan dasar tentang Photoshop yang diperlukan.