Anda di halaman 1dari 20

Bagaimana cara membuat desain blog

modern

Dalam tutorial ini anda akan mempelajari bagaimana membuat desain blog modern yang dapat di
gunakan untuk beberapa jenis situs web yang berbeda. Ketika mengerjakannya anda akan mempelajari
teknik-teknik penting yang dapat digunakan desain yang lainnya.

Sebelum anda memulai proses untuk mendesain, hal yg perlu anda lakukan adalah melihat apa
yang akan anda desain nanti.






LANGKAH 1

Sebagai dasar file photoshop, saya akan menggunakan file template dari 966 GRID SYSTEM,
tersedia secara gratis di http://960.gs/ untuk di download. Silahkan download filenya berbentuk zip lalu
bukafile PSD 16 kolom di photoshop.
LANGKAH 2

Dengan file yang sudah di buka, segeralah untuk menyimpannya dengan nama yang berbeda di
folder yang baru. Lalu sembunyikan file 16 cild grid karena hanya akan berjalan sementara saat
mendesain. Untuk saat ini anda dapat menggunakan command+H (ctrl+h) untuk menggunakan bantuan
dan panduan.






LANGKAH 3

Silahkan menghapus sekelompok layer yang secara automatis ada di template PSD. Karena kita akan
membuat template kita sendiri. Dan mengisi backround dengan warna abu-abu terang (# e9e9e9).
LANGKAH 4

Pilih rectangular marquee tool (M) dan gambarlah kotak di atas dokumen yang ada dari sisi ke sisi yang
lainnya. Tinggi harus sekitar 80px. Buat layer baru lalu warnai dengan abu-abu lebih gelap dari
bacground (# 2c2f32).







Langkah 5



Ambil Type tool (T) dan menggunakan font yang bagus untuk Heavy pada ukuran 36pt, ketik
nama website Anda. Di sini Anda dapat menggunakan panduan untuk membantu Anda
menempatkan teks. Klik pada Command pintas + H (PC: Control + H) untuk menunjukkan
pemandu lagi. Mengatur kotak teks pada awal buku garis Tripple kolom pertama (panduan
bentuk ketiga kiri).

Langkah 6


Menggunakan Type tool (T) lagi, untuk mengetikkan slogan untuk website Anda yang harus
diposisikan pada panduan kiri sama dengan judul. Namun kali ini, menggunakan Helvetica diatur
untuk Oblique di 13pt. Mengatur warna ke abu-abu kebiruan (# 828b95).










Langkah 7


Berikut ini, menunjukkan bagaimana dua elemen teks harus ditempatkan dalam hubungannya
dengan satu sama lain dan panduan dokumen. Harap dicatat bahwa lebar gambar tidak lebar
seluruh dokumen, tetapi hanya menampilkan sebagian kecil.

Ketika Anda selesai dengan posisi, Anda dapat menyembunyikan panduan lagi (Command + H,
PC: Control + H).
Langkah 8

Waktu untuk teks lagi dengan navigasi. Dengan Type tool (T) lagi, kali ini dengan set font
Helvetica, Reguler pada tipe 18pt keluar item navigasi pertama (di sini: Halaman Depan). Posisi
itu pada jarak bentuk pilihan Anda logo, mengingat panjang panel navigasi.























Langkah 9

Dengan jenis siap, klik kanan pada layer tipe baru (rumah) dan pilih "Blending Options".
Menerapkan drop shadow dengan pengaturan ditunjukkan dalam gambar di atas.

Langkah 10


Untuk membuat item navigasi, ulangi langkah 8 dan 9 sampai Anda memiliki jumlah yang
diinginkan item.


Langkah 11

Untuk setiap halaman "aktif", saya ingin memiliki latar belakang khusus dengan penampilan dari
tab. Buat layer baru di bawah lapisan teks dan menggunakan Rectangular Marquee Tool (M),
pada layer baru, menggambar kotak yang sedikit lebih tinggi dari latar belakang header dan
meninggalkan sedikit ruang di sisi kiri dan kanan rumah teks. Isi kotak ini dengan warna biru (#
66a0da).

Header Lengkap


Dengan itu, area header dari desain selesai, logo dan bar navigasi sederhana. Semuanya tampak
bersih dan minimalis. Sejauh ini cukup baik. Bila Anda telah sampai sejauh ini, itu adalah ide
yang baik untuk memulai pengelompokan bersama lapisan Anda untuk menciptakan organisasi
yang lebih baik.

Pilih dua lapisan tipe untuk logo dan kelompok mereka (Command + G / / PC: Control + G)
bersama-sama ke dalam kelompok yang dapat Anda hubungi "Logo". Grup setiap lapisan yang
ada hubungannya dengan navigasi ke dalam kelompok "Navigasi", dan akhirnya, kelompok latar
belakang header dan dua kelompok menjadi kelompok master yang Anda sebut "Header".

Sekarang Anda dapat runtuh kelompok header, meninggalkan Anda dengan sebuah panel lapisan
hampir kosong. Terlihat agak bagus bukan!




Langkah 12

Waktu untuk membuat kotak pos. Pertama menghidupkan panduan lagi untuk membantu dengan
penempatan. Kemudian mendapatkan Alat Rounded Rectangle (dikelompokkan di bawah
Rectangle Tool, U pintas) dan set radius sampai 4 dan warna menjadi putih. Pastikan ikon
pertama di sebelah kiri jauh dipilih (layer Shape) sehingga kita mendapatkan bentuk yang
diinginkan lapisan diisi. Menggambar kotak menggunakan pedoman-pedoman untuk posisi itu
farily di tengah, seperti yang Anda lihat dalam gambar di atas.

Langkah 13

Sekali lagi, ambil Type tool (T) dan menggunakan Helvetica Bold, 24pt penuh hitam (# 000000)
menyisipkan judul sampel untuk posting pertama. Gunakan panduan untuk posisi judul dengan
sisipan sedikit dari sisi kotak.

Langkah 14

Untuk gambar pos, kita akan membuat clipping mask untuk terus gambar. Pertama menggambar
kotak dengan Rectangular Marquee Tool (M) yang hanya selebar kotak pos itu sendiri. Buat
layer baru dan isi dengan warna yang Anda suka.

Langkah 15

Tempel di foto ke dalam dokumen desain Anda. Jika diperlukan skala ke bawah dengan lebar
yang sama seperti kotak pos, tetapi jangan khawatir tentang ketinggian. Pada panel lapisan, tahan
tombol Alt / Option dan klik antara kotak clipping mask dan lapisan-lapisan gambar. Ini akan
klip gambar di dalam kotak dan memilikinya menampilkan dalam kotak abu-abu.


Langkah 16

Waktu untuk beberapa teks lagi. Menggunakan Type Tool (T), menggambar kotak
(menggunakan pedoman-pedoman untuk mendapatkan sisipan kecil yang menyenangkan) dan
ketik beberapa contoh teks di dalamnya. Mengatur font untuk Helvetica Reguler dan ukuran
untuk 12pt dengan tinggi garis 20pt untuk membuat teks lebih mudah dibaca. Mengatur warna
teks menjadi abu-abu gelap menengah (# 6a6a6a).

Langkah 17

Di bawah teks, membuat kotak kecil (lagi menggunakan Rectangular Marquee Tool) dan pada
layer baru, isi ini dengan abu-abu sedikit lebih gelap dari backround (# dee2e4).












Langkah 18

Menggunakan Type tool (T), masukkan frase "Continue Reading" menggunakan Helvetica
Reguler di 11pt. Pastikan untuk memeriksa kotak untuk Semua Caps (disorot di atas).
Tinggalkan sedikit ruang ke kanan.

Langkah 19

Pergi dan menemukan ikon bagus untuk digunakan dalam tombol ini, seperti panah kanan dari
FamFamFam ikon-set. Tempatkan ke dalam dokumen Photoshop dan masukkan ikon di
tempatnya yang benar di sisi kanan dari teks.


Hasil akhir kotak pos

Desain ini mengalami kemajuan. Anda tahu memiliki kotak pos serta header selesai. Hal ini
terlihat sedikit kosong namun dan kita masih perlu kedua sidebar dan yang paling penting,
beberapa metadata untuk posting. Sebelum pindah, luangkan waktu untuk mengelompokkan
lapisan Anda untuk kotak pos ke dalam struktur yang bagus yang bekerja untuk Anda.


Langkah 20

Menggunakan alat persegi panjang bulat (U) lagi, dengan jari-jari masih diatur untuk 4px tetapi
dengan warna diatur ke abu-abu yang sama sebagai header (# 2c2f32), menggambar kotak yang
dimulai pada buku kedua dari kiri dan berhenti dengan sedikit ruang yang tersisa untuk kotak
konten.

Langkah 21

Buat layer baru dan menggambar kotak yang hanya anak laki-laki lebih lebar dari kotak pos
meta-abu-abu dan posisi adalah agar sedikit dari kotak abu-abu menunjukkan atas. Isi seleksi ini
dengan warna biru yang sama seperti di header (# 66a0da).


Langkah 22

Dengan Type tool (T), ketik tanggal (disini saya menggunakan 12 sebagai contoh). Set ukuran
untuk Helvetica Bold, 20pt. Juga menerapkan blending options seperti yang ditunjukkan pada
gambar di bawah.


Langkah 23

Tambahkan dalam satu bulan setelah tanggal dengan menggunakan Type tool (T) dengan font
Helvetica Reguler di set ke All Caps 13pt. Terapkan pilihan pencampuran sama seperti pada
langkah 22 untuk teks ini.


Langkah 24

Waktu untuk lapisan lain jenis sehingga dengan Type tool (T, Anda tahu ini sekarang kan?)
Membuat kotak teks dan menggunakan pengaturan jenis seperti yang ditunjukkan pada gambar
di atas, ketik beberapa meta tag posting (seperti komentar, penulis dan kategori).

Untuk menambah ruang yang saya lakukan di atas antara setiap paragraf, masuk ke panel Ayat
(Window> Ayat) dan mengatur spasi sebelum paragraf (icon kiri bawah, di atas ditulis dgn tanda
penghubung) untuk 16pt.

Langkah 25

Akhirnya, membuat dua baris menggunakan Rectangular Marquee Tool (M) dan mengisi garis
tinggi 1px (pada layer baru) dengan putih tapi menjatuhkan opacity dari layer itu adalah pada
sampai 8%. Hal ini menciptakan garis halus. Duplikat ini untuk mengisi kesenjangan antara
kedua bit teks.


Langkah 26

Teks lebih! Buat menuju sidebar (lihat bagaimana saya melewatkan mengatakan, dengan Type
tool, T) yang diatur untuk Helvetica Bold, 18pt. Dengan warna abu-abu-biru tua (# 282b2e).
Gunakan panduan untuk membantu Anda menyesuaikan teks pada sedikit ruang dari kotak pos.

Langkah 27

Pos ini membutuhkan salinan sedikit juga untuk pergi dengannya. Mengatur beberapa contoh
teks dalam kotak yang menggunakan Helvetica Regular, 12pt dengan warna ligher jauh dari
judul (# 727981).


Langkah 28

Ulangi langkah 26 dan 27 untuk membuat judul yang lebih untuk sidebar.

Langkah 29

Menarik keluar sebuah kotak yang selebar dokumen dan sekitar 70px tinggi menggunakan
Rectangular Marquee Tool (M). Buat layer baru dan mengisi seleksi dengan warna abu-abu yang
sama seperti yang telah kita sebelumnya digunakan untuk header dan pasca kotak meta (#
2c2f32).


Langkah 30

Seperti biasa, setelah kotak datang beberapa teks. Menggunakan Type tool (T) jenis situs
informasi hak cipta Anda menggunakan Helvetica Reguler, set 12pt pada abu-abu terang (#
cecece).
Langkah 31

Pertama, membuat layer baru. Menggunakan Rectangular Marquee Tool (M), menggambar
kotak baru ke kanvas di atas kotak footer, mulai tepat di bawah area isi posting. Isi ini dengan
abu-abu gelap dari latar belakang (# d4d5d5).


Langkah 32

Mengulangi langkah yang sama (26 dan 27) seperti yang Anda lakukan untuk membuat judul
dan konten untuk sidebar, menciptakan konten untuk kotak-kotak bawah.

Desain akhir

Waktu telah datang untuk mengagumi desain akhir Anda. Jangan membersihkan beberapa di
panel lapisan dan kelompok manapun lapisan yang Anda inginkan untuk melakukannya dengan.
Di sini Anda memilikinya, desain blog yang modern dan minimalis Anda.