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

Mendesain Website Minimalis Untuk Salon Rambut Menggunakan Adobe Illustrator

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Apakah anda menyukai website yang elegan dan rapi? Maka pastikan untuk memakai sabuk pengaman anda, karena dalam tutorial ini anda akan menemukan bagaimana cara menggabungkan kesederhanaan dan nilai elegan dalam satu halaman website menggunakan Adobe Illustrator.

Tutorial ini akan menunjukkan kepada anda segala yang anda perlukan untuk membuat sebuah website yang elegan namun sederhana untuk bisnis kecil anda menggunakan Adobe Illustrator, dengan contoh Hair & Beauty Salon. Mari memulai.

Tutorial Assets

Fonts

Tutorial ini menggunakan beberapa font gratis dan assets lainnya yang tersedia untuk diunduh pada tautan berikut:

Lalu, font family yang digunakan dalam tutorial ini bernama Proxima Nova dan font ini hadir dengan Typeset Subscription, sehingga anda dapat menggunakannya untuk layout desain anda dan mem-publish situs akhir anda:

Gambar

Tutorial ini juga menggunakan beberapa gambar yang dapat anda unduh dari Photodune. Gambar yang saya dapat cukup cocok dengan tujuan tutorial ini, namun anda dapat menggunakan gambar pilihan anda sendiri:

1. Mengatur Layout dan Grid

Langkah 1

Pertama, buat sebuah New Document. Atur dimensi Artboard menjadi 1500 px x 4500 px. Karena kita akan membuat grafik untuk penggunaan monitor, pastikan bahwa Color Mode diatur ke RGB dan Raster Effects 72 ppi.

Langkah 2

Mari membuat New Layer. Namai top layer sebagai "Grid" dan bottom layer sebagai "Artwork". Ini merupakan dimana kita akan menempatkan grid yang akan membantu meratakan posisi objek pada Artboard.

Langkah 3

Gunakan Rectangle Tool (M) untuk membuat garis strip baru. Atur dimensinya menjadi 30 px x 4500 px.

Langkah 4

Pastikan garis strip tersebut diletakkan pada layer "Grid". Beri warna Merah (R 255 G 0 B 0).

Langkah 5

Pilih garis strip merah tersebut, kemudian masuk ke Appearance Panel dan klik Illustrator Effects > Distort & Transform > Transform.

Langkah 6

Pindahkan garis strip tersebut secara horizontal sebesar 40 px. Tambahkan 23 copies. Ini akan membuat garis vertikal dengan memperbanyak garis strip tersebut sebanyak 23 kali dengan jarak sekitar 10 px di antara tiap garis strip.

Langkah 7

Sekali lagi, dengan menyeleksi garis strip merah masuk ke menu Object > Expand Appearance. Ini akan membelah efek multiplikasi ke dalam garis strip yang terpisah.

Langkah 8

Pilih kumpulan garis strip tersebut dan Ratakan posisinya terhadap Artboard baik secara horizontal dan vertikal.

Langkah 9

Masuk ke Transparency Panel dan atur Opacity menjadi 10%.

Langkah 10

Untuk memastikan bahwa garis grid tidak berpindah ketika anda secara tidak sengaja mengkliknya, klik lock pada Grid Layer.

2. Mengatur Background

Langkah 1

Dalam langkah ini, kita akan membuat sebuah background dengan tipe tiled. Untuk tujuan ini, gunakan gambar PNG "Debut Dark BG." Dengan Artwork Layer yang dipilih, masuk ke menu File > Place. Impor gambar berikut.

Langkah 2

Sekarang mari membuat sebuah pola tiled. Pilih gambar yang telah diimpor dan masuk menu Object > Pattern > Make.

Langkah 3

Pada Pattern Options, anda dapat bermain - main dengan advanced settings. Namai pola ini Debut Dark.

Langkah 4

Pada sudut kiri atas, konfirmasikan pola baru ini dengan mengklik Done.

Langkah 5

Buatlah sebuah Persegi dengan dimensi 1500 px x 4500 px.

Langkah 6

Pilih persegi baru tersebut Ratakan dengan Artboard.

Langkah 7

Isi persegi tersebut dengan pola Debut Dark dari Swatches Panel.

3. Membuat Top Header dan Menu

Langkah 1

Masuk menu File > Place dan impor gambar untuk header. Pastikan untuk mematikan centang Link. Kita ingin gambar tersebut terpasang, bukan hanya sebagai tautan.

Langkah 2

Pilih gambar header dan Ratakan dengan Artboard. Ratakan secara vertikal dengan Tepi Atas.

Langkah 3

Buat sebuah Persegi dengan dimensi 1300 px x 55 px. Ini akan menjadi dasar untuk menu navigasi.

Langkah 4

Beri warna persegi tersebut dengan warna Hitam (R 0 G 0 B 0). Pada Transparency Panel, atur Opacity menjadi 60%.

Langkah 5

Ratakan persegi tersebut menjadi di Tengah Artboard. Ratakan juga terhadap tepi bawah gambar header.

Langkah 6

Dengan menggunakan Type Tool (T), tuliskan "Welcome." Tutorial ini menggunakan font Proxima Nova, yang ada bersama Typekit subscription, namaun anda bebas untuk menggunakan font yang anda suka.

Pada Character Panel, atur Ukuran Font menjadi 16 pt dan Tracking menjadi 10. Pilih All Caps . Beri warna teks dengan warna Putih (R 255 G 255 B 255).

Langkah 7

Pilih teks "Welcome". Tahan tombol Alt - Shift, klik dan geser teks tersebut. Ini akan membuat copy dari teks terpilih. Lakukan duplikasi ini tiga kali lagi.

Langkah 8

Namai setiap copy teks baru sesuai dengan gambar. Karena teks "Welcome" tersebut aktif, itu memiliki Warna Putih. Tombol lainnya menyatakan tidak aktif. Mari warnai dengan sebuah Warna Abu-abu lembut (R 201 G 201 B 201).

Langkah 9

Gunakan Smart Guides (Cmd - U) dan grid vertical untuk meratakan tombol menu dengan menu navigasi yang berwarna hitam. Pastikan bahwa jarak spasinya rata.

Langkah 10

Buat sebuah Garis ( \ ). Buat ukuran panjangnya 410 px. Atur Sudutnya menjadi 0°.

Langkah 11

Tambahkan Stroke Weight ke 1 pt. Beri warna Putih (R 255 G 255 B 255).

Langkah 12

Sekali lagi, gunakan Smart Guides (U) untuk meratakan garis tersebut dengan grid vertikal. Pastikan bahwa garis tersebut menyentuh tepi kanan garis strip merah yang pertama.

Atau, jika anda lebih nyaman dengan angka pasti, anda dapat menggunakan Anchor Reference Point dan menyesuaikan posisi garis secara terpisah untuk sumbu X dan Y.

Langkah 13

Dengan garis putih yang dipilih, tekan Enter. Sebuah jendela baru akan muncul dengan transform options. Atur Horizontal Position menjadi 477 px. Klik Copy. Langkah ini akan menduplikasi garis dan memindahkannya ke sisi kanan.

Langkah 14

Selanjutnya, buatlah bentuk sebuah hati. Dengan menggunakan Ellipse Tool, buat sebuah lingkaran bulat dengan dimensi 17 px x 17 px. Beri Warna Putih

Langkah 15

Dengan lingkaran putih dipilih, tekan Enter. Sebuah jendela baru akan terbuka dengan transform properties. Atur Horizontal Position menjadi 13 px. Pastikan anda menekan Copy. Langkah ini akan membuat dua lingkaran identik yang saling bertindihan berjarak 13 px.

Langkah 16

Dengan menggunakan Star Tool, buat sebuah segitiga. Sambil menggeser kursor pada layar untuk membuat sebuah bintang, tekan kembol Panah Bawah sampai anda mengurangi jumlah titik untuk membuat segitiga.

Langkah 17

Gunakan Free Transform Tool (E) untuk memutar segitiga tersebut 180 derajat.

Langkah 18

Kecilkan ukuran segitiga pada sumbu vertikal menjadi 13 px.

Langkah 19

Masuk menu Object > Path > Add Anchor Points. Langkah ini akan menambahkan sebuah anchor point baru pada segitiga tersebut.

Langkah 20

Gunakan Anchor Point Tool (Shift - C) untuk menghaluskan sudut tengah anchor point. Sesuaikan kurvanya hingga menciptakan bentuk lengkungan pada tepi hati. Ulangi langkah yang sama untuk bagian tepi hati sisi kiri. Pastikan bahwa kedua tepi tampak seragam dan mulus.

Langkah 21

Gunakan Free Transform Tool (E) untuk menempatkah bentuk hati di antara dua garis strip.

Langkah 22

Ikuti Langkah 10 - 13 untuk membuat kumpulan garis strip baru yang akan ditempatkan pada bagian bawah header. Pastikan bahwa ukuran Position adalah 306 px pada sumbu X dan 560 px pada sumbu Y. Kali ini, buat garis strip tersebut lebih pendek dari bagian dalam sehingga dapat memuat teks di dalamnya.

Langkah 23

Gunakan Type Tool (T) untuk menambahkan teks di antara garis strip bawah. Lagi, gunakan font Proxima Nova Semibold.

Pastikan untuk menggunakan Small Caps. Kenapa menggunakan Small Caps dan tidak All Caps? Ada perbedaan besar antara kedua hal tersebut dalam typography, tergantung pada situasinya. Perbedaan utama adalah Small Caps menggunakan kumpulan huruf yang berbeda dibanding All Caps. Dalam Small Caps, ukuran huruf disesuaikan terhadap x-height sehingga teks miring akan tampak alami bersama teks lainnya dalam paragraf. Dalam hal ini, teks Small Caps cocok dan kelihatan lebih menarik.

Lihat perbedaan antara keduanya.

Langkah 24

Lagi, dengan menggunakan Type Tool (T), ketik nama studio - Salone Di Bellezza. Heading ini menggunakan font Canter Outline , yang dapat diunduh gratis. Ukuran teks adalah 190 pt.

Langkah 25

Gunakan Shear Tool untuk memiringkan teks. Pastikan bahwa Shear Angle is 348° dan Axis diatur menjadi Vertical.

Langkah 26

Gandakan main heading untuk membuat subtitle. Subtitle ini menggunakan font Canter Bold dengan Ukuran Teks 98 pt. Dengan menggunakan Free Transform Tool (E), pindahkan subtitle di bawah main heading.

4. Membuat Seksi "What We Do"

Langkah 1

Gunakan Rectangle Tool (M) untuk membuat background untuk seksi baru. Atur Ukuran menjadi 1300 px x 760 px. Isi persegi tersebut dengan Warna Cokelat Pucat (R 216 G 207 B 195).

Langkah 2

Tempatkan background baru tersebut di bawah top menu. Gunakan Smart Guides (U).

Langkah 3

Dengan section background yang dipilih, masuk ke Appearance Panel. Buat sebuah Fill baru dan jadikan warna Hitam.

Langkah 4

Dengan Fill Hitam yang dipilih, pilih Illustrator Effects > Texture > Grain...

Langkah 5

Dalam jendela effects, sesuaikan Grain Intensity ke 81. Atur Contrast ke 50. Pilih Sprinkles untuk Grain Type.

Langkah 6

Sekarang, masuk ke Fill Opacity. Atur Blending Mode ke Soft Light. Atur Opacity ke 30%.

Langkah 7

Duplikasikan subtitle putih sebagai referensi teks untuk membuat sebuah judul baru dalam seksi "What We Do." Judul baru ini menggunakan Warna Gelap (R 38 G 38 B 37). Atur Text Size ke 67 px. Juga, sesuaikan Character Tracking menjadi nilai negatif -10.

Langkah 8

Buat sebuah New Paragraph. Ketikkan dummy text. Atur font ke Proxima Nova Regular. Atur Ukuran font ke 15,5 pt. Atur Leading ke 23 pt. Samakan warna teks dengan judul.

Langkah 9

Pilih paragraf pertama. Klik Alt - Drag ke bawah. Ini akan menduplikasikan paragraf menjadi paragraf baru. Pastikan ada cukup ruang antara paragraf tersebut sebagai tempat icon yang nantinya akan dibuat.

Langkah 10

Mari membuat teks signature. Gunakan Pen Tool (P) untuk membuat garis lengkung baru.

Langkah 11

Pilih Type Tool (T) dan arahkan ke garis lengkung. Kursor akan mengindikasikan bahwa anda dapat mengetik sepanjang garis.

Langkah 12

Ketikkan nama yang diinginkan, sebagai contoh "Emilly Douglass." Gunakan font LHF Sofia Script Regular. Atur Text Size ke 44 pt.

Langkah 13

Dengan menggunakan Direct Selection Tool, mari bermain sedikit dengan pengatur teks untuk memindahkannya ke dalam alur garis yang tepat.

Langkah 14

Dengan menggunakan Ellipse Tool (L), buatlah sebuah lingkaran baru. Atur dimensinya ke90 px x 90 px. Atur Stroke Weight ke 3 pt. Atur Color ke Dark Black (R 38 G 38 B 37) - sama seperti teks sebelumnya.

Langkah 15

Dengan Rectangle Tool (M), buat sebuah persegi baru. Atur dimensinya ke 14 px x 28 px.

Langkah 16

Pastikan bahwa Align to Pixel Grid tidak tercentang di Transform Panel. Dengan Direct Selection Tool (A), satukan top anchor points bersama - sama.

Langkah 17

Berikutnya, gunakan Rounded Rectangle Tool untuk membuat persegi bulat. Atur dimensinya ke 23 px x 29 px. Anda dapat menyesuaikan ukuran radius sudut dengan menekan tombol keyboard Atas atau Bawah sambil menggerakkan persegi tersebut.

Langkah 18

Lagi, dengan Direct Selection Tool (A), tekan dua anchor points bawah bersama - sama.

Langkah 19

Buat sebuah persegi baru menggunakan Rectangle Tool (M). Atur size ke 11 px x 17 px dan tempatkan pada sudut kiri atas di dalam bentuk bulat.

Langkah 20

Tekan P untuk mengaktifkan Pen Tool. Gerakkan kursor anda ke sudut kanan bawah sampai itu mengindikasikan bahwa anda dapat menghapus anchor point. Klik untuk menghapus anchor point.

Langkah 21

Berikutnya, pilih sudut kiri atas dengan Direct Selection Tool dan pencet (gunakan kata lain selain ini) sudut tersebut ke kiri.

Langkah 22

Dengan anchor point bagian atas kiri masih terpilih, sesuaikan radius sudut dengan menggeser titik putih di dalam shape. Fitur ini disebut Live Corners dan tersedia di Illustrator CC.

langkah 23

Dengan menggunakan Rectangle Tool (M), buat sebuah persegi baru berukuran 15 px x 31 px.

Langkah 24

Lagi, dengan Direct Selection Tool (A), satukan tiap anchor point bagian bawah sedekat mungkin.

Langkah 25

Dengan Rounded Rectangle Tool, buat sebuah persegi baru berukuran 3 px x 18 px. Pindah ke stroke color untuk memberi warna dalam Color Palette (Shift - X).

Langkah 26

Dengan menggunakan Star Tool, buat sebuah segitiga baru. Ingat bahwa dengan menekan tombol Panah Bawah sambil menggerakkan shape dapat mengurangi jumlah titik (points). Pastikan ukuran segitiga tersebut 5 px x 6,5 px.

Langkah 27

Gunakan Direct Selection Tool untuk mengaktifkan Live Corner Option dan memanipulasi anchor point bagian bawah untuk membuat sudut yang bulat.

Langkah 28

Tambahkan teks dengan Text Tool (T). Atur font menjadi Proxima Nova Semibold. Atur Text Size ke 19 pt. Sesuaikan Leading ke 22 pt dan Tracking ke 75.

Langkah 29

Sekarang mari membuat icon botol parfum. Gunakan Ellipse Tool (L) untuk membuat lingkaran baru. Atur ukurannya ke 90 px x 90 px.

Langkah 30

Buat lingkaran baru di dalamnya. Atur ukurannya ke 37 px x 37 px. Juga, pastikan bahwa Stroke Weight adalah 2 pt. Jangan lupa untuk menghilangkan centang pada Align to Pixel Grid .

Langkah 31

Buat persegi baru menggunakan Rectangle Tool (M). Atur ukurannya ke 13 px x 12 px.

Langkah 32

Dengan Direct Selection Tool (A), pilih anchor points bagian atas, dan dengan menggeser handle berbentuk lingkaran putih, ubah anchor points untuk membuat sudut yang bulat.

Langkah 33

Buat Persegi baru. Atur ukurannya ke 9 px x 9 px. Dengan Free Transform Tool (E), putar persegi tersebut sebanyak 90 derajat.

Langkah 34

Setelah memilih persegi tersebut, gunakan Direct Selection Tool (A) untuk mengaktifkan Live Corner Tool dan atur handle putih secara perlahan untuk menciptakan sudut yang bulat.

Langkah 35

Buat sebuah persegi baru. Atur ukurannya ke 6 px x 3 px. Tempatkan persegi ini di atas persegi pertama.

Langkah 36

Pilih kedua persegi tersebut dan klik Merge pada Pathfinder Panel.

Langkah 37

Dengan menggunakan Rounded Rectangle Tool, buat sebuah bentuk baru dengan dimensi 18 px x 14 px.

Langkah 38

Dengan lingkaran yang terpilih, pilih menu Object > Path > Offset Path...

Langkah 39

Atur Offset ke -9 px.

Langkah 40

Dengan menggunakan Direct Selection Tool, hilangkan anchor point bawah dan kanan. Atur Stroke Weight ke 10 pt.

Langkah 41

Gunakan Width Tool (Shift - W) untuk mengatur to lebar goresan. Cobalah beberapa cara sampai anda menemukan hasil yang tepat.

Langkah 42

Pilih shape dan masuk ke menu Object > Expand Appearance.

Langkah 43

Gunakan Eyedropper Tool (I) untuk mengisi shape yang terpilih.

Langkah 44

Dengan menggunakan Text Tool (T), tambahkan teks baru. Atau, anda dapat meniru teks sebelumnya sebagai referensi.

Langkah 45

Buat sebuah lingkaran baru menggunakan Ellipse Tool (L). Atur ukurannya ke 90 px x 90 px.

Langkah 46

Aktifkan Pen Tool (P). Buat bentuk seperti di bawah. Gunakan kreatifitas dan imajinasi anda. Perhatikan posisi anchor - semakin sedikit yang anda gunakan, akan semakin mulus bentuk shape-nya.

Langkah 47

Gunakan Ellipse Tool (L) untuk membuat elips di dalam pegangan gunting. Dengan menggunakan Free Transform Tool, putar elips panjang tersebut sedikit ke kiri.

Langkah 48

Klik kanan pada kedua shape tersebut. Masuk ke menu Transform > Reflect...

Langkah 49

Refleksikan bentuk tersebut terhadap Sumbu Vertikal. Pilih Copy.

Langkah 50

Gunakan Free Transform Tool untuk memindahkan shape ke kanan.

Langkah 51

Gunakan Ellipse Tool (L) untuk membuat bentuk baru. Atur ukurannya ke 3 px x 3 px. Isi dengan Warna Hitam Gelap (R 38 G 38 B 37).

Langkah 52

Gunakan Line Tool ( \ ) untuk membuat sebuah garis vertikal di tengah gunting. Atur Stroke Weight ke 1 px.

Langkah 53

Sekarang lakukan zoom. Dengan menggunakan Direct Selection Tool (A), pilih dua anchor point di atas. Tekan J untuk Join Anchor Points menjadi shape tunggal.

Langkah 54

Dengan menggunakan Pen Tool (P), tambahkan anchor point lainnya di antara dua anchor point yang sudah digabungkan. Dengan menggunakan Direct Selection Tool (A), tarik anchor point sedikit ke atas. Pada Stroke Panel, ganti Corner Type dari Round Join ke Miter Join.

Langkah 55

Gunakan Star Tool untuk membuat segitiga di tengah gunting.

Langkah 56

Dengan menggunakan Direct Selection Tool (A), pilih anchor point yang di tengah dan tekan Delete.

Langkah 57

Aktifkan Rotate Tool (R). Pada rotate panel, Atur Angle ke -40°.

Langkah 58

Dengan menggunakan Type Tool (T), tambahkan beberapa teks.

Langkah 59

Gunakan vertical grid untuk menempatkan tiap icon secara merata. Gunakan Free Transform Tool (E) untuk tujuan ini.

Membuat Seksi Before & After

Langkah 1

Masuk ke File > Place (Shift - Cmd - P) dan pilih gambar di bawah ini. Tempatkan gambar tersebut ke dalam dokumen.

Langkah 2

Dengan menggunakan Free Transform Tool (E), pindahkan gambar di bawah background coklat pucat.

Langkah 3

Buat sebuah persegi baru menggunakan Rectangle Tool (M). Atur ukurannya ke 1300 px x 840 px.

Langkah 4

Pindahkan persegi ini di bawah backgorund coklat pucat. Pastikan bahwa posisinya di atas gambar wanita.

Langkah 5

Pada Layers Panel, pilih gambar dan persegi hitam. Tekan Cmd - 7. Ini akan membuat clipping mask dari alur atas. Gambar tersebut akan disesuaikan dengan bentuk yang tepat dan ukuran alur.

Langkah 6

Mari membuat persegi baru lagi. Atur ukurannya ke 1300 px x 840 px.

Langkah 7

Gunakan Free Transform Tool (E) untuk meletakkan persegi ini pada titik yang sama dengan gambar. Isi dengan Hitam (R 0 G 0 B 0). Pada Transparency Panel, atur Opacity ke 65%. Ini akan menjadi warna hitam yang membayangi di atas gambar sehingga teks putih jadi terbaca.

Langkah 8

Tekan Alt - click dan geser Title "What We Do" ke bawah. Ini akan menggandakan title tersebut. Ganti teks dan warnai dengan warna Putih (R 255 G 255 B 255).

Langkah 9

Ulangi proses ini dengan teks di blok berikutnya. Lagi, warnai dengan warna Putih (R 255 G 255 B 255).

Langkah 10

Buat sebuah lingkaran baru dengan menggunakan Ellipse Tool (L). Atur ukurannya ke 470 px x 470 px. Isi Warna menjadi Putih (R 255 G 255 B 255). Pada Transparency Panel, Atur Opacity ke 30%.

Langkah 11

Dengan lingkaran putih yang terpilih, tekan Enter. Pada Move Panel, atur Horizontal Position ke 400 px. Tekan Copy.

Langkah 12

Masuk menu File > Place (Shift - Cmd - P). Pilih gambar di bawah dan tekan Place.

Langkah 13

Dengan menggunakan Free Transform Tool (E), letakkan posisi gambar tepat di atas lingkaran pertama.

Langkah 14

Pilih lingkaran di bawah gambar dan masuk ke menu Object > Path > Offset Path...

Langkah 15

Atur Offset ke -22 px. Tekan OK.

Langkah 16

Pada Layers Panel, pindahkan lingkaran putih di atas gambar. Pilih bentuk lingkaran dan gambar. Tekan Cmd - 7 untuk membuat clipping path.

Langkah 17

Pilih lingkaran kanan. Masuk menu Object > Path > Offset Path...

Langkah 18

Lagi, atur Offset ke -22 px. Tekan OK.

Langkah 19

Isi lingkaran dengan Warna Putih (R 255 G 255 B 255). Pada Transparency Panel, atur Opacity ke 100%.

Langkah 20

Pilih lingkaran putih dan masuk ke menu Object > Path > Offset Path. Atur Offset ke -45 px.

Langkah 21

Pada lingkaran putih dalam yang baru ini, kita akan mengetikkan sebuah teks. Aktifkan Text Tool (T). Gerakkan kursor anda di atas lingkaran sampai kursor mengindikasikan bahwa anda dapat mengetikkan teks ke dalam lingkaran dalam.

Langkah 22

Mari menambahkan beberapa teks. Atur ukuran title ke 23 pt. Coba beberapa text options untuk melihat pengaturan terbaik. Ikuti aturan dasar typography untuk memastikan bahwa hasil akhir menarik secara estetika.

Langkah 23

Gunakan Rectangle Tool (M) untuk membuat persegi baru. Atur ukuran ke 70 px x 70 px. Atur Stroke Weight ke 1 pt. Isi stroke dengan Warna Putih (R 255 G 255 B 255).

Langkah 24

Aktifkan Free Transform Tool (E). Tahan Shift dan putar persegi tersebut sebesar 45°.

Langkah 25

Dengan menggunakan Direct Selection Tool (A), pilih anchor point sebelah kanan dan tekan Delete.

Langkah 26

Klik kanan pada shape tersebut dan masuk ke menu Transform > Reflect...

Langkah 27

Pada Reflect Panel, atur Axis ke Vertical. Tekan Copy.

Langkah 28

Gunakan Free Transform Tool (E) untuk memindahkan shape ke sebelah kanan lingkaran.

Membuat Seksi Inspiration

Langkah 1

Buat sebuah persegi baru menggunakan Rectangle Tool (M). Atur ukurannya ke 1300 px x 360 px. Isi Color dengan Abu - abu pucat (R 218 G 218 B 218). Tempatkan persegi tersebut di bawah seksi "Before & After".

Langkah 2

Pada Appearance Panel, buat sebuah Fill baru. Isi dengan warna Hitam (R 0 G 0 B 0).

Langkah 3

Dengan fill yang masih terpilih, masuk ke menu Illustrator Effects > Texture > Grain...

Langkah 4

Pada Grain Effect Panel, atur Intensity ke 81 dan Contrast ke 50. Gunakan Sprinkles Grain Type.

Langkah 5

Pada Appearance Panel, atur Blending Mode ke Soft Light. Sesuaikan Opacity ke 25%.

Langkah 6

Tekan Alt - click dan geser teks heading sebelumnya untuk membuat teks baru. Ketik ulang teks yang diseleksi.

Langkah 7

Isi teks baru tersebut dengan Warna Merah (R 186 G 67 B 63).

Langkah 8

Ulangi proses peng-copy-an yang sama dan duplikasikan bentuk hati dan garis strip dengan seksi header. Gunakan Direct Selection Tool (A) untuk memendekkan garis strip dan isi Stroke dengan Warna Merah (R 186 G 67 B 63).

Langkah 9

Masuk ke menu File > Place (Shift - Cmd - P). Pilih gambar yang diinginkan dan impor gambar tersebut ke dalam dokumen.

Langkah 10

Dengan menggunakan Free Transform Tool (E), ratakan gambar tersebut secara vertikal dan pindahkan langsung di bawah persegi berwarna abu - abu pucat.

Langkah 11

Buat sebuah persegi baru menggunakan Rectangle Tool (M). Atur ukurannya ke 1300 px x 55 px.

Langkah 12

Pada Transparency Panel, atur Opacity ke 60%.

Langkah 13

Gunakan Ellipse Tool (L) untuk membuat lingkaran baru. Atur ukurannya ke 11 px x 11 px. Isi dengan Warna Abu - abu Pucat(R 221 G 221 B 221).

Langkah 14

Dengan lingkaran yang dipilih, Tekan Enter. Pada Move Panel, atur Posisi Horizontal ke 30 px. Tekan Copy.

Langkah 15

Ulangi langkah sebelumnya untuk membuat beberapa lingkaran dengan ukuran yang sama. Atau, cukup tekan Cmd - D beberapa kali.

Langkah 16

Dengan menggunakan Selection Tool (V), pilih empat lingkaran sebelumnya dan warnai dengan Warna Abu-abu Gelap (R 48 G 48 B 48).

Langkah 17

Tekan G untuk mengelompokkan lingkaran dan Ratakan secara Horizontal terhadap Artboard.

Langkah 18

Pilih bentuk panah sebelumnya dan tekan Alt - drag panah di bawah seksi "Inspiration".

Membuat Seksi Meet Us

Langkah 1

Dengan menggunakan Selection Tool (V), duplikasikan background warna coklat pucat dari top section.

Langkah 2

Pilih background coklat dan atur Reference Point ke top edge. Atur height ke 404 px.

Langkah 3

Duplikasikan seksi baru teks - ulangi proses sama yang digunakan pada seksi sebelumnya. Warnai teks dengan Hitam Gelap (R 38 G 38 B 37).

Langkah 4

Berikutnya, buat sebuah blok teks baru dengan Type Tool (T). Atur Font Size ke 18 pt, Leading ke 22 pt, dan Tracking ke 75.

Langkah 5

Buat sebuah persegi baru menggunakan Rectangle Tool (M) Atur ukurannya ke 1300 px x 500 px

Langkah 6

Masuk ke menu File > Place (Shift - Cmd - P) dan imporMap Screenshot.

Langkah 7

Pada Layers Panel, pindahkan Map Screenshot ke bawah persegi berwarna hitam. Dengan kedua objek dipilih, tekan Cmd - 7 untuk membuat clipping mask.

Langkah 8

Dengan menggunakan Type Tool (T), buat sebuah teks "Copyright" di bawah seksi "Meet Us". Warnai dengan Abu - abu (R 89 G 89 B 89). Atur Font Size ke 11 pt dan gunakan All Caps. Anda juga bisa menambahkan beberapa logo vektor perusahaan anda.

Langkah 9

Buat sebuah persegi baru menggunakan Rectangle Tool (M). Atur ukurannya ke 1300 px x 4370 px.

Langkah 10

Klik kanan pada persegi dan masuk ke menu Arrange > Send to Back. Langkah ini akan memindahkan persegi di belakang seluruh objek dan elemen - elemen dalam dokumen.

Langkah 11

Dengan persegi yang masih dipilih, masuk ke menu Illustrator Effects > Stylize > Drop Shadow...

Langkah 12

Pada Drop Shadow Panel, atur Opacity ke 75%. Sesuaikan Blur ke 6 px.

Kesimpulan

Selamat! Dalam tutorial ini kita telah menggunakan tools, teknik dan efek sederhana untuk membuat desain webpage minimalist. Saya harap anda menikmati tutorial ini dan belajar sesuatu yang baru dan berguna.

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.