Mendesain Berbagai Ukuran Banner Web Dengan Fitur Artboard di Photoshop

Dalam tutorial untuk psdvault ini, kami memperlihatkan cara mendesain banner web dalam berbagai ukuran dalam satu file PSD menggunakan fitur Artboard.

Hasil akhir desain banner web.
Hasil akhir desain banner web.
Banner web dalam berbagai ukuran.
Banner web dalam berbagai ukuran.

Di tutorial ini, akan belajar penggunaan artboard, mengekspor artboard ke dalam file PNG, dan konsistensi desain dengan menggunakan elemen yang sama.

Using The New Artboard Feature In Photoshop CC To Design Multiple Size Web Banners.

Mendesain Tabel Harga Perusahaan Webhosting di Photoshop

Photoshop banyak digunakan untuk membuat gambar dan layout dalam desain web. Di tutorial ini, kami menununjukkan cara mendesain sebuah tabel harga untuk perusahaan hosting dengan kombinasi vektor shapes dan layer styles. Tutorial ini ditulis eksklusif untuk Psdtuts+.

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Tabel Harga Perusahaan Webhosting di Photoshop

[hr]

Sebagian Langkah dalam Tutorial

Dalam tutorial ini, semua elemen dibuat dari bentuk vektor. Ini akan menjamin ketajaman setiap pixel. Selain itu, dengan bentuk vektor kita akan memperoleh hasil yang fleksibel. Artinya, kita bisa mengeditnya dengan mudah tanpa merusak pixel-nya.

Mendesain Tabel Harga Perusahaan Webhosting di Photoshop
Mendesain Tabel Harga Perusahaan Webhosting di Photoshop
Mendesain Tabel Harga Perusahaan Webhosting di Photoshop
Mendesain Tabel Harga Perusahaan Webhosting di Photoshop
Mendesain Tabel Harga Perusahaan Webhosting di Photoshop
Mendesain Tabel Harga Perusahaan Webhosting di Photoshop
Mendesain Tabel Harga Perusahaan Webhosting di Photoshop

Mendesain Situs Blog Elegan di Photoshop CS6

Photoshop CS6 memiliki kelebihan dengan fitur Snap to Pixel yang membuatnya mampu membuat desain pixel perfect dengan mudah. Tutorial ini memperlihatkan caranya. Tutorial ini ditulis ekslusif untuk Hongkiat.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Situs Blog Elegan di Photoshop CS6

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini cukup detail. Kita memulai dengan mencari kombinasi warna yang tepat lalu dilanjutkan dengan membuat desain di Photoshop.

Mendesain Situs Blog Elegan di Photoshop CS6
Mendesain Situs Blog Elegan di Photoshop CS6
Mendesain Situs Blog Elegan di Photoshop CS6
Mendesain Situs Blog Elegan di Photoshop CS6
Mendesain Situs Blog Elegan di Photoshop CS6
Mendesain Situs Blog Elegan di Photoshop CS6
Mendesain Situs Blog Elegan di Photoshop CS6

Dibahas juga fitur baru dalam Photoshop CS6, yaitu panel style karakter. Ini memungkinkan Anda untuk memiliki semacam style CSS dalam Photoshop.

Mendesain Situs Blog Elegan di Photoshop CS6
Mendesain Situs Blog Elegan di Photoshop CS6

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 3

Di dua tutorial sebelumnya, kita telah membuat menghasilkan layout sederhana tanpa pengaturan CSS dengan Framework 960gs. Di tutorial penutup ini, kita akan memperbaiki tampilannya dengan menambahkan beberapa kode CSS. Anda akan belajar cara menggunakan font custom dengan @font-face, memahami fungsi class clear di Framework 960gs, dan beberapa fungsi dasar lainnya.

[hr]

Preview

Inilah hasil akhir dari tutorial ini.

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Teks Editor
  • Teknik yang Dipelajari: Grid 960, Proses Slicing Desain Web
  • Lama Pengerjaan: 20 menit

[hr]

Tutorial

Langkah 1: Mengatur Line-Height

Langkah pertama adalah memperbaiki line-height. Isikan kode berikut ke file style.css.

body {
	line-height: 20px;
	margin: 40px auto 90px;
}

Kode di atas akan mengubah jarak antar garis teks dan menambahkan ruang dengan sisi atas dan bawah browser.

Langkah 2: Menggunakan Font Custom @font-face

Desain kita menggunakan font custom Quicksand. Buka halaman font di Fontsquirrel. Klik tombol Download @font-face kit untuk mengambil semua resources yang dibutuhkan. Di dalam file zip akan tersedia file font dan kode css yang dibutuhkan.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3

Langkah 3

Desain kita hanya menggunakan tipe font Quicksand Light dan Quicksand Book. Simpan kedua file font ini ke folder baru bernama fonts. Dari file stylesheet.css ambil kode @font-face untuk kedua font itu dan simpan ke file css yang kita gunakan.

@font-face {
    font-family: 'QuicksandLight';
    src: url('../fonts/Quicksand_Light-webfont.eot');
    src: url('../fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Quicksand_Light-webfont.woff') format('woff'),
         url('../fonts/Quicksand_Light-webfont.ttf') format('truetype'),
         url('../fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBook';
    src: url('../fonts/Quicksand_Book-webfont.eot');
    src: url('../fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Quicksand_Book-webfont.woff') format('woff'),
         url('../fonts/Quicksand_Book-webfont.ttf') format('truetype'),
         url('../fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;

}

Langkah 4

Font custom Quicksand sudah bisa digunakan dalam desain. Untuk mengaplikasikannya, tambahkan kode berikut.

h2, h4, nav {
	font-family: 'QuicksandBook', Arial, Helvetica, sans-serif;
}

h3 {
	font-family: 'QuicksandLight', Arial, Helvetica, sans-serif;
	font-size: 21px;
}

h2, h3, h4 {
	font-weight: normal;
}

h2 {
	font-size: 36px;
	margin-top: 30px;
}

h4 {
	color: #4c4c4c;
	font-size: 24px;
	letter-spacing: -1px;
	padding-bottom: 10px;
	border-bottom: #969696 solid 1px;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #4c4c4c;
}

Kode di atas akan mengatur font default paragraf ke Arial, Helvetica, dan sans-serif. Font custom digunakan pada Heading 2, Heading 3, Heading 4, dan area navigasi.

Langkah 5: Logo

Tambahkan kode berikut untuk mengganti teks Heading 1 yang merupakan judul halaman dengan logo situs.

#logo h1 {
	background: url(../img/logo.png) no-repeat;
	width: 160px;
	height: 22px;
	text-indent: 9999em;
}

Kode background akan mengisi latar teks dengan gambar. Kode width dan height untuk menentukan ukuran gambar. Kode text-indent akan menyingkirkan teks sehingga tidak muncul di layar.

Langkah 6: Navigasi

Berikutnya mengatur tampilan navigasi. Gunakan kode di bawah.

/*Navigasi*/
nav ul {
	float: right;
}

nav a {
	font-size: 14px;
	color: #969696;
	text-decoration: none;
}

nav a:hover {
	color: black;
	text-decoration: underline;
}

nav li {
	display: inline;
	margin-left: 20px;
}

.selected {
	color: black;
}

List diberi properti inline agar tampil memanjang. Class selected untuk menandai menu terpilih.

Langkah 7

Masalah muncul di sini. Teks banner lompat ke atas.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3

Ini terjadi karena secara default setiap elemen akan mengisi area yang cukup baginya. Teks banner muat di sebelah logo. Oleh karena itu dia loncat ke sana.

Langkah 8

Untuk memperbaikinya, tambahkan div dengan class clear sebelum teks banner.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 3

Langkah 9

Tambahkan gambar latar di belakang banner dengan kode css berikut.

/*Banner*/

#banner article {
	background: url(../img/big-photo.jpg);
	height: 294px;
	width: 620px;
	position: relative;
}

#banner h3 {
	background: rgba(0,0,0, .2);
	color: white;
	padding: 20px 35px 20px 15px;
	width: 460px;
	position: absolute;
	bottom: 0;
	margin-bottom: 0;
}

Heading 3 dibuat absolute dengan posisi relative terhadap banner. Dengan cara ini, secara manual kita bisa menggeser Heading 3 agar berada tetap di bagian bawah dengan memberinya bottom: 0.

Langkah 10

Perbaiki tampilan tombol di isi artikel dengan kode berikut.

/*Post*/

.button a {
	font-size: 11px;
	text-transform: uppercase;
	color: #dadada;
	background-color: #2a2a2a;
	padding: 5px;
	text-decoration: none
}

.button a:hover {
	background-color: black;
}

Langkah 11

Perbaiki kutipan dengan memberinya kode di bawah.

/*Blockquote*/

blockquote {
	background: url(../img/quote.png) top left no-repeat;
	padding-left: 35px;
	margin-top: 30px;
}

blockquote, blockquote p {
	font-size: 16px;
	font-style: italic;
	color: #4c4c4c;
}

blockquote a {
	color: black;
	text-decoration: none;
}

blockquote a:hover {
	text-decoration: underline;
}

#nama {
	font-weight: bold;
}

#status {
	font-size: 14px;
}

#nama, #status {
	font-style: normal;
}

Tanda kutip raksasa di sisi kiri atas kutipan berupa latar dengan bantuan kode background.

Langkah 13

Langkah terakhir adalah pengaturan teks dan link di footer. Garis di atas footer ditambahkan dengan memberi border pada paragraf.

/*Footer*/

footer p {
	font-family: 'QuicksandBook', Arial, Helvetica, sans-serif;
	font-size: 12px;
	border-top: #969696 1px solid;
	margin: 40px 0;
}

footer a {
	text-decoration: none;
	color: black;
}

footer a:hover {
	text-decoration: underline;
}

[hr]

Hasil Akhir

Hasil tutorial ini sangat sederhana namun jadi awal pembelajaran yang berguna bagi Anda yang sangat awam dengan desain web. Saya juga sangat menyarankan Anda untuk mengikuti tutorial asli dari Jeffrey Way di 30 Days to Learn HTML & CSS.

Di bawah adalah hasil akhir tutorial yang kita peroleh.

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2012/06/tutorial-desain-web-sederhana-psd-html-3/final.zip”%5DDownload File HTML dan CSS[/ilink]

Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

Di tutorial sebelumnya, kita telah membuat file PSD sederhana dengan Framework 960gs. Di tutorial ini, kita akan belajar teknik slicing, markup dengan HTML 5, dan mengatur penempatan setiap elemen dengan Framework 960gs. Pastikan Anda telah menguasai dua artikel sebelumnya tentang 960gs yaitu Panduan Mudah Desain Web dengan 960gs –Bagian 1 dan Bagian 2.

[hr]

Preview

Berikut adalah tahapan yang akan kita peroleh di tutorial ini.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop, Teks Editor
  • Teknik yang Dipelajari: Grid 960, Proses Slicing Desain Web
  • Lama Pengerjaan: 20 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, pastikan Anda memiliki resource berikut:

[hr]

Tutorial

Langkah Awal

Siapkan file dengan nama index.html dan folder dengan nama css untuk file css dan img untuk gambar. Di dalam folder css, buat file kosong dengan nama style.css. Ambil file reset.css, type.css, dan 12_col_960.css dari paket Framework 960gs.

Langkah 1: Slicing

Buka file PSD. Klik ikon mata di depan layer Background untuk menyembunyikannya. Seleksi logo dengan tool Marquee. Tekan Ctrl + Shift + C untuk menyimpannya ke Clipboard.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 2

Buat file baru (Ctrl + N) dengan ukuran sesuai Clipboard. Paste gambar (Ctrl + V).

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 3

Sembunyikan layer Background.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 4

Tekan Ctrl + shift + Alt + S untuk menyimpan ke dalam format Web. Simpan dengan format file PNG-24 dan pastikan Transparency aktif.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 5

Ulangi proses ini pada elemen gambar yang lain. Jika gambar itu memerlukan transparansi, gunakan format file PNG-24. Jika tidak, gunakan JPEG karena ukurannya jauh lebih kecil.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Di akhir proses slicing, kita akan memperoleh file gambar berikut.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 6: Mark Up HTML 5

Berikut adalah outline layout HTML yang kita harapkan. Kita bisa membayangkan ouline HTML 5 sebagai daftar isi sebuah buku. Anda bisa menemukan lebih banyak informasi tentang algoritma outline HTML 5 di Smashing Magazine.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Untuk mempermudah, lihat gambar di bawah. Logo dan navigasi kita simpan bersama dalam tag header atau cover buku. Kedua gambar kita simpan dalam sebuah section atau bab buku. Kedua post blog kita simpan sebagai section atau bab terpisah. Kutipan adalah informasi yang berkaitan dengan halaman sehingga kita simpan sebagai aside atau sidebar. Terakhir adalah footer.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Di dalam header, navigasi kita simpan dalam tag khusus nav. Gambar besar bisa kita tampilkan sebagai berita terpisah sehingga kita definisikan sebagai sebuah article yaitu artikel di dalam bab. Logika yang sama berlaku untuk kedua artikel blog.

Teks banner kita anggap cukup penting dan kita format sebagai heading 3. Judul artikel blog dan tagline-nya kita anggap lebih penting dengan menyimpannya sebagai heading 2 dan 4.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 7

Berikut adalah markup HTML yang kita butuhkan. Lihat hasilnya di sini.





Halaman Web Sederhana dengan Grid 960








what we offer

perfection and creativity

Sed at suscipit turpis. Ut in blandit nibh. Praesent et est ac felis blandit ornare. Ut sagittis justo ut ante convallis egestas iaculis risus egestas. Sed eu mauris id ipsum elementum accumsan sit amet eu tellus. Aenean at lacus at lacus ullamcorper volutpat. Curabitur imperdiet velit in sapien consequat luctus. Donec est elit, tincidunt sed tincidunt sed, consectetur at purus. Nam placerat vehicula accumsan.

Nam quis congue tellus. Nullam dapibus lacus sed metus eleifend mollis. Donec rutrum hendrerit quam, ut porttitor est malesuada sed. Aliquam erat volutpat. Morbi non enim sem, eget ullamcorper ipsum. Duis ut erat nec metus eleifend rutrum. Integer quis egestas nibh.

we can do

a very quick photo shoot

Sed et ante eget lorem semper iaculis molestie a lorem. Duis nulla velit, accumsan fringilla dapibus faucibus, viverra sed mauris. Morbi eu magna felis. Donec eget risus diam, sed porttitor neque.

Aenean vel dui turpis, a sagittis lectus. Morbi odio nisi, gravida dictum venenatis non, tempor eu risus. Ut rhoncus porta dui at euismod. Nam quis congue tellus. Nullam dapibus lacus sed metus eleifend mollis. Donec rutrum hendrerit quam, ut porttitor est malesuada sed. Aliquam erat volutpat.

Morbi non enim sem, eget ullamcorper ipsum. Duis ut erat nec metus eleifend rutrum. Integer quis egestas nibh.

Perhatikan bahwa di bagian atas terdapat kode yang mengambil file reset.css, text.css, dan 12_col_960.css dari paket Framework 960gs. Dalam projek sesungguhnya, sangat disarankan untuk menyatukan ketiga file css untuk mengurangi http request –saya tidak tahu apa itu tapi intinya adalah situs akan load lebih cepat.




Langkah 7

Buka HTML 5 Outliner dan periksa kode di atas dengan cara copy-kan langsung atau berikan link halaman demonya.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Ternyata artikel kita terbagi dua. Ini terjadi karena secara otomatis heading akan menghasilkan section atau bab baru. Agar kedua heading ini menyatu kita simpan keduanya dalam tag hgroup.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 8

Simpan h2 dan h4 di artikel blog ke dalam hgroup. Hasilnya bisa dilihat di sini.

what we offer

perfection and creativity

Langkah 9

Setelah diperiksa di HTML 5 Outliner, sekarang keduanya akan menyatu.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 9: Grid

Sekarang kita mulai menggunakan grid 960. Di bawah tampilan desain saat ini.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 10

Untuk menggunakan framework 960gs, kita harus menyimpan semuanya dalam class bernama container_12.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 11

Edit markup HTML. Simpan seluruh elemen di dalam div dengan nama class container_12.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Dan seperti inilah hasilnya.

Langkah 12: Menggunakan Grid Overlay

Kita perlu tool untuk membantu kita melihat grid situs. Buka Grid Overlay Bookmark. Geser tombol Grid Overlay ke baris Bookmark browser.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 13: Menghitung Grid

Logo situs ini berada dalam 3 kolom.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 14

Navigasi bisa kita simpan dalam sisa 9 kolom yang tersedia.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 15

Berikutnya, kita cukup menambahkan class grid_3 dan grid_9 pada logo dan navigasi.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 16

Klik tombol bookmark Grid Overlay untuk melihat posisi elemen pada grid.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 17

Lanjutkan proses ini pada elemen-elemen lainnya.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Hasil Akhir

Inilah hasil yang kita peroleh saat ini. Masih kasar karena kita sama sekali belum mengatur style halaman. Walaupun begitu, kita sudah cukup berhasil dengan penempatannya. Di tutorial berikutnya, kita akan belajar memperbaiki tampilan setiap elemen dengan langsung mengedit file CSS.

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2012/06/tutorial-desain-web-sederhana-psd-html-2/demo.zip”%5DDownload File Demo[/ilink]

Mendesain Website Sederhana dari PSD hingga HTML –Bag 1

Di tutorial desain web untuk pemula ini, kita akan belajar mendesain halaman web sederhana di Photoshop. Tutorial ini adalah kreasi ulang tutorial Jeffrey Way di 30 Days to Learn HTML & CSS.
[hr]

Preview

Di bawah adalah desain sederhana yang akan kita buat.

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Installasi Font, Clipping Mask, Penggunaan Grid 960
  • Lama Pengerjaan: 20 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

[hr]

Intro

Beberapa hari ini saya mulai mencoba untuk belajar desain web. Sebagai pelajar otodidak, saya beruntung bisa belajar secara gratis dari salah satu tutor desain web terbaik di dunia, Jeffrey Way. Berdasarkan pengalaman saya, proses belajar biasanya lebih mudah dengan mengajarkannya kembali. Oleh karena itu, saya akan mengulang kembali projek yang dibahas Jeffrey di situs ini secara tertulis. Saya sangat menyarankan Anda untuk melihat video tutorial karena penjelasannya sangat lengkap.

Tutorial ini berdasarkan pada projek terakhir video tutorial 30 Days to Learn HTML & CSS. Dalam tutorial aslinya, Jeffrey menggunakan file PSD dari Collis Ta’eed, pendiri Envato. Tapi, untuk mempermudah saya akan menggantinya dengan file sendiri dengan layout yang hampir sama persis. Perbedaan yang cukup mencolok adalah desain Collis menggunakan framework 24 kolom sementara saya menyederhanakannya menjadi 12 kolom. Saya juga akan menggunakan font custom dalam desain ini, yaitu Quicksand Book.

[hr]

Tutorial

Langkah 1

Ambil template file PSD 960 12 kolom dari 960.gs. Klik ikon mata pada kolom merah untuk menyembunyikannya.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 2

Tambahkan teks untuk logo situs. Untuk mempercantiknya saya gunakan kombinasi font Bold dan Regular. Di sebelah teks, saya tambahkan garis 1 px.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 3: Installasi Font Quicksand

Kita akan menggunakan font custom. Ambil font gratis Quicksand.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 4

Buka Fonts di Control Panel.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 5

Geser file font ke dalam folder Fonts utuk menginstallnya.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 6

Tambahkan menu di pojok kanan atas. Beri jarak 20 px untuk setiap menu.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Untuk mempermudah proses pengkodean, saya biasanya menuliskan langsung nilai-nilai ini dengan tool brush di layer baru.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 7: Banner

Buat dua shape kotak dengan ukuran delapan dan empat kolom. Pastikan posisinya mengikuti bentuk kolom.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Agar hasilnya tidak buram, pastikan untuk mengaktifkan fitur Snap pada tool Rectangle.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 8

Zoom lebih dekat ke setiap sisi dan pastikan semua sisi tepat pada grid pixel.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 9

Ambil foto dan simpan di atas salah satu kotak.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 10

Pastikan layer gambar tepat berada di atas kotak. Tekan Ctrl + Alt + G untuk mengubahnya menjadi Clipping Mask. Gambar akan masuk ke dalam kotak. Anda masih bisa mentransformasi dan menggeser gambar jika perlu. Anda bisa menyatukan kedua layer dengan cara memilih keduanya lalu klik kanan dan pilih Merge Layers.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 11

Ulangi pada gambar lainnya.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 12

Tambahkan kotak hitam dengan Opacity 30%. Di atasnya, dengan tool Type klik dan geser untuk menambahkan kotak teks.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 13

Tambahkan teks putih dengan font Quicksand.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 14: Artikel

Tambahkan heading di bawah gambar dengan teks Quicksand dan warna seperti berikut.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 15

Tambahkan paragraf panjang dengan tipe font Arial atau Helvetica.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 16

Anda bisa menambahkan keterangan pada setiap detail untuk mempermudah perhitungan dalam proses pengkodean.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 17

Di bawah artiikel tambahkan tombol sederhana berupa teks "READ MORE" di atas kotak. Buat dua kotak dengan warna berbeda untuk kondisi hover dan normal.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 18

Pastikan untuk memberi jarak yang sama pada sekeliling teks.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 19

Gandakan artikel dengan cara klik dan geser sambil menahan alt.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 20: Testimonial

Tambahkan kutipan dengan tipe font miring dan ukuran lebih besar dari teks paragraf standar. Di pojok kiri atas tambahkan karakter kutip yang cukup besar.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 21: Footer

Tambahkan garis dan sedikit paragraf pendek untuk area footer.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1
Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

[hr]

Hasil Akhir

Proses pembuatan desain ini sangat sederhana. Saya yakin Anda tidak akan kesulitan. Selanjutnya, kita akan lanjutkan mengubah desain ini ke HTML/CSS.

[hr]

Bagian 2

Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2012/05/tutorial-desain-web-sederhana-psd-html-1/simple-photoshoot.zip”%5DDownload File PSD[/ilink]

Menggambar Grafik Garis di Photoshop CS6

Photoshop CS6 memiliki beberapa fitur baru yang banyak berguna bagi para desainer interface. Salah satu yang paling menonjol adalah vektor shape yang kini benar-benar dalam format vektor seperti di Illustrator. Dalam tutorial ini, kita akan belajar menggunakan beberapa fitur baru di CS6 untuk menggambar sebuah grafik garis.

[box type=”info”]Dari informasi yang saya peroleh, Photoshop CS6 Beta masih tersedia gratis hingga akhir Mei.[/box]

[hr]

Preview

Di bawah adalah gambar grafik garis yang akan kita buat di Photoshop.

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Menengah
  • Software yang Digunakan: Adobe Photoshop CS6
  • Teknik yang Dipelajari: Vector Shape, Pharagraph Styles
  • Lama Pengerjaan: 45 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

[hr]

Tutorial

Langkah 1: Menyiapkan Kanvas

Buat file baru dengan ukuran 700 px × 600 px.

Menggambar Grafik Garis di Photoshop CS6

Langkah 2: Background

Klik ikon lingkaran hitam dan putih untuk membuka Adjustment Layer baru. Pilih Solid Color.

Menggambar Grafik Garis di Photoshop CS6

Pilih warna abu-abu terang.

Menggambar Grafik Garis di Photoshop CS6

Langkah 3

Klik ganda layer dan tambahkan Pattern Overlay dengan pola pixel dari PSDfreemium.

Menggambar Grafik Garis di Photoshop CS6

Di bawah adalah tampilan latar dalam perbesaran 100%.

Menggambar Grafik Garis di Photoshop CS6

Langkah 4

Buka panel Preferences (Ctrl + K). Pastikan terpilih Snap Vector Tools di bagian awal kotak dialog. Fitur ini akan memungkinkan semua tool untuk tepat pada pixel, sehingga tidak akan ada setengah pixel dan memberikan hasil yang sangat akurat.

Menggambar Grafik Garis di Photoshop CS6

Langkah 5: Latar Grafik

Buat shape rounded rectangle. Di baris pilihan pilih Fill: putih dan Stroke: #c3c3c3 dengan Size 1 pt. Perhatikan bahwa secara otomatis, bentuk vektor shape akan langsung menempel pada pixel sehingga sisinya tidak buram.

Menggambar Grafik Garis di Photoshop CS6

Aktifkan Outer Glow.

Menggambar Grafik Garis di Photoshop CS6
Menggambar Grafik Garis di Photoshop CS6

Langkah 6: Judul

Tambahkan judul di bagian atas latar.

Menggambar Grafik Garis di Photoshop CS6

Langkah 7: Menggambar Sumbu Grafik

Aktifkan tool Line dan pilih Weight 2 px untuk membuat garis vertikal selebar 2 px. Di baris pilihan, pilih Fill: #d1d1d1 dengan Stroke: None.

Menggambar Grafik Garis di Photoshop CS6

Langkah 8

Tahan Shift. Lakukan hal yang sama, kali ini secara horizontal. Sekali lagi, Anda bisa melihat bahwa garis tetap pada pixel grid, tidak ada sisi yang buram.

Menggambar Grafik Garis di Photoshop CS6

Langkah 9: Menggambar Grid

Buat garis vertikal 1 px dengan jarak 40 px dari sumbu y.

Menggambar Grafik Garis di Photoshop CS6

Langkah 10

Seleksi garis dengan tool Path Selection. Tekan Ctrl + Alt + T untuk menduplikasi sekaligus mentransformasi garis. Geser 40 px ke kanan dengan cara tekan Shift + panah kanan empat kali.

Menggambar Grafik Garis di Photoshop CS6

Langkah 11

Ulangi proses duplikasi dan transformasi dengan menekan Ctrl + Shift + Alt + T. Lakukan hingga seluruh area grafik dipenuhi garis vertikal.

Menggambar Grafik Garis di Photoshop CS6

Langkah 12

Ulangi proses yang sama, kali ini horizontal dengan jarak 20 px dari sumbu x.

Menggambar Grafik Garis di Photoshop CS6

Langkah 13

Pilih Stroke #dadada dan aktifkan Dashed Line.

Menggambar Grafik Garis di Photoshop CS6

Langkah 14

Duplikasi dan transformasi garis hingga diperoleh grid seperti di bawah.

Menggambar Grafik Garis di Photoshop CS6

Langkah 15

Buka panel Paragraph Styles dan tambahkan style baru.

Menggambar Grafik Garis di Photoshop CS6

Langkah 16

Klik ganda style untuk mengeditnya.

Menggambar Grafik Garis di Photoshop CS6
Menggambar Grafik Garis di Photoshop CS6

Langkah 17

Buat teks untuk penanda bulan di sumbu x. Pastikan teks masih terpilih lalu klik style untuk mengaplikasikan style tersebut.

Menggambar Grafik Garis di Photoshop CS6

Langkah 18

Buat juga Paragraph Style untuk angka di sumbu y.

Menggambar Grafik Garis di Photoshop CS6

Langkah 19

Jadi, apa fungsi style? Jika berpengalaman dengan software publishing semacam InDesign, Anda akan tahu bahwa style berperan penting untuk menghasilkan setting tipografi yang konsisten. Dengan style, kita cukup mengubah style untuk mengubah semua teks yang menggunakan style tersebut.

Dalam contoh di bawah, font dalam Paragraph Style bulan diubah ke Bebas dan secara otomatis semua teks bulan berubah.

Menggambar Grafik Garis di Photoshop CS6

[box type=”note”]Perlu diketahui bahwa proses editing style –baik paragraf dan karakter– di CS6 beta sangat lambat. Kadang Anda perlu menunggu sampai beberapa menit dan selama itu Photoshop terlihat macet.[/box]

Langkah 20: Mulai Menggambar Garis

Aktifkan tool Line dengan Weight 3 px. Ubah warna fill dan kosongkan Stroke. Klik dan geser untuk menambah garis baru.

Menggambar Grafik Garis di Photoshop CS6

Langkah 21

Shift-drag untuk menambah segmen garis baru.

Menggambar Grafik Garis di Photoshop CS6

Langkah 22

Buat shape lingkaran baru dengan warna Stroke sama seperti garis dan Fill sama seperti warna latar grafik.

Menggambar Grafik Garis di Photoshop CS6

Tambahkan Stroke putih dengan posisi di luar.

Menggambar Grafik Garis di Photoshop CS6

Di bawah adalah tampilan dalam 100%.

Menggambar Grafik Garis di Photoshop CS6

Langkah 23

Alt-drag untuk menduplikasi path.

Menggambar Grafik Garis di Photoshop CS6
Menggambar Grafik Garis di Photoshop CS6

Langkah 24

Terus duplikasi lingkaran hingga diperoleh cukup titik di setiap segmen garis.

Menggambar Grafik Garis di Photoshop CS6

Langkah 25

Buat lebih banyak segmen garis dengan warna berbeda. Di bagian atas buat legenda grafik berupa garis sederhana diikuti keterangan namanya.

Menggambar Grafik Garis di Photoshop CS6

Langkah 26: Navigasi

Buat shape persegi di belakang latar grafik.

Menggambar Grafik Garis di Photoshop CS6

Langkah 26

Aktifkan tool Polygon dengan Sides: 3. Buat sebuah segitiga di atas kotak. Buat lagi navigasi yang sama untuk sisi sebaliknya.

Menggambar Grafik Garis di Photoshop CS6

Hasil Akhir

Di tutorial ini, Anda baru saja mempelajari fitur baru Vektor Shape dan Paragraph Styles di Photoshop CS6. Tentu saja, masih ada fitur baru lainnya yang perlu dipelajari.

Di bawah adalah hasil akhir tutorial yang kita peroleh.

[hr]

Download Link

[ilink style=”download” url=”http://psdfreemium.com/line-graph-psd-cs6/”%5DDownload File PSD[/ilink]