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

Buat Halaman Landing iPhone / iPad Ilustratif di Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

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

Hadapi itu, ada App untuk hampir segalanya. Dengan aplikasi baru muncul inovasi dalam cara kami dapat menyajikan produk seluler kami kepada calon pelanggan. Apple telah memberkati kita dengan merek yang indah mengkilap & ramping yang pada dasarnya membangun situs web yang bagus untuk kita. Tutorial ini akan mengambil langkah lebih jauh, menggabungkan gaya ilustratif di bawah Apple gloss, untuk menyatukan semacam halaman arahan .

Hadapi itu, ada App untuk hampir segalanya. Dengan aplikasi baru muncul inovasi dalam cara kami dapat menyajikan produk seluler kami kepada calon pelanggan. Apple telah memberkati kami dengan merek yang indah mengkilap & ramping yang pada dasarnya membangun situs web yang bagus untuk kita. Tutorial ini akan mengambil langkah lebih jauh, menggabungkan gaya ilustratif di bawah Apple gloss, untuk menyatukan semacam halaman arahan.


Langkah 1 - Mengatur Dokumen

Mungkin saya jadul, tapi saya masih suka situs yang diperbaiki pada 960px. Ini adalah angka bulat yang bagus, dapat dibagi dengan 1, 2, 3, 4, 5, 6, 8, 10 yang membuatnya bekerja dengan pseudo-grid yang jauh lebih mudah. Tutorial ini tidak berbeda; jadi saya telah membuat dokumen baru yaitu 1000px kali 1.200px dengan panduan memahat pusat untuk desain 960px kali 1200px.

Selanjutnya kita akan mengatur kolom yang akan kita gunakan untuk sisa desain. Saya memilih 3 kolom, dengan 40px padding di antara mereka. Kolom dari kiri ke kanan adalah 240px, 390px, 240px.



Langkah 2 - Buat Latar Belakang Wallpaper Ornate

Karena kita ingin desain kita terlihat seperti berada di rak buku, kita memerlukan beberapa jenis wallpaper untuk duduk tepat di belakangnya.

Buat Layer Baru, dan isi seluruh layer dengan warna putih (Shift + F5). Selanjutnya, pergi ke properti layer anda dan overlay pola hiasan Anda (saya melewati pembuatan pola, karena saya mengasumsikan semua orang sudah tahu cara melakukan ini).


Setelah menerapkan gaya lapisan, dokumen kami akan terlihat seperti ini:



Langkah 3- Tambhkan Rak

Kita akan membuat layer baru yang mencakup seluruh dokumen dan kira-kira 140px tinggi. Kita akan menggunakan teknik yang sama seperti Langkah 2, meskipun kami akan menerapkan tekstur kayu alih-alih tekstur berornamen. Sekali lagi, ada ratusan situs yang memberikan tekstur kayu bebas royalti: Google Search for Royalty Free Wood Textures

Hasilnya seharusnya seperti ini:


Ubah nama layer ini 'rak'.

Rak terlihat agak datar, jadi kita perlu menambahkan beberapa kedalaman menggunakan gradien, bayangan, dan sorotan. Tambahkan gaya lapisan baru untuk: Stroke, Drop Shadow & Gradient Overlay sebagai berikut:


Anda mungkin mengatakan pada diri sendiri bahwa bayangan jatuh terlihat sangat jelek sekarang. Sepakat; tapi itu tidak akan terlihat kasar ketika kita mendapatkan buku di depannya. Seperti inilah tampilan dokumen anda sekarang:


Selanjutnya, kita akan membuat tepi depan rak. Gandakan (Command + J) lapisan 'rak' dan beri nama 'depan rak'. Pindahkan lapisan 'depan rak' ke bawah sehingga bagian bawah lapisan 'rak' sejajar dengan bagian atas lapisan 'atas rak'. Pangkas 20px dari bagian bawah lapisan 'atas rak' sehingga ketinggiannya bervariasi. kita ingin memberikan ilusi bahwa rak lebih dalam dari bagian depan rak tinggi.

Selanjutnya, kita perlu mengubah beberapa style layer untuk layer 'top of shelf'. Pertama, kita perlu memindahkan lapisan 'depan rak' di bawah lapisan 'rak' di palet Layers Anda. Kemudian kita akan membalikkan gradien (dan menurunkan opacitynya) karena kita ingin bayangan berada di bawah bukan di atas. Dengan melakukan ini, kita akan membuat sumber cahaya yang berada di sudut depan atas rak - tepat di mana kita akan memamerkan buku-buku dan tangkapan layar iPhone kita.


Setelah menerapkan semua gaya lapisan, gambar anda akan terlihat seperti ini:


Sekarang kita bisa berhenti di sini, tetapi saya pikir hanya ada sedikit lebih banyak detail yang hilang di rak. Sudut-sudutnya masih tampak agak datar, dan kami ingin memiliki kedalaman yang banyak, jadi kita akan menambahkan beberapa garis highlight setinggi 1px untuk memberikan tambahan kedalaman tambahan.


Buat garis tepat di bawah batas stroke 2px dari lapisan 'rak'. Kemudian, Anda dapat memilih warna untuk diisi (Shift + F5) yang lebih ringan dari semua butir kayu di rak, atau cukup isi dengan warna putih dan atur opasitas. Hasilnya, akan memberi Anda sedikit tambahan kedalaman:



Langkah 4 - Buat Bagian Belakang Rak Buku

Kita akan menggunakan kembali pola kayu kita dari membuat rak di atas untuk membuat jenis "kembali" ke rak buku kita. Idenya di sini adalah untuk membuatnya tampak seolah-olah kita telah mengatur iPhone dan buku di bagian atas rak buku, dan memiliki informasi tambahan kami di dalamnya. Kami akan membuat lapisan ini di bawah lapisan rak di tumpukan.

Buat seleksi, isi dengan pola kayu anda (Shift + F5). Ubah nama layer ini 'belakang rak'.


Karena sumber cahaya kita diarahkan ke sudut depan atas rak, kita perlu membuat bagian belakang sedikit lebih gelap agar terlihat lebih seperti rak buku dengan kedalaman, dan kurang seperti lantai kayu. Sangat mudah untuk melakukan ini dengan Layer Styles; Tambahkan layer style "Color Overlay" ke layer 'back of shelf' dan atur warnanya ke Black. Sesuaikan opacity menjadi 50%, dan anda sekarang harus melihat kayu yang lebih gelap untuk bagian belakang rak buku.


Setelah sedikit menyesuaikan dengan opacity latar belakang hiasan saya, gambar anda akan terlihat seperti ini:



Langkah 5 - Buat Logo

Sekarang setelah seluruh dokumen kita siap, serta semua lapisan latar belakang yang dibuat untuk tema, kita akan melanjutkan dan membuat semua elemen yang berada di atas latar belakang (secara teknis, di latar belakang).

Untuk logo, saya memilih font Rockwell (itu obsesiku akhir-akhir ini) pada 60px. Buat layer teks baru dengan teks: "Read It". Untuk mendapatkan perasaan gelembung itu, kita perlu menambahkan beberapa gaya lapisan untuk stroke, overlay gradien, bayangan batin, cahaya luar (hampir setiap gaya lapisan yang mungkin bisa anda tambahkan). Berikut pengaturannya:


Setelah menerapkan gaya lapisan, luruskan logo anda ke panduan paling kanan. Seharusnya terlihat seperti ini:


Sekarang kita membutuhkan pita penanda untuk "i". kita akan mulai dengan membuat bentuk baru (yang saya buat dari awal dengan alat Polygonal Lasso). Isi pilihan anda dengan warna apa saja. Itu harus sepanjang garis-garis ini:


Karena bookmark hitam pekat sangat jelek, kita perlu menambahkan beberapa kilau padanya. Yang kita butuhkan di sini adalah Drop Shadow, Stroke & Gradient Overlay untuk membuat pita menonjol:


Pita bookmark Anda sekarang seharusnya seperti ini:


Yang tersisa adalah menambahkan "i", yang akan kita gunakan font yang sama (Rockwell) dengan teks putih. Tambahkan sedikit inner shadow(70% Opacity; 90 derajat; distance: 1; Choke: 0; Size: 1) dan Anda harus siap. Saya telah menambahkan pola ke bookmark saya juga, tetapi di sini pada dasarnya apa yang seharusnya anda lihat:



Langkah 6 - Menambahkan Buku

Jangan khawatir; anda tidak perlu membuat semua ini dari awal. Keindahan web saat ini adalah bahwa ada ribuan opsi untuk ilustrasi stok - yang akan menghemat waktu anda pada akhirnya. Saya menemukan buku-buku di iStockphoto di sini. Buku-buku ini tidak sepenuhnya penting untuk tutorial ini jadi jika anda suka, anda selalu bisa melanjutkan ke bagian berikutnya.

Jika anda memilih untuk membeli buku, letakkan pada gambar anda di bagian atas rak anda:


Buku-buku terlalu datar sendiri, jadi kita akan menambahkan beberapa bayangan perspektif (seperti yang kita lakukan dengan sudut rak) untuk membuat mereka terlihat seperti mereka sedang duduk di rak. Pertama-tama, ganti nama layer baru dengan buku menjadi 'buku'.

Tambahkan Drop Shadow ke lapisan 'buku' dengan pengaturan berikut: Opacity: 19%; Angle: -90; Distance: 10; Spread: 10; Size: 15. Untuk warna, pilih cokelat dari lapisan 'belakang rak'. Kita menggunakan coklat di sini karena hitam sepertinya terlalu banyak dan tidak cocok.

Untuk membuat bayangan di bawah buku, kita akan membuat ellipse Hitam baru yang mencakup seluruh lebar buku yang berdiri secara vertikal. Kita akan berurusan dengan buku bersandar sesudahnya.


Rasterize elips hitam, dan pergi ke Filter> Blur> Gaussion Blur. Gunakan radius 4,7 untuk mendapatkan spread yang diinginkan. Atur opacity lapisan elips hitam menjadi 70% untuk melembutkannya sedikit. Hasilnya akan terlihat seperti ini:


Ulangi teknik yang sama untuk buku miring, tetapi dengan elips yang jauh lebih kecil. Seharusnya terlihat seperti ini:



Langkah 7 - Tambahkan Stiker iPhone & Harga

Tidak ada landing page iPhone yang lengkap tanpa iPhone yang besar dan mengkilap - dan tutorial ini tidak terkecuali. Saya telah menggunakan templat iPhone dari orang-orang hebat di teehan + lax untuk diemulasikan ke perangkat. Hapus lapisan apa pun yang tidak ingin anda sertakan pada iPhone anda, dan seret ke dokumen anda. Tempatkan sedikit lebih rendah di rak paling atas untuk memberikan ilusi bahwa iPhone lebih dekat dengan Anda daripada buku. Kami menginginkan bagian depan & tengah iPhone yang cantik.

Tentunya ini adalah di mana screenshot pahlawan Anda akan pergi dari aplikasi Anda. Saya tidak akan menambahkan apa pun ke milik saya, tetapi Anda pasti dipersilakan untuk mengikuti tutorial ini. Selain itu, kami akan menggunakan teknik yang sama dari Langkah 6 untuk menambahkan bayangan ke bagian bawah iPhone. Output Anda, harus menyerupai:


Hanya satu item terakhir (salah satu yang paling penting) adalah stiker harga. Mulai dengan membuat lingkaran di sudut kanan atas iPhone. Ganti nama lingkaran ini menjadi 'stiker harga':


Selanjutnya, terapkan gaya lapisan berikut untuk Drop Shadow, Bevel & Emboss, Gradient Overlay, dan Stroke. Ini akan menjadi gaya lapisan yang penting, karena kami akan menggunakannya beberapa kali sepanjang sisa situs untuk tombol, dll.


Ini menciptakan sesuatu yang benar-benar mentega:


Tambahkan beberapa teks untuk harga dengan dropshadow 1px ke atas dan stiker kami selesai:


Sejauh ini, inilah yang kami buat (terlihat cukup bagus, dan terbaik dari semuanya: sangat unik):



Langkah 8 - Beli Teks & Tombol AppStore

Kami masih kehilangan tombol "Ajakan Bertindak" untuk membawa orang ke AppStore untuk membeli aplikasi kami. Kita akan membuat teks itu seolah-olah "dipahat" di bagian depan rak (dengan font yang sempurna).

Jadi begini: buat beberapa teks baru; Saya menggunakan: "Koleksi buku Anda akan mencintai Anda untuk itu." Saya menggunakan Gotham di 36px untuk mendapatkan tampilan yang diinginkan. Pada teks itu, kita perlu menerapkan dua gaya lapisan untuk memberikan tampilan yang dipahat:

  1. Inner Shadow: Blend Mode: Multiply, Color: hitam, Opacity: 75%, Angle: 90, Jarak: 1, Choke: 0, Ukuran: 2
  2. Color Overlay: Warna: hitam, Opacity: 47%

Hasil yang Anda inginkan, tergantung pada font, harus seperti ini:


Sekarang kita perlu menambahkan tombol AppStore. Saya menggunakan ikon iPhone dari IconFinder.net untuk membuat ulang tombol "Tersedia di AppStore".

Untuk membuat tombol, buat persegi panjang bulat baru dengan radius border 10px. Saya membuat persegi panjang saya 240px lebar 74px tinggi.


Karena kami telah membuat Layer Style kecil yang bagus untuk tombol ketika kami membuat stiker harga di Langkah 7, kita dapat menyalin gaya lapisan dari stiker itu dan menempelkan gaya lapisan ke layer tombol baru kami. Untuk melakukan ini, klik kanan layer yang Anda ingin salin Layer Style dari dan pilih "Copy Layer Style" dari menu popup. Pilih layer yang Anda inginkan untuk menerapkan style layer ini ke dan klik kanan, dan pilih "Paste Layer Style". Sangat mudah.


Tempatkan ikon iPhone yang Anda unduh dari IconFinder di bagian atas tombol, memberikan gaya lapisan:

  1. Inner Shadow: Blend Mode: Multiple, Color: Black, Opacity: 57%, Angle 90, Jarak: 1, Choke: 0, Ukuran: 1 (ini akan memberi kita bayangan batin yang bagus
    untuk membuat ikon terlihat seperti disetel di tombol)
  2. Color Overlay: # edfed4 (atau warna yang hampir sama, tergantung pada warna yang Anda pilih untuk stiker Anda)

Tambahkan teks AppStore, dan gunakan kembali Layer Style yang Anda buat untuk ikon iPhone pada teks. Hasil Anda harus menyerupai:



Langkah 9 - Daftar Fitur

Ini mungkin bagian yang paling tidak menarik dari desain, tetapi yang paling menarik untuk siapapun yang ingin membeli aplikasi Anda. Buat judul baru, ukuran 30px teks (saya menggunakan Rockwell lagi) dan masukkan teks "Fitur". Ingat panduan yang kami buat jalan kembali di awal tutorial ini? Kami akan menggunakannya sekarang untuk 3 kolom kami; jadi sejajarkan teks Fitur ke panduan paling kanan.

Terapkan beberapa gaya lapisan ke teks ini:

  1. Gradient Overlay: # bcab8e ke #ebdbbe atau warna serupa agar terlihat bagus di kayu gelap (ini juga bisa berupa teks biasa)
  2. Drop Shadow: Multiple, Color: Black, Opacity: 75%, Angle: -90, Jarak: 1, Choke: 0, Ukuran: 1 (karena kami ingin menciptakan efek yang dipahat)

Selanjutnya, buat beberapa teks miring di bawah ini, dan tambahkan beberapa peluru. Cukup mudah bukan?



Langkah 10 - Tambahkan Beberapa Tangkapan Layar

Kami harus memamerkan aplikasi kami. Screenshot iPhone kami tidak hanya memiliki gambar dari aplikasi kami, tetapi kami juga harus menampilkan gambar yang diperbesar dari aplikasi kami sehingga orang tahu persis apa yang dapat mereka harapkan.

Pertama, kita akan menduplikasi (Command + J) layer teks "Fitur" kami dari Langkah 9. Ubah teks untuk membaca "Tangkapan layar" dan pindahkan sehingga diletakkan di kolom tengah.


Selanjutnya kita akan membuat screenshot. Kami akan mulai dengan membuat lapisan inset luar. Mulai dengan membuat bentuk persegi panjang bulat baru, 180px kali 180px dengan radius 10px. Salin Layer Style dari teks yang dipahat pada Langkah 8 dan tempelkan ke bentuk persegi panjang bulat Anda. Gandakan layer (Command + J) dan spasi mereka secara merata dalam kolom lebar 390px:


Sekarang kita akan membuat placeholder untuk gambar (Anda jelas akan mengganti ini dengan screenshot aplikasi Anda nanti). Buat persegi panjang bulat lainnya, tetapi kali ini dengan pengaturan:

  1. Width: 160px
  2. Height: 160px
  3. Radius: 5px (area bundar dalam persegi panjang shoul selalu setengah radius pembatas dari persegi panjang bulat terluar)

Gandakan layer, dan pindahkan layer hasil duplikasi di atas inset screenshot lainnya.


Tambahkan Color Overlay ke kedua layer ini (dengan warna # f6f3eb) untuk placeholder.


Terakhir kita perlu menambahkan ikon Zoom. Mulailah dengan menggambar lingkaran di sudut kanan atas (seperti yang Anda lakukan untuk stiker harga). Punyaku berdiameter sekitar 30 piksel.

Tempel Layer Style yang sama dari stiker harga ke lingkaran baru. Saya telah menyesuaikan warna Gradien dan warna Stroke untuk mendapatkan tampilan yang sedikit berbeda dari warna hijau.


Terakhir, kita perlu menambahkan ikon "Zoom". Saya menggunakan ikon zoom dari set ikon Glyphish yang menakjubkan. Untuk
selesaikan ikon zoom, kita hanya perlu menambahkan sedikit bayangan dalam (1px atau lebih) untuk memberikan kedalaman tertentu.

Gandakan grup ikon zoom yang Anda buat, dan pindahkan ke gambar mini lainnya. Saat Anda menerapkan ini, pasti akan menyenangkan untuk melakukan beberapa hal
keren zoom pada screenshot ini saat Anda mengklik mereka. Mungkin untuk Nettuts pertama saya :).



Langkah 11 - Testimonial

Last but not least untuk bagian utama adalah testimonial. Saya telah membuat balon bicara dari persegi panjang bulat dan bentuk khusus.
Kami akan mulai dengan persegi panjang bulat. Buat persegi panjang bulat baru dengan pengaturan:

  1. Radius: 40px, Lebar: 240px (lebar kolom kanan) dan Tinggi: 80px

Sekarang pilih Alat Bentuk Kustom, dan cari balon bicara untuk membuat ekor:


Buat balon ucapan di atas lapisan persegi panjang yang bulat, sehingga hanya ekornya yang tidak tumpang tindih.


Pilih kedua layer dan satukan bersama-sama (Command + E). Hasilnya harus berupa satu bentuk yang kemudian dapat kita terapkan pada beberapa gaya.

Sekali lagi, mari kita salin Layer Style dari stiker harga dan tempelkan style layer ke balon testimonial kami (kami akan membuatnya menjadi tekstur kayu dalam hitungan detik). Kami melakukan ini karena kami ingin sebagian besar gaya dari stiker, seperti Beveling, Drop Shadow dan Stroke styles - Kami hanya akan bermain dengan tekstur dan warna sedikit untuk memberikan tampilan yang tepat. Dengan menggunakan kembali gaya lapisan seperti ini, Anda dapat menjaga desain Anda tetap konsisten serta menghemat banyak waktu dengan tidak perlu membuat ulang efek yang sama berulang kali.

Pertama kita akan mengubah Gradient Overlay. Kita membutuhkannya dari warna menjadi transparan (karena kita ingin biji-bijian kayu muncul dari belakangnya). Saya memilih untuk memiliki gradien memudar menjadi coklat yang sangat gelap: # 292115.


Terakhir, kami akan melakukan Overlay Pola tekstur kayu agar lebih menyatu dengan latar belakang.


Sesuaikan warna goresan menjadi cokelat yang lebih gelap (tidak hijau), dan Anda siap!


Yang perlu Anda lakukan sekarang adalah menambahkan ulasan pelanggan Anda, dan Anda memiliki satu jenis balon testimonial. Gandakan grup testimonial
dan memindahkannya tepat di bawah yang lain, dan hanya itu!


Langkah 12 - Mailing List

Kami akan mulai dengan membuat wadah sekitarnya yang teks dan formulirnya akan duduk di dalamnya. Saya membuat persegi panjang bulat, dengan radius 40px dan lebar 960px (lebar halaman kami). Saya menyisipkan Layer Style dari teks di Langkah 8 untuk memberikan nuansa inset. Seperti yang saya sebutkan sebelumnya, saya selalu cenderung menggunakan kembali gaya lapisan saya sebanyak mungkin karena memastikan konsistensi.


Sekali lagi saya menuju ke IconFinder untuk menemukan ikon surat - untungnya bagi kami
ikon 64px oleh 64px adalah persis apa yang kami butuhkan. Tempatkan ikon itu di sudut kiri bar inset kami - itu akan menjadi jangkar
untuk buletin dan membantu menyeimbangkan tombol Kirim.


Selanjutnya, tambahkan "Want the latest news? Join the mailing list" teks. Saya menggunakan Gotham lagi, tetapi dengan ukuran yang sedikit lebih kecil pada 24px. Membuat
warna teks # 161008 (karena kami tidak ingin terlalu menonjol) dan menambahkan bayangan bayangan coklat muda 1px di bawah ini (sekali lagi kami menciptakan kedalaman itu).


Wow! Kami sangat dekat. Yang perlu kita lakukan adalah menambahkan form dan tombol e-mail dan kita akan selesai. Buat persegi panjang bulat lainnya, dengan radius 20px
(setengah dari bentuk persegi panjang bulat terluar), dan tinggi 40px (sehingga kita tidak memiliki sisi lurus pada kedua sisi).


Satu hal yang perlu diperhatikan adalah seberapa konsisten jarak di sekitar sisi kanan. Dengan mengurangi separuh jari-jari dalam, kita menjaga lapisan yang konsisten antara wadah luar dan wadah dalam.

Menggunakan preset yang sama untuk persegi panjang bulat (radius 20px, tinggi 40px), buat tombol persegi panjang bulat baru. Salin Layer Style dari Zoom Icon kami dari Langkah 10 (warna oranye kemerahan). Tempel Layer Style itu ke tombol baru Anda. Anda harus memiliki sesuatu seperti ini:


Yang perlu Anda lakukan sekarang adalah menambahkan teks "Kirim" dan selesai!


Kesimpulan

Itu dia. Kita telah membuat halaman landing iPhone unik; menggabungkan gaya ilustratif baru dengan nuansa iPhone yang mengkilap. Tutorial ini tidak hanya untuk aplikasi buku - Anda dapat mengganti buku di rak hanya untuk apa saja (yaitu mengonversinya ke meja untuk minum-minum). Semoga Anda menikmatinya!



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.