Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Fitur Sketsa Praktis untuk Merancang Gaya Panduan

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Puuma (you can also view the original English article)

Final product image
What You'll Be Creating

Tutorial ini akan menunjukkan kepada Anda bagaimana untuk mengatur gaya panduan menggunakan sketsa. Selain itu, ini akan mengajarkan Anda beberapa keterampilan inti untuk menggunakan sketsa dalam situasi lain. Kita akan pergi atas segalanya dari mendirikan tipografi, menggunakan grid berbagai macam jenis, praktek-praktek terbaik untuk menggunakan "simbol" dan "berbagi gaya".

Tipografi

Pengaturan dapat digunakan kembali jenis gaya dalam sketsa akan menghemat banyak waktu. Dengan tool teks yang dipilih, Anda akan melihat kotak kecil ke sisi kanan dari aplikasi yang memungkinkan Anda mengatur segala macam jenis gaya seperti font keluarga, berat font dan bahkan karakter spasi.

Mari kita lihat bagaimana kita dapat menggunakannya dalam dokumen panduan gaya kita sendiri.

Menciptakan gaya Anda

Setiap kali saya bekerja dengan tipografi saya ingin menggunakan salinan nyata (sebagai lawan dari salinan generik pengisi). Saya pikir itu membuat desain pengalaman lebih mudah, dan memberikan hasil akhirnya lebih banyak konteks dan suara sejati.

Mulai dengan teks yang berbeda jenis desain Anda akan memiliki. Dalam file ini kami memiliki empat judul, bukan enam, karena kita tidak perlu itu banyak.

Catatan: Masing-masing adalah sebuah obyek teks terpisah.

Disarankan untuk menempatkan lapisan dalam urutan yang benar

Item pertama harus dirancang adalah sub judul, yang berjalan bersama dengan H1, tetapi lebih pada nanti. Sketsa tidak memiliki pengaturan untuk menentukan karakter "kasus", sehingga untuk mendapatkan sub judul harus huruf besar saya harus memasukkan seperti itu secara manual.

Melakukan ini apabila relevan untuk setiap elemen teks yang Anda miliki. Jangan khawatir tentang spasi pada artboard Namun, kami akan pergi ke yang kemudian.

Menciptakan gaya dapat digunakan kembali teks

Anda dapat membuat gaya dapat digunakan kembali teks dalam dua cara. Pertama, pilih teks dengan gaya yang Anda suka kemudian klik No Text Style dari pengaturan jenis di sebelah kanan. Selanjutnya, pilih Create New Text Style dari halte bawah.

Catatan: Untuk mentransfer gaya ini ke salinan file lain dan paste teks yang diinginkan objek dan gaya akan ditransfer secara otomatis.

Cara kedua untuk menciptakan gaya teks dalam sketsa adalah untuk menciptakan gaya teks baru di drop-down, seperti yang Anda lihat di atas, dan kemudian tambahkan styling untuk gaya itu. Tidak peduli mana yang datang pertama. Apa masalah adalah bahwa Anda memahami bahwa perubahan styling gaya teks yang akan mempengaruhi semua teks elemen lain yang menggunakan gaya itu. Oleh karena itu, jika aku berubah warna Mini pos, itu akan mencerminkan perubahan ini pada setiap satu item.

Mobile tipografi

Ada cara mudah untuk menyesuaikan styling untuk ukuran layar yang berbeda. Saat ini saya bekerja di sekitar adalah untuk menciptakan gaya teks terpisah untuk layar ponsel Selain gaya desktop saya.

Grid

Ada tiga referensi untuk pengukuran di sketsa: grid, tata letak dan penguasa. Mari kita pergi ke semua tiga dari mereka benar-benar cepat dan melihat bagaimana mereka harus digunakan. Dengan itu dilakukan, kita akan berbicara tentang menggunakan mereka untuk mengatur tata letak halaman Anda.

Ruler

Untuk beralih tampilan penggaris tekan ctrl + R (mudah diingat).Penguasa tidak boleh digunakan sebagai bentuk utama grid dalam Sketch, dua opsi lainnya jauh lebih cocok untuk itu.  Menggunakan penguasa untuk menyesuaikan hal-hal atau periksa penjajaran seperti dalam gambar di bawah.

Grid

Demikian pula untuk memerintah, untuk beralih tampilan grid tekan ctrl + G. Grid adalah sistem kotak yang dapat Anda sesuaikan sisi. Saya menggunakan untuk tata letak yang tidak selalu berlaku untuk halaman web yang berpusat pada umumnya. Hal yang besar tentang grid di sketsa adalah bahwa itu mencakup seluruh artboard (jika Anda meningkatkan ukuran artboard, grid akan tumbuh).

Anda dapat mengatur ukuran unit Grid untuk menjadi apa pun. Anda juga dapat menyoroti serangkaian baris, default menjadi setiap 10.

Layout

Untuk beralih tata letak Anda menekan (guess) ctrl + L. Ini sentuhan lebih rumit dalam hal semua titik data yang berbeda yang Anda perlu menyediakan, tetapi tidak mendapatkan grid layout sempurna disesuaikan; sempurna untuk merancang situs web!

Grid kami didasarkan pada unit 30px, sehingga semua angka yang Anda lihat dalam gambar di bawah ini mencerminkan bahwa. Setelah Anda tahu apa grid Anda, masukan ke Layout Setting.

Jika Anda tidak tahu apa yang harus Anda grid, gunakan Setting Layout untuk bermain di sekitar-itu terus proporsi dan recalculates segala sesuatu untuk Anda. Katakanlah, misalnya, saya ingin layout saya untuk menggunakan kolom sebelas bukan dua belas, tetapi masih tetap lebar total. Jika saya mengurangi jumlah kolom, sketsa akan memberikan saya diperbarui lebar kolom dan selokan. Bermain sekitar melihat apa yang terjadi.

Keteguhan sketsa 's Grids dan halaman

Sisi bawah dengan grid di sketsa adalah bahwa Anda tidak bisa memiliki grid baru untuk artboards baru. Mungkin itu adalah hal yang baik, tetapi ianya tidak bagaimana saya cenderung untuk bekerja. Jika saya memiliki dua seni papan di samping, salah satunya adalah untuk desktop dan yang lain untuk mobile, mustahil untuk bekerja pada mereka pada waktu yang sama. Ini adalah di mana Pages datang berguna. Jika Anda memiliki Layer List lapisan yang terbuka, Anda dapat melihat naik di atas sesuatu yang disebut Pages.

Halaman sangat berguna, karena mereka memungkinkan lapisan tambahan merancang dalam sebuah dokumen tunggal. Anda dapat mengubah Grid dan tata letak dalam halaman dan mereka akan tetap sama di dalam halaman hanya.

Menyelaraskan tipografi Anda

Anda mungkin telah memperhatikan di screenshot saya bahwa saya tipografi tidak sejalan dengan kotak garis. Memiliki garis grid tidak berarti hal-hal yang sebelumnya tidak akan menyelaraskan ajaib. Setiap kali Anda mengubah penempatan grid Anda Anda akan memiliki untuk menyelaraskan item Anda kembali. Tipografi berbeda karena tidak memulai atau mengakhiri mana elemen seluruh daerah ini. Anda dapat menempatkan dasar dari tipografi namun Anda inginkan dalam hubungannya dengan grid. Terserah pada Anda. I meletakkannya di atas baris. Jadi biarkan aku menyetel kembali itu untuk Anda.

Seperti yang Anda lihat, paragraf mobile tidak sejajar; tingginya baris adalah 24px. Oleh karena itu dibutuhkan sendiri halaman dan grid layout. Tetapi untuk langkah-langkah ini dapat tetap sejajar.

Pelajari lebih lanjut

Warna

Mari kita lihat bagaimana untuk menyimpan Warna dalam sketsa sehingga Anda dapat menggunakan kembali mereka.

Katakanlah saya ingin menambah deretan ungu untuk digunakan sebagai aksen dalam desain ini. Saya akan menyalin dan menyisipkan baris hijau dan memilih ungu. Untuk membuat segalanya lebih cepat, saya memutuskan pada nuansa ungu yang lebih terang dengan mengubah opacity warna asli menjadi 70%, 50% dan 20% masing-masing.

Apa yang Anda lakukan selanjutnya untuk mendapatkan warna yang menggunakan warna Eyedrop alat dan pilih warna baru. Jangan lupa untuk mengubah opacity kembali ke 100%.

Selanjutnya, gunakan kecil + di bagian bawah warna Swatch untuk menyimpan Warna sketsa dari palet. Perbedaan antara Global Colors dan Document Colors adalah sebagai nama mereka menyarankan, Global Color akan disimpan dalam sketsa untuk menggunakan kembali di semua file sketsa lain Anda membuka sedangkan dokumen warna hanya tinggal dalam dokumen tertentu tersebut.

Elemen UI

Aku punya setumpuk sederhana elemen UI di file sketsa saya.

Saya menjaga mereka di sini sehingga saya dapat dengan cepat menyalin yang saya perlu ke desain baru yang saya kerjakan. Aku akan menunjukkan kepada Anda bagaimana untuk menciptakan gaya bersama dan simbol untuk digunakan kembali.

Shared Styles

Gaya bersama adalah stylings Anda dapat menggunakan kembali atas lagi. Sebagai contoh, input aktif/terfokus terdiri dari tiga komponen, teks label, input teks dan kotak input.

Persegi panjang memiliki gaya tertentu, memiliki latar belakang putih, perbatasan satu pixel biru dan cahaya biru dalam bayangan. Itu adalah sesuatu yang dapat digunakan kembali jika Anda bekerja pada beberapa masukan.

Di sisi kanan di atas semua styling aku hanya dijelaskan Anda dapat melihat teks mengatakan No Shared Style. Anda dapat menyimpan karakteristik gaya ini dengan cara yang sama kita diselamatkan styling teks untuk judul kami. Menyimpannya dan menggunakannya sebanyak yang Anda suka. Tetapi Harap diingat bahwa jika Anda mengubah beberapa aspek gaya disimpan di masa depan, itu akan mempengaruhi setiap elemen yang berbagi gaya itu.

Saya menggunakan fitur ini untuk banyak gaya yang berbeda, seperti kesalahan input negara dan bahkan saya tiga tombol (biru, hitam dan putih yang).

Simbol

Simbol adalah fitur yang hebat dari sketsa yang saya gunakan banyak. Simbol dikenali oleh folder mereka ungu dalam Layer List yang aku tidak terbuka di screenshot saya. Untuk beralih view yang pergi ke View > Show Layer List atau tekan Command + Option + 1.

Mari kita membuat masukan saya digunakan dalam gaya bersama sebagai contoh untuk simbol juga. Pertama, mari kita membuat sebuah kelompok. Untuk melakukan itu tekan Command + G.

Untuk membuat simbol, Anda dapat menggunakan ikon di bagian atas kiri App sketsa. Anda juga dapat menggunakan area yang sama untuk menyimpan gaya bersama untuk menyimpan grup sebagai simbol terlalu. Setelah Anda melakukannya, nama itu.

Simbol berbeda dari lainnya dapat digunakan kembali styling karena merupakan sekelompok unsur-unsur yang Anda dapat memperbarui seluruh, bukan gaya tunggal seperti warna persegi masukan atau gaya teks label. Simbol menjaga jarak dan ukuran elemen yang Anda menggunakan kembali mereka.

Keren lain fitur dari simbol itu bahwa Anda dapat memilih elemen teks yang Anda ingin menggunakan kembali verbatim, makna teks yang sebenarnya tetap sama, atau Anda dapat mengecualikan nilai teks dari elemen teks yang dipilih. Ini adalah fitur yang luar biasa yang saya cintai. Itu akan sia-sia untuk menggunakan simbol masukan saya kembali jika saya tidak bisa mengubah nama satu untuk "Nama" dan yang lain untuk "Nama."

Pelajari lebih lanjut

Wrapping Up

Fitur ini akan membantu Anda membuat Anda sendiri gaya panduan dalam sketsa. Download source file dan bermain-main dengan apa yang telah dibangun. Saya berharap untuk mendengar saran Anda untuk perbaikan! Dan jika Anda sedang mencari lebih banyak inspirasi untuk bekerja dengan sketsa, lihatlah kategori Sketch file Envato Market.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.