pada tanggal
azure bay
Oke Project
oke property
rumah minimalis
rumah murah
- Dapatkan link
- X
- Aplikasi Lainnya
Dalam tutorial membuat desain blog dengan photoshop kali ini, kami akan menunjukkan cara untuk membuat layout untuk website aplikasi web dengan menggunakan Photoshop. Kami akan menciptakan semua komponen populer dari sebuah situs aplikasi web, seperti area”feature” untuk deskripsi singkat dari app, call-to-action buttons, area screenshots/video presentation untuk menunjukkan kepada pengguna seperti bagaimana aplikasi terlihat dan apa yang dapat dilakukan, sebuah area “feature” untuk menyajikan fitur produk, dan banyak lagi. Di bawah ini Anda dapat melihat layout web yang akan kita buat. Klik pada gambar untuk melihat versi ukuran penuh.
Persiapan.
Sebelum memulai membuat layout web, silahkan anda download960 Grid System dan unzip file tersebut. Kami akan menggunakan sistem grid untuk mengatur dan mengatur berbagai komponen tata letak web kami. Setelah Anda unzip masuk ke folder nathansmith-960-Grid-System lalu cari folder \app plugins\photoshop\ >cut/copy file 960_GRIDS.atn terus masuk ke program system PC anda, terus pastekan file tadi ke Program Files\Adobe\Adobe Photoshop CS\Presets\Actions (lokasi paste file 960 grids.atn) selesai. Setelah pemasangan plugin beres, terus masuk ke folder templates dan kemudian pergi ke folder photoshop. Anda akan menemukan 3. File PSD di sana. Masing-masing file berisi grid dengan 12, 16 dan 24 kolom. Disini kami akan menggunakan file PSD 24 kolom.. setelah semua telah dipersiapkan, file PSD 24 kolom tadi buka menggunakan Photoshop sekarang.
Selain itu, file PSD. Sudah mengatur panduan Photoshop, yang akan sangat berguna bagi kami dan akan lebih menghemat sedikit waktu. Untuk menampilkan panduan, pergi ke View> Show> Guides, atau menggunakan cara pintas keyboard: Ctrl / Cmd +;.
Selama tutorial ini, Anda akan perlu untuk menciptakan bentuk dengan dimensi tertentu. Untuk melihat ukuran yang tepat dari bentuk atau seleksi saat Anda membuat itu, kita perlu memiliki Info Panel up, beralih visibilitas dengan pergi ke Window> Info. Sekarang kita siap untuk mulai membuat tata letak web!
Langkah 1: Menyiapkan Dokumen Photoshop
Untuk tata letak web ini, kita akan menggunakan grid 24 kolom tadi. Saya lebih memilih satu ini karena itu memberi saya lebih banyak kebebasan. Pastikan bahwa Anda memiliki “960_grid_24_col.psd” file terbuka di Photoshop.
Lalu pergi ke Image> Canvas Size dan mengatur lebar untuk 1200px dan tinggi untuk 1400px (kami akan memberikan diri kita sendiri beberapa ruang di sisi sehingga kita dapat melihat latar belakang kita lebih baik).
Langkah 2: Membuat Header
Tahan tombol Alt / Option dan klik pada icon Buat grup new layer baru dari bagian bawah Layers Panel (Create a new layer groupicon). Sebuah jendela baru akan muncul. Nama grup “header” dan klik OK. Pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang dengan lebar 1200px dan tinggi 80px, menggunakan warna # 3b3c48. beri nama layer ini “header bg”.
Langkah 3: Menambahkan Nama Aplikasi Web
Pilih Horizontal Type Tool (T) dan menulis nama untuk aplikasi web Anda pada sisi kiri header. Aktifkan panduan untuk membantu Anda menyesuaikan teks Anda. Saya menggunakan font Myriad Pro Bold Italic dan warna # c0ccd0. Berikut ini adalah pengaturan karakter (Window> Character) untuk teks saya. Klik dua kali pada layer teks untuk membuka jendela Layer Style dan menggunakan pengaturan dari gambar berikut.
Langkah 4: Membuat Navigation Area
Pilih Horizontal Type Tool (T) dan menulis nama untuk item menu navigasi Anda. Saya menggunakan font Myriad Pro Regular dan warna # c0ccd0. Menambahkan bayangan/shadow untuk layer ini menggunakan pengaturan seperti pada gambar berikut.
Langkah 5: Membuat Featured area
Buat grup layer baru dan beri nama “featured”. Kemudian pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang dengan tinggi 300px dan warna # c0ccd0. beri nama untuk layer ini “featured area bg”, double-klik di atasnya untuk membuka jendela/window Layer Style dan menggunakan pengaturan dari gambar berikut untuk Gradient Overlay.
Langkah 6: Menambahkan Tekstur Halus ke area Featured
Download texture paper ini dan buka di Photoshop. Lalu pergi ke Layer> New Adjustment Layer> Black & White dan menggunakan pengaturan dari gambar berikut. Pilih two layers, klik kanan pada salah satu dari mereka, dan kemudian pilih select Covert to Smart Object. Nama layer baru ini “texture”.
Gunakan Move Tool (V) untuk memindahkan layer ini ke dalam dokumen Photoshop utama Anda. Kita perlu menempatkan texture tersebut tepat di tengah dokumen. Untuk melakukan ini, pilih seluruh canvas Anda (Ctrl / Cmd + A), beralih ke Move Tool (V) dan klik pada tombol Align horisontal pusat dari Option Bar. Kemudian tekan Ctrl / Cmd + D untuk membatalkan pilihan. Untuk membuat texture muncul hanya pada wilayah feature, klik kanan pada layer texture dan pilih Create Clipping Mask.
Klik pada tombol Add layer mask dari bagian bawah Layers Panel. Kemudian pilih Gradient Tool (G), set ke gradien hitam ke transparan, tahan Shift, kemudian tarik gradien horizontal pada sisi kiri texture dan satu lagi di sisi kanan (lihat gambar di bawah ini untuk referensi).
Kemudian mengatur Blend Mode layer ini untuk Overlay dan mengurangi Opacity menjadi 10%.
Langkah 7: Menambahkan Gradient di top area Featured
Tahan tombol Ctrl / Cmd tombol dan klik pada vector mask dari layer “featured area bg” untuk memilihnya. Lalu pergi ke Layer> New Fill Layer> Gradient dan menggunakan pengaturan dari gambar yang ditampilkan di bawah ini. Sementara jendela Fill Gradient dibuka, klik pada canvas Anda dan memindahkan gradien putih pada bagian atas kotak biru.
Perhatikan bahwa pemilihan kotak biru yang Anda buat sebelumnya telah digunakan sebagai masker untuk gradien ini mengisi layer. Atur Blend Mode layer ini untuk Overlay, dan mengurangi Opacity menjadi 25%.
Langkah 8: Tambahkan Latar Belakang(background) lain untuk ditampilkan di Area
Pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang dengan tinggi 100px dan warna di # 747b81, tepat di bawah yang pertama. beri nama layer ini “floor”, double-klik di atasnya, dan kemudian menggunakan pengaturan ditampilkan pada gambar berikut. Kemudian, ketika kita akan menambahkan tombol/button dan fitur gambar, kita akan membuat bayangan/shadow untuk mereka di layer “floor” .
Langkah 9: Menambahkan Tekstur untuk Lantai (Texture to the Floor)
Tahan Alt / Option, klik pada layer “texture” dan tarik salinan itu di atas layer “floor” . Klik kanan pada layer mask ini dan pilih Hapus Layer Mask. Klik kanan pada layer ini dan pilih Create Clipping Mask untuk membuatnya terlihat hanya dalam layer “floor” .
Pergi ke Edit> Transform> Perspektif, tahan tombol Shift dan tarik kiri mengubah kontrol ke kanan. Dengan tombol Shift tetap ditekan, klik di sudut kiri bawah dan tarik ke kiri. Ketika Anda selesai, tekan Enter. Kami menambahkan perspektif ini dengan texture untuk membuat persegi panjang terlihat seperti itu lantai(floor).
Langkah 10: Masking Texture
Tambahkan masker untuk layer “texture” dengan mengklik tombol Add layer mask dari bagian bawah Layers Panel. Kemudian tahan tombol Ctrl / Cmd kunci dan klik pada mask vektor dari layer “floor” untuk memilih persegi panjang.
Buat gradien hitam ke transparan menggunakan Gradient Tool (G) di sisi kiri dari texture dan satu di sisi kanan. Ini akan membuat texture secara bertahap memudar. Tekan Ctrl / Cmd + D untuk membatalkan pilihan. Lihatlah gambar di bawah ini untuk referensi. Atur Blend Mode layer ini untuk Overlay dan mengurangi Opacity untuk 5%.
Langkah 11: Tambahkan Noise to the Floor Layer
Buat layer baru dan mengisinya dengan warna putih menggunakan Paint Bucket Tool (G). Klik kanan di atasnya dan pilih Create Clipping Mask untuk membuatnya terlihat hanya dalam persegi panjang gelap. Klik kanan (lagi) pada layer ini dan pilih Convert to Smart Object. Lalu pergi ke Filter> Noise> Add Noise dan menggunakan pengaturan dari gambar berikut. Beri Nama layer ini “noise”, mengatur Blend Mode ke Multiply, dan mengurangi Opacity menjadi 20%.
Langkah 12: Membuat Beberapa baris Tipis 1px line
Sekarang kita akan membuat 2 baris dengan ukuran 1px di bagian atas. Di bagian bawah baris akan menjadi persegi panjang biru muda yang akan memberikan tata letak tampilan yang lebih elegan.
Pilih Line Tool (U), mengatur ukuran untuk 1px, tahan tombol Shift untuk memastikan Anda menggambar garis lurus, dan kemudian membuat garis horizontal di bawah header menggunakan warna # 969da0. Tinggalkan jarak 2px antara header dan baris ini. Nama layer ini “1px line”.
Tekan Ctrl / Cmd + J untuk duplikat layer ini dan, dengan menggunakan Move Tool (V), bergerak di bagian bawah persegi panjang biru muda. Tinggalkan jarak 2px antara baris ini dan persegi panjang gelap.
Langkah 13: Menambahkan Konten Feature
Aktifkan guides dengan menekan Ctrl / Cmd +;. Pilih Horizontal Type Tool (T) dan membuat kotak teks dengan lebar 430px (11 kolom merah muda di 24 kolom 960 Grid System). Kemudian tambahkan beberapa teks dalam kotak/boxes ini. Saya menggunakan warna # 636d70 dengan Pro Myriad huruf Bold untuk judul dan Helvetica Reguler untuk blok teks.
Langkah 14: Membuat Tombol (Call-to-Action)
Sekarang kita akan membuat beberapa tombol panggilan untuk bertindak: satu untuk Buy Aplication dan satu lagi untuk Download. Kita akan mulai dengan yang pertama, membuat tombol “buy now”.
Buat grup layer baru dan beri nama “Buy Now button”. Pilih Rounded Rectangle Tool (U), set Radius ke 4px dan menciptakan sebuah persegi panjang bulat dengan dimensi 180px oleh 42px dan warna # 80acbc. beri nama layer ini “button”, double-klik di atasnya dan menggunakan pengaturan dari gambar di bawah ini. Untuk efek layer Stroke, saya menggunakan warna # 6c92a0.
Pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang kecil di atas area kanan tombol/button menggunakan warna # 628b9a. Tambahkan stroke 1px untuk persegi panjang ini menggunakan warna # 476873. Klik kanan pada layer ini dan pilih Create Clipping Mask untuk membuatnya terlihat hanya dalam tombol. Mengatur Opacity layer ini menjadi 75%.
Langkah 15: Menambahkan Teks pada Tombol Call-to-Action
Pilih Horizontal Type Tool (T) dan menulis kata-kata “buy now” di dalam tombol Anda. Saya menggunakan warna # b4dcea dan font Myriad Pro Hitam. Klik dua kali pada layer teks Anda untuk mengakses window Layer Style dan kemudian menggunakan pengaturan dari gambar berikut.
Pilih Horizontal Type Tool (T) lagi, ketik karakter berikut, »(atau hanya copy dan paste itu, itu disebut hak quotes sudut ganda), dan menempatkannya di daerah kanan tombol Anda menggunakan warna # 95c1d1 dan ukuran 44pt. Menambahkan shadow untuk layer ini menggunakan pengaturan dari gambar di bawah ini.
Langkah 16: Membuat Bayangan/shadow pada tombol/Button
Pilih Ellipse Tool (U), tahan tombol Shift dan membuat lingkaran hitam/circle black dengan dimensi 10px 10px oleh (1). Masukan lingkaran/circle ini 20px bawah tombol. Klik kanan pada layer ini dan pilih Convert to Smart Object. Lalu pergi ke Edit> Free Transform (Ctrl / Cmd + T), tahan Alt / Option + tombol Shift dan meregangkan lingkaran dengan menyeret-tengah kanan mengubah kontrol ke kanan (2, 3).
Pergi ke Filter> Blur> Gaussian Blur dan set Radius menjadi 2,2 px (4). Beri nama layer ini “shadow” dan mengatur Opacity untuk 7% (5).
Langkah 17: Buat Tombol Download
Sekarang membuat tombol “download” seperti Anda menciptakan tombol “buy now” dan kemudian menambahkan shadow untuk itu.
Langkah 18: Menambahkan Gambar Feature
Pilih Rounded Rectangle Tool (U) dan menciptakan sebuah persegi panjang bulat dengan dimensi 470px oleh 270px. Anda dapat mengaktifkan guides untuk membantu Anda membuat bentuk ini. Nama lapisan ini “image_holder”, double-klik di atasnya dan menggunakan pengaturan dari gambar berikut. Untuk Inner Glow saya menggunakan warna # c7d0d3 dan untuk warna Stroke, saya menggunakan # 889092.
Buka setiap gambar di Photoshop dan memindahkannya ke dalam dokumen Photoshop utama Anda menggunakan Move Tool (V). Nama lapisan ini “gambar”, klik kanan di atasnya dan pilih Create Clipping Mask untuk membuatnya terlihat hanya dalam “image_holder” lapisan. Saya menggunakan gambar preview dari Bagaimana Membuat Aluminium Hard Drive Sleek di Photoshop tutorial dan saya membuat sebuah Hue / Saturasi penyesuaian lapisan untuk mengubah warna.
Langkah 19: Tambahkan Shadow for the Featured Image
Membuat bayangan untuk area fitur gambar persis seperti yang ada di tombol “buy now” di Langkah 16.
Langkah 20: Buat “screenshots & about” Area
Buat grup layer baru dan beri nama “screenshots and about”. Kemudian pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang di bawah daerah fitur dengan tinggi 120px dan warna # 54595d. beri nama layer “rectangle”, double-klik di atasnya dan menggunakan pengaturan dari gambar berikut untuk Drop Shadow dan Gradient Overlay.
Pilih Line Tool (U), mengatur ukuran untuk 1px, tahan tombol Shift dan membuat garis horizontal pada bagian atas persegi panjang yang Anda buat pada langkah sebelumnya. Gunakan warna # 42474a. Kemudian beri nama layer ini “1px line”.
Tekan Ctrl / Cmd + J untuk duplikat layer ini. Pilih Move Tool (V) dan tekan tombol Panah Bawah untuk memindahkan layer baru 1px ke bawah. Mengubah warna baris baru untuk # 5a5f64.
Buat 2 baris lagi di bagian bawah persegi panjang dengan menggunakan warna yang sama.
Langkah 21: Membuat Konten untuk “about” area
Pilih Horizontal Type Tool (T) dan menambahkan konten untuk “about”. Aktifkan guides untuk membantu Anda memposisikan teks Anda. Lebar blok teks ini harus 430px (atau 11 kolom merah muda pada “24 Col Grid” kelompok lapisan). Untuk judul, saya menggunakan Pro Myriad huruf Bold dengan 22pt ukuran dan warna # 889096. Untuk teks body, saya menggunakan Helvetica Reguler huruf dengan ukuran 12pt dan warna # a6afb6.
Langkah 22: Buat tombol “Read More”
Pilih Rounded Rectangle Tool (U), set Radius ke 2px dan menciptakan sebuah persegi panjang bulat dengan dimensi 90px 20px oleh dan warna # a0a7ac. Beri nama layer ini “button” dan meletakkannya di sudut kanan bawah “about” area/wilayah.
Pilih Horizontal Type Tool (T) dan ketik “Read more» “dalam tombol Anda. Saya menggunakan font Myriad Pro Semibold, ukuran font 12pt, dan warna # 5a5e62.
Langkah 23: Buat “Screenshots” area
Pilih Type Tool (U) dan menulis kata “Screenshots” menggunakan font yang sama dan warna yang Anda gunakan dalam “about” area. Aktifkan guides dan pastikan Anda menyesuaikan layer teks dengan fitur gambar dari atas tadi.
Gunakan Rounded Rectangle Tool (U) dengan Radius diatur ke 4px untuk membuat rectangle dengan dimensi 110px oleh 60px. Beri nama layer ini “image_holder” dan duplikat 3 kali (Ctrl / Cmd + J). Kemudian beralih ke Move Tool (V) dan mengatur semua layer seperti yang ditunjukkan pada gambar di bawah.
Langkah 24: Menambahkan Gambar untuk “Screenshots” area
Buka gambar di Photoshop dan memindahkannya ke dalam dokumen Photoshop utama Anda menggunakan Move Tool (V). Nama layer ini “image” dan meletakkannya di atas pertama “image_holder” lapisan. Klik kanan pada layer gambar dan pilih create Clipping Mask.. Sekarang gambar Anda terlihat hanya di dalam pertama persegi panjang bulat. Ulangi langkah ini untuk 3 persegi panjang lain juga.
Langkah 25: Membuat separator/pemisah
Buat grup layer baru dan beri nama “separator”. Kemudian pilih Line Tool (U) dan menciptakan dua garis vertikal dari atas persegi panjang latar belakang(background) ke bawah. Untuk baris pertama, gunakan warna # 5a5f64 dan yang kedua, # 42474a.
Klik pada group “separator” untuk membuatnya aktif. Kemudian tambahkan masker ke grup ini dengan mengklik tombol Add layer mask dari bagian bawah Layers Panel. Gunakan Gradient Tool (G), set ke gradien hitam ke transparan, tahan tombol Shift dan tarik gradien vertikal di bagian atas separator. Juga membuat gradien vertikal di bagian bawah. Ini akan membuat pemisah secara bertahap memudar di bagian atas dan di bagian bawah.
Langkah 26: Menciptakan area “Feature”
Buat grup layer baru dan beri nama “feature”. Kemudian pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang dengan tinggi 300px dan warna # abb1b5 bawah “screenshot and about” area. Beri nama layer ini “bg”.
Pilih Line Tool (U) dan membuat dua garis horizontal dengan ukuran 1px di bagian bawah persegi panjang yang Anda buat. Untuk baris pertama, gunakan warna # c2c7ca dan untuk yang kedua, # 93999d.
Langkah 27: Menambahkan Icon untuk “Feature” area
Ambil set ikon dari WooThemes. Kemudian buka lightbulb icon di Photoshop dan meletakkannya di sudut kiri atas dari “Feature” daerah. Nama layer ini “light bulb icon”. Aktifkan guides untuk membantu Anda memposisikan icon.
Pilih Horizontal Type Tool (T) dan menulis kata “feature” di samping ikon bohlam. Saya menggunakan Pro Myriad huruf Bold dengan 24pt ukuran dan warna # d1d9df. Double-klik pada layer teks Anda untuk membuka window Layer Style dan menggunakan pengaturan dari gambar di bawah ini untuk Drop Shadow.
Langkah 28: Menciptakan kotak/boxes “feature”
Buat grup layer baru dan beri nama “feature 1″. Kemudian pilih Rounded Rectangle Tool (U), set Radius ke 4px dan menciptakan sebuah persegi panjang bulat dengan dimensi 190px oleh 100px. beri nama layer ini “image holder”, klik dua kali di atasnya dan menggunakan pengaturan dari gambar berikut. Untuk Inner Glow saya menggunakan warna # babfc2 dan Stroke, saya menggunakan # 93989d.
Buka gambar di Photoshop dan memindahkannya ke dalam dokumen Photoshop utama Anda. Gunakan Move Tool (V) untuk memindahkan gambar ini atas persegi panjang yang baru saja dibuat. Nama layer ini “image”, klik kanan di atasnya dan pilih Create Clipping Mask.
Pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang dengan dimensi 110px oleh 24px dan warna # 54595d di sudut kiri bawah gambar dari langkah sebelumnya. Kemudian pilih Horizontal Type Tool (T) dan ketik “feature 1″ di dalam persegi panjang ini. Saya menggunakan font Helvetica Bold Oblique dan warna # cbd2d6.
Pilih Rounded Rectangle Tool (U), set Radius ke 4px dan menciptakan sebuah persegi panjang bulat dengan dimensi 90px 24px oleh dan warna # c2c6c8. Beri nama layer ini “button”, double-klik di atasnya untuk mengakses jendela Layer Style, dan menambahkan efek layer Stroke (Ukuran: 1px, Posisi: Di dalam, Warna: # 93989d) untuk membuat dalam Stroke 1px pada tombol. Pilih Horizontal Type Tool (T) dan menulis kata-kata “Read More» “dalam persegi panjang bulat menggunakan warna # 777b7f.
Buat tigakotak/boxes “feature” menggunakan proses yang sama seperti di atas. Anda bahkan dapat hanya menduplikasi layer “feature 1″ group 3 kali, mengubah gambar, dan kemudian menggunakan Move Tool (V) untuk posisi mereka.
Langkah 29: Menciptakan area “Video Presentation”
Sekarang kita akan membuat area presentasi video untuk aplikasi web kami. Buat grup layer baru dan beri nama “video”. Kemudian buka ikon layar dari ikon membuat Anda download sebelumnya dan memindahkannya ke dalam dokumen Photoshop utama Anda. Beri nama layer ini “video icon” dan pastikan itu sesuai dengan ikon bola lampu dan dengan screenshot dari atas.
Pilih Horizontal Type Tool (T) dan menulis kata-kata “Video Presentation” di samping ikon layar. Saya menggunakan Pro Myriad huruf Bold dengan warna # d1d9df. Klik dua kali pada layer teks dan menggunakan pengaturan dari gambar berikut untuk Drop Shadow.
Pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang dengan dimensi 470px oleh 220px. nama layer ini “image_holder”, double-klik di atasnya untuk membuka jendela Layer Style dan menggunakan pengaturan yang ditunjukkan pada gambar berikut. Untuk Inner Glow saya menggunakan warna # afb6bb dan Stroke, # 777e84.
Buka gambar di Photoshop dan memindahkannya ke dalam dokumen Photoshop utama Anda, di atas persegi panjang dari area video. Nama lapisan ini “image”, klik kanan di atasnya dan pilih Create Clipping Mask.
Langkah 30: Membuat Tombol Putar untuk “Video Presentation” area
Buat grup layer baru dan beri nama “play button”. Kemudian pilih Ellipse Tool (U), tahan tombol Shift dan membuat lingkaran/circle dengan dimensi 50px 50px oleh dan warna # 616569. Nama layer ini “circle”, double-klik di atasnya untuk membuka jendela Layer Style dan menggunakan pengaturan dari gambar berikut.
Untuk menempatkan lingkaran tepat di tengah-tengah video, ikuti langkah berikut:
- Tahan tombol Ctrl / Cmd kunci dan klik pada mask vector dari layer “image_holder” untuk membuat seleksi di sekitar itu
- Pastikan bahwa layer “circle” aktif, dan jika tidak, sambil menjaga seleksi masih aktif, beralih ke layer “circle” dengan mengklik dalam Panel Layers
- Pergi ke Layer> Align Layer untuk Seleksi> Vertikal Pusat
- Lalu pergi ke Layer> Align Layer untuk Seleksi> Centers Horizontal
- Tekan Ctrl / Cmd + D untuk membatalkan pilihan
Selanjutnya, pilih Pen Tool (P) dan pastikan bahwa Shape Layers pilihan di Bar Pilihan di atas gambar diatur. Kemudian membuat segitiga dalam lingkaran menggunakan warna # c9cdd0. Nama layer ini “triangle”.
Langkah 31: Membuat Area Blog
Buat grup layer baru dan beri nama “blog”. Kemudian pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang dengan tinggi 500px dan warna # c9cdd0 bawah “feature” dan area “video” . Nama layer ini “bg”.
Buka ikon pensil dari ikon membuat Anda download di Photoshop, dan memindahkannya ke dalam dokumen Photoshop utama Anda. Aktifkan panduan dan menempatkan ikon ini di sisi kiri layout.
Pilih Horizontal Type Tool (T) dan menulis kata “Blog” di samping ikon. Saya menggunakan font Myriad Pro Bold dan warna # 777e84.
Langkah 32: Menambahkan Blog Post
Pilih Rectangle Tool (U) dan membuat persegi dengan dimensi 150px oleh 150px. Nama layer ini “image_holder”, double-klik di atasnya untuk membuka jendela Layer Style dan menggunakan pengaturan dari gambar berikut. Untuk Inner Glow saya menggunakan warna # d1d5d8 dan Stroke, saya menggunakan # 889092.
Buka gambar di Photoshop dan memindahkannya ke dalam dokumen Photoshop utama Anda. Menempatkan gambar ini di atas square yang Anda buat sebelumnya. Kemudian nama layer ini “image”, klik kanan di atasnya dan pilih Create Clipping Mask.
Pilih Horizontal Type Tool (T) dan menambahkan beberapa konten sebelah gambar. Saya menggunakan Helvetica font (regular) dan warna # 808487.
Buat satu posting blog lainnya menggunakan proses yang sama.
Langkah 33: Buat area “Testimonial”
Buat grup layer baru dan beri nama “testimonials”. Kemudian buka ikon komentar (dari ikon yang Anda download) di Photoshop dan memindahkannya ke dalam dokumen Photoshop utama Anda. Nama lapisan ini “ikon komentar” dan pastikan itu sesuai dengan ikon pensil dan ikon layar. Pilih Horizontal Type Tool (T) dan menulis kata “Testimonial” di samping ikon. Saya menggunakan Pro segudang huruf Bold dan warna # 777e84.
Pilih Rectangle Tool (U), set Radius ke 4px dan menciptakan sebuah persegi panjang dengan dimensi 80px 60px oleh dan warna # abb1b5. Tambahkan stroke dalam 1px untuk layer ini menggunakan warna # 93989d.
Pilih Pen Tool (P) dan klik pada tombol Add untuk membentuk daerah dari Bar Pilihan di atas gambar. Pastikan bahwa masker vektor layer persegi panjang bulat aktif dan menggunakan Pen Tool (P) untuk menambahkan sebuah segitiga kecil di sisi kanan bawah persegi panjang.
Pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang dalam ikon komentar. Nama layer ini “image_holder”. Kemudian buka gambar di Photoshop dan memindahkannya ke dalam dokumen Photoshop utama Anda. Nama layer ini “image”, meletakkannya di atas layer “image_holder”, klik kanan di atasnya dan pilih Create Clipping Mask. Tahan tombol Ctrl / Cmd kunci, pilih semua layer dan tekan Ctrl / Cmd + G untuk mengelompokkan mereka. Nama group sebagai “1″.
Pilih Rounded Rectangle Tool (U) dan menciptakan sebuah persegi panjang bulat dengan dimensi 430px oleh 70px dan warna # b2b7ba. Nama layer ini “bg text” dan menambahkan dalam 1px stroke untuk menggunakan warna # a4a9ac. Lalu taruh layer ini di bawah layer ikon komentar. Aktifkan Guides dan pastikan Anda menyesuaikan layer Anda seperti yang Anda lihat pada gambar berikut. Pilih Horizontal Type Tool (T) dan menambahkan beberapa teks di dalam persegi panjang bulat yang Anda buat. Saya menggunakan Helvetica font yang Reguler dan warna # 6f7274.
Buat dua testimonial lagi seperti Anda buat yang pertama.
Langkah 34: Buat Footer
Buat grup layer baru dan beri nama “footer”. Pilih Rectangle Tool (U) dan menciptakan sebuah persegi panjang dengan ketinggian 50px dan warna # b0b5b8 di bagian bawah tata letak web Anda.
Pilih Line Tool (U), mengatur Berat untuk 1px, tahan tombol Shift dan membuat garis horizontal di bagian atas persegi panjang dengan menggunakan warna # 93999d. Nama layer ini “1px line” dan duplikat (Ctrl / Cmd + J). Kemudian beralih ke Move Tool (V) dan tekan tombol Panah Bawah sekali untuk memindahkan layer baru ini satu pixel ke bawah. Mengubah warna baris baru untuk # c2c7ca.
Pilih Horizontal Type Tool (T) dan menulis sebuah pernyataan hak cipta di footer. Saya menggunakan Helvetica font yang Reguler dan warna # 81878b.
Ringkasan tutorial desain blog dengan photoshop
Untuk mengetahui lebih detailnya beserta gambar-gambar yang lengkap anda bisa mendownload File PDF yang berjumlah ada 74 halaman di bawah ini:
DOWNLOAD PDF ukuran: 14,7 mb