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.

Iklan

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.

final.jpg

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 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.

Preview

Berikut adalah hasil akhir yang diperoleh.

final.jpg

Sebagian Langkah dalam Tutorial

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

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

desain-blog-elegan-di-ps-cs6-8desain-blog-elegan-di-ps-cs6-9

Link Tutorial

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.

Preview

Berikut adalah tahapan yang akan kita peroleh di tutorial ini.

mendesain-halaman-web-sederhana-psd-html-bag-2-30.jpg

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

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, pastikan Anda memiliki resource berikut:

Lanjutkan membaca Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

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.

Preview

Di bawah adalah desain sederhana yang akan kita buat.

final-large

Detail Tutorial

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

Lanjutkan membaca Mendesain Website Sederhana dari PSD hingga HTML –Bag 1

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. Dari informasi yang saya peroleh, Photoshop CS6 Beta masih tersedia gratis hingga akhir Mei.

Preview

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

final-large.jpg

Detail Tutorial

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

Resource yang Dibutuhkan

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

Lanjutkan membaca Menggambar Grafik Garis di Photoshop CS6

Mendesain Halaman Dashboard Administrator dengan Photoshop CS6

Photoshop CS6 memiliki banyak fitur baru yang sangat berguna dalam proses desain interface. Di sini, saya menunjukkan cara baru membuat halaman dashboard administrator lengkap dengan grafiknya hanya menggunakan Photoshop CS6. Di versi sebelumnya, ini sulit sekali dilakukan tanpa melibatkan Illustrator. Tutorial ini ditulis ekslusif untuk Psdtuts+.

Preview

Berikut adalah hasil akhir yang diperoleh.

final-large.jpg

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam desain interface. Di bawah adalah beberapa langkah dalam tutorial.

Link Tutorial

Mendesain Interface Menu Modern

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku “Panduan Mudah Desain Web Professional”
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

Di tutorial ini, saya akan menjelaskan proses pembuatan menu yang digunakan oleh Syarip Yunus dalam theme tumblr premiumnya, Timeline. Saya sengaja memilih desain ini karena tampilannya yang unik dan mirip dengan desain interface sebuah aplikasi.

Preview

Berikut adalah hasil yang akan kita peroleh.

final-large.jpg

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Penggunaan Tool Vektor, Layer Mask, Layer Style
  • Lama Pengerjaan: 30 menit

Lanjutkan membaca Mendesain Interface Menu Modern

Menggambar Garis 1 px – Pixel Perfect

Di tutorial singkat ini, saya akan berbagi tips menggambar garis 1 px dengan hasil yang sangat akurat (pixel perfect). Tutorial ini mengambil contoh desain dari Syarip Yunus.

Preview

Saya memperoleh ide untuk membuat tutorial ini ketika mencoba menduplikasi interface menu dari Syarip Yunus. Anda bisa melihat bahwa garis 1 px dalam desainnya sangat akurat, tanpa ada sisi buram sama sekali.

membuat-garis-1px-pixel-perfect-01.jpg

Timeline Tumblr Theme

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Pengaturan Grid, Penggunaan Tool Rectangle, Penggunaan Tool Line
  • Lama Pengerjaan: 10 menit

Lanjutkan membaca Menggambar Garis 1 px – Pixel Perfect